@laser-ui/components 0.0.1

package/select/Select.js

@@ -0,0 +1,528 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
+import { findNested, scrollIntoViewIfNeeded } from '@laser-ui/utils';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import { isNull, isNumber, isUndefined } from 'lodash';
+import { createElement, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { CLASSES, IS_CREATED } from './vars';
+import { Checkbox } from '../checkbox';
+import { Dropdown } from '../dropdown';
+import { Empty } from '../empty';
+import { useComponentProps, useControlled, useDesign, useFocusVisible, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { ROOT_DATA } from '../root/vars';
+import { Tag } from '../tag';
+import { getVerticalSidePosition, isPrintableCharacter, mergeCS } from '../utils';
+import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
+import { VirtualScroll } from '../virtual-scroll';
+function SelectFC(props, ref) {
+    const _a = useComponentProps('Select', props), { styleOverrides, styleProvider, formControl, list: listProp, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, monospaced = true, virtual = false, escClosable = true, customItem, customSelected, customSearch, createItem, inputRef: inputRefProp, inputRender, onModelChange, onVisibleChange, onSearch, onClear, onCreateItem, onScrollBottom, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "clearable", "loading", "size", "disabled", "monospaced", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "createItem", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onCreateItem", "onScrollBottom", "afterVisibleChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { select: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.select, 'select-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['select-popup'] }, styleOverrides);
+    const { t } = useTranslation();
+    const uniqueId = useId();
+    const listId = `${namespace}-select-list-${uniqueId}`;
+    const getItemId = (val) => `${namespace}-select-item-${val}-${uniqueId}`;
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const boxRef = useRef(null);
+    const popupRef = useRef(null);
+    const listRef = useRef(null);
+    const inputRef = useRef(null);
+    const combineInputRef = useForkRef(inputRef, inputRefProp);
+    const vsRef = useRef(null);
+    const itemsMap = useMemo(() => {
+        const items = new Map();
+        const reduceArr = (arr) => {
+            for (const item of arr) {
+                items.set(item.value, item);
+                if (item.children) {
+                    reduceArr(item.children);
+                }
+            }
+        };
+        reduceArr(listProp);
+        return items;
+    }, [listProp]);
+    const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
+    const [searchValue, changeSearchValue] = useControlled(defaultSearchValue !== null && defaultSearchValue !== void 0 ? defaultSearchValue : '', searchValueProp, onSearch);
+    const canSelectedItem = useCallback((item) => !item.disabled && !item.children, []);
+    const [_selected, changeSelected] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : (multiple ? [] : null), model, (value) => {
+        if (onModelChange) {
+            if (multiple) {
+                onModelChange(value, value.map((v) => itemsMap.get(v)));
+            }
+            else {
+                onModelChange(value, isNull(value) ? null : itemsMap.get(value));
+            }
+        }
+    }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const selected = useMemo(() => (multiple ? new Set(_selected) : _selected), [_selected, multiple]);
+    const changeSelectedByClick = (val) => {
+        if (multiple) {
+            changeSelected((draft) => {
+                const index = draft.findIndex((v) => v === val);
+                if (index !== -1) {
+                    draft.splice(index, 1);
+                }
+                else {
+                    draft.push(val);
+                }
+            });
+        }
+        else {
+            changeSelected(val);
+            changeVisible(false);
+        }
+    };
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const hasSearch = searchValue.length > 0;
+    const hasSelected = multiple ? selected.size > 0 : !isNull(selected);
+    const searchList = (() => {
+        if (!hasSearch) {
+            return [];
+        }
+        const filterFn = isUndefined(customSearch === null || customSearch === void 0 ? void 0 : customSearch.filter)
+            ? (item) => item.label.includes(searchValue)
+            : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                (item) => customSearch.filter(searchValue, item);
+        const sortFn = customSearch === null || customSearch === void 0 ? void 0 : customSearch.sort;
+        let itemCreated = createItem === null || createItem === void 0 ? void 0 : createItem(searchValue);
+        if (itemCreated) {
+            itemCreated = Object.assign(Object.assign({}, itemCreated), { [IS_CREATED]: true });
+        }
+        let searchList = [];
+        listProp.forEach((item) => {
+            if (!item.children) {
+                if (itemCreated && item.value === itemCreated.value) {
+                    itemCreated = undefined;
+                }
+                if (filterFn(item)) {
+                    searchList.push(item);
+                }
+            }
+            else {
+                const groupList = [];
+                item.children.forEach((groupItem) => {
+                    if (itemCreated && groupItem.value === itemCreated.value) {
+                        itemCreated = undefined;
+                    }
+                    if (filterFn(groupItem)) {
+                        groupList.push(groupItem);
+                    }
+                });
+                searchList = searchList.concat(groupList);
+            }
+        });
+        if (sortFn) {
+            searchList.sort(sortFn);
+        }
+        if (itemCreated) {
+            searchList.unshift(itemCreated);
+        }
+        return searchList;
+    })();
+    const list = hasSearch ? searchList : listProp;
+    const [focusVisible, focusVisibleWrapper] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
+    const [_itemFocusedWithoutSearch, setItemFocusedWithoutSearch] = useState();
+    const itemFocusedWithoutSearch = (() => {
+        let itemFocused;
+        if (_itemFocusedWithoutSearch) {
+            itemFocused = itemsMap.get(_itemFocusedWithoutSearch.value);
+            if (itemFocused && canSelectedItem(itemFocused)) {
+                return itemFocused;
+            }
+        }
+        if (hasSelected) {
+            itemFocused = findNested(listProp, (item) => canSelectedItem(item) && multiple ? selected.has(item.value) : selected === item.value);
+        }
+        if (isUndefined(itemFocused)) {
+            itemFocused = findNested(listProp, (item) => canSelectedItem(item));
+        }
+        return itemFocused;
+    })();
+    const [_itemFocusedWithSearch, setItemFocusedWithSearch] = useState();
+    const itemFocusedWithSearch = (() => {
+        if (_itemFocusedWithSearch && findNested(searchList, (item) => canSelectedItem(item) && item.value === _itemFocusedWithSearch.value)) {
+            return _itemFocusedWithSearch;
+        }
+        if (hasSearch) {
+            return findNested(searchList, (item) => canSelectedItem(item));
+        }
+    })();
+    const itemFocused = hasSearch ? itemFocusedWithSearch : itemFocusedWithoutSearch;
+    const changeItemFocused = (item) => {
+        hasSearch ? setItemFocusedWithSearch(item) : setItemFocusedWithoutSearch(item);
+    };
+    const handleCreateItem = (item) => {
+        if (!isUndefined(item)) {
+            const newItem = Object.assign({}, item);
+            delete newItem[IS_CREATED];
+            onCreateItem === null || onCreateItem === void 0 ? void 0 : onCreateItem(newItem);
+        }
+    };
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const updatePosition = useEventCallback(() => {
+        if (visible && boxRef.current && popupRef.current) {
+            if (monospaced) {
+                const width = Math.min(boxRef.current.offsetWidth, ROOT_DATA.windowSize.width - WINDOW_SPACE * 2);
+                const height = popupRef.current.offsetHeight;
+                const position = getVerticalSidePosition(boxRef.current, { width, height }, {
+                    placement: 'bottom',
+                    inWindow: WINDOW_SPACE,
+                });
+                setTransformOrigin(position.transformOrigin);
+                setPopupPositionStyle({
+                    top: position.top,
+                    left: position.left,
+                    width,
+                });
+            }
+            else {
+                const boxWidth = boxRef.current.offsetWidth;
+                const height = popupRef.current.offsetHeight;
+                const maxWidth = ROOT_DATA.windowSize.width - WINDOW_SPACE * 2;
+                const width = Math.min(Math.max(popupRef.current.scrollWidth, boxWidth), maxWidth);
+                const position = getVerticalSidePosition(boxRef.current, { width, height }, {
+                    placement: 'bottom-left',
+                    inWindow: WINDOW_SPACE,
+                });
+                setTransformOrigin(position.transformOrigin);
+                setPopupPositionStyle({
+                    top: position.top,
+                    left: position.left,
+                    minWidth: Math.min(boxWidth, maxWidth),
+                    maxWidth,
+                });
+            }
+        }
+    });
+    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
+    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useResize(boxRef, updatePosition, undefined, !visible);
+    useResize(popupRef, updatePosition, undefined, !visible);
+    useResize(contentResizeRef, updatePosition, undefined, !visible);
+    useImperativeHandle(ref, () => ({
+        updatePosition,
+    }), [updatePosition]);
+    const preventBlur = (e) => {
+        if (document.activeElement === inputRef.current && e.target !== inputRef.current && e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const scrollCallback = useRef();
+    const inputable = searchable && visible;
+    const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
+    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('select__search'), {
+        style: {
+            opacity: inputable ? undefined : 0,
+            zIndex: inputable ? undefined : -1,
+        },
+    })), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria), { ref: combineInputRef, tabIndex: disabled ? -1 : 0, role: 'combobox', 'aria-haspopup': 'listbox', 'aria-expanded': visible, 'aria-controls': listId, onBlur: () => {
+            changeVisible(false);
+        }, onKeyDown: (e) => {
+            if (e.code === 'Escape') {
+                if (visible && escClosable) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    changeVisible(false);
+                }
+            }
+            else {
+                const focusItem = (code) => {
+                    var _a, _b, _c, _d;
+                    if (listRef.current) {
+                        let item;
+                        switch (code) {
+                            case 'next':
+                                item = (_a = vsRef.current) === null || _a === void 0 ? void 0 : _a.scrollToStep(listRef.current, 1);
+                                break;
+                            case 'prev':
+                                item = (_b = vsRef.current) === null || _b === void 0 ? void 0 : _b.scrollToStep(listRef.current, -1);
+                                break;
+                            case 'first':
+                                item = (_c = vsRef.current) === null || _c === void 0 ? void 0 : _c.scrollToStart(listRef.current);
+                                break;
+                            case 'last':
+                                item = (_d = vsRef.current) === null || _d === void 0 ? void 0 : _d.scrollToEnd(listRef.current);
+                                break;
+                            default:
+                                break;
+                        }
+                        if (item) {
+                            changeItemFocused(item);
+                            if (virtual === false) {
+                                scrollCallback.current = () => {
+                                    const el = document.getElementById(getItemId(item.value));
+                                    if (el) {
+                                        scrollIntoViewIfNeeded(el, listRef.current);
+                                    }
+                                };
+                                if (visible) {
+                                    scrollCallback.current();
+                                    scrollCallback.current = undefined;
+                                }
+                            }
+                        }
+                    }
+                };
+                if (visible) {
+                    switch (e.code) {
+                        case 'ArrowUp': {
+                            e.preventDefault();
+                            focusItem('prev');
+                            break;
+                        }
+                        case 'ArrowDown': {
+                            e.preventDefault();
+                            focusItem('next');
+                            break;
+                        }
+                        case 'Home': {
+                            e.preventDefault();
+                            focusItem('first');
+                            break;
+                        }
+                        case 'End': {
+                            e.preventDefault();
+                            focusItem('last');
+                            break;
+                        }
+                        default: {
+                            if (e.code === 'Enter' || (e.code === 'Space' && !searchable)) {
+                                e.preventDefault();
+                                if (itemFocused) {
+                                    if (itemFocused[IS_CREATED]) {
+                                        handleCreateItem(itemFocused);
+                                    }
+                                    changeSelectedByClick(itemFocused.value);
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+                else if (!(searchable && ['Home', 'End', 'Enter', 'Space'].includes(e.code))) {
+                    switch (e.code) {
+                        case 'End':
+                        case 'ArrowUp': {
+                            e.preventDefault();
+                            changeVisible(true);
+                            focusItem('last');
+                            break;
+                        }
+                        case 'Home':
+                        case 'ArrowDown': {
+                            e.preventDefault();
+                            changeVisible(true);
+                            focusItem('first');
+                            break;
+                        }
+                        case 'Enter':
+                        case 'Space': {
+                            e.preventDefault();
+                            changeVisible(true);
+                            break;
+                        }
+                        default: {
+                            if (isPrintableCharacter(e.key)) {
+                                changeVisible(true);
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        }, onChange: (e) => {
+            if (searchable) {
+                changeSearchValue(e.currentTarget.value);
+            }
+        } }), searchable
+        ? {
+            type: 'text',
+            value: searchValue,
+            autoComplete: 'off',
+            disabled,
+        }
+        : {})));
+    const [selectedNode, suffixNode, selectedLabel] = (() => {
+        let selectedNode = null;
+        let suffixNode = null;
+        let selectedLabel;
+        if (multiple) {
+            const selectedItems = [];
+            for (const v of _selected) {
+                const item = itemsMap.get(v);
+                if (item) {
+                    selectedItems.push(item);
+                }
+            }
+            suffixNode = (_jsx(Dropdown, { list: selectedItems.map((item) => {
+                    const { label: itemLabel, value: itemValue, disabled: itemDisabled } = item;
+                    const text = customSelected ? customSelected(item) : itemLabel;
+                    return {
+                        id: itemValue,
+                        title: text,
+                        type: 'item',
+                        disabled: itemDisabled,
+                    };
+                }), onClick: (id) => {
+                    changeSelectedByClick(id);
+                    return false;
+                }, children: _jsx(Tag, { tabIndex: -1, size: size, children: selected.size }) }));
+            selectedNode = selectedItems.map((item) => (_jsxs(Tag, { size: size, children: [customSelected ? customSelected(item) : item.label, !(item.disabled || disabled) && (_jsx("div", Object.assign({}, styled('select__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
+                            e.stopPropagation();
+                            changeSelectedByClick(item.value);
+                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, item.value)));
+        }
+        else {
+            if (!isNull(selected)) {
+                const item = itemsMap.get(selected);
+                if (item) {
+                    selectedLabel = item.label;
+                    selectedNode = customSelected ? customSelected(item) : selectedLabel;
+                }
+            }
+        }
+        return [selectedNode, suffixNode, selectedLabel];
+    })();
+    const designProps = useDesign({ compose: { disabled }, form: formControl });
+    const vsProps = useMemo(() => ({
+        list,
+        itemKey: (item) => item.value,
+        itemSize: isNumber(virtual) ? virtual : 32,
+        itemEmptySize: 32,
+        itemNested: (item) => item.children,
+        itemFocusable: canSelectedItem,
+    }), [canSelectedItem, list, virtual]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({}, restProps, mergeCS(styled('select', `select--${size}`, {
+                'select.is-expanded': visible,
+                'select.is-disabled': disabled,
+            }), {
+                className: restProps.className,
+                style: restProps.style,
+            }), designProps, { ref: boxRef, onMouseDown: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onMouseUp: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onClick: (e) => {
+                    var _a, _b;
+                    (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+                    changeVisible((draft) => (searchable ? true : !draft));
+                }, children: [_jsxs("div", Object.assign({}, styled('select__container'), { title: selectedLabel, children: [inputRender ? inputRender(inputNode) : inputNode, !inputable &&
+                                (hasSelected ? (_jsx("div", Object.assign({}, styled('select__content'), { children: selectedNode }))) : placeholder ? (_jsx("div", Object.assign({}, styled('select__placeholder-wrapper'), { children: _jsx("div", Object.assign({}, styled('select__placeholder'), { children: placeholder })) }))) : null)] })), multiple && (_jsx("div", Object.assign({}, styled('select__multiple-count'), { onClick: (e) => {
+                            e.stopPropagation();
+                        }, children: suffixNode }))), clearable && (_jsx("div", Object.assign({}, styled('select__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
+                            e.stopPropagation();
+                            if (multiple) {
+                                changeSelected([]);
+                            }
+                            else {
+                                changeSelected(null);
+                            }
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                        }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), _jsx("div", Object.assign({}, mergeCS(styled('select__icon'), {
+                        style: { visibility: clearable ? 'hidden' : undefined },
+                    }), { children: _jsx(Icon, { children: loading ? _jsx(CircularProgress, {}) : inputable ? _jsx(SearchOutlined, {}) : _jsx(KeyboardArrowDownOutlined, Object.assign({}, styled('select__arrow'))) }) }))] })), _jsx(Portal, { selector: () => {
+                    let el = document.getElementById(`${namespace}-select-root`);
+                    if (!el) {
+                        el = document.createElement('div');
+                        el.id = `${namespace}-select-root`;
+                        document.body.appendChild(el);
+                    }
+                    return el;
+                }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: () => {
+                        var _a;
+                        updatePosition();
+                        (_a = scrollCallback.current) === null || _a === void 0 ? void 0 : _a.call(scrollCallback);
+                        scrollCallback.current = undefined;
+                    }, afterEnter: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                    }, afterLeave: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                    }, children: (state) => {
+                        let transitionStyle = {};
+                        switch (state) {
+                            case 'enter':
+                                transitionStyle = { transform: 'scaleY(0.7)', opacity: 0 };
+                                break;
+                            case 'entering':
+                                transitionStyle = {
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaving':
+                                transitionStyle = {
+                                    transform: 'scaleY(0.7)',
+                                    opacity: 0,
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaved':
+                                transitionStyle = { display: 'none' };
+                                break;
+                            default:
+                                break;
+                        }
+                        return (_jsxs("div", Object.assign({}, mergeCS(styled('select-popup'), {
+                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                        }), { ref: popupRef, onMouseDown: (e) => {
+                                preventBlur(e);
+                            }, onMouseUp: (e) => {
+                                preventBlur(e);
+                            }, children: [loading && (_jsx("div", Object.assign({}, styled('select-popup__loading', {
+                                    'select-popup__loading--empty': list.length === 0,
+                                }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && list.length === 0 ? null : (_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props, ancestry, children) => {
+                                        const { label: itemLabel, value: itemValue, disabled: itemDisabled } = item;
+                                        const node = customItem ? customItem(item) : itemLabel;
+                                        if (children) {
+                                            return (_createElement("ul", Object.assign({}, styled('select__option-group'), { key: itemValue, role: "group", "aria-labelledby": getItemId(itemValue) }),
+                                                _createElement("li", Object.assign({}, styled('select__option-group-label'), { key: itemValue, id: getItemId(itemValue), role: "presentation" }),
+                                                    _jsx("div", Object.assign({}, styled('select__option-content'), { children: node }))),
+                                                children));
+                                        }
+                                        let isSelected = false;
+                                        if (multiple) {
+                                            isSelected = selected.has(itemValue);
+                                        }
+                                        else {
+                                            isSelected = selected === itemValue;
+                                        }
+                                        return (_createElement("li", Object.assign({}, mergeCS(styled('select__option', {
+                                            'select__option.is-selected': !multiple && isSelected,
+                                            'select__option.is-disabled': itemDisabled,
+                                        }), { style: { paddingLeft: ancestry.length === 0 ? undefined : 12 + 8 } }), props, { key: itemValue, id: getItemId(itemValue), title: (item[IS_CREATED] ? t('Create') + ' ' : '') + itemLabel, role: "option", "aria-selected": isSelected, "aria-disabled": itemDisabled, onClick: () => {
+                                                if (item[IS_CREATED]) {
+                                                    handleCreateItem(item);
+                                                }
+                                                changeItemFocused(item);
+                                                changeSelectedByClick(itemValue);
+                                            } }),
+                                            focusVisible && (itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value) === itemValue && _jsx("div", { className: `${namespace}-focus-outline` }),
+                                            item[IS_CREATED] ? (_jsx("div", Object.assign({}, styled('select__option-prefix'), { children: _jsx(Icon, { theme: "primary", children: _jsx(AddOutlined, {}) }) }))) : multiple ? (_jsx("div", Object.assign({}, styled('select__option-prefix'), { children: _jsx(Checkbox, { model: isSelected, disabled: itemDisabled }) }))) : null,
+                                            _jsx("div", Object.assign({}, styled('select__option-content'), { children: node }))));
+                                    }, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value, itemEmptyRender: () => (_jsx("li", Object.assign({}, mergeCS(styled('select__empty'), { style: { paddingLeft: 12 + 8 } }), { children: _jsx("div", Object.assign({}, styled('select__option-content'), { children: t('No Data') })) }))), itemInAriaSetsize: (item) => !item.children, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('select__list'), { ref: listRef, id: listId, tabIndex: -1, role: "listbox", "aria-multiselectable": multiple, "aria-activedescendant": isUndefined(itemFocused) ? undefined : getItemId(itemFocused.value), onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 0' }, image: Empty.SIMPLE_IMG }) : vsList }))) })))] })));
+                    } }) })] }));
+}
+export const Select = forwardRef(SelectFC);

package/select/index.d.ts

@@ -0,0 +1,2 @@
+export type { SelectRef, SelectProps } from './types';
+export { Select } from './Select';

package/select/index.js

@@ -0,0 +1 @@
+export { Select } from './Select';

package/select/types.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface SelectRef {
+    updatePosition: () => void;
+}
+export interface SelectItem<V extends React.Key> {
+    label: string;
+    value: V;
+    disabled?: boolean;
+    children?: SelectItem<V>[];
+}
+export interface SelectProps<V extends React.Key, T extends SelectItem<V>> extends BaseProps<'select' | 'select-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    formControl?: FormControlProvider;
+    list: T[];
+    model?: V | null | V[];
+    defaultModel?: V | null | V[];
+    visible?: boolean;
+    defaultVisible?: boolean;
+    placeholder?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    clearable?: boolean;
+    loading?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    monospaced?: boolean;
+    virtual?: boolean | number;
+    escClosable?: boolean;
+    customItem?: (item: T) => React.ReactNode;
+    customSelected?: (selected: T) => string;
+    customSearch?: {
+        filter?: (value: string, item: T) => boolean;
+        sort?: (a: T, b: T) => number;
+    };
+    createItem?: (value: string) => T | undefined;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    inputRender?: CloneHTMLElement;
+    onModelChange?: (value: any, origin: any) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    onCreateItem?: (item: T) => void;
+    onScrollBottom?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/select/types.js

@@ -0,0 +1 @@
+export {};

package/select/vars.d.ts

@@ -0,0 +1,31 @@
+export declare const CLASSES: {
+    select: string;
+    'select.is-expanded': string;
+    'select.is-disabled': string;
+    'select--small': string;
+    'select--medium': string;
+    'select--large': string;
+    select__container: string;
+    select__content: string;
+    select__search: string;
+    'select__placeholder-wrapper': string;
+    select__placeholder: string;
+    'select__multiple-count': string;
+    select__close: string;
+    select__clear: string;
+    select__icon: string;
+    select__arrow: string;
+    'select-popup': string;
+    'select-popup__loading': string;
+    'select-popup__loading--empty': string;
+    select__list: string;
+    select__option: string;
+    'select__option.is-selected': string;
+    'select__option.is-disabled': string;
+    'select__option-prefix': string;
+    'select__option-content': string;
+    'select__option-group': string;
+    'select__option-group-label': string;
+    select__empty: string;
+};
+export declare const IS_CREATED: unique symbol;

package/select/vars.js

@@ -0,0 +1,31 @@
+export const CLASSES = {
+    select: '^select',
+    'select.is-expanded': 'is-expanded',
+    'select.is-disabled': 'is-disabled',
+    'select--small': '^select--small',
+    'select--medium': '^select--medium',
+    'select--large': '^select--large',
+    select__container: '^select__container',
+    select__content: '^select__content',
+    select__search: '^select__search',
+    'select__placeholder-wrapper': '^select__placeholder-wrapper',
+    select__placeholder: '^select__placeholder',
+    'select__multiple-count': '^select__multiple-count',
+    select__close: '^select__close',
+    select__clear: '^select__clear',
+    select__icon: '^select__icon',
+    select__arrow: '^select__arrow',
+    'select-popup': '^select-popup',
+    'select-popup__loading': '^select-popup__loading',
+    'select-popup__loading--empty': '^select-popup__loading--empty',
+    select__list: '^select__list',
+    select__option: '^select__option',
+    'select__option.is-selected': 'is-selected',
+    'select__option.is-disabled': 'is-disabled',
+    'select__option-prefix': '^select__option-prefix',
+    'select__option-content': '^select__option-content',
+    'select__option-group': '^select__option-group',
+    'select__option-group-label': '^select__option-group-label',
+    select__empty: '^select__empty',
+};
+export const IS_CREATED = Symbol();

package/separator/Separator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SeparatorProps } from './types';
+export declare function Separator(props: SeparatorProps): JSX.Element | null;