react-animated-select 0.2.9 → 0.3.6

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>
@@ -50,4 +59,13 @@ export interface OptionProps {
     className?: string
 }
 
-export const Option: FC<OptionProps>
+export const Option: FC<OptionProps>
+
+export interface OptGroupProps {
+    value?: any
+    id?: any
+    name?: any
+    label?: any
+}
+
+export const OptGroup: FC<OptGroup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.2.9",
+  "version": "0.3.6",
   "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/index.js

@@ -1,4 +1,5 @@
 export {default as Select} from './select'
 export {default as Option} from './option'
+export {default as OptGroup} from './optgroup'
 
 import './select.css'

package/src/optgroup.jsx

@@ -0,0 +1,36 @@
+import {useContext, useEffect, useMemo, createContext} from 'react'
+import {SelectContext} from './selectContext'
+import {makeId} from './makeId'
+
+export const GroupContext = createContext(null)
+
+export default function OptGroup({children, name, label, value, id, emptyGroupText = 'Empty group'}) {
+    const ctx = useContext(SelectContext)
+
+    const groupName = useMemo(() => {
+        const val = name ?? label ?? value ?? id
+        return (val !== undefined && val !== null && val !== '') ? String(val) : emptyGroupText
+    }, [name, label, value, id, emptyGroupText])
+
+    const groupId = useMemo(() => `group-marker-${makeId(groupName)}`, [groupName])
+
+    useEffect(() => {
+        if (!ctx) return
+
+        const groupMarker = {
+            id: groupId,
+            group: groupName,
+            isGroupMarker: true,
+            disabled: true
+        }
+
+        ctx.registerOption(groupMarker)
+        return () => ctx.unregisterOption(groupId)
+    }, [ctx.registerOption, ctx.unregisterOption, groupId, groupName])
+
+    return (
+        <GroupContext.Provider value={groupName}>
+            {children}
+        </GroupContext.Provider>
+    )
+}

package/src/option.jsx

@@ -1,28 +1,48 @@
-import {useEffect, useContext} from 'react'
+import {useEffect, useContext, useMemo, useId} from 'react'
 import {SelectContext} from './selectContext'
-import {makeId} from './makeId'
+import {GroupContext} from './optgroup'
 import getText from './getText'
 
-export default function Option({value, id, className, children, disabled}) {
+export default function Option({value, id, className, children, disabled, group: manualGroup}) {
     const ctx = useContext(SelectContext)
+    const contextGroup = useContext(GroupContext)
+    
+    const registerOption = ctx?.registerOption;
+    const unregisterOption = ctx?.unregisterOption;
+
+    const uniqueId = useId()
+    const stableId = useMemo(() => {
+        return id ? String(id) : uniqueId.replace(/:/g, '')
+    }, [id, uniqueId])
 
     useEffect(() => {
-        if (!ctx) return
+        if (!registerOption) return
 
         const textFallback = getText(children)
-        
+        let finalLabel = ''
+
+        if (typeof children === 'string' && children !== '') {
+            finalLabel = children
+        } else if (textFallback) {
+            finalLabel = textFallback
+        } else if (value !== undefined && value !== null) {
+            finalLabel = String(value)
+        } 
+
         const option = {
-            id: String(id ?? makeId(String(textFallback))),
+            id: stableId,
             value: value !== undefined ? value : textFallback,
-            label: typeof children === 'string' ? children : String(value ?? id),
+            label: finalLabel,
             jsx: children,
             className,
-            disabled: !!disabled
+            disabled: !!disabled,
+            group: manualGroup || contextGroup || null 
         }
 
-        ctx.registerOption(option)
-        return () => ctx.unregisterOption(option.id)
-    }, [id, value, children, className, disabled])
+        registerOption(option)
+        return () => unregisterOption(stableId)
+        
+    }, [stableId, value, children, className, disabled, manualGroup, contextGroup, registerOption, unregisterOption])
 
     return null
 }

package/src/options.jsx

@@ -30,17 +30,17 @@ function Options({
   const transitionString = `height ${duration}ms ${easing}${animateOpacity ? `, opacity ${duration}ms ${easing}` : ''}`
 
   const baseStyles = {
-      position: 'absolute',
-      top: `calc(100% + ${offset}px)`, 
-      left: '0',
-      width: '100%',
-      overflow: 'hidden',
-      marginTop: '2px',
-      zIndex: '1',
-      height: visibility ? 'auto' : '0px',
-      opacity: animateOpacity ? (visibility ? 1 : 0) : 1,
-      pointerEvents: visibility ? 'all' : 'none',
-      visibility: selectHeight ? 'visible' : 'hidden'
+    position: 'absolute',
+    top: `calc(100% + ${offset}px)`, 
+    left: '0',
+    width: '100%',
+    overflow: 'hidden',
+    marginTop: '2px',
+    zIndex: '1',
+    height: visibility ? 'auto' : '0px',
+    opacity: animateOpacity ? (visibility ? 1 : 0) : 1,
+    pointerEvents: visibility ? 'all' : 'none',
+    visibility: selectHeight ? 'visible' : 'hidden'
   }
 
   const handleEnter = useCallback(() => {

package/src/select.css

@@ -56,12 +56,21 @@
     --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-group-header-font-size: 1.25em;
+    --rac-group-header-font-weight: bold;
+    --rac-group-header-min-height: 1em;
+    --rac-group-header-padding: 0.5em;
+    --rac-group-arrow-height: 1em;
+    --rac-group-arrow-width: 1em;
+    --rac-group-arrow-padding: 1px 0 2px;
+    
     background: var(--rac-select-background);
     padding: var(--rac-select-padding);
     border: var(--rac-select-border);
@@ -197,11 +206,12 @@
 }
 
 .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);
 }
 
-.rac-select-option:not(.rac-disabled-option):hover {
+.rac-select-option:not(.rac-disabled-option):not(.rac-group-option):hover {
     background-color: var(--rac-option-hover);
 }
 
@@ -232,4 +242,38 @@
 
 .rac-false-option {
     color: var(--rac-false-option-color);
+}
+
+.rac-loading-option {
+    cursor: wait;
+}
+
+.rac-group-header {
+    cursor: pointer;
+    min-height: var(--rac-group-header-min-height);
+    padding: var(--rac-group-header-padding);
+    transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: var(--rac-group-header-font-weight);
+    font-size: var(--rac-group-header-font-size);
+}
+
+.rac-group-arrow-wrapper {
+    display: block;
+    height: var(--rac-group-arrow-height);
+    width: var(--rac-group-arrow-width);
+    padding: var(--rac-group-arrow-padding);
+
+    will-change: transform;
+    transition:
+        transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),
+        padding var(--rac-duration-fast);
+    transform-origin: 50% 50%;
+    transform: translateZ(0);
+}
+
+.rac-group-arrow-wrapper.--open {
+    transform: rotate(180deg);
 }