@antscorp/antsomi-ui 1.3.5-beta.33 → 1.3.5-beta.331

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

@@ -0,0 +1,124 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Drawer
+import { Drawer } from '../Drawer';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledDrawer = styled(Drawer) `
+  &.antsomi-drawer-content {
+    overflow: visible !important;
+
+    .drawer-detail-body {
+      display: flex;
+      width: 100%;
+      padding: 0px;
+      overflow: visible;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      transition: all 0.3s;
+      z-index: 100;
+      cursor: pointer;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+`;
+export const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: auto;
+  flex: 1 1 0%;
+`;
+export const LeftMenu = styled.div `
+  width: 46px;
+  height: 100%;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_2};
+  padding: 8px 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 5px;
+`;
+export const CloseBtn = styled.div `
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+  }
+`;
+export const MenuItem = styled.div `
+  height: 36px;
+  width: 36px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  * {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  }
+
+  i {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover {
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+
+    * {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+    }
+  }
+
+  &.active {
+    background-color: #d3e3fd;
+
+    * {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+    }
+  }
+`;
+export const DrawerHeader = styled(Flex) `
+  position: sticky;
+  top: 0px;
+  height: 64px;
+  padding: 0px 20px;
+  box-sizing: border-box;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  flex-shrink: 0;
+  z-index: 20;
+
+  ${props => props.height &&
+    `height: ${typeof props.height === 'string' ? props.height : `${props.height}px`};`}
+  ${props => props.showBorderBottom && `border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};`}
+`;
+export const MenuFooter = styled.div ``;

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

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import type { DrawerProps, MenuProps as AntdProps, FlexProps } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
+export type TDefaultSize = 'max' | 'min';
+export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'title'> {
+    name?: string;
+    fullScreen?: boolean;
+    maxWidth?: string | number;
+    minWidth?: string | number;
+    defaultSize?: TDefaultSize;
+    headerProps?: DrawerHeaderProps;
+    menuProps?: DrawerDetailMenuProps;
+    closeIconProps?: DrawerDetailCloseIconProps;
+}
+export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+}
+export interface DrawerHeaderProps extends FlexProps {
+    height?: React.CSSProperties['height'];
+    showBorderBottom?: boolean;
+}
+export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
+    show?: boolean;
+    showExpandButton?: boolean;
+    showClose?: boolean;
+    footer?: ReactNode;
+    onClick?: (item: ItemType) => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,4 @@
+import React from 'react';
+import { InputDropdownProps } from './types';
 export { Dropdown } from 'antd';
+export declare const InputDropdown: (props: InputDropdownProps) => React.JSX.Element;

package/es/components/molecules/Dropdown/Dropdown.js

@@ -1 +1,42 @@
+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, { useCallback, useState } from 'react';
+import { Space, Typography } from 'antd';
+import Icon from '@antscorp/icons';
+import { StyledInputDropdownRoot } from './styled';
+import clsx from 'clsx';
 export { Dropdown } from 'antd';
+export const InputDropdown = (props) => {
+    const { children, disabled = false, className, trigger = ['click'], menu = { items: [] }, width = '100%', onOpenChange = () => { } } = props, rest = __rest(props, ["children", "disabled", "className", "trigger", "menu", "width", "onOpenChange"]);
+    const [enableTooltip, setEnableTooltip] = useState(true);
+    const renderChildren = useCallback(() => {
+        if (typeof children === 'string') {
+            return (React.createElement(Typography.Text, { ellipsis: enableTooltip
+                    ? {
+                        tooltip: {
+                            arrow: false,
+                        },
+                    }
+                    : true }, children));
+        }
+        return children;
+    }, [children, enableTooltip]);
+    const handleOpen = (...args) => {
+        const [open] = args;
+        setEnableTooltip(!open);
+        onOpenChange(...args);
+    };
+    return (React.createElement(StyledInputDropdownRoot, Object.assign({ menu: menu, trigger: trigger, disabled: disabled }, rest, { className: clsx({ disabled }, className), onOpenChange: handleOpen }),
+        React.createElement(Space, { style: { width } },
+            renderChildren(),
+            React.createElement(Icon, { type: "icon-ants-expand-more" }))));
+};

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

@@ -1 +1,2 @@
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';
+export type { InputDropdownProps } from './types';

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

@@ -1 +1 @@
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledInputDropdownRoot: import("styled-components").StyledComponent<import("react").FC<import("antd").DropDownProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd").DropDownProps>;
+} & {
+    Button: import("react").FC<import("antd/es/dropdown").DropdownButtonProps>;
+}, any, {}, never>;

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

@@ -0,0 +1,33 @@
+var _a, _b, _c, _d, _e, _f, _g, _h;
+import styled from 'styled-components';
+import { Dropdown } from 'antd';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledInputDropdownRoot = styled(Dropdown) `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText};
+  min-height: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.controlHeight}px;
+  border-bottom: 1px solid ${(_d = (_c = THEME.components) === null || _c === void 0 ? void 0 : _c.Input) === null || _d === void 0 ? void 0 : _d.colorBorder};
+  cursor: pointer;
+  padding: 0 5px;
+
+  .antsomi-space-item:nth-child(1) {
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .antsomi-space-item:nth-child(2) {
+    display: flex;
+    align-items: center;
+
+    > i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      font-size: 20px;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};
+    background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Input) === null || _f === void 0 ? void 0 : _f.colorBgContainerDisabled};
+    color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Input) === null || _h === void 0 ? void 0 : _h.colorTextDisabled};
+  }
+`;

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

@@ -0,0 +1,4 @@
+import { DropdownProps } from 'antd';
+export type InputDropdownProps = DropdownProps & {
+    width?: number;
+};

package/es/components/molecules/Dropdown/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface EditableNameHandle {
+    value: () => string;
+}
+interface EditableNameProps {
+    className?: string;
+    isLoading?: boolean;
+    defaultValue?: string;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: (value: string) => void;
+}
+export declare const EditableName: React.ForwardRefExoticComponent<EditableNameProps & React.RefAttributes<EditableNameHandle>>;
+export {};

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

@@ -0,0 +1,56 @@
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { InputWrapperStyled } from './styled';
+import { Input, Tooltip } from 'antd';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import Icon from '@antscorp/icons';
+import { Spin } from '../../atoms';
+export const EditableName = React.forwardRef((props, ref) => {
+    var _a;
+    const { className, isLoading, defaultValue, required, error, value, onBlur, onChange } = props;
+    const [inputWidth, setInputWidth] = useState(1);
+    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
+    const requiredError = useMemo(() => {
+        const newValue = value ? value.trim() : internalValue.trim();
+        return required && newValue.length === 0 ? 'This field is required' : '';
+    }, [required, internalValue, value]);
+    const spanRef = useRef(null);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        value() {
+            return internalValue;
+        },
+    }), [internalValue]);
+    const onKeyDown = (e) => {
+        var _a;
+        if (e.key === 'Enter') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (spanRef.current) {
+            spanRef.current.innerText = value || defaultValue || '';
+            setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+        }
+        // NOTE: the defaultValue props should need use only one time and don't change in component life circle
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement(InputWrapperStyled, { className: className || '' },
+        React.createElement(Tooltip, { title: value || internalValue },
+            React.createElement(Input, { ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
+                    var _a;
+                    const newValue = event.target.value;
+                    if (spanRef.current)
+                        spanRef.current.innerText = newValue;
+                    setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+                    setInternalValue(newValue);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                }, onBlur: onBlur, onKeyDown: onKeyDown })),
+        isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px' } })) : null,
+        (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' } })))) : (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("span", { ref: spanRef, className: "hidden-span" })));
+});

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

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

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

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

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

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

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

@@ -0,0 +1,71 @@
+var _a;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const InputWrapperStyled = styled.div `
+  display: inline-block;
+  position: relative;
+  background-color: #fff;
+  border-bottom: 1px solid transparent;
+  max-width: 100%;
+  overflow: hidden;
+
+  display: inline-flex;
+  align-items: baseline;
+
+  &:has(input:focus) {
+    border-bottom: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1};
+  }
+
+  input {
+    font-size: 20px !important;
+    font-weight: 700;
+    min-width: 23px !important;
+    height: 30px;
+    transition: none !important;
+    padding: 5px 0 !important;
+    border: none !important;
+    text-overflow: ellipsis;
+  }
+
+  .suffix-icon-error,
+  .suffix-icon {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    padding: 0 5px;
+    padding-left: 15px;
+  }
+
+  .suffix-icon {
+    display: none;
+    &:hover {
+      display: flex;
+    }
+  }
+
+  input:hover {
+    background-color: transparent;
+
+    & + .suffix-icon {
+      display: flex;
+    }
+  }
+
+  input:focus + .suffix-icon {
+    display: none;
+  }
+
+  .hidden-span {
+    box-sizing: border-box;
+    visibility: hidden;
+    white-space: pre;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 30px;
+    font-family: inherit;
+    font-size: 20px;
+    font-weight: 700;
+    padding: 5px 0; /* Match the padding of the Input component */
+  }
+`;

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

@@ -1,3 +1,4 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
 import React, { ReactNode } from 'react';
 import { IAceEditorProps } from 'react-ace';
 import 'ace-builds/webpack-resolver';

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

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

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

@@ -0,0 +1,172 @@
+// 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';
+export const EditorTab = props => {
+    var _a;
+    const { listTab = [], activeId = '', defaultActiveId, showArrow, showDropdown, editNameOnConfigure, 
+    // disabledScroll,
+    onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
+    const [activeTabId, setActiveTabId] = useState(defaultActiveId || 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(() => arrTabs.findIndex(tab => tab.id === activeId), [activeId, arrTabs]);
+    useEffect(() => {
+        if (listTab.length - arrTabs.length === 1) {
+            setActiveTabId(listTab[listTab.length - 1].id);
+        }
+        setArrTabs(listTab);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [listTab]);
+    // useEffect(() => {
+    //   if (onActiveTab) onActiveTab(activeTabId);
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [activeTabId]);
+    useEffect(() => {
+        const tabEl = document.getElementById(`tab-${activeTabId}`);
+        if (tabEl) {
+            tabEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+        }
+    }, [activeTabId]);
+    useEffect(() => {
+        // if (activeId && activeTabId !== activeId) {
+        //   setActiveTabId(activeId);
+        // }
+        setActiveTabId(prev => (activeId && prev !== activeId ? activeId : prev));
+    }, [activeId]);
+    const handleAddNew = () => {
+        onAddTab();
+    };
+    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);
+                if (onActiveTab)
+                    onActiveTab(arrTabs[idx - 1].id);
+            }
+            else if (arrTabs.length > 1) {
+                setActiveTabId(arrTabs[idx + 1].id);
+                if (onActiveTab)
+                    onActiveTab(arrTabs[idx - 1].id);
+            }
+        }
+        const newTabs = [...arrTabs];
+        newTabs.splice(idx, 1);
+        onCloseTab(tab, idx, newTabs);
+        // setArrTabs(prevTabs => {
+        //   const newTabs = [...prevTabs];
+        //   newTabs.splice(idx, 1);
+        //   onCloseTab(tab, idx, newTabs);
+        //   return newTabs;
+        // });
+    };
+    const handleActiveTab = tab => {
+        setActiveTabId(tab.id);
+        if (onActiveTab)
+            onActiveTab(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);
+                    if (onActiveTab)
+                        onActiveTab(arrTabs[idx - 1].id);
+                    break;
+                case 'right':
+                    if (idx === arrTabs.length - 1) {
+                        return;
+                    }
+                    setActiveTabId(arrTabs[idx + 1].id);
+                    if (onActiveTab)
+                        onActiveTab(arrTabs[idx + 1].id);
+                    break;
+                default:
+                    break;
+            }
+        }
+    };
+    return (React.createElement(EditorTabStyled, { className: className || '' },
+        showArrow && (React.createElement("div", { className: classnames('navigate-button', {
+                '--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), 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' },
+                                { label: 'Remove', key: 'remove' },
+                            ],
+                            onClick: ({ key, domEvent }) => {
+                                switch (key) {
+                                    case 'configure':
+                                        if (editNameOnConfigure)
+                                            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'], destroyPopupOnHide: true },
+                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), 
+                            // icon={<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('navigate-button', '--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-button" },
+            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>;