@antscorp/antsomi-ui 2.0.1 → 2.0.3

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

@@ -1,17 +1,17 @@
 // 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';
-const { borderRadius, bw3, bw6, blue, blue1, colorPrimary } = globalToken || {};
+import { EXTRA_VALUE_SHIFT_WIDTH, EXTRA_VALUE_WIDTH } from './constants';
+const { borderRadius, bw3, bw6, blue, blue1, colorPrimary, colorError } = globalToken || {};
 export const MatchesAnyWrapper = styled(Flex) `
   width: 100%;
   height: 550px;
 
   .matches-any {
-    background-color: red;
     &__header {
       display: flex;
       align-items: center;
@@ -19,6 +19,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;
@@ -66,6 +67,10 @@ export const MatchesAnyWrapper = styled(Flex) `
   }
 
   .antsomi-tree {
+    .antsomi-tree-list-holder-inner {
+      gap: 5px;
+    }
+
     .antsomi-tree-treenode {
       width: 100%;
       padding: 0px;
@@ -94,14 +99,32 @@ export const MatchesAnyWrapper = styled(Flex) `
           .title-content {
             padding: 5px 0px;
             display: flex;
-            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
             width: 100%;
             height: 100%;
             overflow: auto;
 
+            > .left-content {
+              width: 100%;
+              overflow: auto;
+            }
+
             .sub-title {
               font-size: 11px;
             }
+
+            .extra-value-content {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: ${EXTRA_VALUE_WIDTH}px;
+            }
+
+            &.extra-value {
+              width: calc(100% - ${EXTRA_VALUE_SHIFT_WIDTH}px);
+            }
           }
         }
       }
@@ -158,6 +181,27 @@ export const MatchesAnyWrapper = styled(Flex) `
           }
         }
       }
+
+      &.error-node {
+        .antsomi-tree-node-content-wrapper {
+          border-color: ${colorError};
+          border-width: 1px;
+          border-style: solid;
+        }
+
+        &:not(:has(span.antsomi-tree-switcher-noop)) {
+          .antsomi-tree-node-content-wrapper {
+            border-left-width: 0px;
+          }
+
+          .antsomi-tree-switcher {
+            border-color: ${colorError};
+            border-width: 1px;
+            border-right-width: 0;
+            border-style: solid;
+          }
+        }
+      }
     }
   }
 
@@ -169,6 +213,7 @@ export const MatchesAnyWrapper = styled(Flex) `
 `;
 export const TextButton = styled(Typography.Text) `
   color: ${colorPrimary} !important;
+  font-weight: 500;
   cursor: pointer;
 
   ${props => props.disabled &&
@@ -177,6 +222,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;
@@ -195,3 +246,10 @@ export const TextArea = styled(Input.TextArea) `
     border-radius: ${borderRadius}px;
   }
 `;
+export const ExtraValueLabel = styled.div `
+  width: ${EXTRA_VALUE_WIDTH}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const ItemStatus = styled(Flex) ``;

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

@@ -1,47 +1,67 @@
 import { TreeDataNode } from 'antd';
-import type { SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
-import type { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
-export type MatchesAnyItem = TreeDataNode & {
+import { ReactNode } from 'react';
+import type { EmptyDataProps, SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
+import type { FlexProps, PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverSelectProps } from '../SearchPopover/types';
+export type MatchesAnyItem<TItem = Record<string, any>> = TreeDataNode & {
     /**  Addition title of the item. */
     subTitle?: string;
     /** Indicates whether the item is extended */
     isExtendValue?: boolean;
     /** An array of children items. */
-    children?: MatchesAnyItem[];
+    children?: MatchesAnyItem<TItem>[];
+    /** An error message */
+    error?: string;
+} & TItem;
+export type GroupSelectProps = PopoverSelectProps & {
+    /** Name of the group select to be displayed */
+    name?: string;
 };
-export interface MatchesAnySelectProps extends SelectProps {
+export type RenderExtraValue<TItem = Record<string, any>> = {
+    key: keyof MatchesAnyItem<TItem>;
+    label: string;
+    render?: (item: MatchesAnyItem<TItem>) => ReactNode | ReactNode;
+};
+export type CustomItemRenders<TItem> = {
+    title?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    subTitle?: (item: MatchesAnyItem<TItem>) => ReactNode;
+    error?: (item: MatchesAnyItem<TItem>) => ReactNode;
+};
+export interface MatchesAnySelectProps<TItem = Record<string, any>> extends SelectProps {
     /** The name of object to be displayed in Popover */
     objectName?: string;
     /** Indicates whether show the extend value button */
     showExtendValue?: boolean;
     /** An array of items. */
-    items?: MatchesAnyItem[];
+    items?: MatchesAnyItem<TItem>[];
     /** An array of selected items. */
-    selectedItems?: MatchesAnyItem[];
+    selectedItems?: MatchesAnyItem<TItem>[];
+    /** The properties of the group select */
+    groupSelectProps?: GroupSelectProps;
+    /** An array of render extra values */
+    renderExtraValues?: RenderExtraValue<TItem>[];
+    /** Custom item renders */
+    customItemRenders?: CustomItemRenders<TItem>;
+    /** Popover Props */
+    popoverProps?: Partial<PopoverProps>;
+    /** Empty UI for list items */
+    listEmptyProps?: EmptyDataProps;
+    /** Empty UI for selected list items */
+    selectedListEmptyProps?: EmptyDataProps;
     /** Callback function that is called when the selected items change. */
-    onChange?: (selectedItems: MatchesAnyItem[]) => void;
+    onChange?: (selectedItems: MatchesAnyItem<TItem>[]) => 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<TItem = Record<string, any>> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps'> {
     /**
      * Callback function that is called when the apply action is triggered.
      *
      * @param selectedItems - The array of selected items.
      */
-    onApply?: (selectedItems: MatchesAnyItem[]) => void;
+    onApply?: (selectedItems: MatchesAnyItem<TItem>[]) => 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/components/molecules/Tabs/index.d.ts

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

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

@@ -1,2 +1,26 @@
-export { Tree } from 'antd';
-export type { TreeProps, TreeDataNode } from 'antd';
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { Tree as AntdTree } from 'antd';
+import type { TreeProps, TreeDataNode } from 'antd';
+export declare const Tree: string & import("styled-components").StyledComponentBase<(<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;
+    };
+}, 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;
+};
+export type { TreeProps, TreeDataNode };

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

@@ -1 +1,26 @@
-export { Tree } from 'antd';
+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';
+// styled
+import { StyledTree, StyledTreeDirectory } from './styled';
+// icon
+import { ExpandMoreIcon } from '../../icons';
+const StandardTree = props => {
+    const { switcherIcon = React.createElement(ExpandMoreIcon, null) } = props, restProps = __rest(props, ["switcherIcon"]);
+    return React.createElement(StyledTree, Object.assign({ switcherIcon: switcherIcon }, restProps));
+};
+export const Tree = StandardTree;
+const DirectoryTree = props => {
+    const { switcherIcon = React.createElement(ExpandMoreIcon, null) } = props, restProps = __rest(props, ["switcherIcon"]);
+    return React.createElement(StyledTreeDirectory, Object.assign({ switcherIcon: switcherIcon }, restProps));
+};
+Tree.DirectoryTree = DirectoryTree;

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

@@ -1 +1,2 @@
 export * from './Tree';
+export { updateTreeData } from './utils';

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

@@ -1 +1,2 @@
 export * from './Tree';
+export { updateTreeData } from './utils';

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const StyledTree: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+}, any, any, never>;
+export declare const StyledTreeDirectory: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+}, any, any, never>;

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

@@ -0,0 +1,24 @@
+import { Tree } from 'antd';
+import styled from 'styled-components';
+export const StyledTree = styled(Tree) `
+  .antsomi-tree-treenode {
+    .antsomi-tree-switcher {
+      display: flex;
+      order: 10;
+      &_close {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+`;
+export const StyledTreeDirectory = styled(Tree.DirectoryTree) `
+  .antsomi-tree-treenode {
+    .antsomi-tree-switcher {
+      display: flex;
+      order: 10;
+      &_close {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,10 @@
+import type { TreeDataNode } from 'antd';
+/**
+ * Recursively updates the tree data by replacing the children of a node with a given key.
+ *
+ * @param {TreeDataNode[]} list - The list of tree nodes to update.
+ * @param {React.Key} key - The key of the node to update.
+ * @param {TreeDataNode[]} children - The new children to assign to the node.
+ * @return {TreeDataNode[]} The updated list of tree nodes.
+ */
+export declare const updateTreeData: (list: TreeDataNode[], key: React.Key, children: TreeDataNode[]) => TreeDataNode[];

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

@@ -0,0 +1,17 @@
+/**
+ * Recursively updates the tree data by replacing the children of a node with a given key.
+ *
+ * @param {TreeDataNode[]} list - The list of tree nodes to update.
+ * @param {React.Key} key - The key of the node to update.
+ * @param {TreeDataNode[]} children - The new children to assign to the node.
+ * @return {TreeDataNode[]} The updated list of tree nodes.
+ */
+export const updateTreeData = (list, key, children) => list.map(node => {
+    if (node.key === key) {
+        return Object.assign(Object.assign({}, node), { children });
+    }
+    if (node.children) {
+        return Object.assign(Object.assign({}, node), { children: updateTreeData(node.children, key, children) });
+    }
+    return node;
+});

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

@@ -311,7 +311,7 @@ export const UploadImage = props => {
                 React.createElement(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
                         url: value,
                     }) }))))),
-        React.createElement(Modal, { title: labelModalDelete, visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true },
+        React.createElement(Modal, { title: labelModalDelete, open: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true },
             React.createElement("p", null,
                 "Are you sure you want to delete ", (_d = deleteMediaRef.current) === null || _d === void 0 ? void 0 :
                 _d.name,

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

@@ -7,7 +7,6 @@ export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
-export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';
 export { ColorPicker } from './ColorPicker';
@@ -60,6 +59,7 @@ export * from './Tree';
 export * from './MatchAnySelect';
 export * from './ApplyPopupContent';
 export * from './AccessDenied';
+export * from './Tabs';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -7,7 +7,6 @@ export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
-export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';
 export { ColorPicker } from './ColorPicker';
@@ -60,6 +59,7 @@ export * from './Tree';
 export * from './MatchAnySelect';
 export * from './ApplyPopupContent';
 export * from './AccessDenied';
+export * from './Tabs';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/organism/AlgorithmsSetting/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ContentSourceModeView } from '../ContentSources/types';
 export declare const AlgorithmsSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+export declare const StyledTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
     shadow?: boolean | undefined;