@antscorp/antsomi-ui 1.3.5-beta.689 → 1.3.5-beta.690

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

@@ -138,9 +138,9 @@ export const DrawerDetail = props => {
             } }),
             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" },
+        showMenu && (React.createElement(LeftMenu, { "data-test": "left-menu", className: "animate__animated animate__fadeIn" },
             React.createElement("div", null,
-                showClose && (React.createElement(CloseBtn, { onClick: onClose },
+                showClose && (React.createElement(CloseBtn, { "data-test": "close-btn", 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)))))),

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

@@ -56,7 +56,7 @@ export const EditableName = React.forwardRef((props, ref) => {
             (_a = inputRefElement === null || inputRefElement === void 0 ? void 0 : inputRefElement.input) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', preventWheel);
         };
     }, []);
-    return (React.createElement(InputWrapperStyled, { className: className || '', style: style, ref: componentInViewRef },
+    return (React.createElement(InputWrapperStyled, { "data-test": props['data-test'] || 'editable-name', className: className || '', style: style, ref: componentInViewRef },
         React.createElement(Tooltip, { title: value || internalValue },
             React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
                     var _a;

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

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 // Lib
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
+import { useInView } from 'react-intersection-observer';
 // Components
 import Icon from '@antscorp/icons/main';
 import { Button, Typography, Dropdown, ContentEditable, Modal, } from '@antscorp/antsomi-ui/es/components';
@@ -19,7 +20,7 @@ import { EditorTabStyled } from './styled';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/EditorTab/index.jsx';
 export const EditorTab = props => {
-    var _a, _b, _c, _d, _e;
+    var _a;
     const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
     onCloseTab, onClickRemoveTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab, modalFuncProps, } = props;
@@ -28,17 +29,10 @@ export const EditorTab = props => {
     const [isEditable, setIsEditable] = useState();
     const [modal, contextModal] = Modal.useModal();
     // Ref
-    const [offsetWidth, setOffsetWidth] = useState(0);
-    const [scrollWidth, setScrollWidth] = useState(0);
     const leftBlockRef = useRef(null);
-    const isLeftBlockOverflow = ((_b = leftBlockRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) && ((_c = leftBlockRef.current) === null || _c === void 0 ? void 0 : _c.scrollWidth)
-        ? ((_d = leftBlockRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth) < ((_e = leftBlockRef.current) === null || _e === void 0 ? void 0 : _e.scrollWidth)
-        : offsetWidth < scrollWidth;
-    useEffect(() => {
-        var _a, _b;
-        setOffsetWidth(((_a = leftBlockRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
-        setScrollWidth(((_b = leftBlockRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) || 0);
-    }, []);
+    const { ref: anchorLeftElRef, inView: anchorLeftElRefInView } = useInView();
+    const { ref: anchorRightElRef, inView: anchorRightElRefInView } = useInView();
+    const isLeftBlockOverflow = !anchorLeftElRefInView || !anchorRightElRefInView;
     useEffect(() => {
         if (listTab.length - arrTabs.length === 1) {
             setActiveTabId(listTab[listTab.length - 1].id);
@@ -104,7 +98,7 @@ export const EditorTab = props => {
             onActiveTab(tabId);
     }, [onActiveTab]);
     const handleCloseTab = (e, tab, idx) => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
+        var _b, _c;
         e.stopPropagation();
         // if (arrTabs.length < 2) {
         //   return;
@@ -120,10 +114,10 @@ export const EditorTab = props => {
             return;
         if (activeTabId === tab.id) {
             if (idx === arrTabs.length - 1) {
-                handleActiveTab((_f = arrTabs[idx - 1]) === null || _f === void 0 ? void 0 : _f.id);
+                handleActiveTab((_b = arrTabs[idx - 1]) === null || _b === void 0 ? void 0 : _b.id);
             }
             else if (arrTabs.length > 1) {
-                handleActiveTab((_g = arrTabs[idx + 1]) === null || _g === void 0 ? void 0 : _g.id);
+                handleActiveTab((_c = arrTabs[idx + 1]) === null || _c === void 0 ? void 0 : _c.id);
             }
         }
         onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(tab, idx, newTabs);
@@ -165,43 +159,46 @@ export const EditorTab = props => {
         contextModal,
         showArrow && isLeftBlockOverflow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('left') },
             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, hideRemoveOption, closable = true, } = tab;
-                return (React.createElement("div", { key: tab.id, onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
-                        active: tab.id === activeTabId,
-                    }) },
-                    showIcon &&
-                        (tab.type === 'query' ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
-                    isEditable === tab.id ? (React.createElement(ContentEditable, { value: tab.name, onSave: newValue => {
-                            setIsEditable(undefined);
-                            onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(tab.id, newValue);
-                        } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, tab.name)),
-                    showDropdown ? (React.createElement(Dropdown, { menu: {
-                            items: [
-                                { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
-                                ...(hideRemoveOption
-                                    ? []
-                                    : [{ label: 'Remove', key: 'remove', style: { minWidth: '135px' } }]),
-                            ],
-                            onClick: (_a) => __awaiter(void 0, [_a], void 0, function* ({ key, domEvent }) {
-                                switch (key) {
-                                    case 'configure':
-                                        if (editNameOnConfigure)
-                                            setIsEditable(tab.id);
-                                        onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
-                                        break;
-                                    case 'remove':
-                                        yield handleCloseTab(domEvent, tab, idx);
-                                        break;
-                                    default:
-                                        break;
-                                }
-                            }),
-                        }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
-                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
-            })
-            : null),
+        React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock },
+            React.createElement("div", { ref: anchorLeftElRef }),
+            arrTabs && arrTabs.length
+                ? arrTabs.map((tab, idx) => {
+                    const { showIcon = true, showDropdown = true, hideRemoveOption, closable = true, } = tab;
+                    return (React.createElement("div", { key: tab.id, onClick: () => handleActiveTab(tab.id), className: classnames('tab-item', tabItemClassName, {
+                            active: tab.id === activeTabId,
+                        }) },
+                        showIcon &&
+                            (tab.type === 'query' ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
+                        isEditable === tab.id ? (React.createElement(ContentEditable, { value: tab.name, onSave: newValue => {
+                                setIsEditable(undefined);
+                                onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(tab.id, newValue);
+                            } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, tab.name)),
+                        showDropdown ? (React.createElement(Dropdown, { menu: {
+                                items: [
+                                    { label: 'Configure', key: 'configure', style: { minWidth: '135px' } },
+                                    ...(hideRemoveOption
+                                        ? []
+                                        : [{ label: 'Remove', key: 'remove', style: { minWidth: '135px' } }]),
+                                ],
+                                onClick: (_a) => __awaiter(void 0, [_a], void 0, function* ({ key, domEvent }) {
+                                    switch (key) {
+                                        case 'configure':
+                                            if (editNameOnConfigure)
+                                                setIsEditable(tab.id);
+                                            onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
+                                            break;
+                                        case 'remove':
+                                            yield handleCloseTab(domEvent, tab, idx);
+                                            break;
+                                        default:
+                                            break;
+                                    }
+                                }),
+                            }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
+                            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
+                })
+                : null,
+            React.createElement("div", { ref: anchorRightElRef })),
         showArrow && isLeftBlockOverflow && (React.createElement("div", { className: "navigate-button", onClick: () => onClickArrow('right') },
             React.createElement(Icon, { type: "icon-ants-angle-right" }))),
         showComposeNewQuery || newTabText ? (React.createElement(Button, { onClick: handleAddNew, className: "new-query-button" },

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

@@ -22,8 +22,8 @@ export const EditorTabStyled = styled.div `
   .left-block {
     position: relative;
     height: 100%;
-    width: 100%;
-    flex-grow: 1;
+    /* width: 100%;
+    flex-grow: 1; */
     flex-flow: nowrap;
     display: flex;
     align-items: center;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -93,7 +93,7 @@ export const ThumbnailCard = (props) => {
             .filter(Boolean);
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
-        React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
+        React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick, "data-test": "thumbnail" },
             React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
                     e.currentTarget.style.display = 'none';
                 } }))),

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

@@ -81,7 +81,7 @@ export const TemplateListing = memo(props => {
                                 previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
                     }))),
             !loading && !blankTemplateProps.show && !isHasData && (React.createElement(EmptyData, { icon: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.icon, title: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description })))));
-    return (React.createElement(TemplateListingWrapper, null,
+    return (React.createElement(TemplateListingWrapper, { "data-test": "template-listing-container" },
         React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
         React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
             header,

package/package.json

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