react-animated-select 0.2.5 → 0.2.7

package/index.d.ts

@@ -18,7 +18,7 @@ export interface SelectProps {
     options?: any[] | Record<string, any>
     value?: any
     defaultValue?: any
-    onChange?: (value: any, option: any) => void
+    onChange?: (data: any, id: any) => void
 
     disabled?: boolean
     loading?: boolean
@@ -35,14 +35,17 @@ export interface SelectProps {
     invalidOption?: string
 
     className?: string
-    id?: string
+    style?: CSSProperties
+    ArrowIcon?: ElementType | string | ReactNode
+    ClearIcon?: ElementType | string | ReactNode
 }
 
 export const Select: FC<SelectProps>
 
 export interface OptionProps {
-    value: any
-    children: ReactNode
+    value?: any
+    id?: any
+    children?: ReactNode
     disabled?: boolean
     className?: string
 }

package/package.json

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

package/src/icons.jsx

@@ -1,27 +1,29 @@
 export const XMarkIcon = ({className = '', ...props}) => (
   <svg
-        className={className}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 320 512"
-        width="1em"
-        height="1em"
-        fill="currentColor"
-        {...props}
+    className={className}
+    role='button'
+    aria-label='Clear selection'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 320 512"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    {...props}
   >
     <path d="M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"/>
   </svg>
 )
 
-export const ArrowUpIcon = ({ className = '', ...props }) => (
+export const ArrowUpIcon = ({className = '', ...props}) => (
     <svg
-        className={className}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 448 512"
-        width="1em"
-        height="1em"
-        fill="currentColor"
-        {...props}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      {...props}
     >
-        <path d="M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"/>
+      <path d="M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"/>
     </svg>
 )

package/src/select.css

@@ -21,6 +21,9 @@
     --rac-select-padding: 0em 0.5em;
     --rac-disabled-opacity: 0.75;
 
+    --rac-title-anim-shift: 4px;
+    --rac-title-anim-entry-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
+
     --rac-dots-height: 3px;
     --rac-dots-width: 3px;
     --rac-dots-color: currentColor;
@@ -97,11 +100,26 @@
     align-items: center;
 }
 
+.rac-title-text {
+    display: block;
+    animation: rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease);
+}
+
+@keyframes rac-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(var(--rac-title-anim-shift));
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 .rac-loading-dots {
     display: inline-flex;
     gap: var(--rac-dots-gap);
     padding-left: var(--rac-dots-padding-left);
-    height: 90%;
     align-items: var(--rac-dots-align);
 }
 
@@ -155,6 +173,11 @@
     transform: rotate(180deg);
 }
 
+.rac-select-arrow, 
+.rac-select-cancel {
+    object-fit: contain;
+}
+
 .rac-select-list {
     background-color: var(--rac-list-background);
     color: var(--rac-list-color);

package/src/select.jsx

@@ -1,7 +1,7 @@
 import './select.css'
 
 import {XMarkIcon, ArrowUpIcon} from './icons'
-import {useRef, useMemo, useState, useEffect, useCallback, useId} from 'react'
+import {forwardRef, useImperativeHandle, useRef, useMemo, useState, useEffect, useCallback, useId, isValidElement, cloneElement} from 'react'
 
 import {SelectContext} from './selectContext'
 import useSelect from './useSelect'
@@ -10,7 +10,26 @@ import {makeId} from './makeId'
 import Options from './options'
 import SlideLeft from './slideLeft'
 
-export default function Select({
+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 === 'function' || (typeof Icon === 'object' && Icon.$$typeof)) {
+        const IconComponent = Icon
+        return <IconComponent {...defaultProps} />
+    }
+
+    return null
+}
+
+const Select = forwardRef(({
     unmount,
     children,
     renderedDropdown,
@@ -21,8 +40,12 @@ export default function Select({
     easing = 'ease-out',
     offset = 2,
     animateOpacity = true,
+    style = {},
+    className = '',
+    ArrowIcon = ArrowUpIcon,
+    ClearIcon = XMarkIcon,
     ...props
-}) {
+}, ref) => {
 
     const reactId = useId()
 
@@ -41,6 +64,17 @@ export default function Select({
     // 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)
 
@@ -203,8 +237,12 @@ export default function Select({
             {children}
             {renderedDropdown}
             <div
-                style={{'--rac-duration': `${duration}ms`}}
+                style={{
+                    '--rac-duration': `${duration}ms`,
+                    ...style
+                }}
                 className={`rac-select
+                    ${className}
                     ${(!hasOptions || disabled) ? 'rac-disabled-style' : ''}
                     ${loading ? 'rac-loading-style' : ''}
                     ${error ? 'rac-error-style' : ''}`
@@ -225,12 +263,17 @@ export default function Select({
                 })}
             >
                 <div
-                    className={`rac-select-title ${selected?.type == 'boolean'
+                    className={`rac-select-title ${(!error && !loading && selected?.type == 'boolean')
                         ? selected.raw ? 'rac-true-option' : 'rac-false-option'
                         : ''
                     }`}
                 >
-                    {title}
+                    <span
+                        className='rac-title-text'
+                        key={title}
+                    >
+                        {title}
+                    </span>
                     <SlideLeft
                         visibility={loading && !error}
                         duration={duration}
@@ -246,24 +289,24 @@ export default function Select({
                     <SlideLeft
                         visibility={hasActualValue && hasOptions && !disabled && !loading && !error}
                         duration={duration}
+                        style={{display: 'grid'}}
                     >
-                        <XMarkIcon
-                            className='rac-select-cancel'
-                            role='button'
-                            aria-label='Clear selection'
-                            onClick={(e) => clear(e)}
-                        />
+                        {renderIcon(ClearIcon, { 
+                            className: 'rac-select-cancel', 
+                            onClick: (e) => clear(e)
+                        })}
                     </SlideLeft>
                     <SlideLeft
                         visibility={active}
                         duration={duration}
+                        style={{display: 'grid'}}
                     >
                         <span
                             className={`rac-select-arrow-wrapper ${visibility ? '--open' : ''}`}
                         >
-                            <ArrowUpIcon
-                                className='rac-select-arrow-wrapper'
-                            />
+                            {renderIcon(ArrowIcon, { 
+                                className: 'rac-select-arrow-wrapper' 
+                            })}
                         </span>
                     </SlideLeft>
                 </div>
@@ -288,4 +331,6 @@ export default function Select({
             </div>
         </SelectContext.Provider>
     )
-}
+})
+
+export default Select

package/src/slideLeft.jsx

@@ -4,8 +4,9 @@ import {useRef} from 'react'
 function SlideLeft({
     visibility,
     children,
-    duration,
-    unmount
+    duration = 300,
+    unmount,
+    style
 }) {
     const nodeRef = useRef(null)
 
@@ -26,7 +27,7 @@ function SlideLeft({
             <div
                 ref={nodeRef}
                 style={{
-                    display: 'grid',
+                    ...style,
                     overflow: 'hidden',
                     transition: `width ${duration}ms ease`
                 }}