react-animated-select 0.2.9 → 0.3.1

package/index.d.ts

@@ -1,4 +1,4 @@
-import {FC, ReactNode} from 'react'
+import {FC, ReactNode, CSSProperties, ElementType} from 'react'
 
 export interface SelectProps {
 
@@ -38,6 +38,15 @@ export interface SelectProps {
     style?: CSSProperties
     ArrowIcon?: ElementType | string | ReactNode
     ClearIcon?: ElementType | string | ReactNode
+
+    hasMore?: boolean
+    loadMore?: () => void
+    loadButton?: boolean
+    loadButtonText?: string
+    loadMoreText?: string
+    loadOffset?: number
+    loadAhead?: number
+    childrenFirst?: boolean
 }
 
 export const Select: FC<SelectProps>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "type": "module",
   "author": "l1nway (https://github.com/l1nway/)",
   "description": "Animated, accessible, and flexible select component for React",
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/l1nway/react-animated-select.git"
   },
   "license": "MIT",
-  "homepage": "https://github.com/l1nway/react-animated-select#readme",
+  "homepage": "https://l1nway.github.io/react-animated-select/",
   "scripts": {
     "build": "vite build",
     "dev": "vite build --watch"
@@ -40,6 +40,7 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
+    "@types/react": "^19.2.9",
     "@vitejs/plugin-react": "^5.1.2",
     "vite": "^7.3.1",
     "vite-plugin-lib-inject-css": "^2.2.2"

package/src/option.jsx

@@ -10,11 +10,15 @@ export default function Option({value, id, className, children, disabled}) {
         if (!ctx) return
 
         const textFallback = getText(children)
+
+        const finalLabel = (typeof children === 'string' && children !== '') 
+            ? children 
+            : (textFallback || String(value ?? id ?? ''))
         
         const option = {
             id: String(id ?? makeId(String(textFallback))),
             value: value !== undefined ? value : textFallback,
-            label: typeof children === 'string' ? children : String(value ?? id),
+            label: finalLabel,
             jsx: children,
             className,
             disabled: !!disabled

package/src/select.css

@@ -56,11 +56,13 @@
     --rac-list-max-height: 250px;
 
     --rac-option-padding: 0.5em;
+    --rac-option-min-height: 1em;
     --rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);
     --rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);
     --rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);
     --rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);
     --rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);
+    --rac-loading-option-opacity: 0.75;
     
     background: var(--rac-select-background);
     padding: var(--rac-select-padding);
@@ -197,6 +199,7 @@
 }
 
 .rac-select-option {
+    min-height: var(--rac-option-min-height);
     padding: var(--rac-option-padding);
     transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
 }
@@ -232,4 +235,8 @@
 
 .rac-false-option {
     color: var(--rac-false-option-color);
+}
+
+.rac-loading-option {
+    cursor: wait;
 }

package/src/select.jsx

@@ -2,11 +2,11 @@ import './select.css'
 
 import {XMarkIcon, ArrowUpIcon} from './icons'
 import {forwardRef, useImperativeHandle, useRef, useMemo, useState, useEffect, useCallback, useId, isValidElement, cloneElement} from 'react'
-
 import {SelectContext} from './selectContext'
-import useSelect from './useSelect'
-import {useSelectLogic} from './useSelectLogic'
 import {makeId} from './makeId'
+
+import useSelect from './useSelect'
+import useSelectLogic from './useSelectLogic'
 import Options from './options'
 import SlideLeft from './slideLeft'
 
@@ -44,9 +44,23 @@ const Select = forwardRef(({
     className = '',
     ArrowIcon = ArrowUpIcon,
     ClearIcon = XMarkIcon,
+    hasMore = false,
+    loadMore = () => {},
+    loadButton = false,
+    loadButtonText = 'Load more',
+    loadMoreText = 'Loading',
+    loadOffset = 100,
+    loadAhead = 3,
+    childrenFirst = false,
     ...props
 }, ref) => {
 
+    const [loadingTitle, setLoadingTitle] = useState(loadButton ? loadButtonText : loadMoreText)
+
+    useEffect(() => {
+        setLoadingTitle(loadButton ? loadButtonText : loadMoreText)
+    }, [loadButton, loadButtonText, loadMoreText])
+
     const reactId = useId()
 
     const selectId = useMemo(() => reactId.replace(/:/g, ''), [reactId])
@@ -95,16 +109,23 @@ const Select = forwardRef(({
         })
     }, [alwaysOpen, ownBehavior])
 
-    const {normalizedOptions, selected, selectOption, clear, hasOptions, active, selectedValue, disabled, loading, error, placeholder, invalidOption, options, value, defaultValue, isControlled, emptyText, disabledText, loadingText, errorText} = useSelectLogic({...props, visibility, setVisibility, jsxOptions})
+    const {normalizedOptions, selected, selectOption, clear, hasOptions, active, selectedValue, disabled, loading, error, placeholder, invalidOption, emptyText, disabledText, loadingText, errorText} = useSelectLogic({...props, visibility, setVisibility, jsxOptions, hasMore,loadButton, loadingTitle, loadMore, loadMoreText, setLoadingTitle, childrenFirst})
 
     // event handler functions for interacting with the select
-    const {handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex} = useSelect({
+    const {handleListScroll, handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex} = useSelect({
+        setLoadingTitle,
+        loadButton,
+        loadButtonText,
+        hasMore,
+        loadMore,
         disabled,
         isOpen: visibility,
         setIsOpen: setVisibility,
         options: normalizedOptions,
-        selectOption: selectOption,
-        selected: selected
+        selectOption,
+        selected,
+        loadOffset,
+        loadAhead
     })
 
     const [animationFinished, setAnimationFinished] = useState(false)
@@ -178,9 +199,11 @@ const Select = forwardRef(({
 
         if (index === highlightedIndex) optionClass += ' rac-highlighted'
 
-        if (element.disabled) optionClass += ' rac-disabled-option'
+        if (element.disabled || element.loading) optionClass += ' rac-disabled-option'
+
+        if (element.invalid) optionClass += ' rac-invalid-option'
 
-        if (element.isInvalid) optionClass += ' rac-invalid-option'
+        if (element.loadMore && loadingTitle == loadMoreText) optionClass += ' rac-loading-option'
         
         if (typeof element.raw === 'boolean') {
             optionClass += element.raw ? ' rac-true-option' : ' rac-false-option'
@@ -193,45 +216,31 @@ const Select = forwardRef(({
         return (
             <div
                 className={optionClass}
-                onClick={(e) => selectOption(element, e)}
-                onMouseEnter={() => !element.disabled && setHighlightedIndex(index)}
+                onClick={(e) => {
+                    if (element.loading) {
+                        e.stopPropagation()
+                        return
+                    }
+                    selectOption(element, e)
+                }}
+                onMouseEnter={() => (!element.disabled && !element.loading) && setHighlightedIndex(index)}
                 key={element.id}
                 id={optionId}
                 role='option'
                 aria-selected={selected?.id === element.id}
-                aria-disabled={element.disabled}
+                aria-disabled={element.disabled || element.loading}
+                data-loading={element.loading}
             >
                 {element.jsx ?? element.name}
+                {element.loading && (
+                    <span className='rac-loading-dots'>
+                        <i/><i/><i/>
+                    </span>
+                )}
             </div>
         )
     }), [normalizedOptions, selectOption, selectId, selected, highlightedIndex])
 
-    useEffect(() => {
-        if (process.env.NODE_ENV !== 'production') {
-            
-            const receivedType = typeof options
-            if (options && typeof options !== 'object') {
-                console.error(
-                    `%c[Select Library]:%c Invalid prop %coptions%c.\n` +
-                    `Expected %cArray%c or %cObject%c, but received %c${receivedType}%c.\n`,
-                    'color: #ff4d4f; font-weight: bold;', 'color: default;',
-                    'color: #1890ff; font-weight: bold;', 'color: default;',
-                    'color: #52c41a; font-weight: bold;', 'color: default;',
-                    'color: #52c41a; font-weight: bold;', 'color: default;',
-                    'color: #ff4d4f; font-weight: bold;', 'color: default;'
-                )
-            }
-
-            if (isControlled && defaultValue !== undefined) {
-                console.warn(
-                    `%c[Select Library]:%c .\n` +
-                    ``,
-                    'color: #faad14; font-weight: bold;', 'color: default;'
-                )
-            }
-        }
-    }, [options, value, defaultValue, isControlled])
-
     return(
         <SelectContext.Provider
             value={{registerOption, unregisterOption}}
@@ -294,8 +303,12 @@ const Select = forwardRef(({
                         style={{display: 'grid'}}
                     >
                         {renderIcon(ClearIcon, { 
-                            className: 'rac-select-cancel', 
-                            onClick: (e) => clear(e)
+                            className: 'rac-select-cancel',
+                            onMouseDown: (e) => {
+                                e.preventDefault()
+                                e.stopPropagation()
+                            },
+                            onClick: clear
                         })}
                     </SlideLeft>
                     <SlideLeft
@@ -323,11 +336,29 @@ const Select = forwardRef(({
                     animateOpacity={animateOpacity}
                 >
                     <div
+                        onScroll={handleListScroll}
+                        tabIndex='-1'
                         className='rac-select-list'
                         role='listbox'
                         aria-label='Options'
                     >
                         {renderOptions}
+                        {!loadButton && hasMore ?
+                            <div
+                                onClick={e => e.stopPropagation()}
+                                onMouseEnter={e => e.preventDefault()}
+                                className='rac-select-option rac-disabled-option rac-loading-option'
+                            >
+                                <span
+                                    className='rac-loading-option-title'
+                                >
+                                    Loading
+                                </span>
+                                <span className='rac-loading-dots'>
+                                    <i/><i/><i/>
+                                </span>
+                            </div>
+                        : null}
                     </div>
                 </Options>
             </div>

package/src/useSelect.jsx

@@ -6,12 +6,61 @@ function useSelect({
     setIsOpen, 
     options,
     selectOption,
-    selected
+    selected,
+    hasMore,
+    loadMore,
+    loadButton,
+    loadButtonText,
+    setLoadingTitle,
+    loadOffset,
+    loadAhead
 }) {
     const justFocused = useRef(false)
     const lastWindowFocusTime = useRef(0)
     const [highlightedIndex, setHighlightedIndex] = useState(-1)
 
+    const loadingTriggered = useRef(false)
+
+    const prevOptionsLength = useRef(options?.length || 0)
+
+    useEffect(() => {
+        if (options && options.length !== prevOptionsLength.current) {
+            loadingTriggered.current = false
+            prevOptionsLength.current = options.length
+            loadButton && setLoadingTitle(loadButtonText)
+        }
+    }, [options])
+
+    const safeLoadMore = useCallback(() => {
+        if (!hasMore || loadingTriggered.current) return
+
+        loadingTriggered.current = true
+        loadMore()
+    }, [hasMore, loadMore])
+
+    const handleListScroll = useCallback((e) => {
+        if (loadButton || !hasMore || loadingTriggered.current) return
+
+        const {scrollTop, scrollHeight, clientHeight} = e.currentTarget
+        
+        const threshold = loadOffset 
+
+        if (scrollHeight - scrollTop <= clientHeight + threshold) {
+            safeLoadMore()
+        }
+    }, [loadButton, hasMore, safeLoadMore])
+
+    useEffect(() => {
+        if (loadButton) return
+
+        if (isOpen && hasMore && highlightedIndex >= 0) {
+            const threshold = loadAhead
+            if (highlightedIndex >= options.length - threshold) {
+                safeLoadMore()
+            }
+        }
+    }, [loadButton, highlightedIndex, isOpen, hasMore, options.length, safeLoadMore])
+
     useEffect(() => {
         const handleWindowFocus = () => {
             lastWindowFocusTime.current = Date.now()
@@ -22,6 +71,10 @@ function useSelect({
 
     useEffect(() => {
         if (isOpen) {
+            if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+                return 
+            }
+
             let index = -1
             if (selected) {
                 const selectedIndex = options.findIndex(o => o.id === selected.id && !o.disabled)
@@ -34,7 +87,7 @@ function useSelect({
         } else {
             setHighlightedIndex(-1)
         }
-    }, [isOpen, selected, options])
+    }, [isOpen, options])
 
     const handleBlur = useCallback((e) => {
         if (e.currentTarget.contains(e.relatedTarget)) return
@@ -60,25 +113,40 @@ function useSelect({
 
     const handleToggle = useCallback((e) => {
         if (disabled) return
-        if (e.target.closest('.rac-select-cancel')) return
+        if (e.target.closest && e.target.closest('.rac-select-cancel')) return
         if (justFocused.current) return
 
         setIsOpen(!isOpen)
     }, [disabled, isOpen, setIsOpen])
 
     const getNextIndex = (current, direction) => {
-        if (options.every(o => o.disabled)) return -1
+        const isNavigable = (opt) => opt && !opt.disabled && !opt.loading
+
+        if (!options.some(isNavigable)) return -1
+
         let next = current
         let loops = 0
+
         do {
             next += direction
-            if (next < 0) next = options.length - 1
-            if (next >= options.length) next = 0
+
+            if (next >= options.length) {
+                if (hasMore && !loadButton) return current
+                next = 0
+            }
+
+            if (next < 0) {
+                if (hasMore && !loadButton) return current
+                next = options.length - 1
+            }
+
             loops++
-        } while (options[next]?.disabled && loops <= options.length)
+        } while (!isNavigable(options[next]) && loops <= options.length)
+
         return next
     }
 
+
     const handleKeyDown = useCallback((e) => {
         if (disabled) return
 
@@ -128,7 +196,8 @@ function useSelect({
         handleToggle, 
         handleKeyDown, 
         highlightedIndex, 
-        setHighlightedIndex
+        setHighlightedIndex,
+        handleListScroll
     }), [handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex])
 }
 

package/src/useSelectLogic.jsx

@@ -1,6 +1,6 @@
 import {useState, useMemo, useCallback, useId, useEffect} from 'react'
 
-export function useSelectLogic({
+function useSelectLogic({
     options = [],
     jsxOptions = [],
     value,
@@ -17,7 +17,14 @@ export function useSelectLogic({
     disabledOption = 'Disabled option',
     emptyOption = 'Empty option',
     invalidOption = 'Invalid option',
-    setVisibility
+    setVisibility,
+    hasMore,
+    loadButton,
+    setLoadingTitle,
+    loadingTitle,
+    loadMoreText,
+    loadMore,
+    childrenFirst
 }) {
     const stableId = useId()
     const isControlled = value !== undefined
@@ -40,7 +47,7 @@ export function useSelectLogic({
                     value: val, 
                     userId: null, 
                     disabled: true, 
-                    isInvalid: true,
+                    invalid: true,
                     label: invalidOption, 
                     original: originalItem 
                 })
@@ -48,25 +55,25 @@ export function useSelectLogic({
             }
 
             if (val === '') {
-                flat.push({ 
-                    key: `empty-str-${flat.length}`, 
-                    value: '', 
-                    userId: null, 
-                    disabled: true, 
-                    label: emptyOption, 
-                    original: originalItem 
+                flat.push({
+                    key: `empty-str-${flat.length}`,
+                    value: '',
+                    userId: null,
+                    disabled: true,
+                    label: emptyOption,
+                    original: originalItem
                 })
                 return
             }
 
             if (val === null || val === undefined) {
-                flat.push({ 
-                    key: `empty-${flat.length}`, 
-                    value: null, 
-                    userId: null, 
-                    disabled: true, 
-                    label: emptyOption, 
-                    original: originalItem 
+                flat.push({
+                    key: `empty-${flat.length}`,
+                    value: null,
+                    userId: null,
+                    disabled: true,
+                    label: emptyOption,
+                    original: originalItem
                 })
                 return
             }
@@ -80,17 +87,6 @@ export function useSelectLogic({
                     original: originalItem 
                 })
                 return
-            }
-
-            if (val && typeof val === 'object' && !Array.isArray(val)) {
-                flat.push({
-                    key: val.id ?? val.value ?? val.name ?? key ?? `obj-${flat.length}`,
-                    value: val,
-                    userId: computedUserId,
-                    disabled: !!val.disabled,
-                    label: val.name ?? val.label ?? String(key),
-                    original: originalItem
-                })
             } else {
                 flat.push({ 
                     key: key ?? `opt-${flat.length}`, 
@@ -105,15 +101,30 @@ export function useSelectLogic({
         if (Array.isArray(options)) {
             options.forEach((item, index) => {
                 if (item && typeof item === 'object' && Object.keys(item).length === 1 && item.disabled === true) {
-                    flat.push({ key: `dis-${index}`, value: null, userId: null, disabled: true, label: disabledOption, original: item })
+                    flat.push({key: `dis-${index}`, value: null, userId: null, disabled: true, label: disabledOption, original: item})
                 } else if (isOptionObject(item)) {
-                    const stableUserId = item.id ?? (typeof item.value !== 'object' ? item.value : (item.label ?? item.name ?? item.value));
+                    const stableUserId = item.id ?? (typeof item.value !== 'object' ? item.value : (item.label ?? item.name ?? item.value))
+
+                    let rawLabel = item.name || item.label || item.id || item.value
+                    
+                    if (rawLabel === null || rawLabel === undefined || rawLabel === '') {
+                        const fallbackEntry = Object.entries(item).find(([k, v]) => 
+                            k !== 'disabled' && v !== null && v !== undefined && v !== ''
+                        )
+                        if (fallbackEntry) {
+                            rawLabel = fallbackEntry[1]
+                        }
+                    }
+    
+                    const hasNoContent = rawLabel === null || rawLabel === undefined || rawLabel === ''
+                    const finalLabel = hasNoContent ? emptyOption : String(rawLabel)
+
                     flat.push({
                         key: item.id ?? item.value ?? item.name ?? `opt-${index}`,
                         value: item.value !== undefined ? item.value : (item.id !== undefined ? item.id : item),
                         userId: stableUserId,
-                        disabled: !!item.disabled,
-                        label: item.name ?? item.label ?? String(item.id ?? item.value),
+                        disabled: hasNoContent || !!item.disabled,
+                        label: finalLabel,
                         original: item
                     })
                 } else if (item && typeof item === 'object' && !Array.isArray(item)) {
@@ -133,22 +144,44 @@ export function useSelectLogic({
             raw: item.value,
             original: item.original,
             disabled: item.disabled,
-            isInvalid: item.isInvalid,
+            invalid: item.invalid,
             type: typeof item.value === 'boolean' ? 'boolean' : 'normal'
         }))
 
-        const jsxOpts = jsxOptions.map((opt, index) => ({
-            ...opt,
-            id: `jsx-${stableId.replace(/:/g, '')}-${opt.id}-${index}`,
-            userId: opt.id,
-            raw: opt.value,
-            original: opt.value,
-            name: opt.label,
-            type: typeof opt.value === 'boolean' ? 'boolean' : 'normal'
-        }))
+        const jsxOpts = jsxOptions.map((opt, index) => {
+            const hasNoValue = opt.value === null || opt.value === undefined
+            const hasNoLabel = opt.label === null || opt.label === undefined || opt.label === ''
+            
+            const isActuallyEmpty = hasNoValue && hasNoLabel
+
+            return {
+                ...opt,
+                id: `jsx-${stableId.replace(/:/g, '')}-${opt.id}-${index}`,
+                userId: opt.id,
+                raw: opt.value,
+                original: opt.value,
+                name: isActuallyEmpty ? emptyOption : opt.label,
+                disabled: opt.disabled || isActuallyEmpty,
+                type: typeof opt.value === 'boolean' ? 'boolean' : 'normal'
+            }
+        })
+
+        const combined = childrenFirst ? [...jsxOpts, ...propOpts] : [...propOpts, ...jsxOpts]
 
-        return [...propOpts, ...jsxOpts]
-    }, [options, jsxOptions, stableId, emptyOption, disabledOption])
+        if (hasMore && loadButton) {
+            const isLoading = loadingTitle === loadMoreText
+
+            combined.push({
+                id: 'special-load-more-id',
+                name: loadingTitle,
+                loadMore: true,
+                loading: isLoading,
+                type: 'special'
+            })
+        }
+
+        return combined
+    }, [options, jsxOptions, stableId, emptyOption, disabledOption, hasMore, loadButton, loadingTitle, loadMoreText])
 
     const findIdByValue = useCallback((val) => {
         if (val === undefined || val === null) return null
@@ -189,9 +222,15 @@ export function useSelectLogic({
     }, [selectedId, normalizedOptions])
 
     const selectOption = useCallback((option, e) => {
-        if (option.disabled) {
+        if (option.disabled || option.loadMore) {
             e?.stopPropagation()
             e?.preventDefault()
+
+            if (loadingTitle !== loadMoreText) {
+                setLoadingTitle(loadMoreText)
+                loadMore()
+            }
+
             return
         }
         
@@ -200,9 +239,7 @@ export function useSelectLogic({
         setVisibility(false)
     }, [onChange, setVisibility])
 
-    const clear = useCallback((e) => {
-        e.preventDefault()
-        e.stopPropagation()
+    const clear = useCallback(() => {
         setSelectedId(null)
         onChange?.(null, null)
     }, [onChange])
@@ -215,4 +252,6 @@ export function useSelectLogic({
         placeholder, emptyText, disabledText, loadingText, errorText, 
         disabledOption, emptyOption, invalidOption, disabled, loading, error
     }
-}
+}
+
+export default useSelectLogic