Merge branch 'develop' into feature/fix-types

Author: shiftpsh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",
@@ -15,6 +15,7 @@
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "scripts": {
     "build": "rimraf --no-glob ./dist && microbundle --no-compress --format modern,cjs --jsx React.createElement",
     "start": "rimraf --no-glob ./dist && microbundle watch --no-compress --format modern,cjs --jsx React.createElement",
@@ -34,23 +35,22 @@
     "@floating-ui/react-dom-interactions": "^0.13.3",
     "framer-motion": "6.x",
     "react": ">=17",
-    "react-dom": ">=17",
-    "react-icons": "^4.8.0"
+    "react-dom": ">=17"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.17.9",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@floating-ui/react-dom-interactions": "^0.13.3",
+    "@tabler/icons-react": "^2.11.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^25.1.4",
     "@types/node": "^12.12.38",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
-    "@types/react-icons": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "babel-eslint": "^10.0.3",
@@ -80,7 +80,6 @@
     "prettier": "^2.6.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-icons": "^4.8.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.6.4"
   }

src/components/Select.tsx

@@ -17,6 +17,7 @@ import {
   useRole,
   useTypeahead
 } from '@floating-ui/react-dom-interactions'
+import { IconChevronDown } from '@tabler/icons-react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { ellipsis } from 'polished'
 import React, {
@@ -28,7 +29,6 @@ import React, {
   useRef,
   useState
 } from 'react'
-import { IoChevronDown } from 'react-icons/io5'
 import { PP, PR } from '../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../utils/ref'
 import { cssClickable, cssDisablable } from '../utils/styles'
@@ -107,7 +107,6 @@ export const Select = forwardRefWithGenerics(
       value,
       onChange,
       render = (e) => (typeof e === 'string' ? e : e.value),
-      as,
       ListItemProps,
       ...rest
     } = props
@@ -125,9 +124,13 @@ export const Select = forwardRefWithGenerics(
     const [controlledScrolling, setControlledScrolling] = useState(false)
     const [touch, setTouch] = useState(false)
 
-    useEffect(() => {
-      if (onChange) onChange(items[selectedIndex])
-    }, [selectedIndex])
+    const handleCommit = (index: number): void => {
+      setSelectedIndex(index)
+      if (onChange) {
+        onChange(items[index])
+      }
+      setOpen(false)
+    }
 
     useEffect(() => {
       const idx = items.findIndex((it) =>
@@ -180,7 +183,7 @@ export const Select = forwardRefWithGenerics(
         useTypeahead(context, {
           listRef: listContentRef,
           activeIndex,
-          onMatch: open ? setActiveIndex : setSelectedIndex,
+          onMatch: open ? setActiveIndex : handleCommit,
         }),
       ])
 
@@ -267,7 +270,7 @@ export const Select = forwardRefWithGenerics(
         >
           {selected ? render(selected) : null}
           <SelectInputAdornment>
-            <IoChevronDown />
+            <IconChevronDown />
           </SelectInputAdornment>
         </SelectDisplay>
         <FloatingPortal>
@@ -340,14 +343,12 @@ export const Select = forwardRefWithGenerics(
                             onKeyDown(e) {
                               allowSelectRef.current = true
                               if (e.key === 'Enter' && allowSelectRef.current) {
-                                setSelectedIndex(i)
-                                setOpen(false)
+                                handleCommit(i)
                               }
                             },
                             onClick() {
                               if (allowSelectRef.current) {
-                                setSelectedIndex(i)
-                                setOpen(false)
+                                handleCommit(i)
                               }
                             },
                             onMouseUp() {
@@ -356,8 +357,7 @@ export const Select = forwardRefWithGenerics(
                               }
 
                               if (allowSelectRef.current) {
-                                setSelectedIndex(i)
-                                setOpen(false)
+                                handleCommit(i)
                               }
 
                               clearTimeout(selectTimeoutRef.current)

yarn.lock

@@ -1987,6 +1987,19 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tabler/icons-react@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-2.11.0.tgz#18d512830e4e9fabe425177fa968136efa7ea372"
+  integrity sha512-Mbie8IFLrtI0sGm802Bmierle0ixIi7FVczShoLjPZwRM0da1HcD588TF7oMuQ09zd241BY+L7M/f0Q6lquBng==
+  dependencies:
+    "@tabler/icons" "2.11.0"
+    prop-types "^15.7.2"
+
+"@tabler/icons@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.11.0.tgz#9767f2bb57a716ed71fdc5019ca534d5fddcc816"
+  integrity sha512-KPESQnvHoSpbAdgzDdrSmeZ9AE8fSU12fU3Cag79uXJCUkC8f741fcvPJPsFMDe0S96VSq3mMYF8JnA7a570uQ==
+
 "@testing-library/dom@*":
   version "8.13.0"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz"
@@ -2304,13 +2317,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-icons@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/react-icons/-/react-icons-3.0.0.tgz#27ca2823a6add881d06a371bfff093afc1b9c829"
-  integrity sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==
-  dependencies:
-    react-icons "*"
-
 "@types/react@*":
   version "18.0.6"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz"
@@ -8285,7 +8291,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8427,11 +8433,6 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-icons@*, react-icons@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
-  integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
-
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"