@laser-ui/components 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.3](https://github.com/laser-ui/laser-ui/compare/v0.6.2...v0.6.3) (2024-05-24)
+
+### Features
+
+- **components:** show selected even if no option ([ddcdf74](https://github.com/laser-ui/laser-ui/commit/ddcdf744faaf8c3ccd3359f00d5c56807b21b85f))
+
+## [0.6.2](https://github.com/laser-ui/laser-ui/compare/v0.6.1...v0.6.2) (2024-04-26)
+
+**Note:** Version bump only for package @laser-ui/components
+
 ## [0.6.1](https://github.com/laser-ui/laser-ui/compare/v0.6.0...v0.6.1) (2024-04-26)
 
 **Note:** Version bump only for package @laser-ui/components

package/cascader/Cascader.js

@@ -355,41 +355,36 @@ function CascaderFC(props, ref) {
         let suffixNode = null;
         let selectedLabel;
         if (multiple) {
-            const selectedNodes = [];
-            for (const v of _selected) {
-                const node = nodesMap.get(v);
-                if (node) {
-                    selectedNodes.push(node);
-                }
-            }
-            suffixNode = (_jsx(Dropdown, { list: selectedNodes.map((node) => {
-                    const { value: itemValue, disabled: itemDisabled } = node.origin;
-                    const title = customSelected ? customSelected(node.origin) : getTreeNodeLabel(node);
-                    return {
-                        id: itemValue,
-                        title,
-                        type: 'item',
-                        disabled: itemDisabled,
-                        node,
-                    };
-                }), onClick: (id, item) => {
-                    const checkeds = item.node.changeStatus('UNCHECKED', selected);
-                    changeSelected(Array.from(checkeds.keys()));
+            const selectedNodes = _selected.map((value) => {
+                const node = nodesMap.get(value);
+                return {
+                    value,
+                    label: customSelected ? customSelected(value, node === null || node === void 0 ? void 0 : node.origin) : node ? node.origin.label : String(value),
+                    node,
+                };
+            });
+            suffixNode = (_jsx(Dropdown, { list: selectedNodes.map(({ value, label, node }) => ({
+                    id: value,
+                    title: label,
+                    type: 'item',
+                    disabled: node === null || node === void 0 ? void 0 : node.origin.disabled,
+                })), onClick: (id) => {
+                    changeSelected((draft) => {
+                        draft.splice(draft.findIndex((v) => v === id), 1);
+                    });
                     return false;
                 }, children: _jsx(Tag, { tabIndex: -1, size: size, children: selected.size }) }));
-            selectedNode = selectedNodes.map((node) => (_jsxs(Tag, { size: size, children: [customSelected ? customSelected(node.origin) : node.origin.label, !(node.disabled || disabled) && (_jsx("div", Object.assign({}, styled('cascader__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
+            selectedNode = selectedNodes.map(({ value, label, node }) => (_jsxs(Tag, { size: size, children: [label, !((node === null || node === void 0 ? void 0 : node.disabled) || disabled) && (_jsx("div", Object.assign({}, styled('cascader__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
                             e.stopPropagation();
                             const checkeds = node.changeStatus('UNCHECKED', selected);
                             changeSelected(Array.from(checkeds.keys()));
-                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, node.id)));
+                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, value)));
         }
         else {
             if (!isNull(selected)) {
                 const node = nodesMap.get(selected);
-                if (node) {
-                    selectedLabel = getTreeNodeLabel(node);
-                    selectedNode = customSelected ? customSelected(node.origin) : selectedLabel;
-                }
+                selectedLabel = node ? getTreeNodeLabel(node) : String(selected);
+                selectedNode = customSelected ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin) : selectedLabel;
             }
         }
         return [selectedNode, suffixNode, selectedLabel];

package/cascader/types.d.ts

@@ -33,7 +33,7 @@ export interface CascaderProps<V extends React.Key, T extends CascaderItem<V>> e
     virtual?: boolean | number;
     escClosable?: boolean;
     customItem?: (item: T) => React.ReactNode;
-    customSelected?: (selected: T) => string;
+    customSelected?: (value: V, selected?: T) => string;
     customSearch?: {
         filter?: (value: string, item: T) => boolean;
         sort?: (a: T, b: T) => number;

package/drawer/Drawer.js

@@ -26,7 +26,7 @@ export const Drawer = (props) => {
     const bodyId = `${namespace}-drawer-content-${uniqueId}`;
     const drawerContext = useContext(DrawerContext);
     const drawerContextValue = useCallback((offsets) => {
-        const offset = (offsets[placement].reduce((v, r) => v + r, 0) / 3) * 2;
+        const offset = offsets[placement].reduce((sum, v) => Math.min((v / 3) * 2, 200) + sum, 0);
         if (drawerRef.current) {
             drawerRef.current.style.transform =
                 placement === 'top'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,6 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.6.1",
-    "@laser-ui/utils": "0.6.1",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -42,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "156633eb28f7306ce633cea5bf5a094045aa4ad8"
+  "gitHead": "6530707d94520350ae2c3fe412c98f879d84902b"
 }

package/pagination/Pagination.js

@@ -157,7 +157,7 @@ export function Pagination(props) {
                         label: size.toString(),
                         value: size,
                     }));
-                    return (_jsx("div", { children: _jsx("div", { style: { paddingRight: gap }, children: _jsx(Select, { list: list, model: pageSize, size: mini ? 'small' : undefined, customItem: (item) => (customRender && customRender.pageSize ? customRender.pageSize(item.value) : item.label), customSelected: (select) => `${select.label}${t('Pagination', ' / Page')}`, onModelChange: (value) => {
+                    return (_jsx("div", { children: _jsx("div", { style: { paddingRight: gap }, children: _jsx(Select, { list: list, model: pageSize, size: mini ? 'small' : undefined, customItem: (item) => (customRender && customRender.pageSize ? customRender.pageSize(item.value) : item.label), customSelected: (value, selected) => (selected ? `${selected.label}${t('Pagination', ' / Page')}` : String(value)), onModelChange: (value) => {
                                     if (!isNull(value)) {
                                         changePageSize(value);
                                     }

package/select/Select.js

@@ -369,38 +369,33 @@ function SelectFC(props, ref) {
         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) => {
+            const selectedItems = _selected.map((value) => {
+                const item = itemsMap.get(value);
+                return {
+                    value,
+                    label: customSelected ? customSelected(value, item) : item ? item.label : String(value),
+                    item,
+                };
+            });
+            suffixNode = (_jsx(Dropdown, { list: selectedItems.map(({ value, label, item }) => ({
+                    id: value,
+                    title: label,
+                    type: 'item',
+                    disabled: item === null || item === void 0 ? void 0 : item.disabled,
+                })), 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) => {
+            selectedNode = selectedItems.map(({ value, label, item }) => (_jsxs(Tag, { size: size, children: [label, !((item === null || item === void 0 ? void 0 : 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)));
+                            changeSelectedByClick(value);
+                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, value)));
         }
         else {
             if (!isNull(selected)) {
                 const item = itemsMap.get(selected);
-                if (item) {
-                    selectedLabel = item.label;
-                    selectedNode = customSelected ? customSelected(item) : selectedLabel;
-                }
+                selectedLabel = item ? item.label : String(selected);
+                selectedNode = customSelected ? customSelected(selected, item) : selectedLabel;
             }
         }
         return [selectedNode, suffixNode, selectedLabel];

package/select/types.d.ts

@@ -32,7 +32,7 @@ export interface SelectProps<V extends React.Key, T extends SelectItem<V>> exten
     virtual?: boolean | number;
     escClosable?: boolean;
     customItem?: (item: T) => React.ReactNode;
-    customSelected?: (selected: T) => string;
+    customSelected?: (value: V, selected?: T) => string;
     customSearch?: {
         filter?: (value: string, item: T) => boolean;
         sort?: (a: T, b: T) => number;

package/tree-select/TreeSelect.js

@@ -377,41 +377,36 @@ function TreeSelectFC(props, ref) {
         let suffixNode = null;
         let selectedLabel;
         if (multiple) {
-            const selectedNodes = [];
-            for (const v of _selected) {
-                const node = nodesMap.get(v);
-                if (node) {
-                    selectedNodes.push(node);
-                }
-            }
-            suffixNode = (_jsx(Dropdown, { list: selectedNodes.map((node) => {
-                    const { value: itemValue, disabled: itemDisabled } = node.origin;
-                    const title = customSelected ? customSelected(node.origin) : getTreeNodeLabel(node);
-                    return {
-                        id: itemValue,
-                        title,
-                        type: 'item',
-                        disabled: itemDisabled,
-                        node,
-                    };
-                }), onClick: (id, item) => {
-                    const checkeds = item.node.changeStatus('UNCHECKED', selected);
-                    changeSelected(Array.from(checkeds.keys()));
+            const selectedNodes = _selected.map((value) => {
+                const node = nodesMap.get(value);
+                return {
+                    value,
+                    label: customSelected ? customSelected(value, node === null || node === void 0 ? void 0 : node.origin) : node ? node.origin.label : String(value),
+                    node,
+                };
+            });
+            suffixNode = (_jsx(Dropdown, { list: selectedNodes.map(({ value, label, node }) => ({
+                    id: value,
+                    title: label,
+                    type: 'item',
+                    disabled: node === null || node === void 0 ? void 0 : node.origin.disabled,
+                })), onClick: (id) => {
+                    changeSelected((draft) => {
+                        draft.splice(draft.findIndex((v) => v === id), 1);
+                    });
                     return false;
                 }, children: _jsx(Tag, { tabIndex: -1, size: size, children: selected.size }) }));
-            selectedNode = selectedNodes.map((node) => (_jsxs(Tag, { size: size, children: [customSelected ? customSelected(node.origin) : node.origin.label, !(node.disabled || disabled) && (_jsx("div", Object.assign({}, styled('tree-select__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
+            selectedNode = selectedNodes.map(({ value, label, node }) => (_jsxs(Tag, { size: size, children: [label, !((node === null || node === void 0 ? void 0 : node.disabled) || disabled) && (_jsx("div", Object.assign({}, styled('tree-select__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
                             e.stopPropagation();
                             const checkeds = node.changeStatus('UNCHECKED', selected);
                             changeSelected(Array.from(checkeds.keys()));
-                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, node.id)));
+                        }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))] }, value)));
         }
         else {
             if (!isNull(selected)) {
                 const node = nodesMap.get(selected);
-                if (node) {
-                    selectedLabel = getTreeNodeLabel(node);
-                    selectedNode = customSelected ? customSelected(node.origin) : selectedLabel;
-                }
+                selectedLabel = node ? getTreeNodeLabel(node) : String(selected);
+                selectedNode = customSelected ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin) : selectedLabel;
             }
         }
         return [selectedNode, suffixNode, selectedLabel];

package/tree-select/types.d.ts

@@ -30,7 +30,7 @@ export interface TreeSelectProps<V extends React.Key, T extends TreeItem<V>> ext
     virtual?: boolean | number;
     escClosable?: boolean;
     customItem?: (item: T) => React.ReactNode;
-    customSelected?: (selected: T) => string;
+    customSelected?: (value: V, selected?: T) => string;
     customSearch?: {
         filter?: (value: string, item: T) => boolean;
         sort?: (a: T, b: T) => number;