react-animated-select 0.5.2 → 0.6.0

package/src/select.css

@@ -1,356 +0,0 @@
-@media (prefers-reduced-motion: reduce) {
-  .rac-select {
-    --rac-duration: 1ms;
-  }
-}
-
-:root {
-    --rac-base-red: #e7000b;
-    --rac-base-green: #4caf50;
-    --rac-base-yellow: #ffc107;
-
-    --rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);
-    --rac-select-color: CanvasText;
-    --rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);
-    --rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);
-    --rac-select-height: 2em;
-    --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-title-font-size: 1em;
-
-    --rac-dots-height: 3px;
-    --rac-dots-width: 3px;
-    --rac-dots-color: currentColor;
-    --rac-dots-gap: 3px;
-    --rac-dots-padding-left: 0.25em;
-    --rac-dots-align: end;
-    --rac-dots-animation-duration: 1.4s;
-    --rac-dots-animation-delay-1: 0s;
-    --rac-dots-animation-delay-2: 0.2s;
-    --rac-dots-animation-delay-3: 0.4s;
-
-    --rac-arrow-height: 1em;
-    --rac-arrow-width: 1em;
-    --rac-arrow-padding: 1px 0 2px;
-
-    --rac-cancel-height: 0.9em;
-    --rac-cancel-width: 0.9em;
-
-    --rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);
-    --rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);
-    --rac-scroll-padding-top: 0.5em;
-    --rac-scroll-padding-bottom: 0.5em;
-
-    --rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);
-    --rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);
-    --rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);
-
-    --rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);
-    --rac-list-color: CanvasText;
-    --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;
-    --rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);
-
-    --rac-multiple-selected-border: 0.1em solid gray;
-    --rac-multiple-selected-radius: 5px;
-    --rac-checkbox-border: 1px solid gray;
-    --rac-multiple-selected-padding: 0em 0.25em;
-    --rac-multiple-selected-margin: 0em 0.25em;
-    --rac-multiple-selected-gap: 0.5em 0;
-    --rac-checkbox-margin-right: 0.20em;
-    --rac-multiple-selected-min-height: 1.5em;
-    --rac-checkbox-size: var(--rac-option-min-height);
-
-    --rac-options-z-index: 1;
-}
-
-.rac-select {
-    background: var(--rac-select-background);
-    padding: var(--rac-select-padding);
-    border: var(--rac-select-border);
-    color: var(--rac-select-color);
-
-    min-height: var(--rac-select-height);
-    interpolate-size: allow-keywords;
-    transition:
-        border-color var(--rac-duration-base) ease, 
-        height var(--rac-duration-base) ease;
-    justify-content: space-between;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-}
-
-.rac-loading-style,
-.rac-disabled-style {
-    opacity: var(--rac-disabled-opacity);
-    transition:
-        border-color var(--rac-duration-base),
-        filter var(--rac-duration-base),
-        opacity var(--rac-duration-base);
-    cursor: wait;
-}
-
-.rac-disabled-style {
-    cursor: not-allowed;
-}
-
-.rac-error-style {
-    border: var(--rac-select-border-error);
-    cursor: help;
-}
-
-.rac-select-title {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--rac-multiple-selected-gap);
-}
-
-.rac-title-text {
-    display: block;
-    animation: rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease);
-    height: 100%;
-    align-content: center;
-    font-size: var(--rac-title-font-size);
-}
-
-@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);
-    align-items: var(--rac-dots-align);
-}
-
-.rac-loading-dots i {
-    width: var(--rac-dots-height);
-    height: var(--rac-dots-width);
-    background: var(--rac-dots-color);
-    border-radius: 50%;
-    animation: blink var(--rac-dots-animation-duration) infinite both;
-}
-
-.rac-loading-dots i:nth-child(1) {animation-delay: var(--rac-dots-animation-delay-1);}
-.rac-loading-dots i:nth-child(2) {animation-delay: var(--rac-dots-animation-delay-2);}
-.rac-loading-dots i:nth-child(3) {animation-delay: var(--rac-dots-animation-delay-3);}
-
-@keyframes blink {
-  0%   {opacity: .2;}
-  20%  {opacity: 1;}
-  100% {opacity: .2;}
-}
-
-.rac-select-buttons {
-    display: flex;
-    align-items: center;
-}
-
-.rac-select-cancel {
-    height: var(--rac-cancel-height);
-    width: var(--rac-cancel-width);
-
-    transition:
-        opacity var(--rac-duration-fast),
-        border-color var(--rac-duration-fast);
-}
-
-.rac-select-arrow-wrapper {
-    display: block;
-    height: var(--rac-arrow-height);
-    width: var(--rac-arrow-width);
-    padding: var(--rac-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-select-arrow-wrapper.--open {
-    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);
-    max-height: var(--rac-list-max-height);
-    overflow-y: auto;
-    scrollbar-color: var(--rac-scroll-color) var(--rac-scroll-track);
-    scrollbar-width: thin;
-    scrollbar-gutter: stable;
-    scroll-behavior: smooth;
-    scroll-padding-top: var(--rac-scroll-padding-top);
-    scroll-padding-bottom: var(--rac-scroll-padding-bottom);
-    z-index: 1;
-    transition:
-        border-color var(--rac-duration-fast),
-        background-color var(--rac-duration-fast),
-        opacity var(--rac-duration-base);
-}
-
-.rac-select-option {
-    transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
-    min-height: var(--rac-option-min-height);
-    padding: var(--rac-option-padding);
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-    cursor: pointer;
-}
-
-.rac-select-option:not(.rac-disabled-option):not(.rac-group-option):hover {
-    background-color: var(--rac-option-hover);
-}
-
-.rac-select-option.rac-highlighted {
-    background-color: var(--rac-option-highlight);
-}
-
-.rac-select-option.rac-selected {
-    background-color: var(--rac-option-selected);
-}
-
-.rac-select-option.rac-selected.rac-highlighted {
-    background-color: var(--rac-option-selected);
-}
-
-.rac-disabled-option {
-    cursor: not-allowed;
-    color: var(--rac-disabled-option-color);
-}
-
-.rac-invalid-option {
-    color: var(--rac-invalid-option-color);
-}
-
-.rac-true-option {
-    color: var(--rac-true-option-color);
-}
-
-.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);
-}
-
-.rac-disabled-group {
-    cursor: not-allowed;
-    color: var(--rac-disabled-group-color);
-}
-
-.rac-select-selected {
-    display: flex;
-    align-items: center;
-}
-
-.rac-multiple-selected-option {
-    border: var(--rac-multiple-selected-border);
-    border-radius: var(--rac-multiple-selected-radius);
-    min-height: var(--rac-multiple-selected-min-height);
-    transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
-
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    line-height: normal;
-    padding: var(--rac-multiple-selected-padding);
-    margin: var(--rac-multiple-selected-margin);
-    white-space: nowrap;
-}
-
-.rac-multiple-selected-option:hover {
-    background-color: color-mix(in srgb, CanvasText 6%, Canvas);
-}
-
-.rac-checkbox {
-    min-height: var(--rac-option-min-height);
-    min-width: var(--rac-option-min-height);
-    border: var(--rac-checkbox-border);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    height: 100%;
-    margin-right: var(--rac-checkbox-margin-right);
-}
-
-.rac-checkmark {
-    color: var(--rac-base-green);
-    opacity: 0;
-    max-width: 0;
-    max-height: 0;
-    transition: opacity var(--rac-duration-base), max-height var(--rac-duration-base), max-width var(--rac-duration-base);
-}
-
-.rac-checkmark.--checked {
-    opacity: 1;
-    max-height: var(--rac-option-min-height);
-    max-width: var(--rac-option-min-height);
-}

package/src/select.jsx

@@ -1,339 +0,0 @@
-import './select.css'
-import {XMarkIcon, ArrowUpIcon, CheckmarkIcon} from './icons'
-import {forwardRef, useImperativeHandle, useRef, useMemo, useState, useEffect, useCallback, useId, isValidElement, cloneElement} from 'react'
-import {makeId} from './makeId'
-
-import SelectJSX from './SelectJSX'
-import useSelect from './useSelect'
-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 === 'function' || (typeof Icon === 'object' && Icon.$$typeof)) {
-        const IconComponent = Icon
-        return <IconComponent {...defaultProps}/>
-    }
-    return null
-}
-
-// adding classes to style options according to their state
-const getOptionClassName = (element, index, highlightedIndex, selectedId, loadingTitle, loadMoreText, invalidOption, selectedIDs) => {
-    const multipleSelected = selectedIDs?.some(o => o.id === element.id)
-
-    if (element.groupHeader) {
-        return 'rac-select-option rac-group-option'
-    }
-
-    return [
-        'rac-select-option',
-        element.className,
-        (multipleSelected || 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,
-    visibility: externalVisibility,
-    ownBehavior = false,
-    alwaysOpen = false,
-    duration = 300,
-    easing = 'ease-out',
-    offset = 0,
-    animateOpacity = true,
-    style = {},
-    className = '',
-    ArrowIcon = ArrowUpIcon,
-    ClearIcon = XMarkIcon,
-    DelIcon = XMarkIcon,
-    CheckIcon = CheckmarkIcon,
-    hasMore = false,
-    loadMore = () => {console.warn('loadMore not implemented')},
-    loadButton = false,
-    loadButtonText = 'Load more',
-    loadMoreText = 'Loading',
-    selectedText = undefined,
-    loadOffset = 100,
-    loadAhead = 3,
-    childrenFirst = false,
-    groupsClosed = false,
-    optionsClassName = '',
-    ...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 => {
-            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 => {
-            const filtered = prev.filter(o => o.id !== id)
-            return filtered.length === prev.length ? prev : filtered
-        })
-    }, [])
-
-    // select visibility control
-    const visibility = alwaysOpen ? true : (ownBehavior ? !!externalVisibility : internalVisibility)
-    
-    const setVisibility = useCallback((newState) => {
-        if (alwaysOpen || ownBehavior) return
-        setInternalVisibility(newState)
-    }, [alwaysOpen, ownBehavior])
-
-    const logic = useSelectLogic({
-        ...props, visibility, setVisibility, jsxOptions, hasMore, 
-        loadButton, loadingTitle, loadMore, loadMoreText, setLoadingTitle, childrenFirst, groupsClosed
-    })
-
-    const {multiple, normalizedOptions, selected, selectOption, clear, removeOption, hasOptions, active, selectedValue, disabled, loading, error, placeholder, invalidOption, emptyText, disabledText, loadingText, errorText, expandedGroups, selectedIDs, setSelectedIds} = logic
-
-    const behavior = useSelect({setLoadingTitle, loadButton, loadButtonText, hasMore, loadMore, disabled, multiple, open: visibility, setOpen: setVisibility, options: normalizedOptions, selectOption, selected, loadOffset, loadAhead, expandedGroups})
-
-    const {handleListScroll, handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, setHighlightedIndex} = behavior
-
-    useImperativeHandle(ref, () => selectRef.current)
-
-    useEffect(() => {
-        if (!visibility) setAnimationFinished(false)
-    }, [visibility])
-
-    useEffect(() => {
-        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 domElement = document.getElementById(`opt-${selectId}-${makeId(option.id)}`)
-                domElement?.scrollIntoView({block: 'nearest'})
-            }
-        }
-    }, [highlightedIndex, visibility, animationFinished, normalizedOptions, selectId])
-
-    const hasActualValue = useMemo(() => (
-        selectedValue !== undefined && 
-        selectedValue !== null && 
-        !(Array.isArray(selectedValue) && selectedValue.length === 0) &&
-        !(typeof selectedValue === 'object' && Object.keys(selectedValue).length === 0)
-    ), [selectedValue])
-
-    const title = useMemo(() => {
-        if (error) return errorText
-        if (loading) return loadingText
-        if (disabled) return disabledText
-        if (hasActualValue && selectedText) return selectedText
-
-        if (selected) return selected.jsx ?? selected.name
-        
-        if (hasActualValue) {
-            const recovered = normalizedOptions.find(o => o.raw === selectedValue)
-            if (recovered) return recovered.name
-            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])
-
-    const renderOptions = useMemo(() => {
-        const nodes = []
-        let currentGroupChildren = []
-        let currentGroupName = null
-
-        const groupCounts = normalizedOptions.reduce((acc, opt) => {
-            if (opt.group) {
-                acc[opt.group] = (acc[opt.group] || 0) + 1
-            }
-            return acc
-        }, {})
-
-        const flushGroup = (name) => {
-            if (name === null || currentGroupChildren.length === 0) return
-            
-            nodes.push(
-                <SlideDown
-                    key={`slide-${name}`}
-                    visibility={expandedGroups.has(name)}
-                >
-                    {currentGroupChildren}
-                </SlideDown>
-            )
-            currentGroupChildren = []
-        }
-
-        const createOptionNode = (element, index) => (
-            <div
-                key={element.id}
-                id={`opt-${selectId}-${makeId(element.id)}`}
-                role='option'
-                aria-selected={selected?.id === element.id}
-                aria-disabled={element.disabled || element.loading}
-                className={getOptionClassName(element, index, highlightedIndex, selected?.id, loadingTitle, loadMoreText, invalidOption, selectedIDs)}
-                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>}
-                {multiple && !element.disabled ? 
-                    <div className='rac-checkbox'>
-                        {renderIcon(
-                            CheckmarkIcon, {
-                                className: `
-                                    rac-checkmark
-                                    ${selectedIDs?.some(o => o.id === element.id)
-                                        ?
-                                            '--checked'
-                                        :
-                                            ''
-                        }`})}
-                    </div> : null}
-                
-            </div>
-        )
-
-        normalizedOptions.forEach((element, index) => {
-            const isHeader = element.groupHeader
-            const belongsToGroup = !!element.group
-
-            if (isHeader || (!belongsToGroup && currentGroupName !== null)) {
-                flushGroup(currentGroupName)
-                if (!isHeader) currentGroupName = null
-            }
-
-            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',
-                            element.disabled && 'rac-disabled-group'
-                        ].filter(Boolean).join(' ')}
-                        onClick={(e) => selectOption(element, e)}
-                    >
-                        <span className='rac-group-title-text'>{element.name}</span>
-                        <SlideLeft
-                            visibility={hasChildren && !element.disabled}
-                            duration={duration}
-                            style={{display: 'grid'}}
-                        >
-                            <span className={`rac-group-arrow-wrapper ${open ? '--open' : ''}`}>
-                                {renderIcon(ArrowIcon, {className: 'rac-select-arrow-wrapper'})}
-                            </span>
-                        </SlideLeft>
-                    </div>
-                )
-            } 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
-            selectedText={selectedText}
-            selectRef={selectRef}
-            selectId={selectId}
-            selectedIDs={selectedIDs}
-            setSelectedIds={setSelectedIds}
-            multiple={multiple}
-            removeOption={removeOption}
-            optionsClassName={optionsClassName}
-            
-            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}
-            placeholder={placeholder}
-            className={className}
-            style={style}
-            duration={duration}
-            easing={easing}
-            offset={offset}
-            animateOpacity={animateOpacity}
-            unmount={unmount}
-            ArrowIcon={ArrowIcon}
-            ClearIcon={ClearIcon}
-            DelIcon={DelIcon}
-            hasMore={hasMore}
-            loadButton={loadButton}
-        />
-    )
-})
-
-export default Select

package/src/selectContext.js

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