@antscorp/antsomi-ui 1.3.5-beta.273 → 1.3.5-beta.274

package/es/components/atoms/ContentEditable/ContentEditable.d.ts

@@ -0,0 +1,16 @@
+import React, { FocusEvent } from 'react';
+import { TypographyProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+interface ContentEditableProps extends Omit<TypographyProps['Text'], 'className' | '$$typeof'> {
+    onSave: (innerText: string, e?: FocusEvent<any>) => void;
+    value?: string;
+    isEdit?: boolean;
+    disabledBlur?: boolean;
+    maxLength?: number;
+    breakWord?: boolean;
+    regexPattern?: RegExp;
+    className?: string;
+    ellipsis?: EllipsisConfig;
+}
+export declare const ContentEditable: React.FC<React.PropsWithChildren<ContentEditableProps>>;
+export {};

package/es/components/atoms/ContentEditable/ContentEditable.js

@@ -0,0 +1,76 @@
+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, { useEffect, useRef, useState } from 'react';
+import { ContentEditableWrapper } from './styled';
+// NOTE: User can keypress when value reach max length
+const IGNORE_KEY_CODE = [
+    'Backspace',
+    'Delete',
+    'ArrowRight',
+    'ArrowLeft',
+    'ControlLeft',
+    'ControlRight',
+    'ShiftLeft',
+    'ShiftRight',
+    'Tab',
+];
+export const ContentEditable = React.memo(props => {
+    const { value, onSave, className, isEdit, disabledBlur, maxLength, breakWord, regexPattern, ellipsis } = props, restProps = __rest(props, ["value", "onSave", "className", "isEdit", "disabledBlur", "maxLength", "breakWord", "regexPattern", "ellipsis"]);
+    const [isEditable, setIsEditable] = useState(false);
+    const elementRef = useRef(null);
+    useEffect(() => {
+        if (isEdit !== undefined) {
+            if (!isEdit)
+                onSave(elementRef && elementRef.current ? elementRef.current.innerText : '');
+            setIsEditable(isEdit);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEdit]);
+    return (React.createElement(ContentEditableWrapper, Object.assign({}, restProps, { "$breakWord": breakWord, ref: elementRef, className: `${isEditable ? 'editable' : ''} ${className || ''}`, suppressContentEditableWarning: true, contentEditable: true, spellCheck: false, ellipsis: { tooltip: true }, onClick: () => {
+            if (!isEditable) {
+                setIsEditable(true);
+            }
+        }, onBlur: (e) => {
+            if (disabledBlur)
+                return;
+            setIsEditable(false);
+            onSave(e.target.innerText, e);
+        }, onKeyDown: (e) => {
+            var _a;
+            if (!isEditable)
+                e.preventDefault();
+            // Check letters are selected => user want to replace it => allow edit
+            const selectedLetter = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().length;
+            // Check user want select all text
+            const isSelectAll = e.code === 'KeyA' && e.ctrlKey;
+            if (!IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll &&
+                regexPattern &&
+                !e.code.match(regexPattern) &&
+                !isSelectAll)
+                e.preventDefault();
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                onSave(e.currentTarget.innerText);
+                setIsEditable(false);
+            }
+            // NOTE: check current text length
+            if (maxLength &&
+                e.currentTarget.innerText.length >= maxLength &&
+                !IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll) {
+                e.preventDefault();
+            }
+        } }), value));
+});

package/es/components/atoms/ContentEditable/index.d.ts

@@ -0,0 +1 @@
+export { ContentEditable } from './ContentEditable';

package/es/components/atoms/ContentEditable/index.js

@@ -0,0 +1 @@
+export { ContentEditable } from './ContentEditable';

package/es/components/atoms/ContentEditable/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ContentEditableWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $breakWord?: boolean | undefined;
+}, never>;

package/es/components/atoms/ContentEditable/styled.js

@@ -0,0 +1,20 @@
+// Libraries
+import styled from 'styled-components';
+import { Typography } from '@antscorp/antsomi-ui/es/components';
+export const ContentEditableWrapper = styled(Typography.Text) `
+  outline-width: 0;
+  caret-color: transparent;
+  border-radius: 4px;
+  display: inline-flex !important;
+  align-items: center !important;
+  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
+
+  &.editable {
+    outline: 2px solid var(--text-link-color);
+    outline-offset: -2px;
+    caret-color: unset;
+  }
+
+  padding: 4px;
+  /* font-weight: bold; */
+`;

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

@@ -32,6 +32,7 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
+export { ContentEditable } from './ContentEditable';
 export * from './Flex';
 export * from './RateV2';
 export * from './PreviewTabs';

package/es/components/atoms/index.js

@@ -32,6 +32,7 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export { InputDynamic } from './InputDynamic';
+export { ContentEditable } from './ContentEditable';
 export * from './Flex';
 export * from './RateV2';
 export * from './PreviewTabs';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface Page {
+    id: string;
+    name: string;
+    mode?: string;
+}
+interface EditorTabProps {
+    hiddenMenuOption?: boolean;
+    className?: string;
+    pages: Page[];
+    pageActiveId?: string;
+    onChangeActivePage?: (id: string) => void;
+    onDuplicate?: (id: string) => void;
+    onRemove?: (id: string) => void;
+    onSaveName?: (id: string, value: string) => void;
+    onDnD?: (page: Page[]) => void;
+}
+export declare const ChartTab: React.FC<EditorTabProps>;
+export {};

package/es/components/molecules/ChartTab/ChartTab.js

@@ -0,0 +1,36 @@
+// Lib
+import React, { useState } from 'react';
+// Utils
+import { ChartTabStyled } from './styled';
+import { Item } from './components/Item';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+export const ChartTab = props => {
+    const { hiddenMenuOption, className, pages, pageActiveId, onChangeActivePage, onDuplicate, onRemove, onSaveName, onDnD, } = props;
+    const [activePage, setActivePage] = useState(pageActiveId || (pages === null || pages === void 0 ? void 0 : pages[0].id));
+    const [pageList, setPageList] = useState(pages);
+    const handleChangeActivePage = (id) => {
+        setActivePage(id);
+        onChangeActivePage === null || onChangeActivePage === void 0 ? void 0 : onChangeActivePage(id);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+            setPageList(items => {
+                const oldIndex = items.findIndex(item => item.id === active.id);
+                const newIndex = items.findIndex(item => item.id === (over === null || over === void 0 ? void 0 : over.id));
+                const newArray = arrayMove(items, oldIndex, newIndex);
+                onDnD === null || onDnD === void 0 ? void 0 : onDnD(newArray);
+                return arrayMove(items, oldIndex, newIndex);
+            });
+        }
+    };
+    return (React.createElement(DndContext, { onDragEnd: handleDragEnd, 
+        // HACK: trick as click tab => set new active page
+        onDragStart: event => {
+            var _a;
+            handleChangeActivePage((_a = event === null || event === void 0 ? void 0 : event.active) === null || _a === void 0 ? void 0 : _a.id);
+        } },
+        React.createElement(SortableContext, { items: pageList === null || pageList === void 0 ? void 0 : pageList.map(item => item.id), strategy: horizontalListSortingStrategy },
+            React.createElement(ChartTabStyled, { className: className || '' }, pageList.map((pageItem, index) => (React.createElement(Item, { key: pageItem.id, page: pageItem, hiddenMenuOption: hiddenMenuOption, isActive: activePage === pageItem.id, onDuplicate: onDuplicate, onRemove: onRemove, onSaveName: onSaveName })))))));
+};

package/es/components/molecules/ChartTab/components/Item.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Page {
+    id: string;
+    name: string;
+    mode?: string;
+}
+interface ItemProps {
+    page: Page;
+    hiddenMenuOption?: boolean;
+    isActive?: boolean;
+    onSaveName?: (id: string, value: string) => void;
+    onDuplicate?: (id: string) => void;
+    onRemove?: (id: string) => void;
+}
+export declare const Item: React.FC<ItemProps>;
+export {};

package/es/components/molecules/ChartTab/components/Item.js

@@ -0,0 +1,47 @@
+// Libraries
+import React, { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import Icon from '@antscorp/icons';
+// Styles
+import { ItemStyled } from './styled';
+// Components
+import { ContentEditable, Dropdown, Typography } from '@antscorp/antsomi-ui/es/components';
+export const Item = (props) => {
+    const { page, hiddenMenuOption = false, isActive, onSaveName, onDuplicate, onRemove } = props;
+    const [isEditable, setIsEditable] = useState(false);
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: page.id });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (React.createElement("li", Object.assign({ id: page.id, ref: setNodeRef, style: style }, attributes, listeners),
+        React.createElement(ItemStyled, { id: page.id, "$isActive": isActive },
+            isEditable ? (React.createElement(ContentEditable, { value: page.name, onSave: newValue => {
+                    setIsEditable(false);
+                    onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(page.id, newValue);
+                } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, page.name)),
+            !hiddenMenuOption ? (React.createElement(Dropdown, { menu: {
+                    items: [
+                        { label: 'Rename', key: 'rename' },
+                        { label: 'Duplicate', key: 'duplicate' },
+                        { label: 'Remove', key: 'remove' },
+                    ],
+                    onClick: ({ key }) => {
+                        switch (key) {
+                            case 'rename':
+                                setIsEditable(true);
+                                break;
+                            case 'duplicate':
+                                onDuplicate === null || onDuplicate === void 0 ? void 0 : onDuplicate(page.id);
+                                break;
+                            case 'remove':
+                                onRemove === null || onRemove === void 0 ? void 0 : onRemove(page.id);
+                                break;
+                            default:
+                                break;
+                        }
+                    },
+                }, trigger: ['hover'], placement: "topLeft" },
+                React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { cursor: 'pointer' } }))) : null)));
+};

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

@@ -0,0 +1,3 @@
+export declare const ItemStyled: import("styled-components").StyledComponent<"div", any, {
+    $isActive?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,30 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Tokens
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const ItemStyled = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 32px;
+  min-width: 80px;
+  max-width: 130px;
+
+  background-color: ${props => { var _a; return (props.$isActive ? 'white' : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2); }};
+  font-weight: ${props => (props.$isActive ? 500 : 400)};
+  padding: 6px 10px;
+
+  &:hover {
+    font-weight: 500;
+    background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+  }
+
+  span[contenteditable='true'] {
+    flex: 1;
+  }
+`;

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

@@ -0,0 +1 @@
+export declare const ChartTabStyled: import("styled-components").StyledComponent<"ul", any, {}, never>;

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

@@ -0,0 +1,23 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const ChartTabStyled = styled.ul `
+  list-style-type: none;
+  display: flex;
+
+  & > li {
+    border: 1px solid #e5e5e5;
+    cursor: default;
+
+    &:first-child {
+      overflow: hidden;
+      border-top-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-bottom-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      /* border-top-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}; */
+    }
+    &:last-child {
+      overflow: hidden;
+      border-top-right-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-bottom-right-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
+  }
+`;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+interface EditorTabItem {
+    showIcon?: boolean;
+    showDropdown?: boolean;
+    closeable?: boolean;
+    formatSelectedText: string;
+    formattedQuery: string;
+    id: string;
+    name: string;
+    query: string;
+    type: string;
+    selectedTextOut: string;
+    queryResult: any;
+    cursorSql?: string;
+    cursorSqlOut?: string;
+    refreshAndFocusId?: string;
+}
+interface EditorTabProps {
+    showArrow?: boolean;
+    showDropdown?: boolean;
+    disabledScroll?: boolean;
+    showComposeNewQuery?: boolean;
+    className?: string;
+    leftBlockClassName?: string;
+    tabItemClassName?: string;
+    listTab?: EditorTabItem[];
+    activeId?: string;
+    onActiveTab: (id: string) => void;
+    onCloseTab: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onConfigure: (id: string) => void;
+    onSaveName?: (id: string, value: string) => void;
+    handleAddTab: () => void;
+}
+export declare const EditorTab: React.FC<EditorTabProps>;
+export {};

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

@@ -0,0 +1,159 @@
+// Lib
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
+// Components
+import Icon from '@antscorp/icons/main';
+import { Button, Typography, Dropdown, ContentEditable } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { EditorTabStyled } from './styled';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/EditorTab/index.jsx';
+const constants = {
+    TAB_TYPE: {
+        QUERY: 'query',
+        TABLE_DETAIL: 'table-detail',
+    },
+};
+export const EditorTab = props => {
+    var _a;
+    const { listTab = [], activeId = '', showArrow, showDropdown, disabledScroll, onCloseTab, onActiveTab, handleAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
+    const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
+    const [arrTabs, setArrTabs] = useState(listTab || []);
+    const [isEditable, setIsEditable] = useState();
+    // Ref
+    const leftBlockRef = useRef(null);
+    const activeTabIdx = useMemo(() => {
+        return arrTabs.findIndex(tab => tab.id === activeId);
+    }, [activeId]);
+    useEffect(() => {
+        if (listTab.length - arrTabs.length === 1) {
+            setActiveTabId(listTab[listTab.length - 1].id);
+        }
+        setArrTabs(listTab);
+    }, [listTab]);
+    useEffect(() => {
+        onActiveTab(activeTabId);
+        setTimeout(() => {
+            if (!disabledScroll) {
+                const tabEl = document.getElementById(`tab-${activeTabId}`);
+                if (tabEl) {
+                    tabEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+                }
+            }
+        }, 500);
+    }, [activeTabId]);
+    useEffect(() => {
+        if (activeId && activeTabId !== activeId) {
+            setActiveTabId(activeId);
+        }
+    }, [activeId]);
+    const handleAddNew = () => {
+        handleAddTab();
+    };
+    const handleCloseTab = (e, tab, idx) => {
+        e.stopPropagation();
+        if (arrTabs.length < 2) {
+            return;
+        }
+        if (activeTabId === tab.id) {
+            if (idx === arrTabs.length - 1) {
+                setActiveTabId(arrTabs[idx - 1].id);
+            }
+            else if (arrTabs.length > 1) {
+                setActiveTabId(arrTabs[idx + 1].id);
+            }
+        }
+        setArrTabs(prevTabs => {
+            const newTabs = [...prevTabs];
+            newTabs.splice(idx, 1);
+            onCloseTab(tab, idx, newTabs);
+            return newTabs;
+        });
+    };
+    const handleActiveTab = (tab, idx) => {
+        setActiveTabId(tab.id);
+    };
+    const onWheelLeftBlock = event => {
+        try {
+            if (!event.deltaY) {
+                return;
+            }
+            event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onWheelLeftBlock',
+                args: {},
+            });
+        }
+    };
+    const onClickArrow = (direction = 'left') => {
+        const idx = arrTabs.findIndex(tab => tab.id === activeTabId);
+        if (idx !== -1) {
+            switch (direction) {
+                case 'left':
+                    if (idx === 0) {
+                        return;
+                    }
+                    setActiveTabId(arrTabs[idx - 1].id);
+                    break;
+                case 'right':
+                    if (idx === arrTabs.length - 1) {
+                        return;
+                    }
+                    setActiveTabId(arrTabs[idx + 1].id);
+                    break;
+            }
+        }
+    };
+    return (React.createElement(EditorTabStyled, { className: className || '' },
+        showArrow && (React.createElement("div", { className: classnames('arrow-btn', {
+                '--disabled': activeTabIdx === 0,
+            }), 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, closeable = true } = tab;
+                // const { showIcon = true, showDropdown = true, closeable = true } = tab;
+                return (React.createElement("div", { key: tab.id, id: `tab-${tab.id}`, onClick: () => handleActiveTab(tab, idx), className: classnames('tab-item', tabItemClassName, {
+                        active: tab.id === activeTabId,
+                    }) },
+                    showIcon &&
+                        (tab.type === constants.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' },
+                                { label: 'Remove', key: 'remove' },
+                            ],
+                            onClick: ({ key, domEvent }) => {
+                                switch (key) {
+                                    case 'configure':
+                                        console.log('click configure', domEvent);
+                                        setIsEditable(tab.id);
+                                        onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
+                                        break;
+                                    case 'remove':
+                                        handleCloseTab(domEvent, tab, idx);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            },
+                        }, placement: "bottomRight", trigger: ['click'] },
+                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-angle-left", overlayStyle: { fontSize: 12 } }), style: { transform: 'rotate(-90deg)' }, size: "small" }))) : closeable ? (React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-remove-slim", onClick: e => handleCloseTab(e, tab, idx), overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
+            })
+            : null),
+        showArrow && (React.createElement("div", { className: classnames('arrow-btn', '--right', {
+                '--disabled': activeTabIdx === arrTabs.length - 1,
+            }), onClick: () => onClickArrow('right') },
+            React.createElement(Icon, { type: "icon-ants-angle-right" }))),
+        showComposeNewQuery && (React.createElement(Button, { onClick: handleAddNew, className: "new-query-btn" },
+            React.createElement(Icon, { type: "icon-ants-add-square" }),
+            "New query"))));
+};

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

@@ -0,0 +1 @@
+export { EditorTab } from './EditorTab';

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

@@ -0,0 +1 @@
+export { EditorTab } from './EditorTab';

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

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

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

@@ -0,0 +1,132 @@
+var _a, _b, _c;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// const token = theme.getDesignToken(THEME);
+export const EditorTabStyled = styled.div `
+  position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  /* Styled for icon button */
+  button.antsomi-btn-icon-only.antsomi-btn-sm {
+    margin-left: auto;
+    border: none !important;
+    background-color: transparent !important;
+    flex-shrink: 0;
+    width: 20px !important;
+    height: 20px !important;
+    &:hover {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+    }
+  }
+
+  .left-block {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    flex-grow: 1;
+    flex-flow: nowrap;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    font-size: 14px;
+    color: #222;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tab-item {
+      position: relative;
+      box-sizing: border-box;
+
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 7px;
+      width: 150px;
+      height: 40px;
+      padding: 0 10px;
+      overflow: hidden;
+      max-width: 200px;
+      background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+
+      &:hover {
+        background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
+      }
+
+      white-space: nowrap;
+
+      transition: background-color 300ms ease-in-out;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 100%;
+        background-color: #1f5fac;
+
+        transform-origin: center;
+        transform: scaleX(0);
+        transition: transform 300ms ease-in-out;
+      }
+
+      &.active {
+        &::after {
+          transform: scaleX(1);
+        }
+        background-color: #fff;
+      }
+    }
+
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      display: none !important;
+    }
+    ::-webkit-scrollbar-thumb {
+      display: none !important;
+    }
+  }
+
+  button.new-query-btn {
+    margin-left: 10px;
+    border: none;
+  }
+
+  .arrow-btn {
+    /* Structure Block */
+    flex-shrink: 0;
+    height: 100%;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* border-right: 1px solid #e0e0e0; */
+
+    /* Typography Block */
+    font-size: 12px;
+
+    cursor: pointer;
+
+    &.--right {
+      border-right: 1px solid #e0e0e0;
+    }
+
+    &.--disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.7;
+    }
+  }
+`;

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

@@ -52,6 +52,7 @@ export * from './Drawer';
 export * from './DrawerDetail';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
+export { EditorTab } from './EditorTab';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -52,3 +52,4 @@ export * from './Drawer';
 export * from './DrawerDetail';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
+export { EditorTab } from './EditorTab';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.273",
+  "version": "1.3.5-beta.274",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -63,6 +63,9 @@
     "@antscorp/icons": "^0.27.23",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",