react-animated-select 0.5.6 → 0.6.0

package/src/select.jsx

@@ -1,343 +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, selectedIDs})
-
-    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
-                    ??
-                <span className='rac-option-title'>
-                    {element.name}
-                </span>}
-                {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)

package/src/slideDown.jsx

@@ -1,36 +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`,
-                    paddingLeft: '1em'
-                }}
-                className='slideDown-enter-done'
-                tabIndex={-1}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default SlideDown

package/src/slideLeft.jsx

@@ -1,41 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef} from 'react'
-
-function SlideLeft({
-    visibility,
-    children,
-    duration = 300,
-    unmount,
-    style
-}) {
-    const nodeRef = useRef(null)
-
-    return (
-        <CSSTransition
-            in={visibility}
-            timeout={duration}
-            classNames='rac-slide-left'
-            unmountOnExit
-            nodeRef={nodeRef}
-            onEnter={() => (nodeRef.current.style.width = '0px')}
-            onEntering={() => (nodeRef.current.style.width = nodeRef.current.scrollWidth + 'px')}
-            onEntered={() => (nodeRef.current.style.width = 'auto')}
-            onExit={() => (nodeRef.current.style.width = nodeRef.current.scrollWidth + 'px')}
-            onExiting={() => (nodeRef.current.style.width = '0px')}
-            onExited={() => unmount?.()}
-        >
-            <div
-                ref={nodeRef}
-                style={{
-                    ...style,
-                    overflow: 'hidden',
-                    transition: `width ${duration}ms ease`
-                }}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default SlideLeft

package/src/useSelect.jsx

@@ -1,198 +0,0 @@
-import {useState, useRef, useCallback, useEffect, useMemo} from 'react'
-
-function useSelect({
-    disabled,
-    open,
-    setOpen,
-    options = [],
-    selectOption,
-    selected,
-    selectedIDs,
-    multiple,
-    hasMore,
-    loadMore,
-    loadButton,
-    loadButtonText,
-    setLoadingTitle,
-    loadOffset,
-    loadAhead,
-    expandedGroups
-}) {
-    const justFocused = useRef(false)
-    const lastWindowFocusTime = useRef(0)
-    const loadingTriggered = useRef(false)
-    const [highlightedIndex, setHighlightedIndex] = useState(-1)
-
-    // loading state synchronization
-    useEffect(() => {
-        // flag is reset if value of the loadButton or hasMore props has changed
-        loadingTriggered.current = false
-
-        if (loadButton) {
-            setLoadingTitle(loadButtonText)
-        }
-    }, [options.length, hasMore, loadButton, loadButtonText, setLoadingTitle])
-
-    // safely call loadMore prop
-    const safeLoadMore = useCallback(() => {
-        if (!hasMore || loadingTriggered.current) return
-        loadingTriggered.current = true
-        loadMore()
-    }, [hasMore, loadMore])
-
-    // calling a function when scrolling almost to the end;
-    // loadOffset is a prop indicating how many pixels before end loadMore will be called
-    const handleListScroll = useCallback((e) => {
-        if (loadButton || !hasMore || loadingTriggered.current) return
-
-        const {scrollTop, scrollHeight, clientHeight} = e.currentTarget
-        if (scrollHeight - scrollTop <= clientHeight + loadOffset) {
-            safeLoadMore()
-        }
-    }, [loadButton, hasMore, loadOffset, safeLoadMore])
-
-    // call a function when scrolling through options using keys;
-    // loadAhead prop how many options before the end it will be called
-    useEffect(() => {
-        if (!loadButton && open && hasMore && highlightedIndex >= options.length - loadAhead) {
-            safeLoadMore()
-        }
-    }, [highlightedIndex, open, hasMore, options.length, loadAhead, loadButton, safeLoadMore])
-
-    // force refocus blocking if the user exits the browser or the page
-    useEffect(() => {
-        const handleWindowFocus = () => {lastWindowFocusTime.current = Date.now()}
-        window.addEventListener('focus', handleWindowFocus)
-        return () => window.removeEventListener('focus', handleWindowFocus)
-    }, [])
-
-    // set highlighting to the first available option by default unless otherwise selected
-    useEffect(() => {
-        if (!open) {
-            setHighlightedIndex(-1)
-            return
-        }
-
-        // blocking the reset of an index if it is already within the array (exmpl after loading)
-        if (highlightedIndex >= 0 && highlightedIndex < options.length) {
-            if (!options[highlightedIndex] || options[highlightedIndex].hidden || options[highlightedIndex].groupHeader) {
-            } else return
-        }
-
-        let index = -1
-        if (selected && !multiple) {
-            const firstSelected = multiple ? selected[0] : selected
-            if (firstSelected) {
-                index = options.findIndex(o => o.id === firstSelected.id && !o.disabled && !o.hidden && !o.groupHeader)
-            }
-        }
-
-        if (multiple && selectedIDs.length) {
-            const ids = new Set(selectedIDs.map(o => o.id))
-            index = options.findIndex(
-                o =>
-                ids.has(o.id) &&
-                !o.disabled &&
-                !o.hidden &&
-                !o.groupHeader
-            )
-        }
-        
-        if (index === -1) {
-            index = options.findIndex(o => !o.disabled && !o.hidden && !o.groupHeader)
-        }
-        setHighlightedIndex(index)
-    }, [open, options, selected])
-
-    // find the next available option to switch to using the keyboard
-    const getNextIndex = useCallback((current, direction) => {
-        const isNavigable = (opt) => 
-            opt &&
-            !opt?.groupHeader &&
-            (!opt?.group || expandedGroups?.has(opt?.group)) &&
-            !opt?.disabled &&
-            !opt?.loading
-        const len = options.length
-        if (len === 0) return -1
-
-        let next = current
-        // я не шарю нихуя в математике
-        for (let i = 0; i < len; i++) {
-            next = (next + direction + len) % len
-
-            // if autoloading is active but loadButton is inactive, then infinite scrolling is blocked
-            if (!loadButton && hasMore) {
-                if (direction > 0 && next === 0) return current
-                if (direction < 0 && next === len - 1) return current
-            }
-
-            if (isNavigable(options[next])) return next
-        }
-        return current
-    }, [options, hasMore, loadButton, expandedGroups])
-
-    // closing the selector if focus is lost
-    const handleBlur = useCallback((e) => {
-        const clickedInsidePortal = e.relatedTarget?.closest('.rac-options')
-        
-        if (!e.currentTarget.contains(e.relatedTarget) && !clickedInsidePortal) {
-            setOpen(false)
-        }
-    }, [setOpen])
-
-    // opening the selector when receiving focus
-    const handleFocus = useCallback(() => {
-        if (disabled || document.hidden || (Date.now() - lastWindowFocusTime.current < 100)) return
-        
-        if (!open) {
-            setOpen(true)
-            justFocused.current = true
-            setTimeout(() => {justFocused.current = false}, 200)
-        }
-    }, [disabled, open, setOpen])
-
-    // processing toggle click on select
-    const handleToggle = useCallback((e) => {
-        if (disabled || e.target.closest('.rac-select-cancel') || justFocused.current) return
-        setOpen(!open)
-    }, [disabled, open, setOpen])
-
-    // hotkey processing
-    const handleKeyDown = useCallback((e) => {
-        if (disabled) return
-
-        switch (e.key) {
-            case 'Enter':
-            case ' ':
-                e.preventDefault()
-                if (open) {
-                    if (highlightedIndex !== -1 && options[highlightedIndex]) {
-                        selectOption(options[highlightedIndex], e)
-                    }
-                } else setOpen(true)
-                break
-            case 'Escape':
-                e.preventDefault()
-                setOpen(false)
-                break
-            case 'ArrowDown':
-                e.preventDefault()
-                open ? setHighlightedIndex(prev => getNextIndex(prev, 1)) : setOpen(true)
-                break
-            case 'ArrowUp':
-                e.preventDefault()
-                open ? setHighlightedIndex(prev => getNextIndex(prev, -1)) : setOpen(true)
-                break
-            case 'Tab':
-                if (open) setOpen(false)
-                break
-        }
-    }, [disabled, open, setOpen, highlightedIndex, options, selectOption, getNextIndex])
-
-    return useMemo(() => ({
-        handleBlur, handleFocus, handleToggle, handleKeyDown,
-        highlightedIndex, setHighlightedIndex, handleListScroll
-    }), [handleBlur, handleFocus, handleToggle, handleKeyDown, highlightedIndex, handleListScroll])
-}
-
-export default useSelect