react-animated-select 0.2.9 → 0.3.6

package/src/select.jsx

@@ -1,34 +1,44 @@
 import './select.css'
-
 import {XMarkIcon, ArrowUpIcon} from './icons'
 import {forwardRef, useImperativeHandle, useRef, useMemo, useState, useEffect, useCallback, useId, isValidElement, cloneElement} from 'react'
+import {makeId} from './makeId'
 
-import {SelectContext} from './selectContext'
+import SelectJSX from './selectJSX'
 import useSelect from './useSelect'
-import {useSelectLogic} from './useSelectLogic'
-import {makeId} from './makeId'
-import Options from './options'
+import useSelectLogic from './useSelectLogic'
+import SlideDown from './slideDown'
 import SlideLeft from './slideLeft'
 
+// universal icon display
 const renderIcon = (Icon, defaultProps) => {
     if (!Icon) return null
-
-    if (typeof Icon === 'string') {
-        return <img src={Icon} {...defaultProps} alt='' />
-    }
-
-    if (isValidElement(Icon)) {
-        return cloneElement(Icon, defaultProps)
-    }
-
+    if (typeof Icon === 'string') return <img src={Icon} {...defaultProps} alt=''/>
+    if (isValidElement(Icon)) return cloneElement(Icon, defaultProps)
     if (typeof Icon === 'function' || (typeof Icon === 'object' && Icon.$$typeof)) {
         const IconComponent = Icon
-        return <IconComponent {...defaultProps} />
+        return <IconComponent {...defaultProps}/>
     }
-
     return null
 }
 
+// adding classes to style options according to their state
+const getOptionClassName = (element, index, highlightedIndex, selectedId, loadingTitle, loadMoreText, invalidOption) => {
+    if (element.groupHeader) {
+        return 'rac-select-option rac-group-option'
+    }
+
+    return [
+        'rac-select-option',
+        element.className,
+        selectedId === element.id && 'rac-selected',
+        index === highlightedIndex && 'rac-highlighted',
+        (element.disabled || element.loading) && 'rac-disabled-option',
+        (element.invalid || element.name === invalidOption) && 'rac-invalid-option',
+        (element.loadMore && loadingTitle === loadMoreText) && 'rac-loading-option',
+        typeof element.raw === 'boolean' && (element.raw ? 'rac-true-option' : 'rac-false-option')
+    ].filter(Boolean).join(' ')
+}
+
 const Select = forwardRef(({
     unmount,
     children,
@@ -44,294 +54,255 @@ const Select = forwardRef(({
     className = '',
     ArrowIcon = ArrowUpIcon,
     ClearIcon = XMarkIcon,
+    hasMore = false,
+    loadMore = () => {console.warn('loadMore not implemented')},
+    loadButton = false,
+    loadButtonText = 'Load more',
+    loadMoreText = 'Loading',
+    loadOffset = 100,
+    loadAhead = 3,
+    childrenFirst = false,
     ...props
 }, ref) => {
 
     const reactId = useId()
-
     const selectId = useMemo(() => reactId.replace(/:/g, ''), [reactId])
-
     const [jsxOptions, setJsxOptions] = useState([])
+    const [internalVisibility, setInternalVisibility] = useState(false)
+    const [loadingTitle, setLoadingTitle] = useState(loadButton ? loadButtonText : loadMoreText)
+    const [animationFinished, setAnimationFinished] = useState(false)
+    const selectRef = useRef(null)
+
 
     const registerOption = useCallback((opt) => {
-    setJsxOptions(prev => [...prev, opt])
+        setJsxOptions(prev => {
+            const index = prev.findIndex(o => o.id === opt.id)
+            if (index !== -1) {
+                const existing = prev[index]
+                if (
+                    existing.label === opt.label &&
+                    existing.value === opt.value &&
+                    existing.disabled === opt.disabled &&
+                    existing.group === opt.group
+                ) {
+                    return prev
+                }
+                const next = [...prev]
+                next[index] = opt
+                return next
+            }
+            return [...prev, opt]
+        })
     }, [])
 
     const unregisterOption = useCallback((id) => {
-        setJsxOptions(prev => prev.filter(o => o.id !== id))
+        setJsxOptions(prev => {
+            const filtered = prev.filter(o => o.id !== id)
+            return filtered.length === prev.length ? prev : filtered
+        })
     }, [])
 
-    // ref is needed to pass dimensions for the animation hook
-    const selectRef = useRef(null)
-
-    useEffect(() => {
-        if (!ref) return
-        if (typeof ref === 'function') {
-            ref(selectRef.current)
-        } else {
-            ref.current = selectRef.current
-        }
-    }, [ref])
-
-    useImperativeHandle(ref, () => selectRef.current)
-
-    // open/closed status select
-    const [internalVisibility, setInternalVisibility] = useState(false)
-
-    const visibility = useMemo(() => {
-        if (alwaysOpen) return true
-        if (ownBehavior) return !!externalVisibility
-        
-        return internalVisibility
-    }, [alwaysOpen, ownBehavior, externalVisibility, internalVisibility])
-
+    // select visibility control
+    const visibility = alwaysOpen ? true : (ownBehavior ? !!externalVisibility : internalVisibility)
+    
     const setVisibility = useCallback((newState) => {
-        if (alwaysOpen) return
-        if (ownBehavior) return 
-        
-        setInternalVisibility(prev => {
-            const next = typeof newState === 'function' ? newState(prev) : newState
-            return next
-        })
+        if (alwaysOpen || ownBehavior) return
+        setInternalVisibility(newState)
     }, [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})
-
-    // event handler functions for interacting with the select
-    const {handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex} = useSelect({
-        disabled,
-        isOpen: visibility,
-        setIsOpen: setVisibility,
-        options: normalizedOptions,
-        selectOption: selectOption,
-        selected: selected
+    const logic = useSelectLogic({
+        ...props, visibility, setVisibility, jsxOptions, hasMore, 
+        loadButton, loadingTitle, loadMore, loadMoreText, setLoadingTitle, childrenFirst
     })
 
-    const [animationFinished, setAnimationFinished] = useState(false)
+    const {normalizedOptions, selected, selectOption, clear, hasOptions, active, selectedValue, disabled, loading, error, placeholder, invalidOption, emptyText, disabledText, loadingText, errorText, expandedGroups} = logic
+
+    const behavior = useSelect({setLoadingTitle, loadButton, loadButtonText, hasMore, loadMore, disabled, open: visibility, setOpen: setVisibility, options: normalizedOptions, selectOption, selected, loadOffset, loadAhead})
+
+    const {handleListScroll, handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex} = behavior
+
+    useImperativeHandle(ref, () => selectRef.current)
 
     useEffect(() => {
-        if (!visibility) {
-            setAnimationFinished(false)
-        }
+        if (!visibility) setAnimationFinished(false)
     }, [visibility])
 
     useEffect(() => {
-        if (error || disabled || loading || !hasOptions) {
-            setVisibility(false)
-        }
-    }, [error, disabled, loading, hasOptions])
+        if (error || disabled || loading || !hasOptions) setVisibility(false)
+    }, [error, disabled, loading, hasOptions, setVisibility])
 
     useEffect(() => {
         if (visibility && animationFinished && highlightedIndex !== -1) {
-
             const option = normalizedOptions[highlightedIndex]
             if (option) {
-                const elementId = `opt-${selectId}-${makeId(option.id)}`
-                const domElement = document.getElementById(elementId)
-                
-                if (domElement) {
-                    domElement.scrollIntoView({block: 'nearest'})
-                }
+                const domElement = document.getElementById(`opt-${selectId}-${makeId(option.id)}`)
+                domElement?.scrollIntoView({ block: 'nearest' })
             }
         }
     }, [highlightedIndex, visibility, animationFinished, normalizedOptions, selectId])
 
-    const hasActualValue = 
+    const hasActualValue = useMemo(() => (
         selectedValue !== undefined && 
         selectedValue !== null && 
         !(Array.isArray(selectedValue) && selectedValue.length === 0) &&
         !(typeof selectedValue === 'object' && Object.keys(selectedValue).length === 0)
+    ), [selectedValue])
 
-    // displaying title according to state of select
     const title = useMemo(() => {
         if (error) return errorText
         if (loading) return loadingText
         if (disabled) return disabledText
-        
         if (selected) return selected.jsx ?? selected.name
         
         if (hasActualValue) {
             const recovered = normalizedOptions.find(o => o.raw === selectedValue)
             if (recovered) return recovered.name
-
-            if (typeof selectedValue === 'object' && selectedValue !== null) {
-                return selectedValue.name ?? selectedValue.label ?? 'Selected Object'
-            }
-            return String(selectedValue)
+            return (typeof selectedValue === 'object' && selectedValue !== null) 
+                ? (selectedValue.name ?? selectedValue.label ?? 'Selected Object') 
+                : String(selectedValue)
         }
+        return hasOptions ? placeholder : emptyText
+    }, [disabled, loading, error, hasOptions, selected, selectedValue, placeholder, errorText, loadingText, disabledText, emptyText, hasActualValue, normalizedOptions])
 
-        if (!hasOptions) return emptyText
-
-        return placeholder
-    }, [disabled, loading, error, hasOptions, selected, selectedValue, placeholder, errorText, loadingText, disabledText, emptyText])
-
-    const listboxId = `${selectId}-listbox`
+    const renderOptions = useMemo(() => {
+        const nodes = []
+        let currentGroupChildren = []
+        let currentGroupName = null
 
-    // option list rendering
-    const renderOptions = useMemo(() => normalizedOptions?.map((element, index) => {
-        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'
-
-        if (element.isInvalid) optionClass += ' rac-invalid-option'
-        
-        if (typeof element.raw === 'boolean') {
-            optionClass += element.raw ? ' rac-true-option' : ' rac-false-option'
-        }
+        const groupCounts = normalizedOptions.reduce((acc, opt) => {
+            if (opt.group) {
+                acc[opt.group] = (acc[opt.group] || 0) + 1
+            }
+            return acc
+        }, {})
 
-        if (element.name == invalidOption) {
-            optionClass += ' rac-invalid-option'
+        const flushGroup = (name) => {
+            if (name === null || currentGroupChildren.length === 0) return
+            
+            nodes.push(
+                <SlideDown
+                    key={`slide-${name}`}
+                    visibility={expandedGroups.has(name)}
+                >
+                    {currentGroupChildren}
+                </SlideDown>
+            )
+            currentGroupChildren = []
         }
 
-        return (
+        const createOptionNode = (element, index) => (
             <div
-                className={optionClass}
-                onClick={(e) => selectOption(element, e)}
-                onMouseEnter={() => !element.disabled && setHighlightedIndex(index)}
                 key={element.id}
-                id={optionId}
+                id={`opt-${selectId}-${makeId(element.id)}`}
                 role='option'
                 aria-selected={selected?.id === element.id}
-                aria-disabled={element.disabled}
+                aria-disabled={element.disabled || element.loading}
+                className={getOptionClassName(element, index, highlightedIndex, selected?.id, loadingTitle, loadMoreText, invalidOption)}
+                onClick={(e) => !element.loading && selectOption(element, e)}
+                onMouseEnter={() => (!element.disabled && !element.loading) && setHighlightedIndex(index)}
             >
                 {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;'
-                )
-            }
+        normalizedOptions.forEach((element, index) => {
+            const isHeader = element.groupHeader
+            const belongsToGroup = !!element.group
 
-            if (isControlled && defaultValue !== undefined) {
-                console.warn(
-                    `%c[Select Library]:%c .\n` +
-                    ``,
-                    'color: #faad14; font-weight: bold;', 'color: default;'
-                )
+            if (isHeader || (!belongsToGroup && currentGroupName !== null)) {
+                flushGroup(currentGroupName)
+                if (!isHeader) currentGroupName = null
             }
-        }
-    }, [options, value, defaultValue, isControlled])
-
-    return(
-        <SelectContext.Provider
-            value={{registerOption, unregisterOption}}
-        >
-            {children}
-            {renderedDropdown}
-            <div
-                style={{
-                    '--rac-duration': `${duration}ms`,
-                    ...style
-                }}
-                className={`rac-select
-                    ${className}
-                    ${(!hasOptions || disabled) ? 'rac-disabled-style' : ''}
-                    ${loading ? 'rac-loading-style' : ''}
-                    ${error ? 'rac-error-style' : ''}`
-                }
-                tabIndex={active ? 0 : -1}
-                ref={selectRef}
-                role='combobox'
-                aria-haspopup='listbox'
-                aria-expanded={visibility}
-                aria-controls={listboxId}
-                aria-label={placeholder}
-                aria-disabled={disabled || !hasOptions}
-                {...(active && {
-                    onBlur: handleBlur,
-                    onFocus: handleFocus,
-                    onClick: handleToggle,
-                    onKeyDown: handleKeyDown
-                })}
-            >
-                <div
-                    className={`rac-select-title ${(!error && !loading && selected?.type == 'boolean')
-                        ? selected.raw ? 'rac-true-option' : 'rac-false-option'
-                        : ''
-                    }`}
-                >
-                    <span
-                        className='rac-title-text'
-                        key={title}
-                    >
-                        {title}
-                    </span>
-                    <SlideLeft
-                        visibility={loading && !error}
-                        duration={duration}
-                    >
-                        <span className='rac-loading-dots'>
-                            <i/><i/><i/>
-                        </span>
-                    </SlideLeft>
-                </div>
-                <div
-                    className='rac-select-buttons'
-                >
-                    <SlideLeft
-                        visibility={hasActualValue && hasOptions && !disabled && !loading && !error}
-                        duration={duration}
-                        style={{display: 'grid'}}
-                    >
-                        {renderIcon(ClearIcon, { 
-                            className: 'rac-select-cancel', 
-                            onClick: (e) => clear(e)
-                        })}
-                    </SlideLeft>
-                    <SlideLeft
-                        visibility={active}
-                        duration={duration}
-                        style={{display: 'grid'}}
+
+            if (isHeader) {
+                currentGroupName = element.name
+                const open = expandedGroups.has(element.name)
+                const hasChildren = groupCounts[element.name] > 0
+
+                nodes.push(
+                    <div 
+                        key={element.id} 
+                        className='rac-group-header'
+                        onClick={(e) => selectOption(element, e)}
                     >
-                        <span
-                            className={`rac-select-arrow-wrapper ${visibility ? '--open' : ''}`}
+                        <span className='rac-group-title-text'>{element.name}</span>
+                        <SlideLeft
+                            visibility={hasChildren}
+                            duration={duration}
+                            style={{display: 'grid'}}
                         >
-                            {renderIcon(ArrowIcon, { 
-                                className: 'rac-select-arrow-wrapper' 
-                            })}
-                        </span>
-                    </SlideLeft>
-                </div>
-                <Options
-                    visibility={visibility}
-                    selectRef={selectRef}
-                    onAnimationDone={() => setAnimationFinished(true)}
-                    unmount={unmount}
-                    duration={duration}
-                    easing={easing}
-                    offset={offset}
-                    animateOpacity={animateOpacity}
-                >
-                    <div
-                        className='rac-select-list'
-                        role='listbox'
-                        aria-label='Options'
-                    >
-                        {renderOptions}
+                            <span className={`rac-group-arrow-wrapper ${open ? '--open' : ''}`}>
+                                {renderIcon(ArrowIcon, {className: 'rac-select-arrow-wrapper'})}
+                            </span>
+                        </SlideLeft>
                     </div>
-                </Options>
-            </div>
-        </SelectContext.Provider>
+                )
+            } else if (belongsToGroup) {
+                currentGroupChildren.push(createOptionNode(element, index))
+            } else {
+                nodes.push(createOptionNode(element, index))
+            }
+        })
+
+        flushGroup(currentGroupName)
+
+        return nodes
+    }, [
+        normalizedOptions, selectOption, selectId, selected, highlightedIndex, 
+        loadingTitle, loadMoreText, invalidOption, setHighlightedIndex, 
+        expandedGroups, ArrowIcon
+    ])
+
+    return (
+        <SelectJSX 
+            selectRef={selectRef}
+            selectId={selectId}
+            
+            renderIcon={renderIcon}
+            normalizedOptions={normalizedOptions}
+            renderOptions={renderOptions}
+            selected={selected}
+            title={title}
+            visibility={visibility}
+            active={active}
+            hasOptions={hasOptions}
+            hasActualValue={hasActualValue}
+            highlightedIndex={highlightedIndex}
+            animationFinished={animationFinished}
+            
+            disabled={disabled}
+            loading={loading}
+            error={error}
+            
+            setVisibility={setVisibility}
+            setHighlightedIndex={setHighlightedIndex}
+            setAnimationFinished={setAnimationFinished}
+            handleBlur={handleBlur}
+            handleFocus={handleFocus}
+            handleToggle={handleToggle}
+            handleKeyDown={handleKeyDown}
+            handleListScroll={handleListScroll}
+            selectOption={selectOption}
+            clear={clear}
+            registerOption={registerOption}
+            unregisterOption={unregisterOption}
+            
+            children={children}
+            renderedDropdown={renderedDropdown}
+            placeholder={placeholder}
+            className={className}
+            style={style}
+            duration={duration}
+            easing={easing}
+            offset={offset}
+            animateOpacity={animateOpacity}
+            unmount={unmount}
+            ArrowIcon={ArrowIcon}
+            ClearIcon={ClearIcon}
+            hasMore={hasMore}
+            loadButton={loadButton}
+        />
     )
 })
 

package/src/selectContext.js

@@ -1,3 +1,3 @@
 import {createContext} from 'react'
 
-export const SelectContext = createContext(null)
+export const SelectContext = createContext(null)