@alphakits/ui 2.0.12 → 2.1.0

package/dist/select/components/base-select/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/select/components/base-select/component.tsx"],"sourcesContent":["/* eslint-disable complexity */\n/* eslint-disable consistent-return */\n/* eslint-disable @typescript-eslint/ban-types */\nimport React, {\n    FocusEvent,\n    forwardRef,\n    KeyboardEvent,\n    MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n} from 'react';\n// useLayoutEffect не нужен для ширины\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\nimport {\n    useCombobox,\n    useMultipleSelection,\n    UseMultipleSelectionProps,\n    UseMultipleSelectionState,\n} from 'downshift';\nimport { ResizeObserver } from 'resize-observer';\n\nimport { getDataTestId } from '../../../__internal/utils/getDataTestId';\nimport { Popover } from '../../../popover';\nimport { BaseSelectProps, OptionShape } from '../../typings';\nimport { processOptions } from '../../utils';\nimport { NativeSelect } from '../native-select';\n\nimport styles from './index.module.css';\n\nexport const BaseSelect = forwardRef<HTMLDivElement, BaseSelectProps>(\n    (\n        {\n            dataTestId = '',\n            className,\n            fieldClassName,\n            filteredOptions,\n            popoverOuterClassname,\n            optionsListClassName,\n            optionClassName,\n            options,\n            actionButton,\n            autocomplete = false,\n            multiple = false,\n            allowUnselect = false,\n            disabled = false,\n            closeOnSelect = !multiple,\n            circularNavigation = false,\n            nativeSelect = false,\n            defaultOpen = false,\n            open: openProp,\n            popoverPosition = 'bottom-start',\n            offset,\n            withArrow,\n            preventFlip = true,\n            optionsListWidth = 'field',\n            name,\n            id,\n            required,\n            selected,\n            size = 'm',\n            optionsSize = size,\n            error,\n            hint,\n            block = true,\n            label,\n            placeholder,\n            fieldProps = {},\n            optionsListProps = {},\n            optionProps = {},\n            valueRenderer,\n            onChange,\n            onOpen,\n            onFocus,\n            onBlur,\n            onScroll,\n            Arrow,\n            Field = () => null,\n            OptionsList = () => null,\n            Optgroup = () => null,\n            Option = () => null,\n            updatePopover,\n            zIndexPopover,\n            showEmptyOptionsList = false,\n            visibleOptions,\n        },\n        ref,\n    ) => {\n        const rootRef = useRef<HTMLLabelElement>(null);\n        const fieldRef = useRef<HTMLInputElement>(null);\n        const listRef = useRef<HTMLDivElement>(null);\n\n        const itemToString = (option: OptionShape) => (option ? option.key?.toString() : '');\n\n        const { flatOptions, selectedOptions } = useMemo(\n            () => processOptions(options || [], selected),\n            [options, selected],\n        );\n\n        const useMultipleSelectionProps: UseMultipleSelectionProps<OptionShape> = {\n            itemToString,\n            onSelectedItemsChange: (changes) => {\n                if (onChange) {\n                    const { selectedItems = [] } = changes;\n\n                    onChange({\n                        selectedMultiple: selectedItems,\n                        selected: selectedItems.length ? selectedItems[0] : null,\n                        name,\n                    });\n                }\n            },\n            stateReducer: (state, actionAndChanges) => {\n                const { type, changes } = actionAndChanges;\n\n                if (\n                    !allowUnselect &&\n          type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace\n                ) {\n                    return state;\n                }\n\n                return changes as UseMultipleSelectionState<OptionShape>;\n            },\n        };\n\n        if (selected !== undefined) {\n            useMultipleSelectionProps.selectedItems = selectedOptions;\n        }\n\n        const {\n            selectedItems,\n            addSelectedItem,\n            setSelectedItems,\n            removeSelectedItem,\n            getDropdownProps,\n        } = useMultipleSelection(useMultipleSelectionProps);\n\n        const {\n            isOpen: open,\n            getMenuProps,\n            getInputProps,\n            getItemProps,\n            getComboboxProps,\n            getLabelProps,\n            highlightedIndex,\n            toggleMenu,\n            openMenu,\n        } = useCombobox<OptionShape>({\n            id,\n            isOpen: openProp,\n            circularNavigation,\n            items: flatOptions,\n            itemToString,\n            defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,\n            onIsOpenChange: (changes) => {\n                if (onOpen) {\n                    setTimeout(() => {\n                        onOpen({ open: changes.isOpen, name });\n                    }, 0);\n                }\n            },\n            stateReducer: (state, actionAndChanges) => {\n                const { type, changes } = actionAndChanges;\n                const { selectedItem } = changes;\n\n                switch (type) {\n                    case useCombobox.stateChangeTypes.InputKeyDownEnter:\n                    case useCombobox.stateChangeTypes.ItemClick:\n                        if (selectedItem && !selectedItem.disabled) {\n                            const alreadySelected = selectedItems.includes(selectedItem);\n                            const allowRemove = allowUnselect || (multiple && selectedItems.length > 1);\n\n                            if (alreadySelected && allowRemove) {\n                                removeSelectedItem(selectedItem);\n                            }\n\n                            if (!alreadySelected) {\n                                if (multiple) {\n                                    addSelectedItem(selectedItem);\n                                } else {\n                                    setSelectedItems([selectedItem]);\n                                }\n                            }\n                        }\n\n                        return {\n                            ...changes,\n                            isOpen: !closeOnSelect,\n                            highlightedIndex:\n                state.isOpen && !closeOnSelect ? state.highlightedIndex : changes.highlightedIndex,\n                        };\n                    default:\n                        return changes;\n                }\n            },\n        });\n\n        // props для контейнера списка (Popover)\n        const menuProps = (getMenuProps as (options: object, additional: object) => any)(\n            { ref: listRef },\n            { suppressRefError: true },\n        );\n        const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));\n\n        const handleFieldFocus = (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => {\n            onFocus?.(event);\n            if (autocomplete && !open) openMenu();\n        };\n\n        const handleFieldBlur = (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => {\n            const rt = (event.relatedTarget || document.activeElement) as HTMLElement | null;\n            const focusMovedIntoList = !!(rt && listRef.current?.contains(rt));\n\n            if (!focusMovedIntoList) {\n                onBlur?.(event);\n                inputProps.onBlur(event);\n            }\n        };\n\n        const handleFieldKeyDown = (event: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {\n            inputProps.onKeyDown(event);\n            if (autocomplete && !open && event.key.length === 1) {\n                openMenu();\n            }\n\n            if (\n                [' ', 'Enter'].includes(event.key) &&\n        !autocomplete &&\n        !nativeSelect &&\n        (event.target as HTMLElement).tagName !== 'INPUT'\n            ) {\n                event.preventDefault();\n                if (!open || highlightedIndex === -1) toggleMenu();\n            }\n        };\n\n        const handleFieldClick = (event: MouseEvent) => {\n            // если событие пришло изнутри списка — игнорим (важно для тач)\n            if (listRef.current && listRef.current.contains(event.target as Node)) return;\n\n            if (!autocomplete || (event.target as HTMLElement).tagName !== 'INPUT') {\n                toggleMenu();\n            } else {\n                openMenu();\n            }\n        };\n\n        const handleNativeSelectChange = useCallback(\n            (event: React.ChangeEvent<HTMLSelectElement>) => {\n                setSelectedItems(\n                    [...(event as any)?.target.options].reduce<OptionShape[]>(\n                        (acc, option, index) => (option.selected ? acc.concat(flatOptions[index]) : acc),\n                        [],\n                    ),\n                );\n            },\n            [flatOptions, setSelectedItems],\n        );\n\n        const WrappedOption = useCallback(\n            ({ option, index, ...rest }: { option: OptionShape; index: number }) => {\n                if (!option) return null;\n\n                const itemIndex = flatOptions.findIndex((o) => o.key === option?.key);\n                const dsItem = itemIndex === -1 ? null : flatOptions[itemIndex];\n\n                if (!dsItem) return null;\n\n                const innerProps = getItemProps({\n                    item: dsItem,\n                    index: itemIndex,\n                    disabled: option.disabled,\n                    // десктоп\n                    onMouseDown: (e: MouseEvent) => e.preventDefault(),\n                    // мобилки: не даём событию «пробить» до поля и повторно открыть меню\n                    onPointerDown: (e: any) => { e.preventDefault(); e.stopPropagation(); },\n                    onTouchStart: (e: any) => { e.preventDefault(); e.stopPropagation(); },\n                    onClick: (e: any) => { e.stopPropagation(); },\n                });\n\n                return (\n                    <React.Fragment key={ option.key }>\n                        { Option({\n                            ...(optionProps as object),\n                            ...rest,\n                            className: optionClassName,\n                            innerProps,\n                            index,\n                            option,\n                            size: optionsSize,\n                            disabled: option.disabled,\n                            highlighted: itemIndex === highlightedIndex,\n                            selected: selectedItems.includes(option),\n                        }) }\n                    </React.Fragment>\n                );\n            },\n            [\n                optionProps,\n                flatOptions,\n                optionClassName,\n                getItemProps,\n                optionsSize,\n                highlightedIndex,\n                selectedItems,\n                Option,\n            ],\n        );\n\n        // ——— управление открытием\n        useEffect(() => {\n            if (defaultOpen) openMenu();\n        }, [defaultOpen, openMenu]);\n\n        useEffect(() => {\n            if (openProp === true) openMenu();\n            // если нужно явно закрывать по false — можно вызвать здесь closeMenu()\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [openProp]);\n\n        // ——— ширина списка (без цикла)\n        const lastWidthRef = useRef<number | null>(null);\n        const debounceRef = useRef<number | null>(null);\n\n        const calcOptionsListWidth = useCallback(() => {\n            if (!listRef.current) return;\n\n            const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';\n            const w = rootRef.current ? Math.round(rootRef.current.getBoundingClientRect().width) : 0;\n\n            if (lastWidthRef.current !== w) {\n                lastWidthRef.current = w;\n                (listRef.current.style as any)[widthAttr] = `${w}px`;\n            }\n        }, [optionsListWidth]);\n\n        useEffect(() => {\n            if (!open) return;\n\n            const observer = new ResizeObserver(() => {\n                if (debounceRef.current) window.clearTimeout(debounceRef.current);\n                debounceRef.current = window.setTimeout(() => {\n                    calcOptionsListWidth();\n                }, 50);\n            });\n\n            if (rootRef.current) observer.observe(rootRef.current);\n\n            // первичный расчёт\n            calcOptionsListWidth();\n\n            return () => {\n                observer.disconnect();\n                if (debounceRef.current) window.clearTimeout(debounceRef.current);\n                debounceRef.current = null;\n            };\n        }, [open, calcOptionsListWidth]);\n\n        useEffect(() => {\n            if (open) calcOptionsListWidth();\n        }, [open, options, selectedItems, calcOptionsListWidth]);\n\n        const renderValue = useCallback(\n            () =>\n                selectedItems.map((option) => (\n                    <input type=\"hidden\" name={ name } value={ option.key } key={ option.key } />\n                )),\n            [selectedItems, name],\n        );\n\n        const renderNativeSelect = useCallback(() => {\n            const value = multiple\n                ? selectedItems.map((option) => option.key?.toString())\n                : (selectedItems[0] || {}).key?.toString();\n\n            return (\n                <NativeSelect\n                    className={ styles.nativeSelect }\n                    disabled={ disabled }\n                    multiple={ multiple }\n                    name={ name }\n                    value={ value }\n                    onChange={ handleNativeSelectChange }\n                    options={ options }\n                />\n            );\n        }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options]);\n\n        const needRenderOptionsList =\n      flatOptions.length > 0 || showEmptyOptionsList || !!actionButton;\n\n        return (\n            <div\n                { ...getComboboxProps({\n                    ref: rootRef,\n                    ...(disabled && { 'aria-disabled': true }),\n                    className: cn(styles.component, { [styles.block]: block }, className),\n                }) }\n                onKeyDown={ disabled ? undefined : handleFieldKeyDown }\n                tabIndex={ -1 }\n                id=\"slect_wrapper\"\n                data-test-id={ getDataTestId('combobox', dataTestId) }\n            >\n                { nativeSelect && renderNativeSelect() }\n\n                <Field\n                    selectedMultiple={ selectedItems }\n                    selected={ selectedItems[0] }\n                    multiple={ multiple }\n                    open={ open }\n                    disabled={ disabled }\n                    size={ size }\n                    placeholder={ placeholder }\n                    label={ label && <span { ...getLabelProps() }>{ required ? `${label} *` : label }</span> }\n                    Arrow={ Arrow && <Arrow open={ open } /> }\n                    error={ error }\n                    hint={ hint }\n                    valueRenderer={ valueRenderer }\n                    className={ fieldClassName }\n                    innerProps={ {\n                        onBlur: handleFieldBlur,\n                        onFocus: disabled ? undefined : handleFieldFocus,\n                        onClick: disabled ? undefined : handleFieldClick,\n                        tabIndex: nativeSelect || disabled ? -1 : 0,\n                        ref: mergeRefs([inputProps.ref]),\n                        id: inputProps.id,\n                        'aria-labelledby': inputProps['aria-labelledby'],\n                        'aria-controls': inputProps['aria-controls'],\n                        'aria-autocomplete': autocomplete ? inputProps['aria-autocomplete'] : undefined,\n                    } }\n                    dataTestId={ getDataTestId('field', dataTestId) }\n                    { ...fieldProps }\n                />\n\n                { name && !nativeSelect && renderValue() }\n\n                { !nativeSelect && (\n                    <Popover\n                        open={ open }\n                        withTransition={ false }\n                        anchorElement={ fieldRef.current as unknown as HTMLElement }\n                        position={ popoverPosition }\n                        offset={ offset }\n                        withArrow={ withArrow }\n                        preventFlip={ preventFlip }\n                        className={ popoverOuterClassname }\n                        popperClassName={ styles.popoverInner }\n                        update={ updatePopover }\n                        zIndex={ zIndexPopover }\n                    >\n                        { needRenderOptionsList && (\n                            <div { ...menuProps } className={ cn(optionsListClassName, styles.optionsList) }>\n                                <OptionsList\n                                    { ...optionsListProps }\n                                    flatOptions={ flatOptions }\n                                    highlightedIndex={ highlightedIndex }\n                                    open={ open }\n                                    size={ size }\n                                    toggleMenu={ toggleMenu }\n                                    actionButton={ actionButton }\n                                    options={ filteredOptions ?? options }\n                                    Optgroup={ Optgroup }\n                                    Option={ WrappedOption }\n                                    visibleOptions={ visibleOptions }\n                                    onScroll={ onScroll }\n                                    dataTestId={ getDataTestId('options-list', dataTestId) }\n                                />\n                            </div>\n                        ) }\n                    </Popover>\n                ) }\n            </div>\n        );\n    },\n);\n"],"names":["BaseSelect","forwardRef","dataTestId","className","fieldClassName","filteredOptions","popoverOuterClassname","optionsListClassName","optionClassName","options","actionButton","autocomplete","multiple","allowUnselect","disabled","closeOnSelect","circularNavigation","nativeSelect","defaultOpen","openProp","popoverPosition","offset","withArrow","preventFlip","optionsListWidth","name","id","required","selected","size","optionsSize","error","hint","block","label","placeholder","fieldProps","optionsListProps","optionProps","valueRenderer","onChange","onOpen","onFocus","onBlur","onScroll","Arrow","Field","OptionsList","Optgroup","Option","updatePopover","zIndexPopover","showEmptyOptionsList","visibleOptions","ref","rootRef","useRef","fieldRef","listRef","itemToString","option","_a","flatOptions","selectedOptions","useMemo","processOptions","useMultipleSelectionProps","changes","selectedItems","state","actionAndChanges","type","useMultipleSelection","addSelectedItem","setSelectedItems","removeSelectedItem","getDropdownProps","open","getMenuProps","getInputProps","getItemProps","getComboboxProps","getLabelProps","highlightedIndex","toggleMenu","openMenu","useCombobox","selectedItem","alreadySelected","allowRemove","menuProps","inputProps","mergeRefs","handleFieldFocus","event","handleFieldBlur","rt","handleFieldKeyDown","handleFieldClick","handleNativeSelectChange","useCallback","acc","index","WrappedOption","rest","itemIndex","o","dsItem","innerProps","e","jsx","React","useEffect","lastWidthRef","debounceRef","calcOptionsListWidth","widthAttr","w","observer","ResizeObserver","renderValue","renderNativeSelect","value","NativeSelect","styles","needRenderOptionsList","jsxs","cn","getDataTestId","Popover"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../../src/select/components/base-select/component.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-types */\nimport React, {\n    FocusEvent,\n    forwardRef,\n    KeyboardEvent,\n    MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\nimport {\n    useCombobox,\n    useMultipleSelection,\n    UseMultipleSelectionProps,\n    UseMultipleSelectionState,\n} from 'downshift';\nimport { ResizeObserver } from 'resize-observer';\n\nimport { getDataTestId } from '../../../__internal/utils/getDataTestId';\nimport { Popover } from '../../../popover';\nimport { BaseSelectProps, OptionShape } from '../../typings';\nimport { processOptions } from '../../utils';\nimport { NativeSelect } from '../native-select';\n\nimport styles from './index.module.css';\n\nconst itemToString = (option: OptionShape) => (option ? option.key?.toString() : '');\n\nconst useLatest = <T,>(value: T) => {\n    const ref = useRef(value);\n    ref.current = value;\n\n    return ref;\n};\n\nexport const BaseSelect = forwardRef<HTMLDivElement, BaseSelectProps>(\n    (\n        {\n            dataTestId = '',\n            className,\n            fieldClassName,\n            filteredOptions,\n            popoverOuterClassname,\n            optionsListClassName,\n            optionClassName,\n            options,\n            actionButton,\n            autocomplete = false,\n            multiple = false,\n            allowUnselect = false,\n            disabled = false,\n            closeOnSelect = !multiple,\n            circularNavigation = false,\n            nativeSelect = false,\n            defaultOpen = false,\n            open: openProp,\n            popoverPosition = 'bottom-start',\n            offset,\n            withArrow,\n            preventFlip = true,\n            optionsListWidth = 'field',\n            name,\n            id,\n            required,\n            selected,\n            size = 'm',\n            optionsSize = size,\n            error,\n            hint,\n            block = true,\n            label,\n            placeholder,\n            fieldProps = {},\n            optionsListProps = {},\n            optionProps = {},\n            valueRenderer,\n            onChange,\n            onOpen,\n            onFocus,\n            onBlur,\n            onScroll,\n            Arrow,\n            Field = () => null,\n            OptionsList = () => null,\n            Optgroup = () => null,\n            Option = () => null,\n            updatePopover,\n            zIndexPopover,\n            showEmptyOptionsList = false,\n            visibleOptions,\n        },\n        ref,\n    ) => {\n        const rootRef = useRef<HTMLLabelElement>(null);\n        const fieldRef = useRef<HTMLInputElement>(null);\n        const listRef = useRef<HTMLDivElement>(null);\n        const lastWidthRef = useRef<number | null>(null);\n        const debounceRef = useRef<number | null>(null);\n\n        const onChangeRef = useLatest(onChange);\n        const onOpenRef = useLatest(onOpen);\n\n        const { flatOptions, selectedOptions } = useMemo(\n            () => processOptions(options || [], selected),\n            [options, selected],\n        );\n\n        const optionIndexByKey = useMemo(() => {\n            const map = new Map<string | number, number>();\n\n            flatOptions.forEach((option, index) => {\n                map.set(option.key, index);\n            });\n\n            return map;\n        }, [flatOptions]);\n\n        const useMultipleSelectionProps: UseMultipleSelectionProps<OptionShape> = useMemo(\n            () => ({\n                itemToString,\n                onSelectedItemsChange: (changes) => {\n                    const { selectedItems = [] } = changes;\n\n                    onChangeRef.current?.({\n                        selectedMultiple: selectedItems,\n                        selected: selectedItems.length ? selectedItems[0] : null,\n                        name,\n                    });\n                },\n                stateReducer: (state, actionAndChanges) => {\n                    const { type, changes } = actionAndChanges;\n\n                    if (\n                        !allowUnselect &&\n                        type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace\n                    ) {\n                        return state;\n                    }\n\n                    return changes as UseMultipleSelectionState<OptionShape>;\n                },\n                ...(selected !== undefined ? { selectedItems: selectedOptions } : {}),\n            }),\n            [allowUnselect, name, selected, selectedOptions, onChangeRef],\n        );\n\n        const {\n            selectedItems,\n            addSelectedItem,\n            setSelectedItems,\n            removeSelectedItem,\n            getDropdownProps,\n        } = useMultipleSelection(useMultipleSelectionProps);\n\n        const selectedKeysSet = useMemo(\n            () => new Set(selectedItems.map((item) => item.key)),\n            [selectedItems],\n        );\n\n        const {\n            isOpen: open,\n            getMenuProps,\n            getInputProps,\n            getItemProps,\n            getComboboxProps,\n            getLabelProps,\n            highlightedIndex,\n            toggleMenu,\n            openMenu,\n        } = useCombobox<OptionShape>({\n            id,\n            isOpen: openProp,\n            circularNavigation,\n            items: flatOptions,\n            itemToString,\n            defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,\n            onIsOpenChange: (changes) => {\n                if (onOpenRef.current) {\n                    setTimeout(() => {\n                        onOpenRef.current?.({ open: changes.isOpen, name });\n                    }, 0);\n                }\n            },\n            stateReducer: (state, actionAndChanges) => {\n                const { type, changes } = actionAndChanges;\n                const { selectedItem } = changes;\n\n                switch (type) {\n                    case useCombobox.stateChangeTypes.InputKeyDownEnter:\n                    case useCombobox.stateChangeTypes.ItemClick:\n                        if (selectedItem && !selectedItem.disabled) {\n                            const alreadySelected = selectedKeysSet.has(selectedItem.key);\n                            const allowRemove = allowUnselect || (multiple && selectedItems.length > 1);\n\n                            if (alreadySelected && allowRemove) {\n                                removeSelectedItem(selectedItem);\n                            }\n\n                            if (!alreadySelected) {\n                                if (multiple) {\n                                    addSelectedItem(selectedItem);\n                                } else {\n                                    setSelectedItems([selectedItem]);\n                                }\n                            }\n                        }\n\n                        return {\n                            ...changes,\n                            isOpen: !closeOnSelect,\n                            highlightedIndex:\n                                state.isOpen && !closeOnSelect\n                                    ? state.highlightedIndex\n                                    : changes.highlightedIndex,\n                        };\n                    default:\n                        return changes;\n                }\n            },\n        });\n\n        const menuProps = (getMenuProps as (options: object, additional: object) => any)(\n            { ref: listRef },\n            { suppressRefError: true },\n        );\n        const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));\n\n        const handleFieldFocus = (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => {\n            onFocus?.(event);\n            if (autocomplete && !open) openMenu();\n        };\n\n        const handleFieldBlur = (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => {\n            const rt = (event.relatedTarget || document.activeElement) as HTMLElement | null;\n            const focusMovedIntoList = !!(rt && listRef.current?.contains(rt));\n\n            if (!focusMovedIntoList) {\n                onBlur?.(event);\n                inputProps.onBlur(event);\n            }\n        };\n\n        const handleFieldKeyDown = (event: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {\n            inputProps.onKeyDown(event);\n            if (autocomplete && !open && event.key.length === 1) {\n                openMenu();\n            }\n\n            if (\n                [' ', 'Enter'].includes(event.key) &&\n                !autocomplete &&\n                !nativeSelect &&\n                (event.target as HTMLElement).tagName !== 'INPUT'\n            ) {\n                event.preventDefault();\n                if (!open || highlightedIndex === -1) toggleMenu();\n            }\n        };\n\n        const handleFieldClick = (event: MouseEvent) => {\n            if (listRef.current?.contains(event.target as Node)) return;\n\n            if (!autocomplete || (event.target as HTMLElement).tagName !== 'INPUT') {\n                toggleMenu();\n            } else {\n                openMenu();\n            }\n        };\n\n        const handleNativeSelectChange = useCallback(\n            (event: React.ChangeEvent<HTMLSelectElement>) => {\n                setSelectedItems(\n                    Array.from(event.target.options).reduce<OptionShape[]>(\n                        (acc, option, index) => (option.selected ? acc.concat(flatOptions[index]) : acc),\n                        [],\n                    ),\n                );\n            },\n            [flatOptions, setSelectedItems],\n        );\n\n        const WrappedOption = useCallback(\n            ({ option, index, ...rest }: { option: OptionShape; index: number }) => {\n                if (!option) return null;\n\n                const itemIndex = optionIndexByKey.get(option.key);\n\n                if (itemIndex === undefined) return null;\n\n                const dsItem = flatOptions[itemIndex];\n                const innerProps = getItemProps({\n                    item: dsItem,\n                    index: itemIndex,\n                    disabled: option.disabled,\n                    onMouseDown: (e: MouseEvent) => e.preventDefault(),\n                    onPointerDown: (e: React.PointerEvent) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                    },\n                    onTouchStart: (e: React.TouchEvent) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                    },\n                    onClick: (e: React.MouseEvent) => {\n                        e.stopPropagation();\n                    },\n                });\n\n                return (\n                    <React.Fragment key={ option.key }>\n                        { Option({\n                            ...(optionProps as object),\n                            ...rest,\n                            className: optionClassName,\n                            innerProps,\n                            index,\n                            option,\n                            size: optionsSize,\n                            disabled: option.disabled,\n                            highlighted: itemIndex === highlightedIndex,\n                            selected: selectedKeysSet.has(option.key),\n                        }) as React.ReactNode }\n                    </React.Fragment>\n                );\n            },\n            [\n                optionProps,\n                flatOptions,\n                optionIndexByKey,\n                optionClassName,\n                getItemProps,\n                optionsSize,\n                highlightedIndex,\n                selectedKeysSet,\n                Option,\n            ],\n        );\n\n        useEffect(() => {\n            if (defaultOpen) openMenu();\n        }, [defaultOpen, openMenu]);\n\n        useEffect(() => {\n            if (openProp === true) openMenu();\n        }, [openProp, openMenu]);\n\n        const calcOptionsListWidth = useCallback(() => {\n            if (!listRef.current || !rootRef.current) return;\n\n            const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';\n            const w = Math.round(rootRef.current.getBoundingClientRect().width);\n\n            if (lastWidthRef.current !== w) {\n                lastWidthRef.current = w;\n                listRef.current.style[widthAttr] = `${w}px`;\n            }\n        }, [optionsListWidth]);\n\n        useEffect(() => {\n            if (!open || !rootRef.current) return;\n\n            const scheduleWidthUpdate = () => {\n                if (debounceRef.current) window.clearTimeout(debounceRef.current);\n                debounceRef.current = window.setTimeout(calcOptionsListWidth, 50);\n            };\n\n            const observer = new ResizeObserver(scheduleWidthUpdate);\n\n            observer.observe(rootRef.current);\n            calcOptionsListWidth();\n\n            return () => {\n                observer.disconnect();\n                if (debounceRef.current) window.clearTimeout(debounceRef.current);\n                debounceRef.current = null;\n            };\n        }, [open, calcOptionsListWidth, options, selectedItems]);\n\n        const nativeSelectValue = multiple\n            ? selectedItems.map((option) => option.key?.toString())\n            : selectedItems[0]?.key?.toString();\n\n        const needRenderOptionsList =\n            flatOptions.length > 0 || showEmptyOptionsList || !!actionButton;\n\n        const labelNode = label ? (\n            <span { ...getLabelProps() }>{ required ? `${label} *` : label }</span>\n        ) : undefined;\n\n        return (\n            <div\n                { ...getComboboxProps({\n                    ref: rootRef,\n                    ...(disabled && { 'aria-disabled': true }),\n                    className: cn(styles.component, { [styles.block]: block }, className),\n                }) }\n                onKeyDown={ disabled ? undefined : handleFieldKeyDown }\n                tabIndex={ -1 }\n                id=\"slect_wrapper\"\n                data-test-id={ getDataTestId('combobox', dataTestId) }\n            >\n                { nativeSelect && (\n                    <NativeSelect\n                        className={ styles.nativeSelect }\n                        disabled={ disabled }\n                        multiple={ multiple }\n                        name={ name }\n                        value={ nativeSelectValue }\n                        onChange={ handleNativeSelectChange }\n                        options={ options }\n                    />\n                ) }\n\n                <Field\n                    selectedMultiple={ selectedItems }\n                    selected={ selectedItems[0] }\n                    multiple={ multiple }\n                    open={ open }\n                    disabled={ disabled }\n                    size={ size }\n                    placeholder={ placeholder }\n                    label={ labelNode }\n                    Arrow={ Arrow && <Arrow open={ open } /> }\n                    error={ error }\n                    hint={ hint }\n                    valueRenderer={ valueRenderer }\n                    className={ fieldClassName }\n                    innerProps={ {\n                        onBlur: handleFieldBlur,\n                        onFocus: disabled ? undefined : handleFieldFocus,\n                        onClick: disabled ? undefined : handleFieldClick,\n                        tabIndex: nativeSelect || disabled ? -1 : 0,\n                        ref: mergeRefs([inputProps.ref]),\n                        id: inputProps.id,\n                        'aria-labelledby': inputProps['aria-labelledby'],\n                        'aria-controls': inputProps['aria-controls'],\n                        'aria-autocomplete': autocomplete ? inputProps['aria-autocomplete'] : undefined,\n                    } }\n                    dataTestId={ getDataTestId('field', dataTestId) }\n                    { ...fieldProps }\n                />\n\n                { name && !nativeSelect && selectedItems.map((option) => (\n                    <input type=\"hidden\" name={ name } value={ option.key } key={ option.key } />\n                )) }\n\n                { !nativeSelect && (\n                    <Popover\n                        open={ open }\n                        withTransition={ false }\n                        anchorElement={ fieldRef.current as unknown as HTMLElement }\n                        position={ popoverPosition }\n                        offset={ offset }\n                        withArrow={ withArrow }\n                        preventFlip={ preventFlip }\n                        className={ popoverOuterClassname }\n                        popperClassName={ styles.popoverInner }\n                        update={ updatePopover }\n                        zIndex={ zIndexPopover }\n                    >\n                        { needRenderOptionsList && (\n                            <div { ...menuProps } className={ cn(optionsListClassName, styles.optionsList) }>\n                                <OptionsList\n                                    { ...optionsListProps }\n                                    flatOptions={ flatOptions }\n                                    highlightedIndex={ highlightedIndex }\n                                    open={ open }\n                                    size={ size }\n                                    toggleMenu={ toggleMenu }\n                                    actionButton={ actionButton }\n                                    options={ filteredOptions ?? options }\n                                    Optgroup={ Optgroup }\n                                    Option={ WrappedOption }\n                                    visibleOptions={ visibleOptions }\n                                    onScroll={ onScroll }\n                                    dataTestId={ getDataTestId('options-list', dataTestId) }\n                                />\n                            </div>\n                        ) }\n                    </Popover>\n                ) }\n            </div>\n        );\n    },\n);\n"],"names":["itemToString","option","_a","useLatest","value","ref","useRef","BaseSelect","forwardRef","dataTestId","className","fieldClassName","filteredOptions","popoverOuterClassname","optionsListClassName","optionClassName","options","actionButton","autocomplete","multiple","allowUnselect","disabled","closeOnSelect","circularNavigation","nativeSelect","defaultOpen","openProp","popoverPosition","offset","withArrow","preventFlip","optionsListWidth","name","id","required","selected","size","optionsSize","error","hint","block","label","placeholder","fieldProps","optionsListProps","optionProps","valueRenderer","onChange","onOpen","onFocus","onBlur","onScroll","Arrow","Field","OptionsList","Optgroup","Option","updatePopover","zIndexPopover","showEmptyOptionsList","visibleOptions","rootRef","fieldRef","listRef","lastWidthRef","debounceRef","onChangeRef","onOpenRef","flatOptions","selectedOptions","useMemo","processOptions","optionIndexByKey","map","index","useMultipleSelectionProps","changes","selectedItems","state","actionAndChanges","type","useMultipleSelection","addSelectedItem","setSelectedItems","removeSelectedItem","getDropdownProps","selectedKeysSet","item","open","getMenuProps","getInputProps","getItemProps","getComboboxProps","getLabelProps","highlightedIndex","toggleMenu","openMenu","useCombobox","selectedItem","alreadySelected","allowRemove","menuProps","inputProps","mergeRefs","handleFieldFocus","event","handleFieldBlur","rt","handleFieldKeyDown","handleFieldClick","handleNativeSelectChange","useCallback","acc","WrappedOption","rest","itemIndex","dsItem","innerProps","e","jsx","React","useEffect","calcOptionsListWidth","widthAttr","w","scheduleWidthUpdate","observer","ResizeObserver","nativeSelectValue","_b","needRenderOptionsList","labelNode","jsxs","cn","styles","getDataTestId","NativeSelect","Popover"],"mappings":"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"}

package/dist/select/components/checkmark/component.d.ts

@@ -1,2 +1,3 @@
+import { default as React } from 'react';
 import { CheckmarkProps } from '../../typings';
-export declare const Checkmark: ({ selected }: CheckmarkProps) => JSX.Element;
+export declare const Checkmark: ({ selected }: CheckmarkProps) => React.JSX.Element;

package/dist/select/components/field/component.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { FormControlProps } from '../../../form-control';
 import { SelectFieldProps as BaseFieldProps } from '../../typings';
-export declare const SelectField: ({ size, open, multiple, error, hint, disabled, label, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, Arrow, innerProps, dataTestId, fieldClassName, ...restProps }: BaseFieldProps & FormControlProps) => JSX.Element;
+export declare const SelectField: ({ size, open, multiple, error, hint, disabled, label, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, Arrow, innerProps, dataTestId, fieldClassName, ...restProps }: BaseFieldProps & FormControlProps) => React.JSX.Element;

package/dist/select/components/field/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/select/components/field/component.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { FormControl, FormControlProps } from '../../../form-control';\nimport { useFocus } from '../../../hooks/useFocus';\nimport { SelectFieldProps as BaseFieldProps } from '../../typings';\nimport { joinOptions } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport const SelectField = ({\n    size = 'm',\n    open,\n    multiple,\n    error,\n    hint,\n    disabled,\n    label,\n    placeholder,\n    selectedMultiple = [],\n    selected,\n    rightAddons,\n    valueRenderer = joinOptions,\n    Arrow,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    ...restProps\n}: BaseFieldProps & FormControlProps) => {\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const handleFocus = useCallback(() => setFocused(true), []);\n    const handleBlur = useCallback(() => setFocused(false), []);\n\n    const value = valueRenderer({ selected, selectedMultiple });\n\n    const filled = Boolean(value);\n    const showLabel = !!label && (filled || !placeholder);\n\n    return (\n        <div\n            className={ styles.component }\n            ref={ wrapperRef }\n            onFocus={ handleFocus }\n            onBlur={ handleBlur }\n        >\n            <FormControl\n                fieldClassName={ cn(styles.field, fieldClassName, {\n                    [styles.disabled]: disabled,\n                    [styles.focusVisible]: focusVisible,\n                }) }\n                block={ true }\n                size={ size }\n                focused={ open || focused }\n                disabled={ disabled }\n                filled={ filled }\n                label={ showLabel && label }\n                error={ error }\n                hint={ hint }\n                rightAddons={\n                    (Arrow || rightAddons) && (\n                        <React.Fragment>\n                            { rightAddons }\n                            { /* TODO: стоит переделать, но это будет мажорка */ }\n                            { Arrow ? React.cloneElement(Arrow, { className: styles.arrow }) : null }\n                        </React.Fragment>\n                    )\n                }\n                data-test-id={ dataTestId }\n                { ...restProps }\n                { ...innerProps }\n            >\n                <div className={ styles.contentWrapper }>\n                    { placeholder && !filled && (\n                        <span className={ styles.placeholder }>{ placeholder }</span>\n                    ) }\n                    { filled && <div className={ styles.value }>{ value }</div> }\n                </div>\n            </FormControl>\n        </div>\n    );\n};\n"],"names":["SelectField","size","open","multiple","error","hint","disabled","label","placeholder","selectedMultiple","selected","rightAddons","valueRenderer","joinOptions","Arrow","innerProps","dataTestId","fieldClassName","restProps","focused","setFocused","useState","wrapperRef","useRef","focusVisible","useFocus","handleFocus","useCallback","handleBlur","value","filled","showLabel","jsx","styles","FormControl","cn","jsxs","React"],"mappings":";;;;;;;AAUO,MAAMA,IAAc,CAAC;AAAA,EACxB,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC,IAAmB,CAAA;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgBC;AAAA,EAChB,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACP,MAAyC;AACrC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAaC,EAAuB,IAAI,GAExC,CAACC,CAAY,IAAIC,EAASH,GAAY,UAAU,GAEhDI,IAAcC,EAAY,MAAMP,EAAW,EAAI,GAAG,CAAA,CAAE,GACpDQ,IAAaD,EAAY,MAAMP,EAAW,EAAK,GAAG,CAAA,CAAE,GAEpDS,IAAQjB,EAAc,EAAE,UAAAF,GAAU,kBAAAD,GAAkB,GAEpDqB,IAAS,EAAQD,GACjBE,IAAY,CAAC,CAACxB,MAAUuB,KAAU,CAACtB;AAEzC,SACI,gBAAAwB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAYC,EAAO;AAAA,MACnB,KAAMX;AAAA,MACN,SAAUI;AAAA,MACV,QAASE;AAAA,MAET,UAAA,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,gBAAiBC,EAAGF,EAAO,OAAOhB,GAAgB;AAAA,YAC9C,CAACgB,EAAO,QAAQ,GAAG3B;AAAA,YACnB,CAAC2B,EAAO,YAAY,GAAGT;AAAA,UAAA,CAC1B;AAAA,UACD,OAAQ;AAAA,UACR,MAAAvB;AAAA,UACA,SAAUC,KAAQiB;AAAA,UAClB,UAAAb;AAAA,UACA,QAAAwB;AAAA,UACA,OAAQC,KAAaxB;AAAA,UACrB,OAAAH;AAAA,UACA,MAAAC;AAAA,UACA,cACKS,KAASH,MACN,gBAAAyB,EAACC,EAAM,UAAN,EACK,UAAA;AAAA,YAAA1B;AAAA,YAEAG,IAAQuB,EAAM,aAAavB,GAAO,EAAE,WAAWmB,EAAO,MAAA,CAAO,IAAI;AAAA,UAAA,GACvE;AAAA,UAGR,gBAAejB;AAAA,UACb,GAAGE;AAAA,UACH,GAAGH;AAAA,UAEL,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAYH,EAAO,gBAClB,UAAA;AAAA,YAAAzB,KAAe,CAACsB,KACd,gBAAAE,EAAC,UAAK,WAAYC,EAAO,aAAgB,UAAAzB,GAAa;AAAA,YAExDsB,KAAU,gBAAAE,EAAC,OAAA,EAAI,WAAYC,EAAO,OAAU,UAAAJ,EAAA,CAAO;AAAA,UAAA,EAAA,CACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"component.js","sources":["../../../../src/select/components/field/component.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { FormControl, FormControlProps } from '../../../form-control';\nimport { useFocus } from '../../../hooks/useFocus';\nimport { SelectFieldProps as BaseFieldProps } from '../../typings';\nimport { joinOptions } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport const SelectField = ({\n    size = 'm',\n    open,\n    multiple,\n    error,\n    hint,\n    disabled,\n    label,\n    placeholder,\n    selectedMultiple = [],\n    selected,\n    rightAddons,\n    valueRenderer = joinOptions,\n    Arrow,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    ...restProps\n}: BaseFieldProps & FormControlProps) => {\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const handleFocus = useCallback(() => setFocused(true), []);\n    const handleBlur = useCallback(() => setFocused(false), []);\n\n    const value = valueRenderer({ selected, selectedMultiple });\n\n    const filled = Boolean(value);\n    const showLabel = !!label && (filled || !placeholder);\n\n    return (\n        <div\n            className={ styles.component }\n            ref={ wrapperRef }\n            onFocus={ handleFocus }\n            onBlur={ handleBlur }\n        >\n            <FormControl\n                fieldClassName={ cn(styles.field, fieldClassName, {\n                    [styles.disabled]: disabled,\n                    [styles.focusVisible]: focusVisible,\n                }) }\n                block={ true }\n                size={ size }\n                focused={ open || focused }\n                disabled={ disabled }\n                filled={ filled }\n                label={ showLabel && label }\n                error={ error }\n                hint={ hint }\n                rightAddons={\n                    (Arrow || rightAddons) && (\n                        <React.Fragment>\n                            { rightAddons }\n                            { /* TODO: стоит переделать, но это будет мажорка */ }\n                            { Arrow ? React.cloneElement(Arrow as React.ReactElement<{ className?: string }>, { className: styles.arrow }) : null }\n                        </React.Fragment>\n                    )\n                }\n                data-test-id={ dataTestId }\n                { ...restProps }\n                { ...innerProps }\n            >\n                <div className={ styles.contentWrapper }>\n                    { placeholder && !filled && (\n                        <span className={ styles.placeholder }>{ placeholder }</span>\n                    ) }\n                    { filled && <div className={ styles.value }>{ value }</div> }\n                </div>\n            </FormControl>\n        </div>\n    );\n};\n"],"names":["SelectField","size","open","multiple","error","hint","disabled","label","placeholder","selectedMultiple","selected","rightAddons","valueRenderer","joinOptions","Arrow","innerProps","dataTestId","fieldClassName","restProps","focused","setFocused","useState","wrapperRef","useRef","focusVisible","useFocus","handleFocus","useCallback","handleBlur","value","filled","showLabel","jsx","styles","FormControl","cn","jsxs","React"],"mappings":";;;;;;;AAUO,MAAMA,IAAc,CAAC;AAAA,EACxB,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC,IAAmB,CAAA;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgBC;AAAA,EAChB,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACP,MAAyC;AACrC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAaC,EAAuB,IAAI,GAExC,CAACC,CAAY,IAAIC,EAASH,GAAY,UAAU,GAEhDI,IAAcC,EAAY,MAAMP,EAAW,EAAI,GAAG,CAAA,CAAE,GACpDQ,IAAaD,EAAY,MAAMP,EAAW,EAAK,GAAG,CAAA,CAAE,GAEpDS,IAAQjB,EAAc,EAAE,UAAAF,GAAU,kBAAAD,GAAkB,GAEpDqB,IAAS,EAAQD,GACjBE,IAAY,CAAC,CAACxB,MAAUuB,KAAU,CAACtB;AAEzC,SACI,gBAAAwB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAYC,EAAO;AAAA,MACnB,KAAMX;AAAA,MACN,SAAUI;AAAA,MACV,QAASE;AAAA,MAET,UAAA,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,gBAAiBC,EAAGF,EAAO,OAAOhB,GAAgB;AAAA,YAC9C,CAACgB,EAAO,QAAQ,GAAG3B;AAAA,YACnB,CAAC2B,EAAO,YAAY,GAAGT;AAAA,UAAA,CAC1B;AAAA,UACD,OAAQ;AAAA,UACR,MAAAvB;AAAA,UACA,SAAUC,KAAQiB;AAAA,UAClB,UAAAb;AAAA,UACA,QAAAwB;AAAA,UACA,OAAQC,KAAaxB;AAAA,UACrB,OAAAH;AAAA,UACA,MAAAC;AAAA,UACA,cACKS,KAASH,MACN,gBAAAyB,EAACC,EAAM,UAAN,EACK,UAAA;AAAA,YAAA1B;AAAA,YAEAG,IAAQuB,EAAM,aAAavB,GAAqD,EAAE,WAAWmB,EAAO,MAAA,CAAO,IAAI;AAAA,UAAA,GACrH;AAAA,UAGR,gBAAejB;AAAA,UACb,GAAGE;AAAA,UACH,GAAGH;AAAA,UAEL,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAYH,EAAO,gBAClB,UAAA;AAAA,YAAAzB,KAAe,CAACsB,KACd,gBAAAE,EAAC,UAAK,WAAYC,EAAO,aAAgB,UAAAzB,GAAa;AAAA,YAExDsB,KAAU,gBAAAE,EAAC,OAAA,EAAI,WAAYC,EAAO,OAAU,UAAAJ,EAAA,CAAO;AAAA,UAAA,EAAA,CACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}

package/dist/select/components/native-select/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/select/components/native-select/component.tsx"],"sourcesContent":["import React, { forwardRef, SelectHTMLAttributes, useCallback } from 'react';\n\nimport { GroupShape, OptionShape } from '../../typings';\nimport { isGroup } from '../../utils';\n\nexport type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n    /**\n     * Список вариантов выбора\n     */\n    options: Array<OptionShape | GroupShape>;\n\n    /**\n     * Значение селекта\n     */\n    value: string | string[];\n};\n\nconst Option = ({ option }: { option: OptionShape }) => (\n    <option value={ option.key } disabled={ option.disabled }>\n        { typeof option.content === 'string' ? option.content : option.key }\n    </option>\n);\n\nconst Group = ({ label, options }: GroupShape) => (\n    <optgroup label={ label }>\n        { options.map((option) => (\n            <Option option={ option } key={ option.key } />\n        )) }\n    </optgroup>\n);\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n    ({\n        className, disabled, multiple, value, name, options, onChange, ...restProps\n    }, ref) => {\n        const handleClick = useCallback((event) => {\n            event.stopPropagation();\n        }, []);\n\n        return (\n            <select\n                className={ className }\n                disabled={ disabled }\n                multiple={ multiple }\n                name={ name }\n                value={ value }\n                onChange={ onChange }\n                onClick={ handleClick }\n                ref={ ref }\n                { ...restProps }\n            >\n                { options.map((option) =>\n                    (isGroup(option) ? (\n                        <Group { ...option } key={ option.label } />\n                    ) : (\n                        <Option option={ option } key={ option.key } />\n                    ))) }\n            </select>\n        );\n    },\n);\n"],"names":["Option","option","jsx","Group","label","options","NativeSelect","forwardRef","className","disabled","multiple","value","name","onChange","restProps","ref","handleClick","useCallback","event","isGroup"],"mappings":";;;AAiBA,MAAMA,IAAS,CAAC,EAAE,QAAAC,EAAA,MACd,gBAAAC,EAAC,UAAA,EAAO,OAAQD,EAAO,KAAM,UAAWA,EAAO,UACzC,iBAAOA,EAAO,WAAY,WAAWA,EAAO,UAAUA,EAAO,KACnE,GAGEE,IAAQ,CAAC,EAAE,OAAAC,GAAO,SAAAC,EAAA,wBACnB,YAAA,EAAS,OAAAD,GACJ,YAAQ,IAAI,CAACH,MACX,gBAAAC,EAACF,GAAA,EAAO,QAAAC,KAAwBA,EAAO,GAAM,CAChD,GACL,GAGSK,IAAeC;AAAA,EACxB,CAAC;AAAA,IACG,WAAAC;AAAA,IAAW,UAAAC;AAAA,IAAU,UAAAC;AAAA,IAAU,OAAAC;AAAA,IAAO,MAAAC;AAAA,IAAM,SAAAP;AAAA,IAAS,UAAAQ;AAAA,IAAU,GAAGC;AAAA,EAAA,GACnEC,MAAQ;AACP,UAAMC,IAAcC,EAAY,CAACC,MAAU;AACvC,MAAAA,EAAM,gBAAA;AAAA,IACV,GAAG,CAAA,CAAE;AAEL,WACI,gBAAAhB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAAM;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,MAAAE;AAAA,QACA,OAAAD;AAAA,QACA,UAAAE;AAAA,QACA,SAAUG;AAAA,QACV,KAAAD;AAAA,QACE,GAAGD;AAAA,QAEH,UAAAT,EAAQ,IAAI,CAACJ,MACVkB,EAAQlB,CAAM,sBACVE,GAAA,EAAQ,GAAGF,GAAS,KAAMA,EAAO,OAAQ,IAE1C,gBAAAC,EAACF,KAAO,QAAAC,EAAA,GAAwBA,EAAO,GAAM,CAC/C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlB;AACJ;"}
+{"version":3,"file":"component.js","sources":["../../../../src/select/components/native-select/component.tsx"],"sourcesContent":["import React, { forwardRef, SelectHTMLAttributes, useCallback } from 'react';\n\nimport { GroupShape, OptionShape } from '../../typings';\nimport { isGroup } from '../../utils';\n\nexport type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n    /**\n     * Список вариантов выбора\n     */\n    options: Array<OptionShape | GroupShape>;\n\n    /**\n     * Значение селекта\n     */\n    value: string | string[];\n};\n\nconst Option = ({ option }: { option: OptionShape }) => (\n    <option value={ option.key } disabled={ option.disabled }>\n        { typeof option.content === 'string' ? option.content : option.key }\n    </option>\n);\n\nconst Group = ({ label, options }: GroupShape) => (\n    <optgroup label={ label }>\n        { options.map((option) => (\n            <Option option={ option } key={ option.key } />\n        )) }\n    </optgroup>\n);\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n    ({\n        className, disabled, multiple, value, name, options, onChange, ...restProps\n    }, ref) => {\n        const handleClick = useCallback((event: React.MouseEvent<HTMLSelectElement>) => {\n            event.stopPropagation();\n        }, []);\n\n        return (\n            <select\n                className={ className }\n                disabled={ disabled }\n                multiple={ multiple }\n                name={ name }\n                value={ value }\n                onChange={ onChange }\n                onClick={ handleClick }\n                ref={ ref }\n                { ...restProps }\n            >\n                { options.map((option) =>\n                    (isGroup(option) ? (\n                        <Group { ...option } key={ option.label } />\n                    ) : (\n                        <Option option={ option } key={ option.key } />\n                    ))) }\n            </select>\n        );\n    },\n);\n"],"names":["Option","option","jsx","Group","label","options","NativeSelect","forwardRef","className","disabled","multiple","value","name","onChange","restProps","ref","handleClick","useCallback","event","isGroup"],"mappings":";;;AAiBA,MAAMA,IAAS,CAAC,EAAE,QAAAC,EAAA,MACd,gBAAAC,EAAC,UAAA,EAAO,OAAQD,EAAO,KAAM,UAAWA,EAAO,UACzC,iBAAOA,EAAO,WAAY,WAAWA,EAAO,UAAUA,EAAO,KACnE,GAGEE,IAAQ,CAAC,EAAE,OAAAC,GAAO,SAAAC,EAAA,wBACnB,YAAA,EAAS,OAAAD,GACJ,YAAQ,IAAI,CAACH,MACX,gBAAAC,EAACF,GAAA,EAAO,QAAAC,KAAwBA,EAAO,GAAM,CAChD,GACL,GAGSK,IAAeC;AAAA,EACxB,CAAC;AAAA,IACG,WAAAC;AAAA,IAAW,UAAAC;AAAA,IAAU,UAAAC;AAAA,IAAU,OAAAC;AAAA,IAAO,MAAAC;AAAA,IAAM,SAAAP;AAAA,IAAS,UAAAQ;AAAA,IAAU,GAAGC;AAAA,EAAA,GACnEC,MAAQ;AACP,UAAMC,IAAcC,EAAY,CAACC,MAA+C;AAC5E,MAAAA,EAAM,gBAAA;AAAA,IACV,GAAG,CAAA,CAAE;AAEL,WACI,gBAAAhB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAAM;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,MAAAE;AAAA,QACA,OAAAD;AAAA,QACA,UAAAE;AAAA,QACA,SAAUG;AAAA,QACV,KAAAD;AAAA,QACE,GAAGD;AAAA,QAEH,UAAAT,EAAQ,IAAI,CAACJ,MACVkB,EAAQlB,CAAM,sBACVE,GAAA,EAAQ,GAAGF,GAAS,KAAMA,EAAO,OAAQ,IAE1C,gBAAAC,EAACF,KAAO,QAAAC,EAAA,GAAwBA,EAAO,GAAM,CAC/C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlB;AACJ;"}

package/dist/select/components/optgroup/component.d.ts

@@ -1,2 +1,3 @@
+import { default as React } from 'react';
 import { OptgroupProps } from '../../typings';
-export declare const Optgroup: ({ children, label, size }: OptgroupProps) => JSX.Element;
+export declare const Optgroup: ({ children, label, size }: OptgroupProps) => React.JSX.Element;

package/dist/select/components/select-search/index.d.ts

@@ -8,4 +8,4 @@ type SelectSearchProps = Omit<SelectProps, 'options'> & {
     options: any;
     searchType?: 'text' | 'number';
 };
-export declare const SelectSearch: ({ options, searchType, onChange, selected, ...restProps }: SelectSearchProps) => JSX.Element;
+export declare const SelectSearch: ({ options, searchType, onChange, selected, ...restProps }: SelectSearchProps) => React.JSX.Element;

package/dist/select/components/virtual-options-list/component.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { OptionsListProps } from '../../typings';
 export type VirtualOptionsList = OptionsListProps & {
     /**
@@ -5,4 +6,4 @@ export type VirtualOptionsList = OptionsListProps & {
      */
     overscan?: number;
 };
-export declare const VirtualOptionsList: ({ size, flatOptions, highlightedIndex, className, Option, open, options, overscan, Optgroup, dataTestId, emptyPlaceholder, visibleOptions, }: VirtualOptionsList) => JSX.Element;
+export declare const VirtualOptionsList: ({ size, flatOptions, highlightedIndex, className, Option, open, options, overscan, Optgroup, dataTestId, emptyPlaceholder, visibleOptions, }: VirtualOptionsList) => React.JSX.Element;

package/dist/select/presets/use-lazy-loading/index.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { OptionShape } from '../../typings';
+import { OptionProps, OptionShape } from '../../typings';
 type OptionsFetcherResponse = {
     items: Array<{
         [x: string]: any;
@@ -36,12 +36,12 @@ type UseLazyLoadingProps = {
 };
 export declare function useLazyLoading({ limit, initialPage, optionsFetcher, }: UseLazyLoadingProps): {
     optionsProps: {
-        Option: (props: any) => JSX.Element;
+        Option: (props: OptionProps) => React.JSX.Element;
         options: OptionShape[];
         optionsListProps: {
-            ref: React.RefObject<HTMLDivElement>;
+            ref: React.RefObject<HTMLDivElement | null>;
             inputProps: {
-                onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+                onChange: (event: React.ChangeEvent<HTMLInputElement, Element>, payload: {
                     value: string;
                 }) => void;
                 value: string;

package/dist/select/presets/use-lazy-loading/index.js

@@ -80,20 +80,20 @@ function j({
       opened: m,
       page: g,
       options: E,
-      loading: a,
+      loading: i,
       allOptionsLoaded: C,
       searchText: h
     },
-    i
-  ] = H(N, f), o = O(), c = p(() => {
-    i(l.fetchOptionsStart()), new Promise((e, t) => {
+    a
+  ] = H(N, f), o = O(void 0), c = p(() => {
+    a(l.fetchOptionsStart()), new Promise((e, t) => {
       var n;
       (n = o.current) == null || n.call(o), o.current = t, I({ page: g, limit: r, searchText: h }).then((s) => {
         e(s);
       });
     }).then((e) => {
       const t = Q(e.items), { meta: { totalPages: n, currentPage: s } } = e;
-      i(l.fetchOptionsSuccess({ options: t, hasMore: s < n })), o.current = void 0;
+      a(l.fetchOptionsSuccess({ options: t, hasMore: s < n })), o.current = void 0;
     }).catch(
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       (e) => {
@@ -104,7 +104,7 @@ function j({
   P(() => {
     var t;
     let e;
-    if (m && !a && !C) {
+    if (m && !i && !C) {
       e = new IntersectionObserver(
         ([T]) => {
           T.isIntersecting && (e && e.disconnect(), c());
@@ -119,49 +119,49 @@ function j({
     return () => {
       e && e.disconnect();
     };
-  }, [g, m, C, y, a, c]);
-  const L = p(
+  }, [g, m, C, y, i, c]);
+  const v = p(
     (e) => {
       var t, n;
-      e.open ? E.length === S.length && c() : ((t = o.current) == null || t.call(o), i(l.fetchOptionsBreak())), i(l.setIsOpened((n = e.open) != null ? n : !1));
+      e.open ? E.length === S.length && c() : ((t = o.current) == null || t.call(o), a(l.fetchOptionsBreak())), a(l.setIsOpened((n = e.open) != null ? n : !1));
     },
     [S.length, E.length, c]
-  ), d = O(), _ = O();
+  ), d = O(void 0), _ = O(void 0);
   P(() => {
     d.current = c;
   }, [c]);
-  const R = p(
+  const L = p(
     (e, t) => {
       var n, s;
-      i(l.setQueryString(t.value)), (n = o.current) == null || n.call(o), (s = u.current) == null || s.scrollTo({ top: 0 }), _.current && clearTimeout(_.current), _.current = setTimeout(() => {
+      a(l.setQueryString(t.value)), (n = o.current) == null || n.call(o), (s = u.current) == null || s.scrollTo({ top: 0 }), _.current && clearTimeout(_.current), _.current = setTimeout(() => {
         var T;
         (T = d.current) == null || T.call(d);
       }, k);
     },
     []
-  ), v = U(() => Array(a ? r : 0).fill(0).map((e, t) => ({
+  ), R = U(() => Array(i ? r : 0).fill(0).map((e, t) => ({
     key: t,
     disabled: !0,
     content: "",
     loading: !0
-  })), [a, r]), x = p(() => {
-    i(l.reset());
+  })), [i, r]), x = p(() => {
+    a(l.reset());
   }, []);
   return {
     optionsProps: {
       Option: p(
-        (e) => /* @__PURE__ */ A(B, { ...e, highlighted: a ? !1 : e.highlighted }),
-        [a]
+        (e) => /* @__PURE__ */ A(B, { ...e, highlighted: i ? !1 : e.highlighted }),
+        [i]
       ),
-      options: [...E, ...v],
+      options: [...E, ...R],
       optionsListProps: {
         ref: u,
         inputProps: {
-          onChange: R,
+          onChange: L,
           value: h
         }
       },
-      onOpen: L
+      onOpen: v
     },
     reset: x
   };

package/dist/select/presets/use-lazy-loading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/select/presets/use-lazy-loading/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, {\n    Reducer, useCallback, useEffect, useMemo, useReducer, useRef,\n} from 'react';\n\nimport { InputProps } from '../../../input';\nimport { Option } from '../../components/option';\nimport { OptionShape } from '../../typings';\nimport { convertToOptions } from '../../utils';\n\nimport 'intersection-observer';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\ntype OptionsFetcherResponse = {\n    items: Array<{[x: string]: any; id: number | string }>;\n    meta: {\n        totalItems?: number;\n        itemCount?: number;\n        itemsPerPage?: number;\n        totalPages: number;\n        currentPage: number;\n    };\n};\n\ntype UseLazyLoadingProps = {\n    /** Количество элементов на \"странице\" */\n    limit?: number;\n\n    /** Начальный номер \"страницы\" */\n    initialPage?: number;\n\n    /**\n     * Функция-загрузчик опций.\n     * @param page - текущая страница\n     * @param limit - количество элементов на странице\n     * @param searchText - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList\n     * @returns Promise<{\n     *  options - список опций следующей \"страницы\". Они аппендятся к предыдущим\n     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать \"следующую страницу\")\n     * }>\n     */\n    optionsFetcher(\n        {\n            page, limit, searchText,\n        }: {\n            page: number;\n            limit: number;\n            searchText?: string;\n        }\n    ): Promise<OptionsFetcherResponse>;\n};\n\nconst actions = {\n    fetchOptionsStart() {\n        return { type: 'FETCH_OPTIONS_START' } as const;\n    },\n    fetchOptionsBreak() {\n        return { type: 'FETCH_OPTIONS_BREAK' } as const;\n    },\n    fetchOptionsSuccess(payload: { options: OptionShape[]; hasMore: boolean }) {\n        return { type: 'FETCH_OPTIONS_SUCCESS', payload } as const;\n    },\n    setIsOpened(opened: boolean) {\n        return { type: 'SET_IS_OPENED', payload: opened } as const;\n    },\n    setQueryString(qs: string) {\n        return { type: 'SET_QUERY_STRING', payload: qs } as const;\n    },\n    reset() {\n        return { type: 'RESET' } as const;\n    },\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Actions = typeof actions extends { [key: string]: (...args: any) => infer U } ? U : never;\n\nexport function useLazyLoading({\n    limit = 10,\n    initialPage = 0,\n    optionsFetcher,\n}: UseLazyLoadingProps) {\n    const initialOptions: OptionShape[] = [];\n    const initialLoading = false;\n\n    const lazyLoadingInitialState = {\n        opened: false,\n        page: initialPage,\n        options: initialOptions,\n        loading: initialLoading,\n        allOptionsLoaded: false,\n        searchText: '',\n    };\n\n    const lazyLoadingReducer: Reducer<typeof lazyLoadingInitialState, Actions> = (\n        state,\n        action,\n    ) => {\n        switch (action.type) {\n            case 'FETCH_OPTIONS_START': {\n                return {\n                    ...state,\n                    loading: true,\n                };\n            }\n            case 'FETCH_OPTIONS_BREAK': {\n                return {\n                    ...state,\n                    loading: false,\n                };\n            }\n            case 'FETCH_OPTIONS_SUCCESS': {\n                return {\n                    ...state,\n                    options: [...state.options, ...action.payload.options],\n                    page: state.page + (action.payload.options.length ? 1 : 0),\n                    allOptionsLoaded: !action.payload.hasMore,\n                    loading: false,\n                };\n            }\n            case 'SET_IS_OPENED': {\n                return {\n                    ...state,\n                    opened: action.payload,\n                };\n            }\n            case 'SET_QUERY_STRING': {\n                return {\n                    // Изменение searchText подразумевает сброс текущих опций.\n                    ...lazyLoadingInitialState,\n                    opened: state.opened,\n                    loading: true,\n                    searchText: action.payload,\n                };\n            }\n            case 'RESET': {\n                return {\n                    ...lazyLoadingInitialState,\n                };\n            }\n            default: {\n                return state;\n            }\n        }\n    };\n\n    const [\n        {\n            opened, page, options, loading, allOptionsLoaded, searchText,\n        },\n        dispatch,\n    ] = useReducer(lazyLoadingReducer, lazyLoadingInitialState);\n\n    const abortFetchingOptionsRef = useRef<() => void>();\n\n    const fetchNextOffsetOptions = useCallback(() => {\n        dispatch(actions.fetchOptionsStart());\n\n        new Promise<OptionsFetcherResponse>((resolve, reject) => {\n            // eslint-disable-next-line no-unused-expressions\n            abortFetchingOptionsRef.current?.();\n            abortFetchingOptionsRef.current = reject;\n            optionsFetcher({ page, limit, searchText }).then((res) => {\n                resolve(res);\n            });\n        }).then((res) => {\n            const serializedData = convertToOptions(res.items);\n            const { meta: { totalPages, currentPage } } = res;\n\n            dispatch(actions.fetchOptionsSuccess({ options: serializedData, hasMore: currentPage < totalPages }));\n            abortFetchingOptionsRef.current = undefined;\n        }).catch(\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            (err) => {\n                console.log(err);\n            },\n        );\n    }, [page, limit, searchText, optionsFetcher]);\n\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // fetchNextOffsetOptions();\n\n    useEffect(() => {\n        let observer: IntersectionObserver;\n\n        if (opened && !loading && !allOptionsLoaded) {\n            observer = new IntersectionObserver(\n                ([entry]) => {\n                    if (entry.isIntersecting) {\n                        if (observer) {\n                            observer.disconnect();\n                        }\n                        fetchNextOffsetOptions();\n                    }\n                },\n                {\n                    root: listRef.current,\n                },\n            );\n\n            /*\n             * Обсервим пересечение последней опции с контейнером.\n             * Таким образом, загрузка следующей \"страницы\" начнется когда юзер доскроллит список\n             * до верхнего края последней опции, что обеспечивает плавность\n             */\n            const listOptions = listRef.current?.querySelectorAll('[role=\"option\"]');\n            const lastOption = listOptions?.[listOptions.length - 1];\n\n            if (lastOption) {\n                observer.observe(lastOption);\n            }\n        }\n\n        return () => {\n            if (observer) {\n                observer.disconnect();\n            }\n        };\n    }, [page, opened, allOptionsLoaded, initialPage, loading, fetchNextOffsetOptions]);\n\n    const onOpen = useCallback(\n        (payload: { open?: boolean }) => {\n            if (payload.open) {\n                if (options.length === initialOptions.length) {\n                    fetchNextOffsetOptions();\n                }\n            } else {\n                // eslint-disable-next-line no-unused-expressions\n                abortFetchingOptionsRef.current?.();\n                dispatch(actions.fetchOptionsBreak());\n            }\n\n            dispatch(actions.setIsOpened(payload.open ?? false));\n        },\n\n        [initialOptions.length, options.length, fetchNextOffsetOptions],\n    );\n\n    const fetchNextOptionsRef = useRef<() => void>();\n    const fetchNextOptionsTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n    useEffect(() => {\n        fetchNextOptionsRef.current = fetchNextOffsetOptions;\n    }, [fetchNextOffsetOptions]);\n\n    const onQueryStringChange = useCallback<Exclude<InputProps['onChange'], undefined>>(\n        (_, payload) => {\n            dispatch(actions.setQueryString(payload.value));\n            /* eslint-disable no-unused-expressions */\n\n            /*\n             * Если во время загрузки опций юзер ввел новый текст в инпут,\n             * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу\n             */\n            abortFetchingOptionsRef.current?.();\n\n            listRef.current?.scrollTo({ top: 0 });\n\n            /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */\n            if (fetchNextOptionsTimerRef.current) {\n                clearTimeout(fetchNextOptionsTimerRef.current);\n            }\n            fetchNextOptionsTimerRef.current = setTimeout(() => {\n                /*\n                 * После дебаунса необходимо вызвать функцию-загрузчик,\n                 * содержащую актуальные на данный момент данные оффсета и searchText.\n                 * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,\n                 * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,\n                 * так что берем ее из обновляемого рефа\n                 */\n                fetchNextOptionsRef.current?.();\n            }, DEBOUNCE_TIMEOUT);\n            /* eslint-enable */\n        },\n        [],\n    );\n\n    const skeletonOptions: OptionShape[] = useMemo(() => Array(loading ? limit : 0)\n        .fill(0)\n        .map((_, key) => ({\n            key,\n            disabled: true,\n            content: '',\n            loading: true,\n        })), [loading, limit]);\n\n    const reset = useCallback(() => {\n        dispatch(actions.reset());\n    }, []);\n\n    const renderOption = useCallback(\n        (props) => <Option { ...props } highlighted={ loading ? false : props.highlighted } />,\n        [loading],\n    );\n\n    return {\n        optionsProps: {\n            Option: renderOption,\n            options: [...options, ...skeletonOptions],\n            optionsListProps: {\n                ref: listRef,\n                inputProps: {\n                    onChange: onQueryStringChange,\n                    value: searchText,\n                },\n            },\n            onOpen,\n        },\n        reset,\n    };\n}\n"],"names":["DEBOUNCE_TIMEOUT","actions","payload","opened","qs","useLazyLoading","limit","initialPage","optionsFetcher","initialOptions","lazyLoadingInitialState","lazyLoadingReducer","state","action","page","options","loading","allOptionsLoaded","searchText","dispatch","useReducer","abortFetchingOptionsRef","useRef","fetchNextOffsetOptions","useCallback","resolve","reject","_a","res","serializedData","convertToOptions","totalPages","currentPage","err","listRef","useEffect","observer","entry","listOptions","lastOption","onOpen","_b","fetchNextOptionsRef","fetchNextOptionsTimerRef","onQueryStringChange","_","skeletonOptions","useMemo","key","reset","props","jsx","Option"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/select/presets/use-lazy-loading/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, {\n    Reducer, useCallback, useEffect, useMemo, useReducer, useRef,\n} from 'react';\n\nimport { InputProps } from '../../../input';\nimport { Option } from '../../components/option';\nimport { OptionProps, OptionShape } from '../../typings';\nimport { convertToOptions } from '../../utils';\n\nimport 'intersection-observer';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\ntype OptionsFetcherResponse = {\n    items: Array<{[x: string]: any; id: number | string }>;\n    meta: {\n        totalItems?: number;\n        itemCount?: number;\n        itemsPerPage?: number;\n        totalPages: number;\n        currentPage: number;\n    };\n};\n\ntype UseLazyLoadingProps = {\n    /** Количество элементов на \"странице\" */\n    limit?: number;\n\n    /** Начальный номер \"страницы\" */\n    initialPage?: number;\n\n    /**\n     * Функция-загрузчик опций.\n     * @param page - текущая страница\n     * @param limit - количество элементов на странице\n     * @param searchText - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList\n     * @returns Promise<{\n     *  options - список опций следующей \"страницы\". Они аппендятся к предыдущим\n     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать \"следующую страницу\")\n     * }>\n     */\n    optionsFetcher(\n        {\n            page, limit, searchText,\n        }: {\n            page: number;\n            limit: number;\n            searchText?: string;\n        }\n    ): Promise<OptionsFetcherResponse>;\n};\n\nconst actions = {\n    fetchOptionsStart() {\n        return { type: 'FETCH_OPTIONS_START' } as const;\n    },\n    fetchOptionsBreak() {\n        return { type: 'FETCH_OPTIONS_BREAK' } as const;\n    },\n    fetchOptionsSuccess(payload: { options: OptionShape[]; hasMore: boolean }) {\n        return { type: 'FETCH_OPTIONS_SUCCESS', payload } as const;\n    },\n    setIsOpened(opened: boolean) {\n        return { type: 'SET_IS_OPENED', payload: opened } as const;\n    },\n    setQueryString(qs: string) {\n        return { type: 'SET_QUERY_STRING', payload: qs } as const;\n    },\n    reset() {\n        return { type: 'RESET' } as const;\n    },\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Actions = typeof actions extends { [key: string]: (...args: any) => infer U } ? U : never;\n\nexport function useLazyLoading({\n    limit = 10,\n    initialPage = 0,\n    optionsFetcher,\n}: UseLazyLoadingProps) {\n    const initialOptions: OptionShape[] = [];\n    const initialLoading = false;\n\n    const lazyLoadingInitialState = {\n        opened: false,\n        page: initialPage,\n        options: initialOptions,\n        loading: initialLoading,\n        allOptionsLoaded: false,\n        searchText: '',\n    };\n\n    const lazyLoadingReducer: Reducer<typeof lazyLoadingInitialState, Actions> = (\n        state,\n        action,\n    ) => {\n        switch (action.type) {\n            case 'FETCH_OPTIONS_START': {\n                return {\n                    ...state,\n                    loading: true,\n                };\n            }\n            case 'FETCH_OPTIONS_BREAK': {\n                return {\n                    ...state,\n                    loading: false,\n                };\n            }\n            case 'FETCH_OPTIONS_SUCCESS': {\n                return {\n                    ...state,\n                    options: [...state.options, ...action.payload.options],\n                    page: state.page + (action.payload.options.length ? 1 : 0),\n                    allOptionsLoaded: !action.payload.hasMore,\n                    loading: false,\n                };\n            }\n            case 'SET_IS_OPENED': {\n                return {\n                    ...state,\n                    opened: action.payload,\n                };\n            }\n            case 'SET_QUERY_STRING': {\n                return {\n                    // Изменение searchText подразумевает сброс текущих опций.\n                    ...lazyLoadingInitialState,\n                    opened: state.opened,\n                    loading: true,\n                    searchText: action.payload,\n                };\n            }\n            case 'RESET': {\n                return {\n                    ...lazyLoadingInitialState,\n                };\n            }\n            default: {\n                return state;\n            }\n        }\n    };\n\n    const [\n        {\n            opened, page, options, loading, allOptionsLoaded, searchText,\n        },\n        dispatch,\n    ] = useReducer(lazyLoadingReducer, lazyLoadingInitialState);\n\n    const abortFetchingOptionsRef = useRef<(() => void) | undefined>(undefined);\n\n    const fetchNextOffsetOptions = useCallback(() => {\n        dispatch(actions.fetchOptionsStart());\n\n        new Promise<OptionsFetcherResponse>((resolve, reject) => {\n            // eslint-disable-next-line no-unused-expressions\n            abortFetchingOptionsRef.current?.();\n            abortFetchingOptionsRef.current = reject;\n            optionsFetcher({ page, limit, searchText }).then((res) => {\n                resolve(res);\n            });\n        }).then((res) => {\n            const serializedData = convertToOptions(res.items);\n            const { meta: { totalPages, currentPage } } = res;\n\n            dispatch(actions.fetchOptionsSuccess({ options: serializedData, hasMore: currentPage < totalPages }));\n            abortFetchingOptionsRef.current = undefined;\n        }).catch(\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            (err) => {\n                console.log(err);\n            },\n        );\n    }, [page, limit, searchText, optionsFetcher]);\n\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // fetchNextOffsetOptions();\n\n    useEffect(() => {\n        let observer: IntersectionObserver;\n\n        if (opened && !loading && !allOptionsLoaded) {\n            observer = new IntersectionObserver(\n                ([entry]) => {\n                    if (entry.isIntersecting) {\n                        if (observer) {\n                            observer.disconnect();\n                        }\n                        fetchNextOffsetOptions();\n                    }\n                },\n                {\n                    root: listRef.current,\n                },\n            );\n\n            /*\n             * Обсервим пересечение последней опции с контейнером.\n             * Таким образом, загрузка следующей \"страницы\" начнется когда юзер доскроллит список\n             * до верхнего края последней опции, что обеспечивает плавность\n             */\n            const listOptions = listRef.current?.querySelectorAll('[role=\"option\"]');\n            const lastOption = listOptions?.[listOptions.length - 1];\n\n            if (lastOption) {\n                observer.observe(lastOption);\n            }\n        }\n\n        return () => {\n            if (observer) {\n                observer.disconnect();\n            }\n        };\n    }, [page, opened, allOptionsLoaded, initialPage, loading, fetchNextOffsetOptions]);\n\n    const onOpen = useCallback(\n        (payload: { open?: boolean }) => {\n            if (payload.open) {\n                if (options.length === initialOptions.length) {\n                    fetchNextOffsetOptions();\n                }\n            } else {\n                // eslint-disable-next-line no-unused-expressions\n                abortFetchingOptionsRef.current?.();\n                dispatch(actions.fetchOptionsBreak());\n            }\n\n            dispatch(actions.setIsOpened(payload.open ?? false));\n        },\n\n        [initialOptions.length, options.length, fetchNextOffsetOptions],\n    );\n\n    const fetchNextOptionsRef = useRef<(() => void) | undefined>(undefined);\n    const fetchNextOptionsTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    useEffect(() => {\n        fetchNextOptionsRef.current = fetchNextOffsetOptions;\n    }, [fetchNextOffsetOptions]);\n\n    const onQueryStringChange = useCallback<Exclude<InputProps['onChange'], undefined>>(\n        (_, payload) => {\n            dispatch(actions.setQueryString(payload.value));\n            /* eslint-disable no-unused-expressions */\n\n            /*\n             * Если во время загрузки опций юзер ввел новый текст в инпут,\n             * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу\n             */\n            abortFetchingOptionsRef.current?.();\n\n            listRef.current?.scrollTo({ top: 0 });\n\n            /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */\n            if (fetchNextOptionsTimerRef.current) {\n                clearTimeout(fetchNextOptionsTimerRef.current);\n            }\n            fetchNextOptionsTimerRef.current = setTimeout(() => {\n                /*\n                 * После дебаунса необходимо вызвать функцию-загрузчик,\n                 * содержащую актуальные на данный момент данные оффсета и searchText.\n                 * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,\n                 * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,\n                 * так что берем ее из обновляемого рефа\n                 */\n                fetchNextOptionsRef.current?.();\n            }, DEBOUNCE_TIMEOUT);\n            /* eslint-enable */\n        },\n        [],\n    );\n\n    const skeletonOptions: OptionShape[] = useMemo(() => Array(loading ? limit : 0)\n        .fill(0)\n        .map((_, key) => ({\n            key,\n            disabled: true,\n            content: '',\n            loading: true,\n        })), [loading, limit]);\n\n    const reset = useCallback(() => {\n        dispatch(actions.reset());\n    }, []);\n\n    const renderOption = useCallback(\n        (props: OptionProps) => <Option { ...props } highlighted={ loading ? false : props.highlighted } />,\n        [loading],\n    );\n\n    return {\n        optionsProps: {\n            Option: renderOption,\n            options: [...options, ...skeletonOptions],\n            optionsListProps: {\n                ref: listRef,\n                inputProps: {\n                    onChange: onQueryStringChange,\n                    value: searchText,\n                },\n            },\n            onOpen,\n        },\n        reset,\n    };\n}\n"],"names":["DEBOUNCE_TIMEOUT","actions","payload","opened","qs","useLazyLoading","limit","initialPage","optionsFetcher","initialOptions","lazyLoadingInitialState","lazyLoadingReducer","state","action","page","options","loading","allOptionsLoaded","searchText","dispatch","useReducer","abortFetchingOptionsRef","useRef","fetchNextOffsetOptions","useCallback","resolve","reject","_a","res","serializedData","convertToOptions","totalPages","currentPage","err","listRef","useEffect","observer","entry","listOptions","lastOption","onOpen","_b","fetchNextOptionsRef","fetchNextOptionsTimerRef","onQueryStringChange","_","skeletonOptions","useMemo","key","reset","props","jsx","Option"],"mappings":"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"}

package/dist/select/presets/use-select-with-loading/hook.d.ts

@@ -1,10 +1,11 @@
-import { BaseSelectProps, OptionShape } from '../../typings';
+import { default as React } from 'react';
+import { BaseSelectProps, OptionProps, OptionShape } from '../../typings';
 type useSelectWithLoadingProps = {
     loading?: boolean;
     visibleOptions?: BaseSelectProps['visibleOptions'];
 };
 export declare function useSelectWithLoading({ loading, visibleOptions, }: useSelectWithLoadingProps): {
-    Option: (props: any) => JSX.Element;
+    Option: (props: OptionProps) => React.JSX.Element;
     options: OptionShape[];
 } | null;
 export {};

package/dist/select/presets/use-select-with-loading/hook.js

@@ -1,19 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { useCallback as s } from "react";
 import { Skeleton as m } from "../../../skeleton/component.js";
 import { Option as f } from "../../components/option/component.js";
 import a from "./index.module.css.js";
-function d({
+function k({
   loading: t = !1,
-  visibleOptions: o = 6
+  visibleOptions: r = 6
 }) {
   const i = s(
-    (e) => /* @__PURE__ */ r(f, { ...e, Checkmark: null, highlighted: t ? !1 : e.highlighted }),
+    (e) => /* @__PURE__ */ o(f, { ...e, Checkmark: void 0, highlighted: t ? !1 : e.highlighted }),
     [t]
-  ), l = Array(o).fill(0).map((e, n) => ({
+  ), l = Array(r).fill(0).map((e, n) => ({
     key: n,
     disabled: !0,
-    content: /* @__PURE__ */ r(m, { className: a.skeleton, visible: !0 })
+    content: /* @__PURE__ */ o(m, { className: a.skeleton, visible: !0 })
   }));
   return t ? {
     Option: i,
@@ -21,6 +21,6 @@ function d({
   } : null;
 }
 export {
-  d as useSelectWithLoading
+  k as useSelectWithLoading
 };
 //# sourceMappingURL=hook.js.map

package/dist/select/presets/use-select-with-loading/hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.js","sources":["../../../../src/select/presets/use-select-with-loading/hook.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Skeleton } from '../../../skeleton';\nimport { Option } from '../../components/option';\nimport { BaseSelectProps, OptionShape } from '../../typings';\n\nimport styles from './index.module.css';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useSelectWithLoadingProps = {\n    loading?: boolean;\n    visibleOptions?: BaseSelectProps['visibleOptions'];\n};\n\nexport function useSelectWithLoading({\n    loading = false,\n    visibleOptions = 6,\n}: useSelectWithLoadingProps) {\n    const renderOption = useCallback(\n        (props) => (\n            <Option { ...props } Checkmark={ null } highlighted={ loading ? false : props.highlighted } />\n        ),\n        [loading],\n    );\n\n    const options: OptionShape[] = Array(visibleOptions)\n        .fill(0)\n        .map((_, key) => ({\n            key,\n            disabled: true,\n            content: <Skeleton className={ styles.skeleton } visible={ true } />,\n        }));\n\n    if (!loading) return null;\n\n    return {\n        Option: renderOption,\n        options,\n    };\n}\n"],"names":["useSelectWithLoading","loading","visibleOptions","renderOption","useCallback","props","jsx","Option","options","_","key","Skeleton","styles"],"mappings":";;;;;AAcO,SAASA,EAAqB;AAAA,EACjC,SAAAC,IAAU;AAAA,EACV,gBAAAC,IAAiB;AACrB,GAA8B;AAC1B,QAAMC,IAAeC;AAAA,IACjB,CAACC,MACG,gBAAAC,EAACC,GAAA,EAAS,GAAGF,GAAQ,WAAY,MAAO,aAAcJ,IAAU,KAAQI,EAAM,YAAA,CAAc;AAAA,IAEhG,CAACJ,CAAO;AAAA,EAAA,GAGNO,IAAyB,MAAMN,CAAc,EAC9C,KAAK,CAAC,EACN,IAAI,CAACO,GAAGC,OAAS;AAAA,IACd,KAAAA;AAAA,IACA,UAAU;AAAA,IACV,SAAS,gBAAAJ,EAACK,GAAA,EAAS,WAAYC,EAAO,UAAW,SAAU,GAAA,CAAO;AAAA,EAAA,EACpE;AAEN,SAAKX,IAEE;AAAA,IACH,QAAQE;AAAA,IACR,SAAAK;AAAA,EAAA,IAJiB;AAMzB;"}
+{"version":3,"file":"hook.js","sources":["../../../../src/select/presets/use-select-with-loading/hook.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Skeleton } from '../../../skeleton';\nimport { Option } from '../../components/option';\nimport { BaseSelectProps, OptionProps, OptionShape } from '../../typings';\n\nimport styles from './index.module.css';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useSelectWithLoadingProps = {\n    loading?: boolean;\n    visibleOptions?: BaseSelectProps['visibleOptions'];\n};\n\nexport function useSelectWithLoading({\n    loading = false,\n    visibleOptions = 6,\n}: useSelectWithLoadingProps) {\n    const renderOption = useCallback(\n        (props: OptionProps) => (\n            <Option { ...props } Checkmark={ undefined } highlighted={ loading ? false : props.highlighted } />\n        ),\n        [loading],\n    );\n\n    const options: OptionShape[] = Array(visibleOptions)\n        .fill(0)\n        .map((_, key) => ({\n            key,\n            disabled: true,\n            content: <Skeleton className={ styles.skeleton } visible={ true } />,\n        }));\n\n    if (!loading) return null;\n\n    return {\n        Option: renderOption,\n        options,\n    };\n}\n"],"names":["useSelectWithLoading","loading","visibleOptions","renderOption","useCallback","props","jsx","Option","options","_","key","Skeleton","styles"],"mappings":";;;;;AAcO,SAASA,EAAqB;AAAA,EACjC,SAAAC,IAAU;AAAA,EACV,gBAAAC,IAAiB;AACrB,GAA8B;AAC1B,QAAMC,IAAeC;AAAA,IACjB,CAACC,MACG,gBAAAC,EAACC,GAAA,EAAS,GAAGF,GAAQ,WAAY,QAAY,aAAcJ,IAAU,KAAQI,EAAM,YAAA,CAAc;AAAA,IAErG,CAACJ,CAAO;AAAA,EAAA,GAGNO,IAAyB,MAAMN,CAAc,EAC9C,KAAK,CAAC,EACN,IAAI,CAACO,GAAGC,OAAS;AAAA,IACd,KAAAA;AAAA,IACA,UAAU;AAAA,IACV,SAAS,gBAAAJ,EAACK,GAAA,EAAS,WAAYC,EAAO,UAAW,SAAU,GAAA,CAAO;AAAA,EAAA,EACpE;AAEN,SAAKX,IAEE;AAAA,IACH,QAAQE;AAAA,IACR,SAAAK;AAAA,EAAA,IAJiB;AAMzB;"}

package/dist/select/typings.d.ts

@@ -343,7 +343,7 @@ export type OptionsListProps = {
     Option: (props: {
         option: OptionShape;
         index: number;
-    }) => JSX.Element | null;
+    }) => ReactElement | null;
     /**
      * Список вариантов выбора
      */

package/dist/select/utils.d.ts

@@ -18,11 +18,11 @@ type useVisibleOptionsArgs = {
     /**
      * Реф на контейнер с пунтами меню
      */
-    listRef: RefObject<HTMLElement>;
+    listRef: RefObject<HTMLElement | null>;
     /**
      * Реф на контейнер, которому нужно установить высоту
      */
-    styleTargetRef?: RefObject<HTMLElement>;
+    styleTargetRef?: RefObject<HTMLElement | null>;
     /**
      * Флаг открытия меню
      */

package/dist/select/utils.js

@@ -1,40 +1,42 @@
 import { useEffect as p, isValidElement as f, cloneElement as y } from "react";
-const a = (t) => Object.prototype.hasOwnProperty.call(t, "options"), d = (t) => !!t && Object.prototype.hasOwnProperty.call(t, "key"), O = ({
+const a = (t) => Object.prototype.hasOwnProperty.call(t, "options"), g = (t) => !!t && Object.prototype.hasOwnProperty.call(t, "key"), O = ({
   selected: t,
   selectedMultiple: s
 }) => {
   const e = s || (t ? [t] : []);
-  return e.length ? e.reduce((r, c, o) => (f(c.content) ? r.push(y(c.content, { key: c.key })) : r.push(c.content), o < e.length - 1 && r.push(", "), r), []) : null;
+  return e.length ? e.reduce((r, o, c) => (f(o.content) ? r.push(y(o.content, { key: o.key })) : r.push(o.content), c < e.length - 1 && r.push(", "), r), []) : null;
 };
 function k(t, s = []) {
-  const e = [], r = Array.isArray(s) ? s : [s], c = r.filter(d), o = r.filter(
-    (n) => typeof n == "string" || typeof n == "number"
-  ), i = (n) => o.includes(n.key), l = (n) => {
-    e.push(n), i(n) && c.push(n);
+  const e = [], r = Array.isArray(s) ? s : [s], o = r.filter(g), c = new Set(
+    r.filter(
+      (n) => typeof n == "string" || typeof n == "number"
+    )
+  ), h = (n) => c.has(n.key), l = (n) => {
+    e.push(n), h(n) && o.push(n);
   };
   return t.forEach((n) => {
     a(n) ? n.options.forEach(l) : l(n);
-  }), { flatOptions: e, selectedOptions: c };
+  }), { flatOptions: e, selectedOptions: o };
 }
 function E({
   visibleOptions: t,
   listRef: s,
   styleTargetRef: e = s,
   open: r,
-  invalidate: c
+  invalidate: o
 }) {
   p(() => {
-    const o = s.current, i = e.current;
-    if (r && o && i) {
+    const c = s.current, h = e.current;
+    if (r && c && h) {
       const l = [].slice.call(
-        o.children,
+        c.children,
         0,
         t + 1
       );
-      let n = l.slice(0, t).reduce((h, u) => h + u.clientHeight, 0);
-      t < o.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), i.style.height = `${n}px`;
+      let n = l.slice(0, t).reduce((i, u) => i + u.clientHeight, 0);
+      t < c.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), h.style.height = `${n}px`;
     }
-  }, [s, r, e, t, c]);
+  }, [s, r, e, t, o]);
 }
 const j = (t, s) => {
   for (let e = t.length - 1; e >= 0; e--)
@@ -47,7 +49,7 @@ const j = (t, s) => {
 export {
   m as convertToOptions,
   a as isGroup,
-  d as isOptionShape,
+  g as isOptionShape,
   O as joinOptions,
   j as lastIndexOf,
   k as processOptions,