@antscorp/antsomi-ui 1.3.5-beta.453 → 1.3.5-beta.454

package/es/components/atoms/Flex/index.d.ts

@@ -1 +1,2 @@
-export * from './Flex';
+export { Flex } from './Flex';
+export type { FlexProps } from './Flex';

package/es/components/atoms/Flex/index.js

@@ -1 +1 @@
-export * from './Flex';
+export { Flex } from './Flex';

package/es/components/atoms/Input/Input.js

@@ -96,7 +96,7 @@ OriginInput.defaultProps = {
     withWrapper: true,
 };
 export const Input = OriginInput;
-const SearchInput = props => (React.createElement(Input, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { className: `${props.className} antsomi-search-input` })));
+const SearchInput = props => (React.createElement(OriginInput, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { className: `${props.className} antsomi-search-input` })));
 Input.CustomSearch = SearchInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;

package/es/components/atoms/Input/styled.d.ts

@@ -9,3 +9,9 @@ export declare const StyledInput: import("styled-components").StyledComponent<im
 export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>, any, {
     showBorder?: boolean | undefined;
 }, never>;
+export declare const StyledSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
+    Group: import("react").FC<import("antd/es/input").GroupProps>;
+    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;
+    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef>>;
+}, any, {}, never>;

package/es/components/atoms/Input/styled.js

@@ -107,3 +107,8 @@ export const TextArea = styled(InputAntd.TextArea) `
       border: 1px solid #e0e0e0;
     `}
 `;
+export const StyledSearchInput = styled(InputAntd) `
+  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
+    background-color: transparent;
+  }
+`;

package/es/components/atoms/Popover/index.d.ts

@@ -1 +1,2 @@
 export { Popover } from './Popover';
+export type { PopoverProps } from 'antd';

package/es/components/atoms/index.d.ts

@@ -21,7 +21,6 @@ export { Steps } from './Steps';
 export { Empty } from './Empty';
 export { Icon } from './Icon';
 export { Text } from './Text';
-export { Popover } from './Popover';
 export { RequiredLabel } from './RequiredLabel';
 export { Slider } from './Slider';
 export { Spin } from './Spin';
@@ -32,7 +31,6 @@ export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
 export * from './Flex';
-export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './MobileFrameV2';
@@ -41,6 +39,8 @@ export * from './ReactIframe';
 export * from './Scrollbars';
 export * from './Switch';
 export * from './Button';
+export * from './RateV2';
+export * from './Popover';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -21,7 +21,6 @@ export { Steps } from './Steps';
 export { Empty } from './Empty';
 export { Icon } from './Icon';
 export { Text } from './Text';
-export { Popover } from './Popover';
 export { RequiredLabel } from './RequiredLabel';
 export { Slider } from './Slider';
 export { Spin } from './Spin';
@@ -32,7 +31,6 @@ export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
 export { ContentEditable } from './ContentEditable';
 export * from './Flex';
-export * from './RateV2';
 export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './MobileFrameV2';
@@ -41,3 +39,5 @@ export * from './ReactIframe';
 export * from './Scrollbars';
 export * from './Switch';
 export * from './Button';
+export * from './RateV2';
+export * from './Popover';

package/es/components/molecules/ApplyPopupContent/ApplyPopupContent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonProps, FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+export interface ApplyPopupContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The title of the popup content */
+    title?: string;
+    /** Properties for the cancel button. */
+    cancelButtonProps?: ButtonProps;
+    /** Properties for the apply button. */
+    applyButtonProps?: ButtonProps;
+    /** Properties for the footer Flex container, excluding children. */
+    footerProps?: Omit<FlexProps, 'children'>;
+    /** Handler for the cancel button click event. */
+    onCancel?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Handler for the apply button click event. */
+    onApply?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const ApplyPopupContent: React.FC<React.PropsWithChildren<ApplyPopupContentProps>>;

package/es/components/{organism/DataTable/components/common/ApplyPopupContent/index.js → molecules/ApplyPopupContent/ApplyPopupContent.js}

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React from 'react';
+import clsx from 'clsx';
 // Components
 import { Flex, Typography, Icon, Button, } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
@@ -21,7 +22,8 @@ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 const { Text } = Typography;
 export const ApplyPopupContent = props => {
-    const { title, children, cancelButtonProps, applyButtonProps, onApply, onCancel } = props, restProps = __rest(props, ["title", "children", "cancelButtonProps", "applyButtonProps", "onApply", "onCancel"]);
+    const { title, children, cancelButtonProps, applyButtonProps, footerProps, onApply, onCancel } = props, restProps = __rest(props, ["title", "children", "cancelButtonProps", "applyButtonProps", "footerProps", "onApply", "onCancel"]);
+    const { align = 'center', justify = 'flex-end' } = footerProps || {};
     const { t } = i18nInstance;
     return (React.createElement(ContentWrapper, Object.assign({}, restProps),
         React.createElement(Flex, { className: "content__body", vertical: true, gap: 20 },
@@ -30,7 +32,7 @@ export const ApplyPopupContent = props => {
                 React.createElement(CloseButton, { align: "center", justify: "center", onClick: onCancel },
                     React.createElement(Icon, { type: "icon-ants-remove-slim" }))),
             children),
-        React.createElement("div", { className: "content__footer" },
+        React.createElement(Flex, Object.assign({}, footerProps, { align: align, justify: justify, className: clsx('content__footer', footerProps === null || footerProps === void 0 ? void 0 : footerProps.className) }),
             React.createElement(Button, Object.assign({ onClick: onCancel }, cancelButtonProps), t(translations.cancel.title).toString()),
             React.createElement(Button, Object.assign({ type: "primary", onClick: onApply }, applyButtonProps), t(translations.apply.title).toString()))));
 };

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

@@ -0,0 +1,2 @@
+export { ApplyPopupContent } from './ApplyPopupContent';
+export type { ApplyPopupContentProps } from './ApplyPopupContent';

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

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

package/es/components/{organism/DataTable/components/common → molecules}/ApplyPopupContent/styled.js

@@ -17,8 +17,6 @@ export const ContentWrapper = styled.div `
 
     &__footer {
       display: flex;
-      align-items: center;
-      justify-content: flex-end;
       padding: 15px;
       gap: 10px;
       border-top: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};

package/es/components/molecules/CalendarSelection/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;
 export declare const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/CalendarSelection/styled.js

@@ -1,5 +1,7 @@
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+// Libraries
 import styled from 'styled-components';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms/Popover';
 export const StyledPopover = styled(Popover) `
   font-size: 12px;
 `;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MatchesAnyProps, MatchesAnySelectProps } from './types';
+export declare const MatchesAny: React.FC<MatchesAnyProps>;
+export declare const MatchesAnySelect: React.FC<MatchesAnySelectProps>;

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

@@ -0,0 +1,237 @@
+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, { useMemo, useState } from 'react';
+// Components
+import { EmptyData, Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Button, Flex, Icon, Input, Scrollbars, Spin, Typography, } 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, SAMPLE_DATA } from './constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Hooks
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Utils
+import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
+const initialState = {};
+const matchesAnyInitialState = {
+    searchValue: '',
+    selectedItems: [],
+};
+const { t } = i18nInstance;
+const { Text } = Typography;
+export const MatchesAny = props => {
+    // Props
+    const { objectName, isLoading = false, showExtendValue = true } = props, restOfProps = __rest(props, ["objectName", "isLoading", "showExtendValue"]);
+    // State
+    const [state, setState] = useState(matchesAnyInitialState);
+    // Variables
+    const { searchValue, selectedItems } = state;
+    // 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(SAMPLE_DATA, '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 } = item; // Destructure properties from item
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Text, { ellipsis: { tooltip: true } }, title),
+            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: SAMPLE_DATA,
+            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 };
+    }, [searchValue, selectedItems]);
+    const selectedTreeData = useMemo(() => {
+        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 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(SAMPLE_DATA || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
+    }, [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(SAMPLE_DATA, 'children').filter(item => !item.children).length})`),
+                    React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString())),
+                React.createElement(Spin, { spinning: isLoading },
+                    React.createElement(Scrollbars, { style: { height: '100%' } },
+                        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 })) }))))));
+    };
+    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(Spin, { spinning: isLoading },
+                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-channel-integration", description: "Select items from the list" })) : (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" }, t(translations.apply.title).toString()),
+                    React.createElement(Button, null, t(translations.cancel.title).toString())),
+                showExtendValue && (React.createElement(ExtendValuePopup, { onApply: onApplyExtendValue },
+                    React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-empty-flag" }) }, "Extend Value")))))));
+};
+export const MatchesAnySelect = props => {
+    const { placeholder = 'Select an item', dropdownStyle, objectName } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName"]);
+    // State
+    const [state, setState] = useState({});
+    // Renders
+    const renderPopoverContent = () => (React.createElement(MatchesAny, { objectName: objectName, style: { margin: '-8px 0px' } }));
+    return renderPopoverContent();
+    return (React.createElement(Select, Object.assign({}, restProps, { dropdownRender: renderPopoverContent, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: Object.assign(Object.assign({}, dropdownStyle), { padding: 0 }) })));
+};

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;