@laser-ui/components 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/laser-ui/laser-ui/compare/v0.4.1...v0.5.0) (2024-01-31)
+
+### Features
+
+- **components:** add `popupRender` prop for custom popup ([e9814ba](https://github.com/laser-ui/laser-ui/commit/e9814baccc1d38dd68645618b0ba92e323f843b0))
+
+## [0.4.1](https://github.com/laser-ui/laser-ui/compare/v0.4.0...v0.4.1) (2023-12-12)
+
+### Bug Fixes
+
+- **ui:** fix get window size ([c909d89](https://github.com/laser-ui/laser-ui/commit/c909d898d48d715758744d4201888824e1e09af4))
+
 # [0.4.0](https://github.com/laser-ui/laser-ui/compare/v0.3.0...v0.4.0) (2023-12-06)
 
 ### Features

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="//laser-ui.surge.sh/" rel="noopener" target="_blank"><img width="150" src="apps/site/public/logo.png" alt="logo"></a>
+  <a href="//laser-ui.github.io/" rel="noopener" target="_blank"><img width="150" src="apps/site/public/logo.png" alt="logo"></a>
 </p>
 
 <h1 align="center">Laser UI</h1>
@@ -59,7 +59,7 @@ export default function App() {
 
 ## Links
 
-- [laser-ui.surge.sh](//laser-ui.surge.sh)
+- [laser-admin.surge.sh](//laser-admin.surge.sh)
 
 ## Contributing
 

package/cascader/Cascader.js

@@ -26,7 +26,7 @@ import { TREE_NODE_KEY } from '../tree/vars';
 import { getVerticalSidePosition, isPrintableCharacter, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
 function CascaderFC(props, ref) {
-    const _a = useComponentProps('Cascader', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputRef: inputRefProp, inputRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange"]);
+    const _a = useComponentProps('Cascader', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputRef: inputRefProp, inputRender, popupRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputRef", "inputRender", "popupRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { cascader: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.cascader, 'cascader-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['cascader-popup'] }, styleOverrides);
     const sheet = useJSS();
@@ -471,18 +471,21 @@ function CascaderFC(props, ref) {
                             default:
                                 break;
                         }
-                        return (_jsxs("div", Object.assign({}, mergeCS(styled('cascader-popup'), {
+                        return (_jsx("div", Object.assign({}, mergeCS(styled('cascader-popup'), {
                             style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {
                                 preventBlur(e);
-                            }, children: [loading && (_jsx("div", Object.assign({}, styled('cascader-popup__loading', {
-                                    'cascader-popup__loading--empty': isEmpty,
-                                }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && isEmpty ? null : hasSearch ? (_jsx(CascaderSearchPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
-                                        changeItemFocusedWithSearch(item);
-                                        changeSelectedByClickWithSearch(item);
-                                    } })) : (_jsx(CascaderPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: nodes, customItem: customItem, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, multiple: multiple, virtual: virtual, focusVisible: focusVisible, onFocus: changeItemFocusedWithoutSearch, onClick: changeSelectedByClickWithoutSearch }))] })));
+                            }, children: (() => {
+                                const el = (_jsxs("div", Object.assign({}, styled('cascader-popup__content'), { children: [loading && (_jsx("div", Object.assign({}, styled('cascader-popup__loading', {
+                                            'cascader-popup__loading--empty': isEmpty,
+                                        }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && isEmpty ? null : hasSearch ? (_jsx(CascaderSearchPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
+                                                changeItemFocusedWithSearch(item);
+                                                changeSelectedByClickWithSearch(item);
+                                            } })) : (_jsx(CascaderPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: nodes, customItem: customItem, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, multiple: multiple, virtual: virtual, focusVisible: focusVisible, onFocus: changeItemFocusedWithoutSearch, onClick: changeSelectedByClickWithoutSearch }))] })));
+                                return popupRender ? popupRender(el) : el;
+                            })() })));
                     } }) })] }));
 }
 export const Cascader = forwardRef(CascaderFC);

package/cascader/types.d.ts

@@ -40,6 +40,7 @@ export interface CascaderProps<V extends React.Key, T extends CascaderItem<V>> e
     };
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     inputRender?: CloneHTMLElement;
+    popupRender?: (el: React.ReactElement) => React.ReactNode;
     onModelChange?: (value: any, origin: any) => void;
     onVisibleChange?: (visible: boolean) => void;
     onSearch?: (value: string) => void;

package/cascader/vars.d.ts

@@ -16,6 +16,7 @@ export declare const CLASSES: {
     cascader__icon: string;
     cascader__arrow: string;
     'cascader-popup': string;
+    'cascader-popup__content': string;
     'cascader-popup__loading': string;
     'cascader-popup__loading--empty': string;
     cascader__list: string;

package/cascader/vars.js

@@ -16,6 +16,7 @@ export const CLASSES = {
     cascader__icon: '^cascader__icon',
     cascader__arrow: '^cascader__arrow',
     'cascader-popup': '^cascader-popup',
+    'cascader-popup__content': '^cascader-popup__content',
     'cascader-popup__loading': '^cascader-popup__loading',
     'cascader-popup__loading--empty': '^cascader-popup__loading--empty',
     cascader__list: '^cascader__list',

package/dropdown/Dropdown.js

@@ -18,7 +18,7 @@ import { getVerticalSidePosition, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
 function DropdownFC(props, ref) {
     var _a;
-    const _b = useComponentProps('Dropdown', props), { children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, escClosable = true, zIndex: zIndexProp, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "zIndex", "onVisibleChange", "afterVisibleChange", "onClick"]);
+    const _b = useComponentProps('Dropdown', props), { children, styleOverrides, styleProvider, list, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'bottom-right', placementFixed = false, arrow = false, escClosable = true, zIndex: zIndexProp, popupRender, onVisibleChange, afterVisibleChange, onClick } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "list", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "zIndex", "popupRender", "onVisibleChange", "afterVisibleChange", "onClick"]);
     const namespace = useNamespace();
     const { t } = useTranslation();
     const styled = useStyled(CLASSES, { dropdown: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.dropdown, 'dropdown-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['dropdown-popup'] }, styleOverrides);
@@ -372,7 +372,10 @@ function DropdownFC(props, ref) {
                                         preventBlur(e);
                                     }, children: renderPopup(_jsxs("div", Object.assign({}, mergeCS(styled('dropdown-popup'), {
                                         style: Object.assign({ zIndex }, transitionStyle),
-                                    }), { ref: popupRef, children: [_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No Data') })) : nodes })), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] }))) })));
+                                    }), { ref: popupRef, children: [(() => {
+                                                const el = (_jsx("ul", Object.assign({}, styled('dropdown__list'), { ref: ulRef, id: id, tabIndex: -1, role: "menu", "aria-labelledby": triggerId, "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), children: list.length === 0 ? _jsx("div", Object.assign({}, styled('dropdown__empty'), { children: t('No Data') })) : nodes })));
+                                                return popupRender ? popupRender(el) : el;
+                                            })(), arrow && _jsx("div", Object.assign({}, styled('dropdown__arrow')))] }))) })));
                             } }) })] }));
         } }));
 }

package/dropdown/types.d.ts

@@ -25,6 +25,7 @@ export interface DropdownProps<ID extends React.Key, T extends DropdownItem<ID>>
     arrow?: boolean;
     escClosable?: boolean;
     zIndex?: number | string;
+    popupRender?: (el: React.ReactElement) => React.ReactNode;
     onVisibleChange?: (visible: boolean) => void;
     afterVisibleChange?: (visible: boolean) => void;
     onClick?: (id: ID, origin: T) => void | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,8 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.4.0",
-    "@laser-ui/utils": "0.4.0",
+    "@laser-ui/hooks": "0.5.0",
+    "@laser-ui/utils": "0.5.0",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -45,5 +45,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "434cf3de2a91e6557cf77801eda230c46e137ec9"
+  "gitHead": "0c9f6009f6ad197c8870046b52277485a5217747"
 }

package/root/Root.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useRefExtra } from '@laser-ui/hooks';
 import { isString, set } from 'lodash';
 import { useStore } from 'rcl-store';
@@ -7,10 +7,32 @@ import { ROOT_DATA, RootContext, Store } from './vars';
 import dayjs from '../dayjs';
 import { Portal } from '../internal/portal';
 import resources from '../resources.json';
+function WindowSize() {
+    const windowSizeRef = useRef(null);
+    useEffect(() => {
+        if (windowSizeRef.current) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                ROOT_DATA.windowSize = { width: entry.contentRect.width, height: entry.contentRect.height };
+            });
+            observer.observe(windowSizeRef.current);
+            return () => {
+                observer.disconnect();
+            };
+        }
+    });
+    return (_jsx("div", { ref: windowSizeRef, style: {
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            pointerEvents: 'none',
+        } }));
+}
 export function Root(props) {
     const { context: contextProp, children } = props;
     const windowRef = useRefExtra(() => window);
-    const windowSizeRef = useRef(null);
     const [{ dialogs }] = useStore(Store, ['dialogs']);
     useEvent(windowRef, 'click', (e) => {
         // Check if click by keydown
@@ -25,18 +47,6 @@ export function Root(props) {
             }
         }
     }, { capture: true });
-    useEffect(() => {
-        if (windowSizeRef.current) {
-            const observer = new ResizeObserver(() => {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                ROOT_DATA.windowSize = { width: windowSizeRef.current.clientWidth, height: windowSizeRef.current.clientHeight };
-            });
-            observer.observe(windowSizeRef.current);
-            return () => {
-                observer.disconnect();
-            };
-        }
-    });
     const context = useMemo(() => {
         var _a, _b;
         const { i18n } = contextProp !== null && contextProp !== void 0 ? contextProp : {};
@@ -74,12 +84,5 @@ export function Root(props) {
         default:
             break;
     }
-    return (_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ type, key, props }) => createElement(type, Object.assign({ key }, props))), _jsx(Portal, { selector: () => document.body, children: _jsx("div", { ref: windowSizeRef, style: {
-                        position: 'fixed',
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0,
-                        pointerEvents: 'none',
-                    } }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ type, key, props }) => createElement(type, Object.assign({ key }, props)))] }), _jsx(Portal, { selector: () => document.body, children: _jsx(WindowSize, {}) })] }));
 }

package/select/Select.js

@@ -25,7 +25,7 @@ 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 _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, popupRender, 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", "popupRender", "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 sheet = useJSS();
@@ -490,44 +490,47 @@ function SelectFC(props, ref) {
                             default:
                                 break;
                         }
-                        return (_jsxs("div", Object.assign({}, mergeCS(styled('select-popup'), {
+                        return (_jsx("div", Object.assign({}, mergeCS(styled('select-popup'), {
                             style: Object.assign({ zIndex }, 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);
+                            }, children: (() => {
+                                const el = (_jsxs("div", Object.assign({}, styled('select-popup__content'), { 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));
                                                 }
-                                                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 }))) })))] })));
+                                                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 }))) })))] })));
+                                return popupRender ? popupRender(el) : el;
+                            })() })));
                     } }) })] }));
 }
 export const Select = forwardRef(SelectFC);

package/select/types.d.ts

@@ -40,6 +40,7 @@ export interface SelectProps<V extends React.Key, T extends SelectItem<V>> exten
     createItem?: (value: string) => T | undefined;
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     inputRender?: CloneHTMLElement;
+    popupRender?: (el: React.ReactElement) => React.ReactNode;
     onModelChange?: (value: any, origin: any) => void;
     onVisibleChange?: (visible: boolean) => void;
     onSearch?: (value: string) => void;

package/select/vars.d.ts

@@ -16,6 +16,7 @@ export declare const CLASSES: {
     select__icon: string;
     select__arrow: string;
     'select-popup': string;
+    'select-popup__content': string;
     'select-popup__loading': string;
     'select-popup__loading--empty': string;
     select__list: string;

package/select/vars.js

@@ -16,6 +16,7 @@ export const CLASSES = {
     select__icon: '^select__icon',
     select__arrow: '^select__arrow',
     'select-popup': '^select-popup',
+    'select-popup__content': '^select-popup__content',
     'select-popup__loading': '^select-popup__loading',
     'select-popup__loading--empty': '^select-popup__loading--empty',
     select__list: '^select__list',

package/tree-select/TreeSelect.js

@@ -26,7 +26,7 @@ import { TREE_NODE_KEY } from '../tree/vars';
 import { getVerticalSidePosition, isPrintableCharacter, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
 function TreeSelectFC(props, ref) {
-    const _a = useComponentProps('TreeSelect', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, expands: expandsProp, defaultExpands, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, showLine = false, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputRef: inputRefProp, inputRender, onModelChange, onFirstExpand, onExpandsChange, onVisibleChange, onSearch, onClear, afterVisibleChange, onScrollBottom } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "expands", "defaultExpands", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "showLine", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputRef", "inputRender", "onModelChange", "onFirstExpand", "onExpandsChange", "onVisibleChange", "onSearch", "onClear", "afterVisibleChange", "onScrollBottom"]);
+    const _a = useComponentProps('TreeSelect', props), { styleOverrides, styleProvider, formControl, list, model, defaultModel, expands: expandsProp, defaultExpands, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, showLine = false, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputRef: inputRefProp, inputRender, popupRender, onModelChange, onFirstExpand, onExpandsChange, onVisibleChange, onSearch, onClear, afterVisibleChange, onScrollBottom } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "expands", "defaultExpands", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "showLine", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputRef", "inputRender", "popupRender", "onModelChange", "onFirstExpand", "onExpandsChange", "onVisibleChange", "onSearch", "onClear", "afterVisibleChange", "onScrollBottom"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, {
         'tree-select': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['tree-select'],
@@ -493,18 +493,21 @@ function TreeSelectFC(props, ref) {
                             default:
                                 break;
                         }
-                        return (_jsxs("div", Object.assign({}, mergeCS(styled('tree-select-popup'), {
+                        return (_jsx("div", Object.assign({}, mergeCS(styled('tree-select-popup'), {
                             style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {
                                 preventBlur(e);
-                            }, children: [loading && (_jsx("div", Object.assign({}, styled('tree-select-popup__loading', {
-                                    'tree-select-popup__loading--empty': isEmpty,
-                                }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && isEmpty ? null : hasSearch ? (_jsx(TreeSelectSearchPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
-                                        setItemFocusedWithSearch(item);
-                                        changeSelectedByClickWithSearch(item);
-                                    } })) : (_jsx(TreePanel, { style: { maxHeight: 264, padding: '4px 0' }, ref: focusRef, id: listId, namespace: namespace, styled: styled, list: nodes, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, expands: expands, customItem: customItem, showLine: showLine, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, disabled: false, virtual: virtual === false ? undefined : { listSize: 264, listPadding: 4, itemSize: isNumber(virtual) ? virtual : 32 }, focusVisible: focusVisible, onNodeFocus: setItemFocusedWithoutSearch, onNodeExpand: handleExpand, onNodeClick: changeSelectedByClickWithoutSearch, onScrollBottom: onScrollBottom }))] })));
+                            }, children: (() => {
+                                const el = (_jsxs("div", Object.assign({}, styled('tree-select-popup__content'), { children: [loading && (_jsx("div", Object.assign({}, styled('tree-select-popup__loading', {
+                                            'tree-select-popup__loading--empty': isEmpty,
+                                        }), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), loading && isEmpty ? null : hasSearch ? (_jsx(TreeSelectSearchPanel, { ref: focusRef, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
+                                                setItemFocusedWithSearch(item);
+                                                changeSelectedByClickWithSearch(item);
+                                            } })) : (_jsx(TreePanel, { style: { maxHeight: 264, padding: '4px 0' }, ref: focusRef, id: listId, namespace: namespace, styled: styled, list: nodes, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, expands: expands, customItem: customItem, showLine: showLine, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, disabled: false, virtual: virtual === false ? undefined : { listSize: 264, listPadding: 4, itemSize: isNumber(virtual) ? virtual : 32 }, focusVisible: focusVisible, onNodeFocus: setItemFocusedWithoutSearch, onNodeExpand: handleExpand, onNodeClick: changeSelectedByClickWithoutSearch, onScrollBottom: onScrollBottom }))] })));
+                                return popupRender ? popupRender(el) : el;
+                            })() })));
                     } }) })] }));
 }
 export const TreeSelect = forwardRef(TreeSelectFC);

package/tree-select/types.d.ts

@@ -37,6 +37,7 @@ export interface TreeSelectProps<V extends React.Key, T extends TreeItem<V>> ext
     };
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     inputRender?: CloneHTMLElement;
+    popupRender?: (el: React.ReactElement) => React.ReactNode;
     onModelChange?: (value: any, origin: any) => void;
     onFirstExpand?: (value: V, origin: T) => void;
     onExpandsChange?: (values: V[], origins: T[]) => void;

package/tree-select/vars.d.ts

@@ -16,6 +16,7 @@ export declare const CLASSES: {
     'tree-select__icon': string;
     'tree-select__arrow': string;
     'tree-select-popup': string;
+    'tree-select-popup__content': string;
     'tree-select-popup__loading': string;
     'tree-select-popup__loading--empty': string;
     tree: string;

package/tree-select/vars.js

@@ -16,6 +16,7 @@ export const CLASSES = {
     'tree-select__icon': '^tree-select__icon',
     'tree-select__arrow': '^tree-select__arrow',
     'tree-select-popup': '^tree-select-popup',
+    'tree-select-popup__content': '^tree-select-popup__content',
     'tree-select-popup__loading': '^tree-select-popup__loading',
     'tree-select-popup__loading--empty': '^tree-select-popup__loading--empty',
     tree: '^tree',