@antscorp/antsomi-ui 1.3.5-beta.695 → 1.3.5-beta.697

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

@@ -17,7 +17,7 @@ import { uniqBy } from 'lodash';
 import React, { useEffect, useState } from 'react';
 // Components
 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 { Button, Flex, Icon, Input, Popover, Spin, Typography, Tooltip, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ExtendValuePopup } from './components/ExtendValuePopup';
 // Styled
 import { MatchesAnyWrapper, ActionButton, StyledTree, TextButton, GroupSelectButton, ExtraValueLabel, } from './styled';
@@ -30,7 +30,7 @@ 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 { flatTree, recursiveFindParents, recursiveSearchItems, } from '@antscorp/antsomi-ui/es/utils';
 import { DataIcon, WarningIcon } from '../../icons';
 import clsx from 'clsx';
 const initialState = {
@@ -40,6 +40,7 @@ const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
     isShowLoadMoreEl: false,
+    selectedExpandedKeys: [],
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
@@ -49,7 +50,7 @@ export function MatchesAny(props) {
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
+    const { searchValue, selectedItems, isShowLoadMoreEl, selectedExpandedKeys } = state;
     const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
     const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
@@ -92,10 +93,11 @@ export function MatchesAny(props) {
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [
                     ...(prev.selectedItems || []),
                     ...flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.filter(item => !item.children),
-                ] })));
+                ], selectedExpandedKeys: [...(prev.selectedExpandedKeys || []), item.key] })));
             return;
         }
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item] })));
+        const parentExpandedKeys = recursiveFindParents(items || [], item, 'key', 'children').map(item => item.key);
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(prev.selectedItems || []), item], selectedExpandedKeys: [...(prev.selectedExpandedKeys || []), ...parentExpandedKeys] })));
     };
     /**
      * Removes an item and its descendants from the list of selected items.
@@ -120,7 +122,9 @@ export function MatchesAny(props) {
     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') })));
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key'), selectedExpandedKeys: flatTree(items, 'children')
+                .filter(item => !!item.children)
+                .map(item => item.key) })));
     };
     const onRemoveAll = () => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
@@ -263,23 +267,25 @@ export function MatchesAny(props) {
                     React.createElement(Flex, { align: "center", gap: 10 },
                         renderExtraValueLabels(),
                         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, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps))))))));
+                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React.createElement(React.Fragment, null,
+                    React.createElement(StyledTree, { key: searchValue, defaultExpandAll: true, 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 })), height: 396 }),
+                    isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
     };
     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, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (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 })) }))))));
+        React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, Object.assign({ selectable: false, treeData: selectedTreeData, height: 420, defaultExpandAll: true }, ((selectedExpandedKeys === null || selectedExpandedKeys === void 0 ? void 0 : selectedExpandedKeys.length) && {
+            expandedKeys: selectedExpandedKeys,
+        }), { 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 })), onExpand: expandedKeys => {
+                setState(prev => (Object.assign(Object.assign({}, prev), { selectedExpandedKeys: expandedKeys })));
+            } }))))));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems

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

@@ -7,7 +7,23 @@ export declare const GroupSelectButton: import("styled-components").StyledCompon
     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<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+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;
+} & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("rc-tree/lib/interface").DataNode>>;
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+} & {
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("rc-tree").default<import("rc-tree/lib/interface").DataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    Standard: import("react").FC<import("antd/es/tree/Tree").TreeProps<import("rc-tree/lib/interface").DataNode>>;
+}, any, {}, never>;
 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, {}, never>;
 export declare const ExtraValueLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemStatus: 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/MatchAnySelect/styled.js

@@ -68,13 +68,14 @@ export const MatchesAnyWrapper = styled(Flex) `
 
   .antsomi-tree {
     .antsomi-tree-list-holder-inner {
-      gap: 5px;
+      /* gap: 5px; */
     }
 
     .antsomi-tree-treenode {
       width: 100%;
       padding: 0px;
       transition: all 300ms;
+      padding-bottom: 5px;
 
       .antsomi-tree-switcher {
         width: 20px;

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

@@ -17,6 +17,10 @@ import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { Button, Checkbox } from '../../../../atoms';
 import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { List } from 'antd';
+import { EmptyData } from '../../../EmptyData';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
     var _a, _b;
     const { open: openProp, selected, options: optionsProp = [], 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"]);
@@ -122,9 +126,9 @@ export const PopoverSelect = (props) => {
             optionsProp.length > 0 && (React.createElement(StyledAction, null,
                 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)))),
-            !!filteredOptions.length && (React.createElement(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260 },
+            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(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option)))) }))) : (React.createElement(EmptyData, { showIcon: false, description: t(translations.noData).toString() })),
             React.createElement(StyledFooter, null,
                 React.createElement(Button, { onClick: handleCancel }, "Cancel"),
                 React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {

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

@@ -1,9 +1,8 @@
-/// <reference types="hoist-non-react-statics" />
 import React from 'react';
 import { Tree as AntdTree } from 'antd';
 import type { TreeProps, TreeDataNode } from 'antd';
 declare const StandardTree: React.FC<TreeProps>;
-export declare const Tree: string & import("styled-components").StyledComponentBase<(<T extends import("rc-tree").BasicDataNode | TreeDataNode = TreeDataNode>(props: TreeProps<T> & {
+export declare const Tree: (<T extends import("rc-tree").BasicDataNode | TreeDataNode = TreeDataNode>(props: TreeProps<T> & {
     children?: React.ReactNode;
 } & React.RefAttributes<import("rc-tree").default<TreeDataNode>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     TreeNode: React.FC<import("rc-tree").TreeNodeProps<TreeDataNode>>;
@@ -12,17 +11,8 @@ export declare const Tree: string & import("styled-components").StyledComponentB
     } & React.RefAttributes<import("rc-tree").default<TreeDataNode>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
-}, any, any, never> & import("hoist-non-react-statics").NonReactStatics<(<T extends import("rc-tree").BasicDataNode | TreeDataNode = TreeDataNode>(props: TreeProps<T> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<import("rc-tree").default<TreeDataNode>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
-    TreeNode: React.FC<import("rc-tree").TreeNodeProps<TreeDataNode>>;
-    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | TreeDataNode = TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
-        children?: React.ReactNode;
-    } & React.RefAttributes<import("rc-tree").default<TreeDataNode>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
-        displayName?: string | undefined;
-    };
-}, {}> & {
+} & {
     DirectoryTree: typeof AntdTree.DirectoryTree;
-    StandardTree: typeof StandardTree;
+    Standard: typeof StandardTree;
 };
 export type { TreeProps, TreeDataNode };

package/es/components/molecules/Tree/Tree.js

@@ -12,12 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Tree as AntdTree } from 'antd';
 // styled
-import { StyledTreeDirectory } from './styled';
+import { StyledTree, StyledTreeDirectory } from './styled';
 // icon
 import { ExpandMoreIcon } from '../../icons';
 const StandardTree = props => {
     const { switcherIcon = React.createElement(ExpandMoreIcon, { size: 20 }) } = props, restProps = __rest(props, ["switcherIcon"]);
-    return React.createElement(AntdTree, Object.assign({ switcherIcon: switcherIcon }, restProps));
+    return React.createElement(StyledTree, Object.assign({ switcherIcon: switcherIcon }, restProps));
     // return <StyledTree switcherIcon={(props) => <ExpandMoreIcon size={20} />} {...restProps} />;
 };
 export const Tree = AntdTree;
@@ -26,3 +26,4 @@ const DirectoryTree = props => {
     return React.createElement(StyledTreeDirectory, Object.assign({ switcherIcon: switcherIcon }, restProps));
 };
 Tree.DirectoryTree = DirectoryTree;
+Tree.Standard = StandardTree;

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

@@ -1,16 +1,18 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { Tree } from 'antd';
 import styled from 'styled-components';
 export const StyledTree = styled(Tree) `
-  /* .antsomi-tree-treenode.placement-right { */
   .antsomi-tree-treenode {
     .antsomi-tree-switcher {
       display: flex;
       align-items: center;
       justify-content: center;
       order: 10;
-      /* &_close {
-        transform: rotate(-90deg);
-      } */
+    }
+
+    .antsomi-tree-iconEle.antsomi-tree-icon__customize {
+      display: inline-flex;
+      align-items: center;
     }
   }
 `;
@@ -22,9 +24,20 @@ export const StyledTreeDirectory = styled(Tree.DirectoryTree) `
       display: flex;
       align-items: center;
       justify-content: center;
-      &_close {
-        transform: rotate(-90deg);
+    }
+
+    .antsomi-tree-iconEle.antsomi-tree-icon__customize {
+      display: inline-flex;
+      align-items: center;
+
+      & svg {
+        width: 16px;
+        height: 16px;
       }
     }
+
+    &::before {
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
   }
 `;

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -279,7 +279,7 @@ export function useDataTableListing(props) {
             const result = metrics.map(metric => {
                 var _a;
                 return ({
-                    id: metric.metricCode || metric.metricName,
+                    id: metric.metricCode,
                     name: metric.metricName,
                     dataType: METRIC_MAP_NUMBER_TYPE[+metric.dataType] || 'string',
                     children: serializeFilterMetrics(metric.child || []),

package/es/components/organism/LeftMenu/utils/index.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React from 'react';
+import React, { Suspense } from 'react';
 import { cloneDeep, isArray, isEmpty, isNil, sortBy } from 'lodash';
 // Components
-// import { LazyIcon as Icons } from '@antscorp/antsomi-ui/es/components/icons/LazyIcon';
+import { LazyIcon as Icons } from '@antscorp/antsomi-ui/es/components/icons/LazyIcon';
 /** Use this Icons for test storybook */
-import * as Icons from '@antscorp/antsomi-ui/es/components/icons';
+// import * as Icons from '@antscorp/antsomi-ui/es/components/icons';
 import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
 // Constants
 import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, APP_EXCLUDED_KEYS, MAP_MENU_TO_PARENT_APP_CODE, } from '../constants';
@@ -522,11 +522,8 @@ export const renderMenuIcon = (iconName) => {
     try {
         // const ComponentIcon = iconName && Icons[iconName];
         const ComponentIcon = iconName && Icons[iconName];
-        return ComponentIcon ? (
-        // <Suspense fallback={null}>
-        React.createElement(ComponentIcon, { className: "menu-item__icon", size: 30 })) : (
-        // </Suspense>
-        React.createElement(IconWrapper, null, isNil(iconName) ? null : React.createElement(Icon, { type: iconName })));
+        return ComponentIcon ? (React.createElement(Suspense, { fallback: null },
+            React.createElement(ComponentIcon, { className: "menu-item__icon", size: 30 }))) : (React.createElement(IconWrapper, null, isNil(iconName) ? null : React.createElement(Icon, { type: iconName })));
     }
     catch (error) {
         return React.createElement(IconWrapper, null, isNil(iconName) ? null : React.createElement(Icon, { type: iconName }));

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -177,11 +177,13 @@ THEME.components = {
         borderRadiusSM: 5,
     },
     Tree: {
-        directoryNodeSelectedBg: 'transparent',
-        directoryNodeSelectedColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorText,
+        // Directory token
+        directoryNodeSelectedBg: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.blue1_1,
+        directoryNodeSelectedColor: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.colorText,
         controlInteractiveSize: 18,
-        colorBorder: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.colorPrimary,
-        nodeHoverBg: 'transparent',
+        colorBorder: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.colorPrimary,
+        nodeHoverBg: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.blue,
+        nodeSelectedBg: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.blue1_1,
         lineWidth: 2,
         borderRadiusSM: 5,
         // titleHeight: 12,
@@ -198,7 +200,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        itemColor: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw8,
+        itemColor: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -210,7 +212,7 @@ THEME.components = {
         lineHeight: 1.143,
         lineHeightLG: 1.143,
         lineHeightSM: 1.143,
-        itemHoverColor: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.colorPrimary,
+        itemHoverColor: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -218,13 +220,13 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.bw0,
-        colorTextTertiary: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.bw0,
+        colorTextQuaternary: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.bw0,
+        colorTextTertiary: (_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.bw0,
         handleSize: 8,
         handleSizeSM: 7,
         trackMinWidth: 27,
         trackHeight: 16,
-        handleBg: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorPrimary,
+        handleBg: (_5 = THEME.token) === null || _5 === void 0 ? void 0 : _5.colorPrimary,
     },
     Popover: {
         borderRadiusLG: 10,
@@ -236,11 +238,11 @@ THEME.components = {
         paddingXXS: 8,
         controlItemBgHover: '#F2F9FF',
         controlItemBgActive: '#DEEFFE',
-        colorPrimary: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.colorText,
+        colorPrimary: (_6 = THEME.token) === null || _6 === void 0 ? void 0 : _6.colorText,
         controlItemBgActiveHover: '#DEEFFE',
     },
     Tooltip: {
-        colorBgSpotlight: (_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.bw8,
+        colorBgSpotlight: (_7 = THEME.token) === null || _7 === void 0 ? void 0 : _7.bw8,
         fontSize: 11,
     },
     Menu: {
@@ -250,8 +252,8 @@ THEME.components = {
         itemMarginBlock: 5,
         itemBorderRadius: 5,
         subMenuItemBg: 'transparent',
-        itemDisabledColor: (_5 = THEME.token) === null || _5 === void 0 ? void 0 : _5.colorTextDisabled,
-        itemActiveBg: (_6 = THEME.token) === null || _6 === void 0 ? void 0 : _6.blue1_1,
+        itemDisabledColor: (_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorTextDisabled,
+        itemActiveBg: (_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.blue1_1,
     },
     Form: {
         itemMarginBottom: 15,

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -9,7 +9,7 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
-const { fontSize, accent7, gray5, scrollBarSize, bw3, bw4, bw5 } = globalToken || {};
+const { accent7, gray5, scrollBarSize, bw3, bw4, bw5 } = THEME.token || {};
 export const GlobalStyle = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41;
     return (React.createElement(Global, { styles: css `
@@ -245,15 +245,9 @@ export const GlobalStyle = () => {
         &:focus {
           background-color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
         }
-
-        &::placeholder {
-          font-style: normal !important;
-          font-size: ${fontSize}px !important;
-        }
       }
 
       .antsomi-input-affix-wrapper {
-        overflow: hidden;
         &:hover {
           > input.antsomi-input {
             background-color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue};
@@ -399,15 +393,6 @@ export const GlobalStyle = () => {
       .antsomi-picker {
         border-width: 0 0 1px 0 !important;
         box-shadow: none !important;
-
-        > .antsomi-picker-input {
-          input {
-            &::placeholder {
-              font-style: normal !important;
-              font-size: ${fontSize}px !important;
-            }
-          }
-        }
       }
 
       .antsomi-picker:hover,
@@ -1072,6 +1057,14 @@ export const GlobalStyle = () => {
             margin: 3px 0px;
           }
         }
+
+        > .antsomi-tree-list-scrollbar-vertical {
+          width: ${scrollBarSize} !important;
+
+          > .antsomi-tree-list-scrollbar-thumb {
+            background: ${accent7} !important;
+          }
+        }
       }
 
       /* Checkbox */

package/es/utils/common.d.ts

@@ -147,3 +147,14 @@ export declare function parseJSONFromLocalStorage<T = any>(key: string): T | nul
  * @returns {T[]} - The sorted array with each object’s children arrays also sorted recursively.
  */
 export declare const recursiveSortBy: <T = any>(arr: T[], childrenKey?: keyof T, sortByKeys?: (keyof T)[]) => T[];
+/**
+ * Recursively finds all parent items of a given item in a list of objects.
+ *
+ * @template T - The type of the objects within the list.
+ * @param {T[]} list - The list of objects to search through.
+ * @param {T} item - The item to find the parents of.
+ * @param {keyof T} identifyKey - The key used to identify each object in the list.
+ * @param {keyof T} childrenKey - The key used to identify the children array in each object.
+ * @returns {T[]} - An array of parent objects that contain the specified item.
+ */
+export declare const recursiveFindParents: <T = any>(list: T[], item: T, identifyKey: keyof T, childrenKey: keyof T) => T[];

package/es/utils/common.js

@@ -620,3 +620,31 @@ export function parseJSONFromLocalStorage(key) {
 export const recursiveSortBy = (arr, childrenKey = 'children', sortByKeys = []) => sortBy(arr, [...sortByKeys]).map(item => (Object.assign(Object.assign({}, item), (item[childrenKey] && {
     [childrenKey]: recursiveSortBy(item[childrenKey], childrenKey, sortByKeys),
 }))));
+/**
+ * Recursively finds all parent items of a given item in a list of objects.
+ *
+ * @template T - The type of the objects within the list.
+ * @param {T[]} list - The list of objects to search through.
+ * @param {T} item - The item to find the parents of.
+ * @param {keyof T} identifyKey - The key used to identify each object in the list.
+ * @param {keyof T} childrenKey - The key used to identify the children array in each object.
+ * @returns {T[]} - An array of parent objects that contain the specified item.
+ */
+export const recursiveFindParents = (list, item, identifyKey, childrenKey) => {
+    const matchedParents = [];
+    list.forEach(child => {
+        if (child[identifyKey] === item[identifyKey]) {
+            // If the current child is the item we're searching for, add it to the matched parents array.
+            matchedParents.push(child);
+        }
+        else if (child[childrenKey] && Array.isArray(child[childrenKey])) {
+            // If the current child has children, recursively search through them for the item.
+            const matchingSubChildren = recursiveFindParents(child[childrenKey], item, identifyKey, childrenKey);
+            // If any matching sub-children were found, add the current child to the matched parents array.
+            if (matchingSubChildren.length > 0) {
+                matchedParents.push(Object.assign(Object.assign({}, child), { [childrenKey]: matchingSubChildren }));
+            }
+        }
+    });
+    return matchedParents;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.695",
+  "version": "1.3.5-beta.697",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -134,7 +134,7 @@
     "uniqid": "^5.4.0",
     "use-context-selector": "^1.4.4",
     "use-image": "^1.1.1",
-    "use-immer": "^0.4.1",
+    "use-immer": "^0.9.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {