@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -0,0 +1,283 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import { ConfigProvider } from 'antd';
+import { uniqBy } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+// Components
+import { EmptyData, Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Button, Flex, Icon, Input, Popover, Scrollbars, Spin, Typography, Tooltip, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ExtendValuePopup } from './components/ExtendValuePopup';
+// Styled
+import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton } from './styled';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Constants
+import { MATCHES_ANY_THEME } from './constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
+// Utils
+import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
+import { DataIcon } from '../../icons';
+const initialState = {
+    isOpenPopover: false,
+};
+const matchesAnyInitialState = {
+    searchValue: '',
+    selectedItems: [],
+    isShowLoadMoreEl: false,
+};
+const { t } = i18nInstance;
+const { Text } = Typography;
+export const MatchesAny = props => {
+    // Props
+    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel", "onLoadMore"]);
+    // State
+    const [state, setState] = useState(matchesAnyInitialState);
+    // Variables
+    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
+    // Refs
+    const { ref: loadMoreRef } = useIntersectionObserver({
+        threshold: 0,
+        initialIsIntersecting: false,
+        onChange(isIntersecting) {
+            if (isIntersecting) {
+                onLoadMore();
+            }
+        },
+    });
+    // Effects
+    /**
+     * Updates the `selectedItems` state when the `selectedItems` prop changes.
+     */
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
+    }, [props.selectedItems]);
+    useEffect(() => {
+        // Delay for show load more el
+        setTimeout(() => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
+        }, 500);
+    }, []);
+    // Handlers
+    /**
+     * Adds an item and, if applicable, its leaf descendants to the list of selected items.
+     *
+     * If the item has children, the function flattens the tree structure and adds only the leaf nodes
+     * (nodes without children) to the selected items list. If the item does not have children, it adds
+     * the item directly to the selected items list.
+     *
+     * @param {MatchesAnyItem} item - The item to be added to the selected items list.
+     *                              This item can have children.
+     */
+    const onSelectItem = (item) => {
+        if (item.children) {
+            const flattenChild = flatTree(item.children, 'children');
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [
+                    ...(prev.selectedItems || []),
+                    ...flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.filter(item => !item.children),
+                ] })));
+            return;
+        }
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item] })));
+    };
+    /**
+     * Removes an item and its descendants from the list of selected items.
+     *
+     * This function updates the state by removing the specified item and, if applicable,
+     * any of its descendants from the list of selected items.
+     *
+     */
+    const onRemoveItem = (item) => {
+        setState(prev => {
+            var _a;
+            return (Object.assign(Object.assign({}, prev), { selectedItems: (_a = prev.selectedItems) === null || _a === void 0 ? void 0 : _a.filter(selectedItem => {
+                    if (item.children) {
+                        const flattenChild = flatTree(item.children, 'children');
+                        return (selectedItem.key !== item.key &&
+                            !(flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.some(item => item.key === selectedItem.key)));
+                    }
+                    return selectedItem.key !== item.key;
+                }) }));
+        });
+    };
+    const onSelectAll = () => {
+        const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
+            !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
+    };
+    const onRemoveAll = () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
+    };
+    const renderItemNodeTitle = ({ item, onSelectItem, onRemoveItem, }) => {
+        const { isExtendValue, title, subTitle } = item; // Destructure properties from item
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "title-content" },
+                React.createElement(Text, { ellipsis: { tooltip: true } }, title),
+                subTitle && (React.createElement(Text, { className: "sub-title", ellipsis: { tooltip: true }, style: { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 } }, subTitle))),
+            React.createElement(Flex, { align: "center", gap: 5 },
+                isExtendValue && (React.createElement(Icon, { type: "icon-ants-empty-flag", size: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })),
+                React.createElement(ActionButton, { className: "select-button", align: "center", justify: "center", onClick: () => {
+                        // Call onSelectItem function if provided
+                        if (onSelectItem) {
+                            onSelectItem(item);
+                        }
+                        // Call onRemoveItem function if provided
+                        if (onRemoveItem) {
+                            onRemoveItem(item);
+                        }
+                    } },
+                    React.createElement(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 })))));
+    };
+    // Memos
+    const { treeData, matchedParents } = useMemo(() => {
+        const { results, matchedParents } = recursiveSearchItems({
+            list: items || [],
+            searchKeys: ['title', 'key'],
+            searchValue,
+            childrenKey: 'children',
+        });
+        const serializeTreeData = (list) => list.map(item => {
+            /**
+             * Checks if the given item is selected.
+             *
+             * If the item has children, it flattens the children tree structure and checks if all leaf nodes are selected (Compare key or title if item is extend value).
+             * If the item does not have children, it directly checks if the item is in the selected items list.
+             *
+             */
+            const isSelected = item.children
+                ? flatTree(item.children, 'children')
+                    .filter(item => !item.children)
+                    .every(item => selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
+                    (selectedItem.isExtendValue && selectedItem.title === item.title)))
+                : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
+                    (selectedItem.isExtendValue && selectedItem.title === item.title));
+            return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({
+                    item,
+                    onSelectItem,
+                }), disabled: isSelected }), (item.children && {
+                children: serializeTreeData(item.children),
+            }));
+        });
+        const treeData = serializeTreeData(results);
+        return { treeData, matchedParents };
+    }, [items, searchValue, selectedItems]);
+    const selectedTreeData = useMemo(() => {
+        var _a;
+        const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
+        const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
+        const lazyLoadSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
+        const serializeTreeData = (list) => {
+            var _a;
+            return ((_a = list
+                .filter(item => {
+                /**
+                 * Checks if the given item or any of its descendants are selected.
+                 *
+                 * If the item has children, it flattens the children tree structure and checks if any node is selected.
+                 * If the item does not have children, it directly checks if the item is in the selected items list.
+                 *
+                 */
+                const isSelected = item.children
+                    ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key))
+                    : notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key);
+                return isSelected;
+            })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) }), (item.children && {
+                children: serializeTreeData(item.children),
+            }))))) || [];
+        };
+        return serializeTreeData(items || []).concat(((_a = [...lazyLoadSelectedItems, ...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
+    }, [items, selectedItems]);
+    const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
+    const isDisableSelectAll = useDeepCompareMemo(() => {
+        const flattenTreeData = flatTree(treeData, 'children');
+        return !(flattenTreeData === null || flattenTreeData === void 0 ? void 0 : flattenTreeData.some(item => !item.disabled));
+    }, [treeData]);
+    // Renders
+    const renderSelectList = () => {
+        var _a;
+        return (React.createElement("div", { className: "matches-any__section matches-any__section--left" },
+            React.createElement("div", { className: "matches-any__header" },
+                React.createElement("div", { style: { width: '100%' } },
+                    React.createElement(Input.CustomSearch, { placeholder: `${(_a = t(translations.global.search)) === null || _a === void 0 ? void 0 : _a.toString()}...`, onAfterChange: searchValue => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue }))) }))),
+            React.createElement("div", { className: "matches-any__body" },
+                React.createElement(Flex, { align: "center", justify: "space-between" },
+                    React.createElement(Text, { strong: true }, `${objectName} (${flatTree(items, 'children').filter(item => !item.children).length})`),
+                    React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString())),
+                React.createElement(Spin, { spinning: loading },
+                    React.createElement(Scrollbars, { style: { height: '100%' } }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
+                        React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: matchedParents.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                                    transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                                    transition: 'transform 0.3s ease',
+                                }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }),
+                        isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })))))));
+    };
+    const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
+        React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
+            React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
+            React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
+        React.createElement("div", { className: "matches-any__body" },
+            React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, width: 48, height: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                        transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                        transition: 'transform 0.3s ease',
+                    }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));
+    // Handlers
+    const onApplyExtendValue = (extendValues) => {
+        // Filter out values that are already present in selectedItems
+        const availableExtendValues = extendValues === null || extendValues === void 0 ? void 0 : extendValues.filter(value => !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(item => item.title === value)));
+        // If there are available values to add
+        if (availableExtendValues) {
+            // Create new items in the format required (MatchesAnyItem)
+            const newSelectedItems = availableExtendValues.map(value => ({
+                key: value,
+                title: value,
+                isExtendValue: true, // Flag to indicate that this item is an extend value
+            }));
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(selectedItems || []), ...newSelectedItems] })));
+        }
+    };
+    return (React.createElement(ConfigProvider, { theme: MATCHES_ANY_THEME },
+        React.createElement(MatchesAnyWrapper, Object.assign({}, restOfProps, { vertical: true, justify: "space-between" }),
+            React.createElement(Flex, { style: { width: '100%', height: '100%' } },
+                renderSelectList(),
+                renderSelectedList()),
+            React.createElement(Flex, { className: "matches-any__footer", align: "center", justify: "space-between" },
+                React.createElement(Flex, { align: "center", gap: 10 },
+                    React.createElement(Button, { type: "primary", onClick: () => onApply(selectedItems || []) }, t(translations.apply.title).toString()),
+                    React.createElement(Button, { onClick: () => onCancel() }, t(translations.cancel.title).toString())),
+                showExtendValue && (React.createElement(ExtendValuePopup, { onApply: onApplyExtendValue },
+                    React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, t(translations.extendValue.title).toString())))))));
+};
+export const MatchesAnySelect = props => {
+    var _a, _b, _c;
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "onChange", "onLoadMore"]);
+    // State
+    const [state, setState] = useState(initialState);
+    // Variables
+    const { isOpenPopover } = state;
+    const value = Array.isArray(selectedItems) && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)
+        ? `${(_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title)) === null || _a === void 0 ? void 0 : _a[0]}${((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _b === void 0 ? void 0 : _b.length) ? `, and +${(_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.slice(1)) === null || _c === void 0 ? void 0 : _c.length} more` : ''}` || []
+        : undefined;
+    // Handlers
+    const onApplyMatchesAny = (selectedItems) => {
+        onChange(selectedItems);
+        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+    };
+    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), overlayStyle: { width: 700 }, overlayInnerStyle: {
+            padding: 0,
+        }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
+        React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },
+            React.createElement(Select, Object.assign({ title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { display: 'none', padding: 0 }), loading: loading }, restProps)))));
+};

package/es/components/molecules/MatchAnySelect/components/ExtendValuePopup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
+interface ExtendValuePopupProps extends PopoverProps {
+    onApply?: (extendValues: string[]) => void;
+}
+export declare const ExtendValuePopup: React.FC<ExtendValuePopupProps>;
+export {};

package/es/components/molecules/MatchAnySelect/components/ExtendValuePopup.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import { uniq } from 'lodash';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+// Components
+import { ApplyPopupContent, Form } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Input, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Utils
+import { splitTextByNewline } from '@antscorp/antsomi-ui/es/utils';
+const { borderRadius, blue1 } = globalToken || {};
+const { t } = i18nInstance;
+// Styled
+const TextArea = styled(Input.TextArea) `
+  &.antsomi-input-borderless {
+    border: 1px solid ${blue1} !important;
+    border-radius: ${borderRadius}px;
+  }
+`;
+export const ExtendValuePopup = props => {
+    // Props
+    const { children, onApply = () => { } } = props, restProps = __rest(props, ["children", "onApply"]);
+    // State
+    const [state, setState] = useState({
+        isOpenPopover: false,
+    });
+    // Variables
+    const { isOpenPopover } = state;
+    // Hooks
+    const [form] = Form.useForm();
+    // Form
+    const extendValues = Form.useWatch('extendValues', form);
+    // Handlers
+    const onClosePopover = () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+        form.resetFields();
+    };
+    const onFinishSubmit = (values) => {
+        const extendValues = uniq(splitTextByNewline(values.extendValues).filter(Boolean));
+        onApply(extendValues);
+        onClosePopover();
+    };
+    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, overlayInnerStyle: {
+            padding: 0,
+            width: 500,
+        }, trigger: ['click'], arrow: false, placement: "topRight", onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) }, restProps, { content: React.createElement(ApplyPopupContent, { title: t(translations.extendValue.title).toString(), applyButtonProps: {
+                disabled: !(extendValues === null || extendValues === void 0 ? void 0 : extendValues.trim()),
+            }, onCancel: onClosePopover, onApply: () => form.submit() },
+            React.createElement(Form, { form: form, onFinish: onFinishSubmit },
+                React.createElement(Form.Item, { noStyle: true, name: "extendValues" },
+                    React.createElement(TextArea, { autoSize: false, bordered: false, rows: 9, placeholder: t(translations.extendValue.placeholder).toString() })))) }), children));
+};

package/es/components/molecules/MatchAnySelect/constants.d.ts

@@ -0,0 +1,3 @@
+import { ThemeConfig, TreeDataNode } from 'antd';
+export declare const SAMPLE_DATA: TreeDataNode[];
+export declare const MATCHES_ANY_THEME: ThemeConfig;

package/es/components/molecules/MatchAnySelect/constants.js

@@ -0,0 +1,304 @@
+export const SAMPLE_DATA = [
+    {
+        key: '12179',
+        title: 'Untitled Project#2024-06-27 09:40:18',
+        children: [
+            {
+                key: '3j2i',
+                title: 'dsjfioasdjf',
+                children: [
+                    {
+                        key: '3j2323i323',
+                        title: 'fewfwe',
+                    },
+                    {
+                        key: '3j2323i',
+                        title: 'me owi',
+                    },
+                ],
+            },
+            {
+                key: '3j2i-1',
+                title: 'dsjfioasdjf',
+            },
+        ],
+    },
+    {
+        key: '11923',
+        title: '[CDP 365] Expand/ Collapse Menu',
+    },
+    {
+        key: '11643',
+        title: 'BẢNG KHẢO SÁT CHẤT LƯỢNG DỊCH VỤ GIAO HÀNG THƯƠNG MẠI ĐIỆN TỬ',
+    },
+    {
+        key: '12090',
+        title: 'Team Building Survey',
+    },
+    {
+        key: '12027',
+        title: '[Antsomi] Lunch Survey',
+    },
+    {
+        key: '11743',
+        title: 'Untitled Project#2024-01-12 14:09:53',
+    },
+    {
+        key: '12028',
+        title: 'Untitled Project#2024-05-30 17:54:59',
+    },
+    {
+        key: '12025',
+        title: 'SURVEY ON LUNCH SHARING WITH MR.DAT',
+    },
+    {
+        key: '11858',
+        title: 'CDP 365 Menu Structure',
+    },
+    {
+        key: '11998',
+        title: '[Demo] CDP365 Training Certification',
+    },
+    {
+        key: '11738',
+        title: 'Untitled Project#2024-01-07 22:28:36',
+    },
+    {
+        key: '12001',
+        title: '[Demo] CDP365 Training Certification - Copy',
+    },
+    {
+        key: '12003',
+        title: '[Demo] CDP365 Training Certification - Copy - Copy',
+    },
+    {
+        key: '11791',
+        title: '[Demo] GGG - 01',
+    },
+    {
+        key: '11742',
+        title: 'Untitled Project#2024-01-12 12:12:40',
+    },
+    {
+        key: '11790',
+        title: '[Demo] GGG - 02',
+    },
+    {
+        key: '11995',
+        title: 'Untitled Project#2024-05-03 16:15:22',
+    },
+    {
+        key: '11993',
+        title: 'Untitled Project#2024-05-01 20:14:31',
+    },
+    {
+        key: '11694',
+        title: 'Untitled Project#2023-12-29 18:42:00',
+    },
+    {
+        key: '11780',
+        title: 'DemoGGG - 02',
+    },
+    {
+        key: '11898',
+        title: 'Untitled Project#2024-04-12 16:46:28',
+    },
+    {
+        key: '11758',
+        title: 'Untitled Project#2024-02-05 10:04:32',
+    },
+    {
+        key: '11772',
+        title: 'DemoGGG - 01',
+    },
+    {
+        key: '11764',
+        title: 'Untitled Project#2024-02-16 09:07:56',
+    },
+    {
+        key: '11760',
+        title: 'Untitled Project#2024-02-15 22:17:46',
+    },
+    {
+        key: '11756',
+        title: 'Untitled Project#2024-01-24 19:50:03',
+    },
+    {
+        key: '11747',
+        title: 'Untitled Project#2024-01-24 12:23:02',
+    },
+    {
+        key: '11745',
+        title: 'Untitled Project#2024-01-22 09:37:10',
+    },
+    {
+        key: '11744',
+        title: 'Untitled Project#2024-01-12 14:17:51',
+    },
+    {
+        key: '11740',
+        title: 'Untitled Project#2024-01-12 11:46:21',
+    },
+    {
+        key: '11741',
+        title: 'Untitled Project#2024-01-12 12:10:23',
+    },
+    {
+        key: '11739',
+        title: 'Untitled Project#2024-01-11 18:28:07',
+    },
+    {
+        key: '11680',
+        title: '@minhquanle 02',
+    },
+    {
+        key: '11665',
+        title: 'thuan test pro',
+    },
+    {
+        key: '11625',
+        title: 'Untitled Project#2023-12-18 17:24:33',
+    },
+    {
+        key: '11691',
+        title: 'Untitled Project#2023-12-28 17:11:05',
+    },
+    {
+        key: '11639',
+        title: 'Untitled Project#2023-12-25 12:17:34',
+    },
+    {
+        key: '11696',
+        title: '[ANTSOMI] Product Team Evaluation',
+    },
+    {
+        key: '11675',
+        title: 'Untitled Project#2023-12-28 15:39:53 - Copy',
+    },
+    {
+        key: '11674',
+        title: 'Untitled Project#2023-12-28 15:39:53',
+    },
+    {
+        key: '11673',
+        title: 'thuan test pro - Copyttttttt',
+    },
+    {
+        key: '11670',
+        title: 'thuan test pro - Copyddddd',
+    },
+    {
+        key: '11668',
+        title: 'thuan test pro - Copy',
+    },
+    {
+        key: '11666',
+        title: 'thuan test pro - Copyyyyy',
+    },
+    {
+        key: '11669',
+        title: '@minhquanle 01',
+    },
+    {
+        key: '11677',
+        title: 'ssss',
+    },
+    {
+        key: '11660',
+        title: 'Untitled Project#2023-12-27 09:42:09',
+    },
+    {
+        key: '11629',
+        title: '[CDP 365] Collect Client Feedback _ VN',
+    },
+    {
+        key: '11658',
+        title: 'Untitled Project#2023-12-26 17:33:28',
+    },
+    {
+        key: '11623',
+        title: 'Untitled Project#2023-12-17 22:26:04',
+    },
+    {
+        key: '11640',
+        title: '[CDP 365] Collect Client Feedback _ ENG',
+    },
+    {
+        key: '11626',
+        title: 'Untitled Project#2023-12-20 17:15:11',
+    },
+    {
+        key: '11619',
+        title: 'Test Builder',
+    },
+    {
+        key: '11624',
+        title: 'Untitled Project#2023-12-18 00:29:50',
+    },
+    {
+        key: '11556',
+        title: 'Untitled Project#2023-11-22 10:27:29',
+    },
+    {
+        key: '11622',
+        title: 'Untitled Project#2023-12-17 22:18:59',
+    },
+    {
+        key: '11611',
+        title: 'Untitled Project#2023-12-05 17:15:59',
+    },
+    {
+        key: '11621',
+        title: 'Untitled Project#2023-12-17 22:15:53',
+    },
+    {
+        key: '11618',
+        title: 'Test survey flow luồng chạy thẳng',
+    },
+    {
+        key: '11580',
+        title: 'Vĩ test survey 123',
+    },
+    {
+        key: '11616',
+        title: 'Untitled Project#2023-12-08 11:47:35',
+    },
+    {
+        key: '11602',
+        title: '[Zoey] Product Training Session Evaluation',
+    },
+    {
+        key: '11601',
+        title: '[Demo] Phiếu khảo sát mức độ hài lòng',
+    },
+    {
+        key: '11605',
+        title: 'Untitled Project#2023-12-04 15:21:51',
+    },
+    {
+        key: '11574',
+        title: 'Test survey 123',
+    },
+    {
+        key: '11557',
+        title: 'Untitled Project#2023-11-29 18:25:59',
+    },
+    {
+        key: '11566',
+        title: 'Untitled Project#2023-11-30 11:55:39',
+    },
+    {
+        key: '11564',
+        title: 'Untitled Project#2023-11-29 18:48:08',
+    },
+];
+export const MATCHES_ANY_THEME = {
+    token: {
+        motion: false,
+    },
+    components: {
+        Tree: {
+            titleHeight: 30,
+        },
+    },
+};

package/es/components/molecules/MatchAnySelect/index.d.ts

@@ -0,0 +1,3 @@
+export { MatchesAnySelect, MatchesAny } from './MatchesAnySelect';
+export type { MatchesAnyItem, MatchesAnyProps, MatchesAnySelectProps } from './types';
+export { SAMPLE_DATA as MATCHES_ANY_SAMPLE_DATA } from './constants';

package/es/components/molecules/MatchAnySelect/index.js

@@ -0,0 +1,2 @@
+export { MatchesAnySelect, MatchesAny } from './MatchesAnySelect';
+export { SAMPLE_DATA as MATCHES_ANY_SAMPLE_DATA } from './constants';