react-animated-select 0.3.1 → 0.3.6

package/src/useSelectLogic.jsx

@@ -1,5 +1,11 @@
 import {useState, useMemo, useCallback, useId, useEffect} from 'react'
 
+// keys that cannot be taken as a name if labelKeys are unavailable
+const systemKeys = ['group', 'disabled', 'options', 'items', 'children']
+
+// main keys in order of priority that can be taken for the name
+const labelKeys = ['name', 'label', 'id', 'value']
+
 function useSelectLogic({
     options = [],
     jsxOptions = [],
@@ -28,184 +34,218 @@ function useSelectLogic({
 }) {
     const stableId = useId()
     const isControlled = value !== undefined
-    
     const [selectedId, setSelectedId] = useState(null)
 
-    const isOptionObject = (obj) => {
-        if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return false
-        return ('id' in obj || 'value' in obj || 'name' in obj || 'label' in obj || 'disabled' in obj)
-    }
+    // getting option name
+    const getLabelFromObject = useCallback((obj, fallback = false) => {
+        // 
+        const foundKey = labelKeys.find(k => obj[k] !== undefined && obj[k] !== null && obj[k] !== '')
+        if (foundKey) return String(obj[foundKey])
 
-    const normalizedOptions = useMemo(() => {
-        const flat = []
-        const push = (key, val, originalItem) => {
-            let computedUserId = originalItem?.id ?? originalItem?.value ?? val ?? key
-            
-            if (typeof val === 'function') {
-                flat.push({ 
-                    key: `invalid-${flat.length}`, 
-                    value: val, 
-                    userId: null, 
-                    disabled: true, 
-                    invalid: true,
-                    label: invalidOption, 
-                    original: originalItem 
-                })
-                return
+        const fallbackEntry = Object.entries(obj).find(([k, v]) => 
+            !systemKeys.includes(k) && v != null && v !== ''
+        )
+        
+        if (fallbackEntry) return String(fallbackEntry[1])
+        return fallback
+    }, [])
+
+    const createNormalizedOption = useCallback((rawItem, index, type = 'normal', injectedGroup = null, injectedDisabled = false) => {
+        let label = ''
+        let itemValue = rawItem
+        let isDisabled = injectedDisabled
+        let userId = null
+        let group = injectedGroup
+
+        if (rawItem == null || rawItem === '') {
+            return {
+                id: `${stableId}-${type}-${index}`,
+                userId: null,
+                name: emptyOption,
+                raw: null,
+                disabled: true,
+                type: 'normal',
+                group: group
             }
+        }
 
-            if (val === '') {
-                flat.push({
-                    key: `empty-str-${flat.length}`,
-                    value: '',
-                    userId: null,
-                    disabled: true,
-                    label: emptyOption,
-                    original: originalItem
-                })
-                return
+        if (typeof rawItem === 'function') {
+            return {
+                id: `${stableId}-inv-${index}`,
+                userId: null,
+                name: invalidOption,
+                raw: rawItem,
+                disabled: true,
+                invalid: true,
+                type: 'normal',
+                group: group
             }
+        }
 
-            if (val === null || val === undefined) {
-                flat.push({
-                    key: `empty-${flat.length}`,
-                    value: null,
-                    userId: null,
-                    disabled: true,
-                    label: emptyOption,
-                    original: originalItem
-                })
+        if (typeof rawItem === 'object' && !Array.isArray(rawItem)) {
+            if (!group) group = rawItem.group || null
+            isDisabled = isDisabled || !!rawItem.disabled 
+
+            userId = rawItem.id ?? rawItem.value ?? rawItem.name ?? rawItem.label
+            itemValue = rawItem.value !== undefined ? rawItem.value : (rawItem.id !== undefined ? rawItem.id : rawItem)
+
+            label = getLabelFromObject(rawItem, isDisabled ? disabledOption : emptyOption)
+            if (label === emptyOption && !isDisabled) isDisabled = true
+        } else {
+            label = String(rawItem)
+            userId = rawItem
+            itemValue = rawItem
+        }
+
+        return {
+            id: `${stableId}-${type}-${index}`,
+            userId: userId,
+            name: label,
+            raw: itemValue,
+            original: rawItem,
+            disabled: isDisabled,
+            type: typeof itemValue === 'boolean' ? 'boolean' : 'normal',
+            group: group
+        }
+    }, [stableId, emptyOption, invalidOption, disabledOption, getLabelFromObject])
+
+    const [expandedGroups, setExpandedGroups] = useState(new Set())
+
+    const toggleGroup = useCallback((groupName) => {
+        setExpandedGroups(prev => {
+            const next = new Set(prev)
+            if (next.has(groupName)) next.delete(groupName)
+            else next.add(groupName)
+            return next
+        })
+    }, [])
+
+    const normalizedOptions = useMemo(() => {
+        const combined = []
+
+        const processItem = (opt, uniqueIdx, parentGroup = null, parentDisabled = false) => {
+            if (opt && typeof opt === 'object' && !Array.isArray(opt) && 'options' in opt) {
+                const groupName = getLabelFromObject(opt, 'Empty group', true)
+                const isGroupDisabled = parentDisabled || !!opt.disabled
+                const innerData = opt.options
+
+                if (Array.isArray(innerData)) {
+                    innerData.forEach((child, i) => processItem(child, `${uniqueIdx}-${i}`, groupName, isGroupDisabled))
+                } else if (innerData && typeof innerData === 'object') {
+                    Object.entries(innerData).forEach(([k, v], i) => processItem(v, `${uniqueIdx}-${i}`, groupName, isGroupDisabled))
+                } else {
+                    processItem(innerData, `${uniqueIdx}-0`, groupName, isGroupDisabled)
+                }
                 return
             }
 
-            if (typeof val === 'number' || typeof val === 'boolean') {
-                flat.push({ 
-                    key: `${typeof val}-${val}-${flat.length}`, 
-                    value: val, 
-                    userId: computedUserId, 
-                    label: String(val), 
-                    original: originalItem 
+            const isMapObj = opt && typeof opt === 'object' && !Array.isArray(opt) && 
+                !labelKeys.some(k => k in opt) && !('group' in opt)
+            
+            if (isMapObj) {
+                Object.entries(opt).forEach(([k, v], j) => {
+                    combined.push(createNormalizedOption(v, `${uniqueIdx}-${j}`, 'normal', parentGroup, parentDisabled))
                 })
                 return
-            } else {
-                flat.push({ 
-                    key: key ?? `opt-${flat.length}`, 
-                    value: val, 
-                    userId: computedUserId, 
-                    label: String(val ?? key), 
-                    original: originalItem 
-                })
             }
+
+            combined.push(createNormalizedOption(opt, uniqueIdx, 'normal', parentGroup, parentDisabled))
         }
 
         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})
-                } else if (isOptionObject(item)) {
-                    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: hasNoContent || !!item.disabled,
-                        label: finalLabel,
-                        original: item
-                    })
-                } else if (item && typeof item === 'object' && !Array.isArray(item)) {
-                    Object.entries(item).forEach(([k, v]) => push(k, v, v))
-                } else {
-                    push(item, item, item)
-                }
-            })
-        } else if (typeof options === 'object' && options !== null) {
-            Object.entries(options).forEach(([k, v]) => push(k, v, v))
+            options.forEach((opt, i) => processItem(opt, i))
         }
 
-        const propOpts = flat.map((item, i) => ({
-            id: `${stableId}-opt-${i}`,
-            userId: item.userId,
-            name: String(item.label),
-            raw: item.value,
-            original: item.original,
-            disabled: item.disabled,
-            invalid: item.invalid,
-            type: typeof item.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
-
+        const jsxMapped = jsxOptions.map(opt => {
+            if (opt.isGroupMarker) return { ...opt, type: 'group-marker' }
+            const isActuallyEmpty = (opt.value == null || opt.value === '') && !opt.label
             return {
                 ...opt,
-                id: `jsx-${stableId.replace(/:/g, '')}-${opt.id}-${index}`,
+                id: `jsx-${opt.id}`,
                 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'
+                disabled: !!opt.disabled || isActuallyEmpty,
+                type: typeof opt.value === 'boolean' ? 'boolean' : 'normal',
+                group: opt.group || null
             }
         })
 
-        const combined = childrenFirst ? [...jsxOpts, ...propOpts] : [...propOpts, ...jsxOpts]
+        const baseList = childrenFirst ? [...jsxMapped, ...combined] : [...combined, ...jsxMapped]
 
-        if (hasMore && loadButton) {
-            const isLoading = loadingTitle === loadMoreText
+        const finalFlattened = []
+        const groupsMap = new Map()
+        const order = []
 
-            combined.push({
+        baseList.forEach(opt => {
+            if (!opt.group) {
+                order.push({type: 'item', data: opt})
+            } else {
+                if (!groupsMap.has(opt.group)) {
+                    groupsMap.set(opt.group, [])
+                    order.push({type: 'group', name: opt.group})
+                }
+                if (!opt.isGroupMarker) {
+                    const visible = expandedGroups.has(opt.group)
+                    groupsMap.get(opt.group).push({...opt, hidden: !visible})
+                }
+            }
+        })
+
+        order.forEach((entry, idx) => {
+            if (entry.type === 'item') {
+                finalFlattened.push(entry.data)
+            } else {
+                const expanded = expandedGroups.has(entry.name)
+                finalFlattened.push({
+                    id: `group-header-${entry.name}-${idx}`,
+                    name: entry.name,
+                    disabled: false,
+                    groupHeader: true,
+                    expanded,
+                    type: 'group'
+                })
+                
+                const items = groupsMap.get(entry.name)
+                finalFlattened.push(...items)
+                
+            }
+        })
+
+        if (hasMore && loadButton) {
+            finalFlattened.push({
                 id: 'special-load-more-id',
                 name: loadingTitle,
                 loadMore: true,
-                loading: isLoading,
+                loading: loadingTitle === loadMoreText,
                 type: 'special'
             })
         }
 
-        return combined
-    }, [options, jsxOptions, stableId, emptyOption, disabledOption, hasMore, loadButton, loadingTitle, loadMoreText])
+        return finalFlattened
+    }, [options, jsxOptions, stableId, createNormalizedOption, childrenFirst, hasMore, loadButton, loadingTitle, loadMoreText, emptyText, emptyOption, getLabelFromObject])
 
     const findIdByValue = useCallback((val) => {
-        if (val === undefined || val === null) return null
-        
-        const refMatch = normalizedOptions.find(o => o.original === val || o.raw === val)
-        if (refMatch) return refMatch.id
+        if (val == null) return null
+        const match = normalizedOptions.find(o => o.original === val || o.raw === val || o.userId === val)
+        if (match) return match.id
 
         if (typeof val === 'object') {
             try {
                 const str = JSON.stringify(val)
-                const structMatch = normalizedOptions.find(o => 
+                return normalizedOptions.find(o => 
                     o.original && typeof o.original === 'object' && JSON.stringify(o.original) === str
-                )
-                if (structMatch) return structMatch.id
-            } catch {}
+                )?.id ?? null
+            } catch { return null }
         }
-
-        return normalizedOptions.find(o => o.userId === val)?.id ?? null
+        return null
     }, [normalizedOptions])
 
     useEffect(() => {
         const effectiveValue = isControlled ? value : defaultValue
-        
         const currentSelected = normalizedOptions.find(o => o.id === selectedId)
+        
         const isStillValid = currentSelected && (
             currentSelected.original === effectiveValue || 
             currentSelected.raw === effectiveValue || 
@@ -215,29 +255,33 @@ function useSelectLogic({
         if (!isStillValid) {
             setSelectedId(findIdByValue(effectiveValue))
         }
-    }, [value, defaultValue, isControlled, normalizedOptions, findIdByValue])
+    }, [value, defaultValue, isControlled, normalizedOptions, findIdByValue, selectedId])
 
-    const selected = useMemo(() => {
-        return normalizedOptions.find(o => o.id === selectedId) ?? null
-    }, [selectedId, normalizedOptions])
+    const selected = useMemo(() => 
+        normalizedOptions.find(o => o.id === selectedId) ?? null, 
+    [selectedId, normalizedOptions])
 
     const selectOption = useCallback((option, e) => {
-        if (option.disabled || option.loadMore) {
+        if (option.groupHeader) {
             e?.stopPropagation()
             e?.preventDefault()
+            toggleGroup(option.name)
+            return
+        }
 
-            if (loadingTitle !== loadMoreText) {
+        if (option.disabled || option.loadMore) {
+            e?.stopPropagation()
+            e?.preventDefault()
+            if (option.loadMore) {
                 setLoadingTitle(loadMoreText)
                 loadMore()
             }
-
             return
         }
-        
         setSelectedId(option.id)
         onChange?.(option.original, option.userId)
         setVisibility(false)
-    }, [onChange, setVisibility])
+    }, [onChange, setVisibility, loadMore, loadMoreText, setLoadingTitle])
 
     const clear = useCallback(() => {
         setSelectedId(null)
@@ -250,7 +294,8 @@ function useSelectLogic({
         active: !error && !loading && !disabled && normalizedOptions.length > 0,
         selectedValue: value ?? defaultValue, 
         placeholder, emptyText, disabledText, loadingText, errorText, 
-        disabledOption, emptyOption, invalidOption, disabled, loading, error
+        disabledOption, emptyOption, invalidOption, disabled, loading, error,
+        expandedGroups, toggleGroup, visibleOptions: normalizedOptions.filter(o => !o.hidden)
     }
 }