@laser-ui/components 0.6.2 → 0.6.4

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.4](https://github.com/laser-ui/laser-ui/compare/v0.6.3...v0.6.4) (2024-05-27)
+
+### Bug Fixes
+
+- **components:** use custom title if provide customSelected ([0dbdb2f](https://github.com/laser-ui/laser-ui/commit/0dbdb2f285900c45cccdd5fed47eb3429f238d73))
+
+### Features
+
+- **components:** transfer custom item even if no option ([9706ec5](https://github.com/laser-ui/laser-ui/commit/9706ec5e4aea60329b1cf9718b05a214acae3958))
+
+## [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

package/cascader/Cascader.js

@@ -355,41 +355,39 @@ 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;
-                }
+                selectedNode = selectedLabel = customSelected
+                    ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin)
+                    : node
+                        ? getTreeNodeLabel(node)
+                        : String(selected);
             }
         }
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,6 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.6.2",
-    "@laser-ui/utils": "0.6.2",
     "@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": "f601b92f5f145bb94db8dd360b381ba0d55e05cc"
+  "gitHead": "ccc2e2ef68f25b2afa0ab67dd52aae4a13363fba"
 }

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,32 @@ 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;
-                }
+                selectedNode = selectedLabel = customSelected ? customSelected(selected, item) : item ? item.label : String(selected);
             }
         }
         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/transfer/Transfer.js

@@ -5,7 +5,7 @@ import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyb
 import { isUndefined } from 'lodash';
 import { useMemo } from 'react';
 import { TransferPanel } from './internal/TransferPanel';
-import { CLASSES, IS_SELECTED } from './vars';
+import { CLASSES, IS_SELECTED, NO_MATCH } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useControlled, useDesign, useNamespace, useScopedProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
@@ -41,29 +41,41 @@ export function Transfer(props) {
             : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 (item, searchValue) => customSearch.filter(searchValue, item);
         const sortFn = customSearch === null || customSearch === void 0 ? void 0 : customSearch.sort;
-        listProp.forEach((item) => {
-            const index = valueRight.has(item.value) ? 1 : 0;
-            const newItem = Object.assign({ [IS_SELECTED]: false }, item);
-            const search = searchValue[index];
-            if (!search || filterFn(item, search)) {
-                if (selected.has(item.value)) {
-                    newItem[IS_SELECTED] = true;
-                    selectedCount[index] += 1;
-                    if (!item.disabled) {
-                        hasSelected[index] = true;
-                    }
-                }
-                else {
-                    if (!item.disabled) {
-                        allSelected[index] = false;
-                    }
+        const handleItem = (item, index, noMatch) => {
+            const newItem = Object.assign({ [IS_SELECTED]: false, [NO_MATCH]: noMatch }, item);
+            if (selected.has(item.value)) {
+                newItem[IS_SELECTED] = true;
+                selectedCount[index] += 1;
+                if (!item.disabled) {
+                    hasSelected[index] = true;
                 }
-                list[index].push(newItem);
+            }
+            else {
                 if (!item.disabled) {
-                    empty[index] = false;
+                    allSelected[index] = false;
+                }
+            }
+            list[index].push(newItem);
+            if (!item.disabled) {
+                empty[index] = false;
+            }
+        };
+        listProp.forEach((item) => {
+            if (!valueRight.has(item.value)) {
+                if (!searchValue[0] || filterFn(item, searchValue[0])) {
+                    handleItem(item, 0, false);
                 }
             }
         });
+        _valueRight.forEach((value) => {
+            const item = itemsMap.get(value);
+            if (!searchValue[1]) {
+                handleItem(item !== null && item !== void 0 ? item : { label: value, value }, 1, !item);
+            }
+            else if (item && filterFn(item, searchValue[0])) {
+                handleItem(item, 1, false);
+            }
+        });
         if (searchValue[0] && sortFn) {
             list[0].sort(sortFn);
         }
@@ -103,18 +115,24 @@ export function Transfer(props) {
     };
     const handleButtonClick = (isLeft) => {
         changeValueRight((draft) => {
-            const newValueRight = new Set(draft);
-            (isLeft ? list[0] : list[1]).forEach((item) => {
-                if (item[IS_SELECTED]) {
-                    if (isLeft) {
+            if (isLeft) {
+                const newValueRight = new Set();
+                list[0].forEach((item) => {
+                    if (item[IS_SELECTED]) {
                         newValueRight.add(item.value);
                     }
-                    else {
+                });
+                return Array.from(newValueRight).concat(draft);
+            }
+            else {
+                const newValueRight = new Set(draft);
+                list[1].forEach((item) => {
+                    if (item[IS_SELECTED]) {
                         newValueRight.delete(item.value);
                     }
-                }
-            });
-            return Array.from(newValueRight);
+                });
+                return Array.from(newValueRight);
+            }
         });
         changeSelected((draft) => {
             const newSelected = new Set(draft);

package/transfer/internal/TransferPanel.d.ts

@@ -12,7 +12,7 @@ export interface TransferPanelProps<V extends React.Key, T extends TransferItem<
     loading: boolean;
     searchable: boolean;
     virtual: boolean | number;
-    customItem: ((item: T) => React.ReactNode) | undefined;
+    customItem?: (value: V, item?: T) => React.ReactNode;
     onSelectedChange: (value: V) => void;
     onAllSelectedChange: (selected: boolean) => void;
     onSearch: (value: string) => void;

package/transfer/internal/TransferPanel.js

@@ -11,7 +11,7 @@ import { Icon } from '../../icon';
 import { Input } from '../../input';
 import { CircularProgress } from '../../internal/circular-progress';
 import { VirtualScroll } from '../../virtual-scroll';
-import { IS_SELECTED } from '../vars';
+import { IS_SELECTED, NO_MATCH } from '../vars';
 export function TransferPanel(props) {
     const { namespace, styled, list, selectedCount, state, title, loading, searchable, virtual, customItem, onSelectedChange, onAllSelectedChange, onSearch, onScrollBottom, } = props;
     const { t } = useTranslation();
@@ -27,16 +27,13 @@ export function TransferPanel(props) {
     }), [canSelectedItem, list, virtual]);
     return (_jsxs("div", Object.assign({}, styled('transfer__panel'), { children: [_jsxs("div", Object.assign({}, styled('transfer__header'), { children: [_jsxs(Checkbox, { model: state === true, indeterminate: state === 'mixed', disabled: list.length === 0, onModelChange: (checked) => {
                             onAllSelectedChange(checked);
-                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => {
-                            const { label: itemLabel, value: itemValue, disabled: itemDisabled } = item;
-                            return (_createElement("li", Object.assign({}, styled('transfer__option', {
-                                'transfer__option.is-disabled': itemDisabled,
-                            }), props, { key: itemValue, id: getItemId(itemValue), title: itemLabel, onClick: () => {
-                                    if (!itemDisabled) {
-                                        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(itemValue);
-                                    }
-                                } }),
-                                _jsx("div", Object.assign({}, styled('transfer__option-prefix'), { children: _jsx(Checkbox, { model: item[IS_SELECTED], disabled: itemDisabled }) })),
-                                _jsx("div", Object.assign({}, styled('transfer__option-content'), { children: customItem ? customItem(item) : itemLabel }))));
-                        }, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('transfer__list'), { onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { marginTop: 32 }, image: Empty.SIMPLE_IMG }) : vsList }))) }))] }))] })));
+                        }, children: [selectedCount, "/", list.length] }), checkNodeExist(title) && _jsx("div", Object.assign({}, styled('transfer__header-title'), { children: title }))] })), searchable && (_jsx("div", Object.assign({}, styled('transfer__search'), { children: _jsx(Input, { style: { display: 'flex' }, placeholder: t('Search'), prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), clearable: true, onModelChange: onSearch }) }))), _jsxs("div", Object.assign({}, styled('transfer__list-container'), { children: [loading && (_jsx("div", Object.assign({}, styled('transfer__loading'), { children: _jsx(Icon, { children: _jsx(CircularProgress, {}) }) }))), _jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 192, listPadding: 0, itemRender: (item, index, props) => (_createElement("li", Object.assign({}, styled('transfer__option', {
+                            'transfer__option.is-disabled': item.disabled,
+                        }), props, { key: item.value, id: getItemId(item.value), title: item.label, onClick: () => {
+                                if (!item.disabled) {
+                                    onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(item.value);
+                                }
+                            } }),
+                            _jsx("div", Object.assign({}, styled('transfer__option-prefix'), { children: _jsx(Checkbox, { model: item[IS_SELECTED], disabled: item.disabled }) })),
+                            _jsx("div", Object.assign({}, styled('transfer__option-content'), { children: customItem ? customItem(item.value, item[NO_MATCH] ? undefined : item) : item.label })))), placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('transfer__list'), { onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { marginTop: 32 }, image: Empty.SIMPLE_IMG }) : vsList }))) }))] }))] })));
 }

package/transfer/types.d.ts

@@ -22,7 +22,7 @@ export interface TransferProps<V extends React.Key, T extends TransferItem<V>> e
     loading?: [boolean?, boolean?];
     disabled?: boolean;
     virtual?: boolean | number;
-    customItem?: (item: T) => React.ReactNode;
+    customItem?: (value: V, item?: T) => React.ReactNode;
     customSearch?: {
         filter?: (value: string, item: T) => boolean;
         sort?: (a: T, b: T) => number;

package/transfer/vars.d.ts

@@ -15,3 +15,4 @@ export declare const CLASSES: {
     'transfer__option-content': string;
 };
 export declare const IS_SELECTED: unique symbol;
+export declare const NO_MATCH: unique symbol;

package/transfer/vars.js

@@ -15,3 +15,4 @@ export const CLASSES = {
     'transfer__option-content': '^transfer__option-content',
 };
 export const IS_SELECTED = Symbol();
+export const NO_MATCH = Symbol();

package/tree-select/TreeSelect.js

@@ -377,41 +377,39 @@ 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;
-                }
+                selectedNode = selectedLabel = customSelected
+                    ? customSelected(selected, node === null || node === void 0 ? void 0 : node.origin)
+                    : node
+                        ? getTreeNodeLabel(node)
+                        : String(selected);
             }
         }
         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;