@antscorp/antsomi-ui 1.3.5-beta.293 → 1.3.5-beta.295

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

@@ -10,23 +10,67 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
+import { cloneDeep } from 'lodash';
 // Libraries
-import React from 'react';
+import React, { useRef } from 'react';
 // Styled
 import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
-import { cloneDeep } from 'lodash';
 const THUMB_SIZE = 4;
+const MARGIN = 3;
 export const Scrollbars = props => {
+    // Props
     const { autoHide = true, autoHeightMax = 0 } = props, restProps = __rest(props, ["autoHide", "autoHeightMax"]);
-    return (React.createElement(CustomScrollbars, Object.assign({ autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({}, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({}, props)), renderTrackVertical: props => React.createElement(VerticalTrack, Object.assign({}, props)), renderTrackHorizontal: props => React.createElement(HorizontalTrack, Object.assign({}, props)), renderView: props => {
+    // Refs
+    const ref = useRef(null);
+    /**
+     * Updates the size and position of the custom scrollbar thumbs based on the provided dimensions and scroll positions.
+     *
+     * @param {positionValues} values - An object containing the dimensions and scroll positions of the scrollable element:
+     *  - {number} clientHeight - The visible height of the scrollable content area.
+     *  - {number} clientWidth - The visible width of the scrollable content area.
+     *  - {number} scrollHeight - The total height of the scrollable content.
+     *  - {number} scrollWidth - The total width of the scrollable content.
+     *  - {number} scrollLeft - The horizontal scroll position.
+     *  - {number} scrollTop - The vertical scroll position.
+     */
+    const onUpdate = (values) => {
+        // Destructure the properties from the values object, using default values if undefined
+        const { clientHeight, clientWidth, scrollWidth, scrollHeight, scrollLeft, scrollTop } = values || {};
+        // Calculate the height of the vertical thumb, ensuring a minimum height of 30px
+        const thumbHeight = Math.max(Math.floor(clientHeight * (clientHeight / scrollHeight)), 30);
+        // Calculate the width of the horizontal thumb, ensuring a minimum width of 30px
+        const thumbWidth = Math.max(Math.floor(clientWidth * (clientWidth / scrollWidth)), 30);
+        // Calculate the vertical thumb's position based on the scrollTop value
+        const thumbVerticalPosition = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight) - MARGIN;
+        // Calculate the horizontal thumb's position based on the scrollLeft value
+        const thumbHorizontalPosition = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbWidth) - MARGIN;
+        // If the ref.current element is available, update the thumb styles
+        if (ref.current) {
+            ref.current.thumbVertical.style.height = `${thumbHeight}px`;
+            ref.current.thumbVertical.style.transform = `translateY(${thumbVerticalPosition}px)`;
+            ref.current.thumbHorizontal.style.width = `${thumbWidth}px`;
+            ref.current.thumbHorizontal.style.transform = `translateX(${thumbHorizontalPosition}px)`;
+        }
+    };
+    return (React.createElement(CustomScrollbars, Object.assign({ className: "custom-scrollbars", 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) => {
+            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) => {
+            var { style } = _a, restOfProps = __rest(_a, ["style"]);
+            return (React.createElement(HorizontalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
+        }, renderView: props => {
             const { style } = props || {};
             const newStyle = cloneDeep(style);
+            // Adjust the margins to account for the custom scrollbar size
             newStyle.marginBottom = -THUMB_SIZE;
             newStyle.marginRight = -THUMB_SIZE;
+            // Set a minimum height for the view to ensure space for the scrollbar
             newStyle.minHeight = THUMB_SIZE;
+            // If autoHeightMax is defined, adjust the maxHeight to include space for the scrollbar
             if (autoHeightMax) {
                 newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
             }
+            // 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 }));
-        }, hideTracksWhenNotNeeded: true }, restProps)));
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps)));
 };

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.js

@@ -11,9 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { useMemo } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars';
 // Components
-import { Input, Popover, Icon, Divider, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Input, Popover, Icon, Divider, Flex, Scrollbars, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
 // Styled
 import { FilterSelectFieldsContent } from './styled';
@@ -99,7 +98,7 @@ export const SavedFilterAndMetrics = props => {
                 !!removable && (React.createElement(IconButton, null,
                     React.createElement(Icon, { type: "icon-ants-outline-delete" }))))),
         })) }));
-    const renderFilterMetrics = () => React.createElement(Menu, { mode: "inline", items: filterMetricItems });
+    const renderFilterMetrics = () => (React.createElement(Menu, { mode: "inline", inlineIndent: 10, items: filterMetricItems }));
     const content = (React.createElement(FilterSelectFieldsContent, null,
         React.createElement(Input, { bordered: false, className: "search-input", autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24 }) }),
         React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),

package/es/components/organism/DataTable/constants/theme.js

@@ -1,3 +1,4 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const DATA_TABLE_THEME = {
     token: {
         toolbarHeight: 54,
@@ -21,6 +22,7 @@ export const DATA_TABLE_THEME = {
             itemSelectedColor: '#000000',
             itemSelectedBg: '#DEEFFE',
             itemMarginBlock: 6,
+            subMenuItemBg: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0,
         },
     },
 };

package/es/components/organism/Menu/Menu.d.ts

@@ -1 +1,2 @@
-export { Menu } from 'antd';
+import { Menu } from 'antd';
+export { Menu };

package/es/components/organism/Menu/Menu.js

@@ -1,2 +1,14 @@
-export { Menu } from 'antd';
-// export default AntdMenu;
+// Libraries
+import React from 'react';
+// Types
+import { Menu } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { ExpandIcon } from './styled';
+Menu.defaultProps = {
+    expandIcon(props) {
+        const { isOpen } = props;
+        return (React.createElement(ExpandIcon, { "$isOpen": isOpen, type: "icon-ants-expand-more", size: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }));
+    },
+};
+export { Menu };

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

@@ -0,0 +1,3 @@
+export declare const ExpandIcon: import("styled-components").StyledComponent<any, any, import("@antscorp/antsomi-ui/es/components/atoms/Icon").IconProps & {
+    $isOpen?: boolean | undefined;
+}, string | number | symbol>;

package/es/components/organism/Menu/styled.js

@@ -0,0 +1,10 @@
+// Components
+import styled from 'styled-components';
+import { Icon } from '../../atoms';
+export const ExpandIcon = styled(Icon) `
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  transition: all 200ms;
+  transform: rotate(${props => (props.$isOpen ? 180 : 0)}deg);
+`;

package/es/components/template/TemplateListing/index.js

@@ -60,15 +60,13 @@ export const TemplateListing = memo(props => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
         setOpenPreviewModal(false);
     };
-    return (
-    /** The className "template-listing-wrapper" is used to detect dom in useListingItemResize hook */
-    React.createElement(TemplateListingWrapper, { className: "template-listing-wrapper" },
+    return (React.createElement(TemplateListingWrapper, null,
         React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
         React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
             header,
             React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
                 React.createElement(Scrollbars, { className: "template-listing" },
-                    React.createElement("div", { ref: containerRef, style: {
+                    React.createElement("div", { className: "template-listing-container", ref: containerRef, style: {
                             display: 'grid',
                             gap: listingGap,
                             gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,

package/es/hooks/useListingItemResize.js

@@ -41,6 +41,8 @@ export const useListingItemResize = (props) => {
         return DEFAULT_RATIO;
     }, [containerWidth, gap, initialWidth, itemPerRow]);
     useEffect(() => {
+        var _a;
+        const element = (_a = document.getElementsByClassName('template-listing-container')) === null || _a === void 0 ? void 0 : _a[0];
         let timeoutAfterChange = null;
         const handleResize = () => {
             if (timeoutAfterChange) {
@@ -48,11 +50,12 @@ export const useListingItemResize = (props) => {
             }
             timeoutAfterChange = setTimeout(() => {
                 forceUpdate();
-            }, 500);
+            }, 0);
         };
-        window.addEventListener('resize', handleResize);
+        const resizeObserver = new ResizeObserver(handleResize);
+        if (element)
+            resizeObserver.observe(element);
         return () => {
-            window.removeEventListener('resize', handleResize);
             if (timeoutAfterChange) {
                 clearTimeout(timeoutAfterChange);
             }

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -41,6 +41,14 @@ export const GlobalStyle = () => {
         background: ${accent7};
       }
 
+      .custom-scrollbars {
+        &:hover {
+          .scrollbar-track {
+            opacity: 1 !important;
+          }
+        }
+      }
+
       .antsomi-scroll-box {
         overflow-y: auto;
         scrollbar-gutter: stable !important;

package/es/tests/DataTableTest.js

@@ -12,8 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useMemo, useState } from 'react';
 // Components
-import { CDP_DATA_TABLE_SAMPLE, FILTER_METRICS, } from '../components/organism/DataTable';
-import { Scrollbars } from '../components';
+import { DataTable, CDP_DATA_TABLE_SAMPLE, FILTER_METRICS, } from '../components/organism/DataTable';
 // Styled
 import { TableTestWrapper } from './styled';
 const columns = [
@@ -79,5 +78,31 @@ export const DataTableTest = props => {
         setState(prev => (Object.assign(Object.assign({}, prev), { tableCollapsed: collapsed })));
     }, []);
     return (React.createElement(TableTestWrapper, null,
-        React.createElement(Scrollbars, { autoHeightMax: 200 }, Array.from({ length: 20 }).map((_, i) => (React.createElement("div", { key: i, style: { borderBottom: '1px solid red' } }, i))))));
+        React.createElement(DataTable, { table: {
+                columns,
+                dataSource,
+                rowSelection: {
+                    selectedRowKeys: [],
+                },
+            }, filter: {
+                savedFilter: {
+                    list: savedFilters,
+                    onSelect: savedFilter => {
+                        console.log(savedFilter);
+                    },
+                },
+                filterMetrics,
+            }, toolbar: {
+                addButton: node => React.createElement("div", null, node),
+                actionButtons: {
+                    SEARCH: {
+                    // buttonProps: { disabled: true },
+                    },
+                    COLUMN: {},
+                },
+                collapse: {
+                    collapsed: tableCollapsed,
+                    onCollapse,
+                },
+            } })));
 };

package/package.json

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