react-animated-select 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "author": "l1nway (https://github.com/l1nway/)",
   "description": "Animated, accessible, and flexible select component for React",

package/src/getText.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const getText = (children) => {
+    if (!children) return ''
+    if (typeof children === 'string' || typeof children === 'number') return String(children)
+    if (Array.isArray(children)) return children.map(getText).join(' ').replace(/\s+/g, ' ').trim()
+    if (React.isValidElement(children)) return getText(children.props.children)
+    return ''
+}
+
+export default getText

package/src/option.jsx

@@ -1,6 +1,7 @@
 import {useEffect, useContext} from 'react'
 import {SelectContext} from './selectContext'
 import {makeId} from './makeId'
+import getText from './getText'
 
 export default function Option({value, id, className, children, disabled}) {
     const ctx = useContext(SelectContext)
@@ -8,9 +9,11 @@ export default function Option({value, id, className, children, disabled}) {
     useEffect(() => {
         if (!ctx) return
 
+        const textFallback = getText(children)
+        
         const option = {
-            id: id ?? makeId(String(value ?? children)),
-            value,
+            id: String(id ?? makeId(String(textFallback))),
+            value: value !== undefined ? value : textFallback,
             label: typeof children === 'string' ? children : String(value ?? id),
             jsx: children,
             className,
@@ -22,4 +25,4 @@ export default function Option({value, id, className, children, disabled}) {
     }, [id, value, children, className, disabled])
 
     return null
-}
+}

package/src/select.css

@@ -125,8 +125,8 @@
 
 .rac-select-option {
     padding: 0.5em;
-    transition: background-color 300ms, border-radius 300ms, font-size 300ms, 300ms height;
-    transition: background-color 300ms, border-radius 300ms, font-size 300ms, 300ms height;
+    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 300ms, font-size 300ms, 300ms height;
+    background-color: transparent;
 }
 
 .rac-select-option:not(.rac-disabled-option):hover {

package/src/select.jsx

@@ -63,7 +63,7 @@ export default function Select({children, renderedDropdown, ...props}) {
 
             const option = normalizedOptions[highlightedIndex]
             if (option) {
-                const elementId = `option-${makeId(option.name)}-${selectId}`
+                const elementId = `opt-${selectId}-${makeId(option.id)}`
                 const domElement = document.getElementById(elementId)
                 
                 if (domElement) {
@@ -85,7 +85,7 @@ export default function Select({children, renderedDropdown, ...props}) {
         if (loading) return loadingText
         if (disabled) return disabledText
         
-        if (selected) return selected.name
+        if (selected) return selected.jsx ?? selected.name
 
         if (hasActualValue) {
             return typeof selectedValue === 'object' 
@@ -102,11 +102,13 @@ export default function Select({children, renderedDropdown, ...props}) {
 
     // option list rendering
     const renderOptions = useMemo(() => normalizedOptions?.map((element, index) => {
-        const optionId = `option-${makeId(element.name)}-${selectId}`
+        const optionId = `opt-${selectId}-${makeId(element.id)}`
 
         let optionClass = 'rac-select-option'
         if (element.className) optionClass += ` ${element.className}`
 
+        if (selected?.id === element.id) optionClass += ' rac-selected'
+
         if (index === highlightedIndex) optionClass += ' rac-highlighted'
 
         if (element.disabled) optionClass += ' rac-disabled-option'
@@ -199,7 +201,7 @@ export default function Select({children, renderedDropdown, ...props}) {
                         visibility={loading && !error}
                     >
                         <span className='rac-loading-dots'>
-                            <i></i><i></i><i></i>
+                            <i/><i/><i/>
                         </span>
                     </SlideLeft>
                 </div>

package/src/slideLeft.jsx

@@ -8,7 +8,7 @@ function SlideLeft({visibility, children, duration = 300, unmount}) {
         <CSSTransition
             in={visibility}
             timeout={duration}
-            classNames='slide-left'
+            classNames='rac-slide-left'
             unmountOnExit
             nodeRef={nodeRef}
             onEnter={() => (nodeRef.current.style.width = '0px')}

package/src/useSelect.jsx

@@ -13,14 +13,22 @@ function useSelect({
 
     useEffect(() => {
         if (isOpen) {
-            const index = selected 
-                ? options.findIndex(o => o.id == selected.id) 
-                : -1
-            setHighlightedIndex(index >= 0 ? index : 0)
+            let index = -1
+
+            if (selected) {
+                const selectedIndex = options.findIndex(o => o.id === selected.id && !o.disabled)
+                if (selectedIndex >= 0) index = selectedIndex
+            }
+
+            if (index === -1) {
+                index = options.findIndex(o => !o.disabled)
+            }
+
+            setHighlightedIndex(index)
         } else {
             setHighlightedIndex(-1)
         }
-    }, [isOpen, selected])
+    }, [isOpen, selected, options])
 
     const handleBlur = useCallback((e) => {
         if (e.currentTarget.contains(e.relatedTarget)) return
@@ -49,20 +57,22 @@ function useSelect({
     }, [disabled, isOpen, setIsOpen])
 
     const getNextIndex = (current, direction) => {
-        let next = current + direction
-        if (next < 0) next = options.length - 1
-        if (next >= options.length) next = 0
-        
+        if (options.every(o => o.disabled)) return -1
+
+        let next = current
         let loops = 0
-        while (options[next]?.disabled && loops < options.length) {
+
+        do {
             next += direction
             if (next < 0) next = options.length - 1
             if (next >= options.length) next = 0
             loops++
-        }
+        } while (options[next]?.disabled && loops <= options.length)
+
         return next
     }
 
+
     const handleKeyDown = useCallback((e) => {
         if (disabled) return