diff --git a/package.json b/package.json index 482d192..1385eeb 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", + "react-select": "^5.1.0", "sass": "^1.43.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" diff --git a/src/App.tsx b/src/App.tsx index 3d015ab..300a94e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,8 @@ import "./global.scss"; import Search from "./components/Search"; import PopularSearch from "./components/PopularSearch"; import Input from "./components/Input"; -import Country from "./components/Country"; +import Country from "./components/SelectSearch"; +import SelectCheckbox from "./components/SelectCheckbox"; function App() { return ( @@ -19,7 +20,9 @@ function App() { message={"اشتباه است."} />
- + +
+ ); } diff --git a/src/components/Checkbox/index.scss b/src/components/Checkbox/index.scss new file mode 100644 index 0000000..f4dae1f --- /dev/null +++ b/src/components/Checkbox/index.scss @@ -0,0 +1,98 @@ +.checkbox-symbol { + position: absolute; + width: 0; + height: 0; + pointer-events: none; + user-select: none; +} + +.checkbox-container { + box-sizing: border-box; + background: #ffffff; + color: #222; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-flow: row wrap; +} + +.checkbox-container * { + box-sizing: border-box; +} + +.checkbox-input { + position: absolute; + visibility: hidden; +} + +.checkbox { + user-select: none; + cursor: pointer; + padding: 6px 8px; + border-radius: 6px; + overflow: hidden; + transition: all 0.3s ease; + display: flex; +} + +.checkbox:not(:last-child) { + margin-right: 6px; +} + +.checkbox:hover { + background: inherit; +} + +.checkbox span { + vertical-align: middle; + transform: translate3d(0, 0, 0); +} + +.checkbox span:first-child { + position: relative; + flex: 0 0 18px; + width: 18px; + height: 18px; + border-radius: 4px; + transform: scale(1); + border: 1px solid #cccfdb; + transition: all 0.3s ease; +} + +.checkbox span:first-child svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: #fff; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transform: translate3d(0, 0, 0); +} + +.checkbox span:last-child { + padding-left: 8px; + line-height: 18px; +} + +.checkbox:hover span:first-child { + border-color: #0077ff; +} + +.checkbox-input:checked + .checkbox span:first-child { + background: #0077ff; + border-color: #0077ff; + animation: zoom-in-out 0.3s ease; +} + +.checkbox-input:checked + .checkbox span:first-child svg { + stroke-dashoffset: 0; +} + +@keyframes zoom-in-out { + 50% { + transform: scale(0.9); + } +} \ No newline at end of file diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx new file mode 100644 index 0000000..eb5b29a --- /dev/null +++ b/src/components/Checkbox/index.tsx @@ -0,0 +1,29 @@ +import React from "react"; + +export default function Checkbox(props : any) { + return ( +
+ + + + + + +
+ + +
+
+ ); +} diff --git a/src/components/Country/index.tsx b/src/components/Country/index.tsx deleted file mode 100644 index 703822e..0000000 --- a/src/components/Country/index.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { useState } from "react"; -import _ from "lodash"; - -import iran from "./iran.png"; -import iraq from "./iraq.png"; -import spain from "./spain.png"; -import uk from "./united-kingdom.png"; -import arrow from "./arrow.png"; - -import Search from "../Search"; - -interface Types { - lang?: string; - theme?: string; - countries?: Array; - label?: string; -} - -interface Value { - icon: any; - name: string; -} - -const inputStatusHandler = ( - value: string, - focus: boolean, - status: boolean, - primary: string, - success: string, - danger: string -) => { - if (!focus) { - return ""; - } else { - if (!value) { - return primary; - } else { - if (status) { - return success; - } else { - return danger; - } - } - } -}; - -const langDetector = (lang: string, option1: any, option2: any) => { - return lang === "fa" ? option1 : option2; -}; - -export default function Country(props: Types) { - const [value, setValue] = useState(undefined); - const [countriesToggle, setCountriesToggle] = useState(false); - const { lang, theme, countries, label } = props; - - const onChange = (val: Value) => { - setValue(val); - }; - - return ( -
-
setCountriesToggle(() => true)} - onClickCapture={() => setCountriesToggle(() => false)} - > - - {value && ( -
- {value.name} - {value.name} -
- )} - - {langDetector(lang -
- {countriesToggle && ( -
- -
    setCountriesToggle(false)}> - {countries?.map((item: any, i: any) => ( - <> -
  • setValue(() => item as Value)} - > - {item?.name} -
  • - {i !== countries?.length - 1 &&
    } - - ))} -
-
- )} -
- ); -} - -Country.defaultProps = { - lang: "fa", - theme: "light", - label: "کشور خود را انتخاب کنید", - countries: [ - { name: "IRAN", icon: iran }, - { name: "IRAQ", icon: iraq }, - { name: "SPAIN", icon: spain }, - { name: "UK", icon: uk }, - ], -}; diff --git a/src/components/Country/arrow.png b/src/components/SelectCheckbox/arrow.png similarity index 100% rename from src/components/Country/arrow.png rename to src/components/SelectCheckbox/arrow.png diff --git a/src/components/SelectCheckbox/icon.png b/src/components/SelectCheckbox/icon.png new file mode 100644 index 0000000..81d586c Binary files /dev/null and b/src/components/SelectCheckbox/icon.png differ diff --git a/src/components/SelectCheckbox/index.scss b/src/components/SelectCheckbox/index.scss new file mode 100644 index 0000000..3761a69 --- /dev/null +++ b/src/components/SelectCheckbox/index.scss @@ -0,0 +1,103 @@ +$primary: #06bace; +$gray: #dbdbdb; +$danger: #e00a0a; +$success: #23c933; + +.select-search { + display: flex; + flex-direction: column; + position: relative; + .search { + display: flex; + flex-direction: column; + position: relative; + img{ + cursor: pointer; + } + &__icon { + width: 27px; + position: absolute; + top: 50%; + transform: translateY(-50%); + &Fa { + left: 10px; + } + &En { + right: 10px; + } + } + + &__x { + width: 12px; + position: absolute; + top: 50%; + transform: translateY(-50%); + opacity: 0; + &Fa { + right: 10px; + } + &En { + left: 10px; + } + &Active{ + opacity: 1; + } + } + + input { + padding: 15px 30px 15px 30px; + font-size: 14px; + border: 1.7px solid $gray; + border-radius: 5px; + background-color: inherit; + &::placeholder { + color: $gray; + } + &:focus { + border-color: $primary; + outline: 0px; + color: #246e8a; + &::placeholder { + color: #246e8a; + } + } + } + } + &__list{ + position: relative; + bottom: -8px; + left: 0px; + display: flex; + flex-direction: column; + padding: 0px 20px; + border: 1.7px solid $gray; + border-radius: 5px; + ul{ + list-style: none; + padding: 0px; + hr{ + border: 1px solid $gray; + opacity: 0.3 !important; + } + li{ + padding: 5px 0px; + color: $gray; + display: flex; + align-items: center; + + } + } + } + + +} + +.en { + direction: ltr; + text-align: left; +} + +.fa { + direction: rtl; + text-align: right; +} diff --git a/src/components/SelectCheckbox/index.tsx b/src/components/SelectCheckbox/index.tsx new file mode 100644 index 0000000..da6e92e --- /dev/null +++ b/src/components/SelectCheckbox/index.tsx @@ -0,0 +1,152 @@ +import React, { useState } from "react"; +import _ from "lodash"; +import Checkbox from "../Checkbox"; + +import xIcon from "./x.png"; + +interface Types { + lang?: string; + theme?: string; + list?: Array; + label?: string; +} + +interface Value { + icon: any; + name: string; +} + +// const inputStatusHandler = ( +// value: string, +// focus: boolean, +// status: boolean, +// primary: string, +// success: string, +// danger: string +// ) => { +// if (!focus) { +// return ""; +// } else { +// if (!value) { +// return primary; +// } else { +// if (status) { +// return success; +// } else { +// return danger; +// } +// } +// } +// }; + +const langDetector = (lang: string, option1: any, option2: any) => { + return lang === "fa" ? option1 : option2; +}; + +export default function SelectSearch(props: Types) { + const [selectedItem, setSelectedItem] = useState(""); + const [value, setValue] = useState(""); + + const [toggle, setToggle] = useState(false); + const { lang, theme, list, label } = props; + + const onChangeItem = (val: string) => { + setSelectedItem(val); + }; + + const onChangeText = (val: string) => { + setValue(val); + }; + + return ( +
+
+ onChangeText(e.target.value)} + onFocus={(e: any) => setToggle(true)} + placeholder={langDetector( + lang as string, + "تنظیمات", + "setting" + )} + /> + {/* {langDetector(lang */} + {langDetector(lang setValue("")} + /> +
+ {toggle && ( +
+
    + {list?.map((item: any, i: any) => ( + <> +
  • + + {item?.name} +
  • + {i !== list?.length - 1 &&
    } + + ))} +
+
+ )} +
+ ); +} + +SelectSearch.defaultProps = { + lang: "fa", + theme: "light", + label: "کشور خود را انتخاب کنید", + list: [ + { name: "وسایل آشپزخانه" }, + { name: "غریق نجات از تمام جهات" }, + { name: "قاشق و چنگال" }, + { name: "وسایل آشپزخانه"}, + ], +}; diff --git a/src/components/SelectCheckbox/x.png b/src/components/SelectCheckbox/x.png new file mode 100644 index 0000000..df19f25 Binary files /dev/null and b/src/components/SelectCheckbox/x.png differ diff --git a/src/components/SelectSearch/arrow.png b/src/components/SelectSearch/arrow.png new file mode 100644 index 0000000..4714949 Binary files /dev/null and b/src/components/SelectSearch/arrow.png differ diff --git a/src/components/SelectSearch/icon.png b/src/components/SelectSearch/icon.png new file mode 100644 index 0000000..81d586c Binary files /dev/null and b/src/components/SelectSearch/icon.png differ diff --git a/src/components/Country/index.scss b/src/components/SelectSearch/index.scss similarity index 52% rename from src/components/Country/index.scss rename to src/components/SelectSearch/index.scss index 45354cf..665f1df 100644 --- a/src/components/Country/index.scss +++ b/src/components/SelectSearch/index.scss @@ -3,63 +3,73 @@ $gray: #dbdbdb; $danger: #e00a0a; $success: #23c933; -.country { +.select-search { display: flex; flex-direction: column; position: relative; - &__box { + .search { display: flex; - justify-content: space-between; + flex-direction: column; position: relative; - padding: 10px 10px; - border: 1.7px solid $gray; - border-radius: 5px; - min-height: 28px; - &--value{ - display: flex; - align-items: center; - + img{ + cursor: pointer; } - label { - width : fit-content; + &__icon { + width: 27px; position: absolute; top: 50%; - font-size: 13px; transform: translateY(-50%); - color: $gray; - padding: 0px 5px; - } - &--labelFa{ - right: 15px; - } - &--labelEn{ - left: 15px; - } - &--labelFocus{ - top: -2px !important; - font-size: 10px !important; - background-color: white; + &Fa { + left: 10px; + } + &En { + right: 10px; + } } - &--arrow{ + + &__x { + width: 12px; position: absolute; top: 50%; transform: translateY(-50%); - &Fa{ + opacity: 0; + &Fa { + right: 10px; + } + &En { left: 10px; } - &En{ - right: 10px; + &Active{ + opacity: 1; } } - } + input { + padding: 15px 30px 15px 30px; + font-size: 14px; + border: 1.7px solid $gray; + border-radius: 5px; + background-color: inherit; + &::placeholder { + color: $gray; + } + &:focus { + border-color: $primary; + outline: 0px; + color: #246e8a; + &::placeholder { + color: #246e8a; + } + } + } + } &__list{ position: relative; bottom: -8px; left: 0px; display: flex; flex-direction: column; - padding: 10px 20px; + padding: 0px 20px; border: 1.7px solid $gray; border-radius: 5px; ul{ @@ -71,6 +81,9 @@ $success: #23c933; li{ padding: 5px 0px; color: $gray; + display: flex; + align-items: center; + } } } diff --git a/src/components/SelectSearch/index.tsx b/src/components/SelectSearch/index.tsx new file mode 100644 index 0000000..f73bc01 --- /dev/null +++ b/src/components/SelectSearch/index.tsx @@ -0,0 +1,162 @@ +import React, { useState } from "react"; +import _ from "lodash"; + +import iran from "./iran.png"; +import iraq from "./iraq.png"; +import spain from "./spain.png"; +import uk from "./united-kingdom.png"; +import arrow from "./arrow.png"; + +import searchIcon from "./icon.png"; +import xIcon from "./x.png"; + +interface Types { + lang?: string; + theme?: string; + countries?: Array; + label?: string; +} + +interface Value { + icon: any; + name: string; +} + +// const inputStatusHandler = ( +// value: string, +// focus: boolean, +// status: boolean, +// primary: string, +// success: string, +// danger: string +// ) => { +// if (!focus) { +// return ""; +// } else { +// if (!value) { +// return primary; +// } else { +// if (status) { +// return success; +// } else { +// return danger; +// } +// } +// } +// }; + +const langDetector = (lang: string, option1: any, option2: any) => { + return lang === "fa" ? option1 : option2; +}; + +export default function SelectSearch(props: Types) { + const [selectedItem, setSelectedItem] = useState(""); + const [value, setValue] = useState(""); + + const [toggle, setToggle] = useState(false); + const { lang, theme, countries, label } = props; + + const onChangeItem = (val: string) => { + setSelectedItem(val); + }; + + const onChangeText = (val: string) => { + setValue(val); + }; + + return ( +
+
+ onChangeText(e.target.value)} + onFocus={(e: any) => setToggle(true)} + onBlur={(e: any) => setTimeout(() => {setToggle(false)}, 300)} + value={selectedItem} + placeholder={langDetector( + lang as string, + "نام کالا را جستجو کنید", + "search product name" + )} + /> + {langDetector(lang + {langDetector(lang setValue("")} + /> +
+ {toggle && ( +
+
    setToggle(false)}> + {countries?.map((item: any, i: any) => ( + <> +
  • setSelectedItem(item.name)} + > + + + {item?.name} +
  • + {i !== countries?.length - 1 &&
    } + + ))} +
+
+ )} +
+ ); +} + +SelectSearch.defaultProps = { + lang: "fa", + theme: "light", + label: "کشور خود را انتخاب کنید", + countries: [ + { name: "IRAN", icon: iran }, + { name: "IRAQ", icon: iraq }, + { name: "SPAIN", icon: spain }, + { name: "UK", icon: uk }, + ], +}; diff --git a/src/components/Country/iran.png b/src/components/SelectSearch/iran.png similarity index 100% rename from src/components/Country/iran.png rename to src/components/SelectSearch/iran.png diff --git a/src/components/Country/iraq.png b/src/components/SelectSearch/iraq.png similarity index 100% rename from src/components/Country/iraq.png rename to src/components/SelectSearch/iraq.png diff --git a/src/components/Country/spain.png b/src/components/SelectSearch/spain.png similarity index 100% rename from src/components/Country/spain.png rename to src/components/SelectSearch/spain.png diff --git a/src/components/Country/united-kingdom.png b/src/components/SelectSearch/united-kingdom.png similarity index 100% rename from src/components/Country/united-kingdom.png rename to src/components/SelectSearch/united-kingdom.png diff --git a/src/components/SelectSearch/x.png b/src/components/SelectSearch/x.png new file mode 100644 index 0000000..df19f25 Binary files /dev/null and b/src/components/SelectSearch/x.png differ diff --git a/src/global.scss b/src/global.scss index 0f9e58e..e77e30b 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,7 +1,9 @@ @import './components/Search/index.scss'; @import './components/PopularSearch/index.scss'; @import './components/Input/index.scss'; -@import './components/Country/index.scss'; +@import './components/SelectSearch/index.scss'; +@import './components/Checkbox/index.scss'; +@import './components/SelectCheckbox/index.scss'; .app{ padding: 50px 20px; diff --git a/yarn.lock b/yarn.lock index e057573..a6aeb82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1098,6 +1098,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.7": + version "7.16.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b" + integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" @@ -1161,6 +1168,71 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@emotion/cache@^11.4.0", "@emotion/cache@^11.5.0": + version "11.5.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62" + integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.0.3" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "^4.0.10" + +"@emotion/hash@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" + integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + +"@emotion/memoize@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== + +"@emotion/react@^11.1.1": + version "11.5.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd" + integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/cache" "^11.5.0" + "@emotion/serialize" "^1.0.2" + "@emotion/sheet" "^1.0.3" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965" + integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f" + integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ== + +"@emotion/unitless@^0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/utils@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" + integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== + +"@emotion/weak-memoize@^0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@eslint/eslintrc@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318" @@ -1823,6 +1895,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.0": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" + integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^17.0.0": version "17.0.33" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.33.tgz#e01ae3de7613dac1094569880bb3792732203ad5" @@ -4188,6 +4267,14 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -5516,6 +5603,13 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -7145,6 +7239,11 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= +memoize-one@^5.0.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -8877,7 +8976,7 @@ prompts@2.4.0, prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.7.2: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -9097,7 +9196,7 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-is@^16.8.1: +react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -9178,6 +9277,29 @@ react-scripts@4.0.3: optionalDependencies: fsevents "^2.1.3" +react-select@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.1.0.tgz#ac384c8e25ba6f03126026192b2bdad0f53fbf50" + integrity sha512-SkEBD1AYsSXrIdNj5HBt7+Ehe+jxdiB448J0atJqR6lE3l/GcFlRf4JYB3NlHe/02jrW4AnIQLo1t0IqWrxXOw== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.1.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^5.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + +react-transition-group@^4.3.0: + version "4.4.2" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" + integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -10386,6 +10508,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylis@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240" + integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"