@antscorp/antsomi-ui 1.3.5-beta.669 → 1.3.5-beta.670

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

@@ -13,13 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { ConfigProvider } from 'antd';
 import { uniqBy } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // Components
-import { EmptyData, Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { EmptyData, PopoverSelect, 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';
+import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton, GroupSelectButton, } from './styled';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -43,7 +43,7 @@ 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"]);
+    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
@@ -142,11 +142,12 @@ export const MatchesAny = props => {
                     React.createElement(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 })))));
     };
     // Memos
-    const { treeData, matchedParents } = useMemo(() => {
+    const { treeData, matchedParents } = useDeepCompareMemo(() => {
+        var _a;
         const { results, matchedParents } = recursiveSearchItems({
             list: items || [],
             searchKeys: ['title', 'key'],
-            searchValue,
+            searchValue: !onChangeSearch ? searchValue : '',
             childrenKey: 'children',
         });
         const serializeTreeData = (list) => list.map(item => {
@@ -171,10 +172,14 @@ export const MatchesAny = props => {
                 children: serializeTreeData(item.children),
             }));
         });
-        const treeData = serializeTreeData(results);
+        let treeData = serializeTreeData(results);
+        // Filter the tree data based on the group selected items
+        if (groupSelectProps && ((_a = groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.length)) {
+            treeData = treeData.filter(item => { var _a; return (_a = groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.includes(item.key); });
+        }
         return { treeData, matchedParents };
-    }, [items, searchValue, selectedItems]);
-    const selectedTreeData = useMemo(() => {
+    }, [items, searchValue, selectedItems, groupSelectProps, onChangeSearch]);
+    const selectedTreeData = useDeepCompareMemo(() => {
         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)) || [];
@@ -194,9 +199,11 @@ export const MatchesAny = props => {
                     ? 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),
-            }))))) || [];
+            })) === 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),
+                }
+                : { className: 'leaf-node' }))))) || [];
         };
         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]);
@@ -207,11 +214,17 @@ export const MatchesAny = props => {
     }, [treeData]);
     // Renders
     const renderSelectList = () => {
-        var _a;
+        var _a, _b;
         return (React.createElement("div", { className: "matches-any__section matches-any__section--left" },
             React.createElement("div", { className: "matches-any__header" },
+                !!groupSelectProps && (React.createElement(PopoverSelect, Object.assign({}, groupSelectProps),
+                    React.createElement(GroupSelectButton, { type: "default", size: "small", shape: "round" },
+                        React.createElement("span", { className: "group-name" }, groupSelectProps === null || groupSelectProps === void 0 ? void 0 :
+                            groupSelectProps.name,
+                            ":"),
+                        `${((_a = groupSelectProps === null || groupSelectProps === void 0 ? void 0 : groupSelectProps.selected) === null || _a === void 0 ? void 0 : _a.length) || 0} ${t(translations.global.selected)}`))),
                 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(Input.CustomSearch, { placeholder: `${(_b = t(translations.global.search)) === null || _b === void 0 ? void 0 : _b.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})`),
@@ -262,7 +275,7 @@ export const MatchesAny = props => {
 };
 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"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "onChange", "onLoadMore"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -275,7 +288,7 @@ export const MatchesAnySelect = props => {
         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 }), align: {
+    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
             overflow: {
                 shiftY: 0,
                 shiftX: 0,

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

@@ -3,6 +3,9 @@ export declare const MatchesAnyWrapper: import("styled-components").StyledCompon
 export declare const TextButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
     disabled?: boolean | undefined;
 }, never>;
+export declare const GroupSelectButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
 export declare const ActionButton: 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>;
 export declare const StyledTree: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree/Tree").TreeProps<T> & {
     children?: import("react").ReactNode;

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

@@ -1,7 +1,7 @@
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
-import { Flex, Input, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Flex, Input, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Tree } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -11,7 +11,6 @@ export const MatchesAnyWrapper = styled(Flex) `
   height: 550px;
 
   .matches-any {
-    background-color: red;
     &__header {
       display: flex;
       align-items: center;
@@ -19,6 +18,7 @@ export const MatchesAnyWrapper = styled(Flex) `
       box-sizing: border-box;
       padding: 0px 15px;
       border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      gap: 10px;
 
       .antsomi-search-input {
         padding-left: 0px;
@@ -177,6 +177,12 @@ export const TextButton = styled(Typography.Text) `
       pointer-events: none;
     `}
 `;
+export const GroupSelectButton = styled(Button) `
+  gap: 4px !important;
+  .group-name {
+    font-weight: normal !important;
+  }
+`;
 export const ActionButton = styled(Flex) `
   height: 16px;
   width: 16px;

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

@@ -1,6 +1,7 @@
 import { TreeDataNode } from 'antd';
 import type { SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
 import type { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverSelectProps } from '../SearchPopover/types';
 export type MatchesAnyItem = TreeDataNode & {
     /**  Addition title of the item. */
     subTitle?: string;
@@ -9,6 +10,10 @@ export type MatchesAnyItem = TreeDataNode & {
     /** An array of children items. */
     children?: MatchesAnyItem[];
 };
+export type GroupSelectProps = PopoverSelectProps & {
+    /** Name of the group select to be displayed */
+    name?: string;
+};
 export interface MatchesAnySelectProps extends SelectProps {
     /** The name of object to be displayed in Popover */
     objectName?: string;
@@ -18,22 +23,16 @@ export interface MatchesAnySelectProps extends SelectProps {
     items?: MatchesAnyItem[];
     /** An array of selected items. */
     selectedItems?: MatchesAnyItem[];
+    /** The properties of the group select */
+    groupSelectProps?: GroupSelectProps;
     /** Callback function that is called when the selected items change. */
     onChange?: (selectedItems: MatchesAnyItem[]) => void;
+    /** Callback function that is called when the search value changes */
+    onChangeSearch?: (searchValue: string) => void;
     /** Callback function that is called when the user scroll */
     onLoadMore?: () => void;
 }
-export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
-    /** The name of the object, corresponding to the `objectName` property in `MatchesAnySelectProps`. */
-    objectName?: MatchesAnySelectProps['objectName'];
-    /** Indicates whether the component is in a loading state, corresponding to the `isLoading` property in `MatchesAnySelectProps`. */
-    loading?: MatchesAnySelectProps['loading'];
-    /** Determines whether to show the extended value, corresponding to the `showExtendValue` property in `MatchesAnySelectProps`. */
-    showExtendValue?: MatchesAnySelectProps['showExtendValue'];
-    /** An array of items. */
-    items?: MatchesAnySelectProps['items'];
-    /** An array of selected items. */
-    selectedItems?: MatchesAnySelectProps['selectedItems'];
+export interface MatchesAnyProps extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch'> {
     /**
      * Callback function that is called when the apply action is triggered.
      *
@@ -42,6 +41,4 @@ export interface MatchesAnyProps extends Omit<FlexProps, 'children'> {
     onApply?: (selectedItems: MatchesAnyItem[]) => void;
     /** Callback function that is called when the cancel action is triggered. */
     onCancel?: () => void;
-    /** Callback function that is called when the user scroll */
-    onLoadMore?: MatchesAnySelectProps['onLoadMore'];
 }

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

@@ -18,7 +18,7 @@ import { StyledInput } from './styled';
 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,
+    return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow, destroyTooltipOnHide: true }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
             React.createElement(StyledInput, 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.js

@@ -11,21 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useCallback, useMemo } from 'react';
 import clsx from 'clsx';
+import { Button, Icon } from '../../../../atoms';
 import { renderIconField } from '../../utils';
 import { PopoverSelect } from '../PopoverSelect';
 import { Typography } from 'antd';
 export const PopoverAddField = (props) => {
-    const { fields, onSearchPredicate, className } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className"]);
+    const { fields, onSearchPredicate, className, children } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className", "children"]);
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
-    const handleOnSearchPredicate = (field) => {
-        const originalField = originalFieldByKey.get(field.key);
+    const handleOnSearchPredicate = useCallback((option) => {
+        const originalField = originalFieldByKey.get(option.key);
         if (!originalField)
-            return true;
+            return false;
         if (onSearchPredicate && originalField) {
             return onSearchPredicate(originalField);
         }
-        return true;
-    };
+        return false;
+    }, [onSearchPredicate, originalFieldByKey]);
     const options = useCallback((params) => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
             field.dataType && renderIconField(field.dataType),
             typeof field.label === 'string' && (React.createElement(Typography.Text, { ellipsis: {
@@ -35,5 +36,7 @@ export const PopoverAddField = (props) => {
                 field.label({
                     selected: params.selected.includes(field.key),
                 }))) }))), [fields]);
-    return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') })));
+    return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') }), 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/PopoverSelect.js

@@ -14,7 +14,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { SearchPopover } from '../../SearchPopover';
 import './styles.scss';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
-import { Button, Checkbox, Icon } from '../../../../atoms';
+import { Button, Checkbox } from '../../../../atoms';
 import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { List } from 'antd';
 export const PopoverSelect = (props) => {
@@ -48,18 +48,20 @@ export const PopoverSelect = (props) => {
             setSelectedKeys(new Set(selected));
         }
     }, [selected]);
-    const filteredField = useMemo(() => {
-        let result = options.filter(field => {
-            if (refOnSearchPredicate.current) {
-                const isFilteredOption = refOnSearchPredicate.current(field);
-                return isFilteredOption;
-            }
+    const filteredOptions = useMemo(() => {
+        const defaultFilter = (opt) => {
             let labelIncluded = false;
-            if (typeof field.label === 'string') {
-                labelIncluded = searchStringQuery(field.label, search);
+            if (typeof opt.label === 'string') {
+                labelIncluded = searchStringQuery(opt.label, search);
             }
-            const keyIncluded = searchStringQuery(field.key, search);
+            const keyIncluded = searchStringQuery(opt.key, search);
             return keyIncluded || labelIncluded;
+        };
+        let result = options.filter(field => {
+            if (!refOnSearchPredicate.current) {
+                return defaultFilter(field);
+            }
+            return refOnSearchPredicate.current(field) || defaultFilter(field);
         });
         if (showSelected) {
             result = result.filter(field => selectedKeys.has(field.key));
@@ -117,17 +119,15 @@ export const PopoverSelect = (props) => {
         return option.label;
     };
     return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
-            !!optionsProp.length && (React.createElement(StyledAction, null,
+            optionsProp.length > 0 && (React.createElement(StyledAction, null,
                 React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
-                selectedKeys.size === optionsProp.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
-            !!filteredField.length && (React.createElement(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260 },
-                React.createElement(List, { bordered: false, dataSource: filteredField, renderItem: option => (React.createElement(List.Item, null,
+                selectedKeys.size === options.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
+            !!filteredOptions.length && (React.createElement(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260 },
+                React.createElement(List, { bordered: false, dataSource: filteredOptions, renderItem: option => (React.createElement(List.Item, null,
                         React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option)))) }))),
             React.createElement(StyledFooter, null,
                 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"))));
+        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: Object.assign(Object.assign({}, restInputSearchProps), { value: search, onAfterChange: handleOnSearch }), afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange }), children || React.createElement(Button, null, "Select")));
 };

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

@@ -1,4 +1,4 @@
-import Scrollbars from 'react-custom-scrollbars';
+/// <reference types="react" />
 export declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<typeof Scrollbars, any, {}, never>;
+export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/atoms").ScrollbarsProps>, any, {}, never>;

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

@@ -1,6 +1,6 @@
 var _a, _b;
+import { Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import Scrollbars from 'react-custom-scrollbars';
 import styled from 'styled-components';
 export const StyledFooter = styled.div `
   gap: 10px;
@@ -8,6 +8,7 @@ export const StyledFooter = styled.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  border-top: 1px solid var(--divider-1);
 `;
 export const StyledAction = styled.div `
   display: flex;
@@ -23,8 +24,6 @@ export const StyledAction = styled.div `
 `;
 export const StyledListFieldsWrapper = styled(Scrollbars) `
   .antsomi-list-items {
-    border-bottom: 1px solid var(--divider-1);
-
     > .antsomi-list-item {
       padding: 0;
       border-bottom: 0;

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

@@ -25,7 +25,7 @@ export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverP
     showSelectedLabel: string;
     deselectAllLabel: string;
     selectAllLabel: string;
-    onSearchPredicate: (option: TOption) => boolean;
+    onSearchPredicate: (option: Option) => boolean;
 }>;
 export type PopoverAddFieldProps = Omit<PopoverSelectProps, 'options'> & {
     fields: Field[];

package/es/constants/theme.js

@@ -97,6 +97,7 @@ THEME.components = {
         borderColorDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw6,
         colorTextDisabled: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0,
         textHoverBg: '#F2F9FF',
+        controlHeightSM: 24,
         marginXS: 0,
         /* Text type */
         colorBgTextHover: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue,

package/es/utils/common.js

@@ -536,7 +536,7 @@ export const recursiveSearchItems = ({ list = [], childrenKey = 'children', sear
                 matchingSubChildren = searchChildren(child[childrenKey], child);
             }
             if (childMatches || matchingSubChildren.length > 0) {
-                matchingChildren.push(Object.assign(Object.assign({}, child), { [childrenKey]: matchingSubChildren }));
+                matchingChildren.push(Object.assign(Object.assign({}, child), (matchingSubChildren.length > 0 && { [childrenKey]: matchingSubChildren })));
             }
         });
         if (matchingChildren.length > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.669",
+  "version": "1.3.5-beta.670",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",