@antscorp/antsomi-ui 1.7.4 → 1.7.6

package/CHANGELOG.md

@@ -4,23 +4,55 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.7.4](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.4..v2.0.22)
+#### [v1.7.6](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.6..v2.0.22)
 
 - chore: update storybook version [`d13f194`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d13f19462c2fe117934df7fe2e09fd0aa95a0167)
-- feat(MatchesAnySelect): create and handle new MatchesAnySelect component [`a89c46e`](https://bitbucket.org/git-vn/at.packages.frontend/commits/a89c46e00e81d5a28ac37f42166dcab1c49212df)
-- feat(test): add demo interactive test; update snapshot; config module name mapper [`158cc8d`](https://bitbucket.org/git-vn/at.packages.frontend/commits/158cc8d960e2f8c71fdb659f755f4532d8ba1b2e)
+- feat: update input width when in view [`f27b982`](https://bitbucket.org/git-vn/at.packages.frontend/commits/f27b982a4427c414a1b5d5538641516a3d35aa6e)
+- chore: update datatable components [`d38cf96`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d38cf9687b2a6fd03396247d04c6ef37a6b030f1)
 
-#### [v2.0.22](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.22..v1.3.5-beta.446)
+### [v2.0.22](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.22..v1.7.5)
 
 > 19 January 2023
 
-#### [v1.3.5-beta.446](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.3.5-beta.446..v1.0.3)
+#### [v1.7.5](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.5..v1.7.4)
+
+> 11 July 2024
+
+- feat(compoents): add component AccountProfile [`e504187`](https://bitbucket.org/git-vn/at.packages.frontend/commits/e5041873fa3236acf35312801754240a7542b8dd)
+- chore(component): remove unuse common folder [`5123bac`](https://bitbucket.org/git-vn/at.packages.frontend/commits/5123bac8005db98661ca48c500aab56ac42b1feb)
+- chore: update formatFitlerValue for useTablisting hook [`2b173a0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/2b173a02ab8fb24a8cd3b6d1c8403c111e831eb4)
+
+#### [v1.7.4](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.4..v1.3.5-beta.446)
+
+> 5 July 2024
+
+- chore: update storybook version [`d13f194`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d13f19462c2fe117934df7fe2e09fd0aa95a0167)
+- feat(MatchesAnySelect): create and handle new MatchesAnySelect component [`a89c46e`](https://bitbucket.org/git-vn/at.packages.frontend/commits/a89c46e00e81d5a28ac37f42166dcab1c49212df)
+- chore: update filter matches any datatable [`4db6dc8`](https://bitbucket.org/git-vn/at.packages.frontend/commits/4db6dc81b62a9168ca9fe1a5e39e414e473e7285)
+
+#### [v1.3.5-beta.446](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.3.5-beta.446..v1.0.10)
 
 > 2 July 2024
 
-- feat(Explore): add custom explore button [`2a22566`](https://bitbucket.org/git-vn/at.packages.frontend/commits/2a225663d280dbeb486630f076b6bcb6b477039e)
-- feat: update input width when in view [`f27b982`](https://bitbucket.org/git-vn/at.packages.frontend/commits/f27b982a4427c414a1b5d5538641516a3d35aa6e)
-- feat(ticket): add component ticket editor [`53e1b4b`](https://bitbucket.org/git-vn/at.packages.frontend/commits/53e1b4bb230958d4e711283c6ecca14b4e62a6fa)
+- chore(datatable): update useTableListing hook [`262def1`](https://bitbucket.org/git-vn/at.packages.frontend/commits/262def14c8a44ae73d1d9163696afc25e026ba45)
+- chore: update data table component [`7fce77d`](https://bitbucket.org/git-vn/at.packages.frontend/commits/7fce77db8191ff7633679ea9befe28718eb40a88)
+- chore(storybook): add addon-controls [`8ea93fc`](https://bitbucket.org/git-vn/at.packages.frontend/commits/8ea93fc4bb41c50f7a7025bc79d968d849e8d113)
+
+#### [v1.0.10](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.10..v1.0.9)
+
+> 20 June 2024
+
+#### [v1.0.9](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.9..v1.0.8)
+
+> 20 June 2024
+
+#### [v1.0.8](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.8..v1.0.3)
+
+> 20 June 2024
+
+- feat(SelectAccount): add component [`2f1dea0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/2f1dea035af07a01a6be8da47b531d52d2977bbe)
+- fix: update style for calendar selection [`4347b91`](https://bitbucket.org/git-vn/at.packages.frontend/commits/4347b91f5bbe31caeb64478116c1822fe443f359)
+- feat(EditorTab): use modal async in onCloseTab [`76aece8`](https://bitbucket.org/git-vn/at.packages.frontend/commits/76aece8cc7a44385d63019058daa1f8477c8fbcb)
 
 #### [v1.0.3](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.3..v1.0.2)
 

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -12,16 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
 import { cloneDeep } from 'lodash';
 // Libraries
-import React, { useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 // Styled
 import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
 const THUMB_SIZE = 4;
 const MARGIN = 3;
-export const Scrollbars = props => {
+export const Scrollbars = forwardRef((props, refProp) => {
     // Props
     const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
     // Refs
     const ref = useRef(null);
+    useImperativeHandle(refProp, () => ref.current, []);
     /**
      * Updates the size and position of the custom scrollbar thumbs based on the provided dimensions and scroll positions.
      *
@@ -57,7 +58,7 @@ export const Scrollbars = props => {
         ref.current.trackHorizontal.style.visibility =
             scrollWidth <= clientWidth ? 'hidden' : 'visible';
     };
-    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, ref: ref, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
+    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
             var { style } = _a, restOfProps = __rest(_a, ["style"]);
             return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
         }, renderTrackHorizontal: (_a) => {
@@ -77,5 +78,5 @@ export const Scrollbars = props => {
             // }
             // Return a div element with the adjusted styles and original props, applying a custom class for styling
             return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
-        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps)));
-};
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps, { ref: ref })));
+});

package/es/components/icons/DataIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const DataIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/DataIcon.js

@@ -0,0 +1,18 @@
+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, { forwardRef } from 'react';
+export const DataIcon = forwardRef((props, ref) => {
+    const restProps = __rest(props, []);
+    return (React.createElement("svg", Object.assign({ ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.002 6.5C19.002 7.88071 15.6499 9 11.515 9C7.38 9 4.02795 7.88071 4.02795 6.5C4.02795 5.11929 7.38 4 11.515 4C15.6499 4 19.002 5.11929 19.002 6.5ZM18.974 12.131C18.974 13.42 15.622 14.465 11.487 14.465C7.352 14.465 4 13.419 4 12.131V8.46204C4 9.75104 7.352 10.795 11.487 10.795C15.622 10.795 18.974 9.74904 18.974 8.46204V12.131ZM18.974 17.8423C18.974 19.1313 15.622 20.1763 11.487 20.1763C7.352 20.1763 4 19.1303 4 17.8423V14.1733C4 15.4623 7.352 16.5063 11.487 16.5063C15.622 16.5063 18.974 15.4603 18.974 14.1733V17.8423Z", fill: "currentColor" })));
+});

package/es/components/icons/TableIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const TableIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/TableIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const TableIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({}, props, { ref: ref, width: width, height: height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
+        React.createElement("path", { d: "M3 14.0156V9.98438H6.98438V14.0156H3ZM3 18.9844V15H6.98438V18.9844H3ZM3 9V5.01562H6.98438V9H3ZM8.01562 14.0156V9.98438H21V14.0156H8.01562ZM8.01562 18.9844V15H21V18.9844H8.01562ZM8.01562 5.01562H21V9H8.01562V5.01562Z", fill: "currentColor" })));
+});

package/es/components/icons/hooks/useIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '../type';
+export declare const useIcon: (props: IconProps) => {
+    width: string | number | undefined;
+    height: string | number | undefined;
+};

package/es/components/icons/hooks/useIcon.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+export const useIcon = (props) => {
+    const { size = 24 } = props;
+    const [width, height] = useMemo(() => [size || (props === null || props === void 0 ? void 0 : props.width), size || (props === null || props === void 0 ? void 0 : props.height)], [size, props.width, props.height]);
+    return {
+        width,
+        height,
+    };
+};

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

@@ -54,3 +54,5 @@ export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
+export { TableIcon } from './TableIcon';
+export { DataIcon } from './DataIcon';

package/es/components/icons/index.js

@@ -54,3 +54,5 @@ export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
+export { TableIcon } from './TableIcon';
+export { DataIcon } from './DataIcon';

package/es/components/icons/type.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
+    size?: number;
 }

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

@@ -1,5 +1,5 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const AccountSelectionStyled = styled.div `
   background-color: white;
@@ -13,6 +13,12 @@ export const AccountSelectionStyled = styled.div `
     padding: 8px 10px;
     height: 40px;
     box-sizing: border-box;
+    border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+    &:hover,
+    &:focus,
+    &:focus-within {
+      border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+    }
   }
 
   .recent-text {

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -57,7 +57,7 @@ export const AdvancedRangePicker = props => {
             });
         }
     };
-    return (React.createElement(Space, { size: 20, align: "end", className: className || '' },
+    return (React.createElement(Space, { size: 15, align: "end", className: className || '' },
         React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: useFormatMapping
                 ? getFormatDisplayFromValueType('startDate', valueType)
                 : ADVANCED_RANGE_PICKER_FORMAT.startDate, 

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { ConfigProvider } from 'antd';
 import { isNil } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
@@ -24,9 +24,10 @@ import { ToggleDrawerSizeButton } from './components';
 import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
+import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name", "destroyOnClose"]);
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name", "destroyOnClose"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
     const { onClose = () => { } } = props;
@@ -35,7 +36,25 @@ export const DrawerDetail = props => {
     const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
     // State
     const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
+    const [fullScreen, toggleFullScreen] = useToggle(fullScreenProp);
+    // Handlers
+    const handleToggleDrawerDetailFullscreen = useCallback((event) => {
+        const { type, data } = event.data || {};
+        const { name: payloadName, value } = data || {};
+        if (type === POST_MESSAGE_TYPES.TOGGLE_DRAWER_DETAIL_FULLSCREEN && payloadName === name) {
+            toggleFullScreen(isNil(value) ? undefined : value);
+        }
+    }, [name, toggleFullScreen]);
     // Effects
+    useEffect(() => {
+        window.addEventListener('message', handleToggleDrawerDetailFullscreen);
+        return () => {
+            window.removeEventListener('message', handleToggleDrawerDetailFullscreen);
+        };
+    }, [handleToggleDrawerDetailFullscreen]);
+    useEffect(() => {
+        toggleFullScreen(fullScreenProp);
+    }, [fullScreenProp, toggleFullScreen]);
     useEffect(() => {
         if (matchesSmallScreen) {
             toggleCollapseDrawer(false);
@@ -87,7 +106,6 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    // Handlers
     const handleToggleDrawerSize = () => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
         toggleCollapseDrawer(!collapseDrawer);
@@ -98,25 +116,32 @@ export const DrawerDetail = props => {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { [name || '']: !collapseDrawer })));
         }
     };
-    return (React.createElement(ConfigProvider, { theme: { components: { Drawer: { motionDurationSlow: '0ms' } } } },
+    return (React.createElement(ConfigProvider, { theme: {
+            token: {
+                motion: false,
+            },
+        } },
         React.createElement(StyledDrawer, Object.assign({ push: false, closable: false, width: drawerWidth, classNames: {
                 body: 'drawer-detail-body',
+            }, contentWrapperStyle: {
+                transition: 'none',
             }, destroyOnClose: destroyOnClose }, restProps),
-            showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
-                    onCloseIconClick(e);
-                    onClose(e);
-                } }),
-                React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
-            showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
-                React.createElement("div", null,
-                    showClose && (React.createElement(CloseBtn, { onClick: onClose },
-                        React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-                    React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
-                        React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
-                React.createElement(MenuFooter, null, footer))),
-            React.createElement(Content, null,
-                (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
-                children))));
+            React.createElement(ConfigProvider, { theme: { token: { motion: true } } },
+                showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
+                        onCloseIconClick(e);
+                        onClose(e);
+                    } }),
+                    React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+                showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
+                showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
+                    React.createElement("div", null,
+                        showClose && (React.createElement(CloseBtn, { onClick: onClose },
+                            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+                        React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3, placement: "right" },
+                            React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
+                    React.createElement(MenuFooter, null, footer))),
+                React.createElement(Content, null,
+                    (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
+                    children)))));
 };
 DrawerDetail.defaultProps = {};

package/es/components/molecules/EditableName/EditableName.js

@@ -70,6 +70,9 @@ export const EditableName = React.forwardRef((props, ref) => {
         (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
             React.createElement(Tooltip, { title: error || requiredError },
                 React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : readonly ? null : (React.createElement("div", { className: "suffix-icon" },
-            React.createElement(Icon, { type: "icon-ants-pencil", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7, fontSize: '24px' } }))),
+            React.createElement(Icon, { type: "icon-ants-pencil", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7, fontSize: '24px' }, onClick: () => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                } }))),
         React.createElement("span", { ref: spanRef, className: "hidden-span" })));
 });

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ModalFuncProps } from 'antd';
-interface EditorTabItem {
+export interface EditorTabItem {
     showIcon?: boolean;
     closeable?: boolean;
     showDropdown?: boolean;
+    hideRemoveOption?: boolean;
     id: string;
     name: string;
     type: 'query' | 'table-detail';

package/es/components/molecules/EditorTab/EditorTab.js

@@ -157,7 +157,7 @@ export const EditorTab = props => {
             React.createElement(Icon, { type: "icon-ants-angle-left" }))),
         React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock }, arrTabs && arrTabs.length
             ? arrTabs.map((tab, idx) => {
-                const { showIcon = true, showDropdown = true, closeable = true } = tab;
+                const { showIcon = true, showDropdown = true, hideRemoveOption, closeable = true, } = tab;
                 return (React.createElement("div", { key: tab.id, onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
                         active: tab.id === activeTabId,
                     }) },
@@ -170,7 +170,9 @@ export const EditorTab = props => {
                     showDropdown ? (React.createElement(Dropdown, { menu: {
                             items: [
                                 { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
-                                { label: 'Remove', key: 'remove', style: { minWidth: '135px' } },
+                                ...(hideRemoveOption
+                                    ? []
+                                    : [{ label: 'Remove', key: 'remove', style: { minWidth: '135px' } }]),
                             ],
                             onClick: (_a) => __awaiter(void 0, [_a], void 0, function* ({ key, domEvent }) {
                                 switch (key) {

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

@@ -1 +1,2 @@
 export { EditorTab } from './EditorTab';
+export type { EditorTabItem } from './EditorTab';

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -110,7 +110,7 @@ export const HeaderV2 = memo(props => {
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
-            showLogo && (React.createElement(LogoWrapper, null,
+            showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
             React.createElement("div", { className: "title-container" },

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

@@ -1 +1 @@
-export declare const HEADER_HEIGHT = 60;
+export declare const HEADER_HEIGHT = 57;

package/es/components/molecules/HeaderV2/constants.js

@@ -1 +1 @@
-export const HEADER_HEIGHT = 60;
+export const HEADER_HEIGHT = 57;

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

@@ -1,2 +1,2 @@
-export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -3,6 +3,15 @@ var _a, _b, _c;
 import styled from 'styled-components';
 // Constants
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const LogoWrapper = styled.div `
+  height: 30px;
+  width: 30px;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+`;
 export const HeaderV2Styled = styled.div `
   height: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.headerHeight};
   background-color: #f6f8fc;
@@ -22,6 +31,15 @@ export const HeaderV2Styled = styled.div `
   .left-side {
     flex: 1;
     overflow: hidden;
+
+    .logo-wrapper {
+      flex-shrink: 0;
+    }
+
+    .title-container {
+      flex: 1;
+      min-width: 0;
+    }
   }
 
   .header-breadcrumbs,
@@ -47,12 +65,3 @@ export const HeaderV2Styled = styled.div `
     color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorTextBase};
   }
 `;
-export const LogoWrapper = styled.div `
-  height: 30px;
-  width: 30px;
-
-  img {
-    height: 100%;
-    width: 100%;
-  }
-`;

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { ConfigProvider } from 'antd';
 import { uniqBy } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 // Components
 import { EmptyData, 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';
@@ -27,25 +27,37 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { MATCHES_ANY_THEME } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Hooks
-import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
+import { DataIcon } from '../../icons';
 const initialState = {
     isOpenPopover: false,
 };
 const matchesAnyInitialState = {
     searchValue: '',
     selectedItems: [],
+    isShowLoadMoreEl: false,
 };
 const { t } = i18nInstance;
 const { Text } = Typography;
 export const MatchesAny = props => {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel"]);
+    const { objectName, loading = false, showExtendValue = true, items, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { } } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "onApply", "onCancel", "onLoadMore"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
-    const { searchValue, selectedItems } = state;
+    const { searchValue, selectedItems, isShowLoadMoreEl } = state;
+    // Refs
+    const { ref: loadMoreRef } = useIntersectionObserver({
+        threshold: 0,
+        initialIsIntersecting: false,
+        onChange(isIntersecting) {
+            if (isIntersecting) {
+                onLoadMore();
+            }
+        },
+    });
     // Effects
     /**
      * Updates the `selectedItems` state when the `selectedItems` prop changes.
@@ -53,6 +65,12 @@ export const MatchesAny = props => {
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
     }, [props.selectedItems]);
+    useEffect(() => {
+        // Delay for show load more el
+        setTimeout(() => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
+        }, 500);
+    }, []);
     // Handlers
     /**
      * Adds an item and, if applicable, its leaf descendants to the list of selected items.
@@ -146,7 +164,10 @@ export const MatchesAny = props => {
                     (selectedItem.isExtendValue && selectedItem.title === item.title)))
                 : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
                     (selectedItem.isExtendValue && selectedItem.title === item.title));
-            return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onSelectItem }), disabled: isSelected }), (item.children && {
+            return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({
+                    item,
+                    onSelectItem,
+                }), disabled: isSelected }), (item.children && {
                 children: serializeTreeData(item.children),
             }));
         });
@@ -154,8 +175,10 @@ export const MatchesAny = props => {
         return { treeData, matchedParents };
     }, [items, searchValue, selectedItems]);
     const selectedTreeData = useMemo(() => {
-        const notExtendValueSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue);
-        const extendValueSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue);
+        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)) || [];
+        const lazyLoadSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
         const serializeTreeData = (list) => {
             var _a;
             return ((_a = list
@@ -175,7 +198,7 @@ export const MatchesAny = props => {
                 children: serializeTreeData(item.children),
             }))))) || [];
         };
-        return serializeTreeData(items || []).concat((extendValueSelectedItems === null || extendValueSelectedItems === void 0 ? void 0 : extendValueSelectedItems.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, onRemoveItem }) })))) || []);
+        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]);
     const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
     const isDisableSelectAll = useDeepCompareMemo(() => {
@@ -194,21 +217,22 @@ export const MatchesAny = props => {
                     React.createElement(Text, { strong: true }, `${objectName} (${flatTree(items, 'children').filter(item => !item.children).length})`),
                     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(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 })) })) : (React.createElement(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })))))));
+                    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, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
             React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
         React.createElement("div", { className: "matches-any__body" },
-            React.createElement(Spin, { spinning: loading },
-                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-database", description: t(translations.global.selectItemsFromList).toString() })) : (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(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, width: 48, height: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                        transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                        transition: 'transform 0.3s ease',
+                    }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));
     // Handlers
     const onApplyExtendValue = (extendValues) => {
         // Filter out values that are already present in selectedItems
@@ -238,7 +262,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 = () => { } } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "onChange"]);
+    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"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -251,7 +275,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 }))) }), overlayStyle: { width: 700 }, overlayInnerStyle: {
+    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 }), overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
         React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },

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

@@ -20,6 +20,8 @@ export interface MatchesAnySelectProps extends SelectProps {
     selectedItems?: MatchesAnyItem[];
     /** Callback function that is called when the selected items change. */
     onChange?: (selectedItems: MatchesAnyItem[]) => 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`. */
@@ -40,4 +42,6 @@ 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'];
 }