react-animated-select 0.5.6 → 0.6.0

package/demo/src/shake.js

@@ -1,11 +0,0 @@
-export const shake = (el) => {
-  if (!el) return
-
-  el.classList.remove('--animated-error')
-  void el.offsetWidth
-  el.classList.add('--animated-error')
-}
-
-export const clearShake = (el) => {
-  el?.classList.remove('--animated-error')
-}

package/demo/src/slideDown.jsx

@@ -1,35 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef} from 'react'
-
-function SlideDown({visibility, children, duration = 300}) {
-    const nodeRef = useRef(null)
-
-    return(
-        <CSSTransition
-            in={visibility}
-            timeout={300}
-            classNames='slideDown'
-            unmountOnExit
-            nodeRef={nodeRef}
-            onEnter={() => (nodeRef.current.style.height = '0px')}
-            onEntering={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
-            onEntered={() => (nodeRef.current.style.height = 'auto')}
-            onExit={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
-            onExiting={() => (nodeRef.current.style.height = '0px')}
-        >
-            <div
-                ref={nodeRef}
-                style={{
-                    overflow: 'hidden',
-                    transition: `height ${duration}ms ease`
-                }}
-                className='slideDown-enter-done'
-                tabIndex={-1}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default SlideDown

package/demo/vite.config.js

@@ -1,7 +0,0 @@
-import {defineConfig} from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  base: '/react-animated-select/',
-})

package/src/SelectJSX.jsx

@@ -1,300 +0,0 @@
-import {memo, useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
-import {SelectContext} from './selectContext'
-import Options from './options'
-import SlideLeft from './slideLeft'
-import Animated from './animated'
-import {TransitionGroup} from 'react-transition-group'
-
-const SelectedItem = memo(({element, index, remove, renderIcon, DelIcon, normalizedOptions}) => {
-    let label = null
-
-    if (element?.jsx) {
-        label = element.jsx
-    } else if (element?.name) {
-        label = element.name
-    } 
-    else if (element?.raw !== undefined) {
-        const recovered = normalizedOptions.find(o =>
-            o.raw === element.raw ||
-            o.original === element.raw ||
-            o.userId === element.raw
-        )
-        if (recovered) {
-            label = recovered.jsx ?? recovered.name
-        }
-    }
-
-    if (label == null) {
-        label = typeof element === 'object' 
-            ? (element.label ?? element.name ?? element.value ?? 'Selected item') 
-            : String(element)
-    }
-
-    const handleDelete = useCallback((e) => {
-        e.stopPropagation()
-        e.preventDefault()
-        remove(element.id)
-    }, [element.id, remove])
-
-    const preventFocus = useCallback((e) => {
-        e.stopPropagation()
-        e.preventDefault()
-    }, [])
-
-    return (
-        <div className='rac-multiple-selected-option'>
-            {label} 
-            {renderIcon(DelIcon, {onClick: handleDelete, onMouseDown: preventFocus})}
-        </div>
-    )
-})
-
-const SelectJSX = memo(({
-    selectRef,
-    selectId,
-    removeOption, 
-    renderOptions,
-    selected,
-    selectedIDs,
-    setSelectedIds,
-    normalizedOptions,
-    title,
-    visibility,
-    active,
-    hasOptions,
-    hasActualValue,
-    optionsClassName,
-    selectedText,
-
-    disabled,
-    loading,
-    error,
-    
-    registerOption,
-    unregisterOption,
-    handleBlur,
-    handleFocus,
-    handleToggle,
-    handleKeyDown,
-    handleListScroll,
-    setAnimationFinished,
-    clear,
-    
-    children,
-    placeholder,
-    className,
-    style,
-    duration,
-    easing,
-    offset,
-    animateOpacity,
-    unmount,
-    ArrowIcon,
-    ClearIcon,
-    DelIcon,
-    renderIcon,
-    hasMore,
-    loadButton
-}) => {
-
-    const internalRef = useRef(null)
-
-    const [titleHeight, setTitleHeight] = useState(null)
-    const titleContentRef = useRef(null)
-
-    useLayoutEffect(() => {
-        const element = titleContentRef.current
-        if (!element) return
-
-        const observer = new ResizeObserver((entries) => {
-            window.requestAnimationFrame(() => {
-                if (!Array.isArray(entries) || !entries.length) return
-                
-                const newHeight = entries[0].contentRect.height
-                
-                setTitleHeight(newHeight)
-            })
-        })
-
-        observer.observe(element)
-
-        return () => {
-            observer.disconnect()
-        }
-    }, [])
-
-    useEffect(() => {
-        if (selectRef) {
-            if (typeof selectRef === 'function') selectRef(internalRef.current)
-            else selectRef.current = internalRef.current
-        }
-    }, [selectRef])
-
-    const remove = useCallback((id) => {
-        if (removeOption) {
-            removeOption(id)
-        } else {
-            setSelectedIds(prev => prev.filter(o => o.id !== id))
-        }
-    }, [removeOption, setSelectedIds])
-
-    const renderSelectIDs = selectedIDs?.map((element, index) => (
-        <Animated
-            key={element.id ?? index}
-            duration={duration}
-            widthMode
-        >
-            <SelectedItem 
-                key={element.id ?? index}
-                element={element}
-                index={index}
-                remove={remove}
-                renderIcon={renderIcon}
-                DelIcon={DelIcon}
-                normalizedOptions={normalizedOptions}
-            />
-        </Animated>
-    ))
-
-    return (
-        <SelectContext.Provider
-            value={{registerOption, unregisterOption}}
-        >
-            {children}
-            <div
-                ref={internalRef}
-                style={{
-                    ...style,
-                    '--rac-duration': `${duration}ms`,
-                    '--rac-duration-fast': 'calc(var(--rac-duration) * 0.5)',
-                    '--rac-duration-base': 'var(--rac-duration)',
-                    '--rac-duration-slow': 'calc(var(--rac-duration) * 1.3)'
-                }}
-                className={
-                    `rac-select
-                    ${className}
-                    ${(!hasOptions || disabled) ? 'rac-disabled-style' : ''}
-                    ${loading ? 'rac-loading-style' : ''}
-                    ${error ? 'rac-error-style' : ''}`}
-                tabIndex={active ? 0 : -1}
-                role='combobox'
-                aria-haspopup='listbox'
-                aria-expanded={visibility}
-                aria-controls={`${selectId}-listbox`}
-                aria-label={placeholder}
-                aria-disabled={disabled || !hasOptions}
-                {...(active && {
-                    onBlur: handleBlur,
-                    onFocus: handleFocus,
-                    onClick: handleToggle,
-                    onKeyDown: handleKeyDown
-                })}
-            >
-                <div
-                    className={
-                        `rac-select-title-wrapper
-                                ${(!error && !loading && selected?.type === 'boolean')
-                            ?
-                                (selected.raw ? 'rac-true-option' : 'rac-false-option')
-                            : ''}
-                    `}
-                    style={{
-                        height: titleHeight ? `${titleHeight}px` : 'auto',
-                        boxSizing: 'content-box',
-                        overflow: 'hidden'
-                    }}
-                >
-                    <div
-                        className='rac-select-title'
-                        ref={titleContentRef}
-                    >
-                        <TransitionGroup component={null}>
-                            {selectedIDs?.length && !selectedText ? (
-                                renderSelectIDs
-                            ) : (
-                                <Animated
-                                    key={title}
-                                    duration={duration}
-                                    widthMode
-                                >
-                                    <span className='rac-title-text'>{title}</span>
-                                    
-                                    <SlideLeft visibility={loading && !error} duration={duration}>
-                                        <span className='rac-loading-dots'><i/><i/><i/></span>
-                                    </SlideLeft>
-                                </Animated>
-                            )}
-                        </TransitionGroup>
-                    </div>
-                </div>
-
-                <div className='rac-select-buttons'>
-                    <SlideLeft
-                        visibility={hasActualValue && hasOptions && !disabled && !loading && !error}
-                        duration={duration}
-                        style={{display: 'grid'}}
-                    >
-                        {renderIcon(ClearIcon, { 
-                            className: 'rac-select-cancel', 
-                            onMouseDown: e => {
-                                e.preventDefault()
-                                e.stopPropagation()
-                            }, 
-                            onClick: clear 
-                        })}
-                    </SlideLeft>
-                    <SlideLeft
-                        visibility={active}
-                        duration={duration}
-                        style={{display: 'grid'}}
-                    >
-                        <span
-                            className={`rac-select-arrow-wrapper ${visibility ? '--open' : ''}`}
-                        >
-                            {renderIcon(ArrowIcon, {
-                                className: 'rac-select-arrow-wrapper'
-                            })}
-                        </span>
-                    </SlideLeft>
-                </div>
-
-                <Options
-                    className={optionsClassName}
-                    visibility={visibility}
-                    selectRef={selectRef}
-                    onAnimationDone={() => setAnimationFinished(true)}
-                    unmount={unmount}
-                    duration={duration}
-                    easing={easing}
-                    offset={offset}
-                    animateOpacity={animateOpacity}
-                    style={{
-                        ...style,
-                        '--rac-duration': `${duration}ms`
-                    }}
-                >
-                    <div
-                        onScroll={handleListScroll}
-                        tabIndex='-1'
-                        className='rac-select-list'
-                        role='listbox'
-                        aria-label='Options'
-                    >
-                        {renderOptions}
-                        {!loadButton && hasMore && (
-                            <div
-                                className='rac-select-option rac-disabled-option rac-loading-option'
-                                onClick={e => e.stopPropagation()}
-                            >
-                                <span className='rac-loading-option-title'>Loading</span>
-                                <span className='rac-loading-dots'><i/><i/><i/></span>
-                            </div>
-                        )}
-                    </div>
-                </Options>
-            </div>
-        </SelectContext.Provider>
-    )
-})
-
-export default SelectJSX

package/src/animated.jsx

@@ -1,80 +0,0 @@
-import {useRef} from 'react'
-import {CSSTransition} from 'react-transition-group'
-
-const Animated = ({children, duration, widthMode = false, ...props}) => {
-    const nodeRef = useRef(null)
-    return (
-        <CSSTransition
-            nodeRef={nodeRef}
-            timeout={duration}
-            classNames='rac-slide-left'
-            {...props}
-            onEnter={() => {
-        const el = nodeRef.current
-        if (widthMode) {
-          el.style.width = '0px'
-        } else {
-          el.style.height = '0px'
-          el.style.transform = 'translateY(-10px)'
-        }
-        el.style.opacity = '0'
-            }}
-            onEntering={() => {
-                const el = nodeRef.current
-                el.offsetHeight 
-                if (widthMode) {
-                    el.style.width = el.scrollWidth + 'px'
-                } else {
-                el.style.height = el.scrollHeight + 'px'
-                el.style.transform = 'translateY(0)'
-                }
-                el.style.opacity = '1'
-            }}
-            onEntered={() => {
-                const el = nodeRef.current
-                el.style.width = widthMode ? 'auto' : ''
-                el.style.height = widthMode ? '' : 'auto'
-                el.style.opacity = '1'
-                el.style.transform = ''
-            }}
-            onExit={() => {
-                const el = nodeRef.current
-                if (widthMode) {
-                    el.style.width = el.offsetWidth + 'px'
-                } else {
-                    el.style.height = el.offsetHeight + 'px'
-                    el.style.position = 'absolute'
-                }
-                el.style.opacity = '1'
-            }}
-            onExiting={() => {
-                const el = nodeRef.current
-                if (widthMode) {
-                    el.style.width = '0px'
-                } else {
-                    el.style.height = '0px'
-                    el.style.transform = 'translateY(10px)'
-                }
-                    el.style.opacity = '0'
-            }}
-            >
-            <div 
-                ref={nodeRef} 
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    height: '100%',
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                    transition: `all ${duration}ms ease`,
-                    top: 0,
-                    left: 0
-                }}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default Animated

package/src/getText.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const getText = (children) => {
-    if (!children) return ''
-    if (typeof children === 'string' || typeof children === 'number') return String(children)
-    if (Array.isArray(children)) return children.map(getText).join(' ').replace(/\s+/g, ' ').trim()
-    if (React.isValidElement(children)) return getText(children.props.children)
-    return ''
-}
-
-export default getText

package/src/icons.jsx

@@ -1,43 +0,0 @@
-export const XMarkIcon = ({className = '', ...props}) => (
-  <svg
-    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}) => (
-    <svg
-      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"/>
-    </svg>
-)
-
-export const CheckmarkIcon = ({className = '', ...props}) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="1em"
-    height="1em"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"/>
-  </svg>
-)

package/src/index.js

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

package/src/makeId.jsx

@@ -1,21 +0,0 @@
-// if user does not provide a unique identifier, a unique ID is generated based on value, filtering out unwanted characters
-export const makeId = (str, fallback = 'invalid-option', seed = '') => {
-    const safeSeed = seed ? seed.replace(/:/g, '') : ''
-    
-    if (typeof str !== 'string' || !str.trim()) {
-        return safeSeed ? `${fallback}-${safeSeed}` : `${fallback}-${Math.random().toString(36).slice(2, 8)}`
-    }
-
-    const cleaned = str
-        .normalize('NFKD')
-        .replace(/[\u0300-\u036f]/g, '')
-        .replace(/\s+/g, '-')
-        .replace(/[^\p{L}\p{N}-]+/gu, '')
-        .toLowerCase()
-
-    if (!cleaned) {
-        return safeSeed ? `${fallback}-${safeSeed}` : `${fallback}-${Math.random().toString(36).slice(2, 8)}`
-    }
-
-    return cleaned || `${fallback}-${Math.random().toString(36).slice(2, 8)}`
-}

package/src/optgroup.jsx

@@ -1,36 +0,0 @@
-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,50 +0,0 @@
-import {useEffect, useContext, useMemo, useId} from 'react'
-import {SelectContext} from './selectContext'
-import {GroupContext} from './optgroup'
-import getText from './getText'
-
-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 (!registerOption) return
-
-        const textFallback = getText(children)
-        const hasJsx = children !== undefined && children !== null
-        let finalLabel = ''
-
-        if (textFallback) {
-            finalLabel = textFallback
-        } else if (id !== undefined && id !== null && id !== '') {
-            finalLabel = String(id)
-        } else if (value !== undefined && value !== null && value !== '') {
-            finalLabel = String(value)
-        }
-
-        const option = {
-            id: stableId,
-            value: value !== undefined ? value : textFallback,
-            label: finalLabel,
-            jsx: children,
-            hasJsx,
-            className,
-            disabled: !!disabled,
-            group: manualGroup || contextGroup || null 
-        }
-
-        registerOption(option)
-        return () => unregisterOption(stableId)
-        
-    }, [stableId, value, children, className, disabled, manualGroup, contextGroup, registerOption, unregisterOption])
-
-    return null
-}