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

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

@@ -21,6 +21,11 @@ export const StyledModal = styled(Modal) `
 
     .antsomi-modal-header {
       padding: 15px 15px 0px 15px;
+      margin-bottom: 0px;
+    }
+
+    .antsomi-modal-footer {
+      margin-top: 0px;
     }
   }
 `;

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '@antscorp/antsomi-ui/es/components/molecules';
+interface TimeOut {
+    show?: boolean;
+    message?: ReactNode;
+    second?: number;
+}
+export interface ProcessLoadingProps extends ModalProps {
+    message?: ReactNode;
+    timeout?: TimeOut;
+}
+export declare const ProcessLoading: React.FC<ProcessLoadingProps>;
+export {};

package/es/components/molecules/ProcessLoading/ProcessLoading.js

@@ -0,0 +1,75 @@
+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 React, { useEffect, useRef, useState } from 'react';
+// Atoms
+import { Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+import { ProcessLoadingContent } from './styled';
+export const ProcessLoading = (_a) => {
+    var restProps = __rest(_a, []);
+    // Props
+    const { open, message = 'Loading ...', timeout } = restProps;
+    // State
+    const [isShowTimeoutMessage, setShowAlert] = useState(false);
+    // Ref
+    const timeoutShowAlert = useRef(null);
+    // Variables
+    const { second = 7, message: timeOutMessage = (React.createElement("div", null,
+        "This might take a little longer than usual. ",
+        React.createElement("br", null),
+        "Thank you for waiting!")), show: showTimeOutMessage = true, } = timeout || {};
+    // Effects
+    /* Base timeout second to show timeout message */
+    useEffect(() => {
+        if (open) {
+            timeoutShowAlert.current = setTimeout(() => {
+                setShowAlert(true);
+            }, 1000 * second);
+        }
+        return () => {
+            clearTimeout(timeoutShowAlert.current);
+            setShowAlert(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    // Handlers
+    const renderMessage = () => {
+        let draftMessage = null;
+        if (isShowTimeoutMessage && showTimeOutMessage) {
+            draftMessage = timeOutMessage;
+        }
+        else if (message) {
+            draftMessage = message;
+        }
+        if (draftMessage) {
+            return (React.createElement(Typography.Text
+            /* Key to force update for refresh animation when timeout */
+            , { 
+                /* Key to force update for refresh animation when timeout */
+                key: !showTimeOutMessage ? '1' : `${isShowTimeoutMessage}`, className: "animate__animated animate__fadeIn", style: { lineHeight: '14.06px' } }, draftMessage));
+        }
+        return null;
+    };
+    return (React.createElement(ModalV2, Object.assign({ closable: false, destroyOnClose: true }, restProps, { footer: null, centered: true, width: "300px", styles: {
+            body: {
+                padding: 20,
+            },
+            mask: {
+                background: `rgba(255, 255, 255, 0.5)`,
+            },
+        } }),
+        React.createElement(ProcessLoadingContent, { vertical: true, align: "center", justify: "center", gap: 16 },
+            React.createElement(Spin, { spinning: true, showIndicatorBackground: true }),
+            renderMessage())));
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ProcessLoadingContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ProcessLoadingContent = styled(Flex) `
+  text-align: center;
+`;

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -32,9 +32,10 @@ const defaultProps = {
     isCompact: false,
     delayUpdate: 200,
     selectColor: '#2f79bf80',
+    allowActive: true,
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, } = props;
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, allowActive, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -54,6 +55,7 @@ export const ResizeGrid = props => {
     const ctrlKeyRef = useRef(false);
     const initRef = useRef(0);
     const initDoneRef = useRef(false);
+    const cachedMergeCellRef = useRef({});
     // console.log('grid', grid)
     function lineVertical(isShow = true, left = 0) {
         if (verticalLineRef.current && layersRef.current) {
@@ -103,7 +105,7 @@ export const ResizeGrid = props => {
         : (cell.rowEnd !== line || !cell.sizeY) && (cell.rowStart !== line || !cell.sizeY);
     const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
     const floorSize = size => Math.floor(size);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [grid, reCalculateFlag]);
@@ -158,9 +160,7 @@ export const ResizeGrid = props => {
                                     }
                                 }
                                 else {
-                                    child.transformY &&
-                                        !child.movedBottom &&
-                                        (child.sizeY = +child.sizeY + yDistant);
+                                    child.transformY && !child.movedBottom && (child.sizeY = +child.sizeY + yDistant);
                                 }
                                 // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
                                 if (child.sizeY < MIN_SIZE) {
@@ -560,9 +560,8 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
-        if (isPreview)
-            return;
-        !cell.active && activeCell({ idx });
+        // if (isPreview) return;
+        // !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
@@ -574,12 +573,14 @@ export const ResizeGrid = props => {
             return;
         }
         const newChilds = [...grid.childs];
+        const insertArr = [];
         for (let i = rowStart; i < rowEnd; i++) {
             for (let j = colStart; j < colEnd; j++) {
                 const rStart = i;
                 const cStart = j;
                 const rEnd = rStart + 1;
                 const cEnd = cStart + 1;
+                const insertIdx = cachedMergeCellRef.current[`${rStart}-${cStart}`] || idx;
                 // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
                 const newChild = {
                     colStart: cStart,
@@ -588,21 +589,25 @@ export const ResizeGrid = props => {
                     rowEnd: rEnd,
                 };
                 if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
+                    newChilds[idx] = Object.assign(Object.assign({}, newChilds[idx]), newChild);
                 }
                 else if (rStart !== rowStart ||
                     rEnd !== rowEnd ||
                     cStart !== colStart ||
                     cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
+                    insertArr.push({ idx: insertIdx, cell: newChild });
                 }
             }
         }
+        insertArr.sort((a, b) => a.idx - b.idx);
+        insertArr.forEach(({ idx, cell }) => {
+            newChilds.splice(idx, 0, cell);
+        });
         setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
     };
     function resetBackgroundCellRef() {
-        Object.values(cellsRef.current).forEach(r => {
-            if (r.current) {
+        Object.entries(cellsRef.current).forEach(([idx, r]) => {
+            if (r.current && grid.childs[idx] && !grid.childs[idx].active) {
                 r.current.style.background = 'unset';
             }
         });
@@ -628,6 +633,8 @@ export const ResizeGrid = props => {
             delete newChilds[idxStart].sizeY;
             hCells.reverse().forEach(i => {
                 if (i !== idxStart) {
+                    const deleteChild = newChilds[i];
+                    cachedMergeCellRef.current[`${deleteChild.rowStart}-${deleteChild.colStart}`] = i;
                     newChilds.splice(i, 1);
                     delete cellsRef.current[i];
                     delete cordinatesRef.current[i];
@@ -636,6 +643,12 @@ export const ResizeGrid = props => {
             });
             setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
         }
+        else {
+            if (!isPreview) {
+                !cell.active && activeCell({ idx });
+                // cellsRef.current[idx]?.style.background = cellActiveStyle?.background;
+            }
+        }
         selectRef.current = null;
         selectEndRef.current = null;
     };
@@ -698,7 +711,7 @@ export const ResizeGrid = props => {
     const renderGrid = (style) => {
         const { gridTemplateColumns, gridTemplateRows, childs } = grid;
         // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef })))));
+        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef, allowActive: allowActive })))));
     };
     const handleUpLine = () => {
         lineVertical(false);

package/es/components/molecules/ResizeGrid/components/Cell/Cell.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { buildGridArea, buildTranform } from '../../constant';
 import { StyledCell } from './styled';
 import { useDeepCompareEffect } from '../../../../../hooks/useDeepCompareEffect';
-export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, activeCell, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, }) => {
+export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, allowActive, }) => {
     const { objectFit, image } = cell;
     const downRef = useRef(false);
     const timeoutRef = useRef();
@@ -72,7 +72,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     // console.log('TRANSFORM', idx, buildTranform(cell))
     return (React.createElement(StyledCell, { ref: cellRef, className: "cell", 
         // onClick={handleActiveCell}
-        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (cell.active &&
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (allowActive && cell.active &&
             !isPreview &&
             (activeStyle || {
                 outline: '1px solid #005eb8',

package/es/components/molecules/ResizeGrid/types.d.ts

@@ -84,6 +84,7 @@ export interface CellProps {
     style?: React.CSSProperties;
     activeStyle?: React.CSSProperties;
     isPreview?: boolean;
+    allowActive?: boolean;
     ctrlKeyRef?: React.RefObject<boolean>;
 }
 export type TGrid = {
@@ -135,6 +136,7 @@ export interface IResizeGridProps {
     cellActiveStyle?: React.CSSProperties;
     containerStyle?: React.CSSProperties;
     isCompact?: boolean;
+    allowActive?: boolean;
     delayUpdate?: number;
     reCalculateFlag?: number | boolean;
 }

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -45,9 +45,9 @@ export const RichMenuBlock = props => {
         }
     }, PATH);
     const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
-    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, Object.assign({}, (isSingleUploadMode && {
+    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, (isSingleUploadMode && {
         image: imageUrl,
         imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
         imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,
-    })))));
+    }))));
 };

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js

@@ -66,7 +66,7 @@ export const RichMenuCell = props => {
         const { objectPosition, objectFit } = imageStyles, restImageStyles = __rest(imageStyles, ["objectPosition", "objectFit"]);
         const isBlank = isEmpty(imageUrl);
         if (isBlank)
-            return (React.createElement(AddContainer, null,
+            return (React.createElement(AddContainer, { className: "cell-add-container" },
                 React.createElement(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }),
                 React.createElement(AddLabel, null, t(translations.cellAction).toString())));
         return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './styles.scss';
+import { SearchPopoverProps } from './types';
+export declare const SearchPopover: (props: SearchPopoverProps) => React.JSX.Element;

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -0,0 +1,23 @@
+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;
+};
+import React from 'react';
+import { Popover } from 'antd';
+import { Input, Icon } from '../../atoms';
+import './styles.scss';
+import clsx from 'clsx';
+export const SearchPopover = (props) => {
+    const { inputSearchProps = {} } = props, popoverProps = __rest(props, ["inputSearchProps"]);
+    const { overlayClassName, arrow = false, children, content, trigger = ['click'] } = popoverProps, restPopoverProps = __rest(popoverProps, ["overlayClassName", "arrow", "children", "content", "trigger"]);
+    return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
+            React.createElement(Input, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
+            content) }), children));
+};

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverAddFieldProps } from '../../types';
+export declare const PopoverAddField: (props: PopoverAddFieldProps) => React.JSX.Element;

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -0,0 +1,32 @@
+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;
+};
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { renderIconField } from '../../utils';
+import { PopoverSelect } from '../PopoverSelect';
+export const PopoverAddField = (props) => {
+    const { fields, onSearchPredicate, className } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className"]);
+    const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
+    const options = useMemo(() => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
+            field.dataType && renderIconField(field.dataType),
+            field.label)) }))), [fields]);
+    const handleOnSearchPredicate = (field) => {
+        const originalField = originalFieldByKey.get(field.key);
+        if (!originalField)
+            return true;
+        if (onSearchPredicate && originalField) {
+            return onSearchPredicate(originalField);
+        }
+        return true;
+    };
+    return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') })));
+};

package/es/components/molecules/SearchPopover/components/PopoverAddField/index.d.ts

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

package/es/components/molecules/SearchPopover/components/PopoverAddField/index.js

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

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Option, PopoverSelectProps } from '../../types';
+import './styles.scss';
+export declare const PopoverSelect: <TOption extends Option>(props: PopoverSelectProps<TOption>) => React.JSX.Element;

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -0,0 +1,132 @@
+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;
+};
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { SearchPopover } from '../../SearchPopover';
+import { Button, Checkbox, Menu } from 'antd';
+import './styles.scss';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { Icon } from '../../../../atoms';
+import Scrollbars from 'react-custom-scrollbars';
+export const PopoverSelect = (props) => {
+    var _a, _b;
+    const { open: openProp, selected, options = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
+    const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
+    const refOnSearchPredicate = useRef(onSearchPredicate);
+    useEffect(() => {
+        refOnSearchPredicate.current = onSearchPredicate;
+    }, [onSearchPredicate]);
+    const [open, setOpen] = useState(openProp);
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    const [search, setSearch] = useState('');
+    const [showSelected, setShowSelected] = useState(false);
+    const applyDisabled = selectedKeys.size === 0;
+    useEffect(() => {
+        if (openProp !== undefined) {
+            setOpen(openProp);
+        }
+    }, [openProp]);
+    useEffect(() => {
+        if (searchValue !== undefined) {
+            setSearch(searchValue.toString());
+        }
+    }, [searchValue]);
+    useEffect(() => {
+        if (selected !== undefined) {
+            setSelectedKeys(new Set(selected));
+        }
+    }, [selected]);
+    const filteredField = useMemo(() => {
+        let result = options.filter(field => {
+            if (refOnSearchPredicate.current) {
+                const isFilteredOption = refOnSearchPredicate.current(field);
+                return isFilteredOption;
+            }
+            let labelIncluded = false;
+            if (typeof field.label === 'string') {
+                labelIncluded = searchStringQuery(field.label, search);
+            }
+            const keyIncluded = searchStringQuery(field.key, search);
+            return keyIncluded || labelIncluded;
+        });
+        if (showSelected) {
+            result = result.filter(field => selectedKeys.has(field.key));
+        }
+        return result;
+    }, [options, search, showSelected, selectedKeys]);
+    const handleToggleField = (field, checked) => {
+        const newSelectedKeys = new Set(selectedKeys);
+        if (checked) {
+            newSelectedKeys.add(field.key);
+        }
+        else {
+            newSelectedKeys.delete(field.key);
+        }
+        setSelectedKeys(newSelectedKeys);
+    };
+    const handleCancel = () => {
+        setOpen(false);
+        if (onCancel)
+            onCancel();
+    };
+    const handleApply = () => {
+        if (onApply)
+            onApply(Array.from(selectedKeys));
+        setOpen(false);
+    };
+    const handleOnSearch = (searchValue) => {
+        setSearch(searchValue);
+        if (inputSearchProps.onAfterChange) {
+            inputSearchProps.onAfterChange(searchValue);
+        }
+    };
+    const handleSelectAll = () => {
+        setSelectedKeys(new Set(options.map(field => field.key)));
+    };
+    const handleDeselectAll = () => {
+        setSelectedKeys(new Set());
+    };
+    const handleAfterOpenChange = (visible) => {
+        if (!visible) {
+            setSearch(searchValue ? searchValue.toString() : '');
+            setSelectedKeys(selected ? new Set(selected) : new Set());
+        }
+        if (rest.afterOpenChange) {
+            rest.afterOpenChange(visible);
+        }
+    };
+    const handleOpenChange = (visible) => {
+        setOpen(visible);
+    };
+    const renderCheckBoxLabel = (option) => {
+        if (typeof option.label === 'function') {
+            return option.label({ selected: selectedKeys.has(option.key) });
+        }
+        return option.label;
+    };
+    return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
+            !!options.length && (React.createElement("div", { className: "actions" },
+                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
+                selectedKeys.size === options.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
+            !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
+                React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(option => ({
+                        key: option.key,
+                        label: (React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option))),
+                    })) }))),
+            React.createElement("div", { className: "footer" },
+                React.createElement(Button, { onClick: handleCancel }, "Cancel"),
+                React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
+            '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,
+        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: Object.assign(Object.assign({}, restInputSearchProps), { value: search, onAfterChange: handleOnSearch }), afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange }), children || (React.createElement(Button, { type: "text" },
+        React.createElement(Icon, { type: "icon-ants-plus-slim", size: 14 }),
+        "Add fields"))));
+};

package/es/components/molecules/SearchPopover/components/PopoverSelect/index.d.ts

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

package/es/components/molecules/SearchPopover/components/PopoverSelect/index.js

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

package/es/components/molecules/SearchPopover/components/PopoverSelect/styles.scss

@@ -0,0 +1,59 @@
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      min-width: 300px;
+
+      .antsomi-popover-inner-content {
+        .antsomi-menu.list-fields {
+          border-bottom: 1px solid var(--divider-1);
+
+          > .antsomi-menu-item {
+            padding: 0;
+
+            > .antsomi-menu-title-content {
+              > .antsomi-checkbox-wrapper {
+                padding: 0 var(--item-padding);
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 100%;
+
+                span:nth-child(2) {
+                  > i {
+                    min-width: 20px;
+                    text-align: center;
+                  }
+
+                  display: flex;
+                  align-items: center;
+                  gap: 6px;
+                }
+              }
+            }
+          }
+        }
+
+        > .actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+          padding: 5px 0px;
+
+          > button {
+            height: 30px;
+            padding: 0 10px;
+          }
+        }
+
+        > .footer {
+          gap: 10px;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export { PopoverAddField } from './PopoverAddField';
+export { PopoverSelect } from './PopoverSelect';

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

@@ -0,0 +1,2 @@
+export { PopoverAddField } from './PopoverAddField';
+export { PopoverSelect } from './PopoverSelect';

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

@@ -0,0 +1,27 @@
+export declare const FIELD_DATA_TYPE: {
+    readonly NUMBER: {
+        readonly label: "Number";
+        readonly name: "number";
+        readonly value: 2;
+    };
+    readonly STRING: {
+        readonly label: "String";
+        readonly name: "string";
+        readonly value: 1;
+    };
+    readonly TEXT: {
+        readonly label: "Text";
+        readonly name: "text";
+        readonly value: 1;
+    };
+    readonly DATE_TIME: {
+        readonly label: "Datetime";
+        readonly name: "datetime";
+        readonly value: 5;
+    };
+    readonly BOOLEAN: {
+        readonly label: "Boolean";
+        readonly name: "boolean";
+        readonly value: 17;
+    };
+};