@cube-dev/ui-kit 0.8.5 → 0.9.0

package/dist/cjs/components/navigation/Link/Link.js

@@ -0,0 +1,18 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../actions/Button/Button");
+exports.Link = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "link", ...props, ref: ref }, void 0);
+});
+
+        

package/dist/cjs/components/organisms/Alert/Alert.js

@@ -0,0 +1,41 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Base_1 = require("../../Base");
+const themes_1 = __importDefault(require("../../../data/themes"));
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+    radius: '1x',
+    padding: '1.5x',
+    preset: 't3',
+};
+const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+exports.Alert = (0, react_1.forwardRef)((allProps, ref) => {
+    let { type, label, ...props } = allProps;
+    type = type || 'note';
+    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST, {
+        ...DEFAULT_STYLES,
+        fill: themes_1.default[type] ? themes_1.default[type].fill : '#clear',
+        border: themes_1.default[type] && themes_1.default[type].border ? themes_1.default[type].border : '#clear',
+        color: '#dark',
+    });
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/dist/cjs/components/organisms/CopySnippet/CopySnippet.js

@@ -0,0 +1,112 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopySnippet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clipboard_copy_1 = __importDefault(require("clipboard-copy"));
+const Button_1 = require("../../actions/Button/Button");
+const Card_1 = require("../../content/Card/Card");
+const Grid_1 = require("../../layout/Grid");
+const styled_1 = require("../../../styled");
+const PrismCode_1 = require("../../content/PrismCode/PrismCode");
+const notification_1 = require("../../../services/notification");
+const icons_1 = require("@ant-design/icons");
+const TooltipTrigger_1 = require("../../overlays/Tooltip/TooltipTrigger");
+const Action_1 = require("../../actions/Action");
+const Tooltip_1 = require("../../overlays/Tooltip/Tooltip");
+const POSITION_ACTION = {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    zIndex: 1,
+};
+const StyledBlock = (0, styled_1.styled)({
+    styles: {
+        position: 'relative',
+        overflow: {
+            '': 'hidden',
+            scroll: 'auto hidden',
+        },
+        maxWidth: '100%',
+        whiteSpace: {
+            '': 'initial',
+            nowrap: 'nowrap',
+        },
+        styledScrollbar: true,
+        '& code': {
+            font: {
+                '': 'monospace',
+                serif: true,
+            },
+        },
+    },
+});
+const ButtonContainer = (0, styled_1.styled)({
+    styles: {
+        position: 'relative',
+        '&::after': {
+            display: {
+                '': 'none',
+                overlay: 'block',
+            },
+            content: '""',
+            width: '2x',
+            position: 'absolute',
+            left: '-2x',
+            top: 0,
+            bottom: 0,
+            backgroundImage: 'linear-gradient(to right,rgba(var(--context-fill-color-rgb),0),rgba(var(--context-fill-color-rgb),1))',
+        },
+    },
+});
+function CopySnippet(allProps) {
+    let { code, title, nowrap, prefix, language, showScroll = true, serif, children, padding, showOverlay = true, showTooltip = false, styles, ...props } = allProps;
+    padding = padding || '1.125x 1.5x';
+    const codeTitle = title || 'Code example';
+    async function onCopy() {
+        await (0, clipboard_copy_1.default)(code);
+        notification_1.notification.success(`${codeTitle} copied`);
+    }
+    code = (code || '').replace(/\n$/, '');
+    const multiline = code.includes('\n') && !nowrap;
+    const formattedCode = code
+        .split(/\n/g)
+        .map((line) => `${prefix || ''}${line} `)
+        .join('\n');
+    styles = {
+        preset: 'default',
+        ...styles,
+    };
+    const Snippet = ((0, jsx_runtime_1.jsx)(Card_1.Card, { "data-qa": "CopySnippet", fill: "#grey-light", radius: "1r", border: 0, padding: 0, styles: styles, ...props, children: (0, jsx_runtime_1.jsxs)(Grid_1.Grid, { columns: "minmax(0, 1fr) 5x", width: "min 20x", radius: "1r", style: { position: 'relative', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: {
+                        nowrap,
+                        multiline,
+                        scroll: showScroll,
+                        serif,
+                    }, styles: { padding }, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay } }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: `Copy ${codeTitle}`, type: "clear", styles: {
+                        padding: '1x 1.5x',
+                        fontWeight: 500,
+                        radius: multiline || showScroll ? '0 1r' : '0 1r 1r 0',
+                        placeSelf: !multiline && !showScroll ? 'stretch' : 'none',
+                        border: '#clear',
+                        outline: {
+                            '': '#purple-03.0',
+                            'focused & focus-visible': '#purple-03 inset',
+                        },
+                    }, style: POSITION_ACTION, onPress: onCopy, icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, void 0) }, void 0)] }, void 0) }, void 0));
+    if (showTooltip) {
+        return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(Action_1.Action, { styles: { display: 'block', cursor: 'default', width: '100%' }, children: Snippet }, void 0), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode }, void 0)] }, void 0));
+    }
+    return Snippet;
+}
+exports.CopySnippet = CopySnippet;
+
+        

package/dist/cjs/components/organisms/DirectoryTree/DirectoryTree.js

@@ -0,0 +1,166 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectoryTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@ant-design/icons");
+const Flex_1 = require("../../layout/Flex");
+const Action_1 = require("../../actions/Action");
+const Button_1 = require("../../actions/Button/Button");
+const Space_1 = require("../../layout/Space");
+const Block_1 = require("../../Block");
+const IMAGES = {
+    created: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.714 8.572h2.714v2.715c0 .078.065.142.143.142h.857a.143.143 0 00.143-.143V8.572h2.715a.143.143 0 00.142-.143v-.857a.143.143 0 00-.142-.143H8.57V4.715a.143.143 0 00-.143-.143h-.857a.143.143 0 00-.143.143V7.43H4.714a.143.143 0 00-.143.143v.857c0 .079.065.143.143.143z", fill: "#67C082" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#67C082" }, void 0)] }, void 0)),
+    deleted: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.714 8.57h6.572a.143.143 0 00.142-.142V7.57a.143.143 0 00-.142-.143H4.714a.143.143 0 00-.143.143v.857c0 .078.065.143.143.143z", fill: "#FF646D" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FF646D" }, void 0)] }, void 0)),
+    modified: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FBBC05" }, void 0), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "2.222", fill: "#FBBC05" }, void 0)] }, void 0)),
+};
+const TEXT_OVERFLOW_STYLES = {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    overflow: 'hidden',
+};
+function calcPadding(indent) {
+    return `.75x .5x .75x ${1.5 * indent + 0.5}x`;
+}
+function extractLeafKeys(subTreeData, dirsOnly = false) {
+    return subTreeData.reduce((list, item) => {
+        if (!item.isLeaf) {
+            list.push(item.key);
+            list.push(...extractLeafKeys(item.children || []));
+        }
+        else if (!dirsOnly) {
+            list.push(item.key);
+        }
+        return list;
+    }, []);
+}
+const MODE_BG = {
+    created: {
+        '': '#success.10',
+        hovered: '#success.15',
+    },
+    deleted: {
+        '': '#danger.08',
+        hovered: '#danger.13',
+    },
+};
+const MODE_COLOR = {
+    created: '#success',
+    deleted: '#danger',
+};
+function getItemStyles({ isSelected, mode, indent }) {
+    return {
+        width: 'max 100%',
+        radius: true,
+        textAlign: 'left',
+        fill: isSelected
+            ? '#purple.05'
+            : MODE_BG[mode] || {
+                '': '#clear',
+                hovered: '#dark.04',
+            },
+        color: isSelected ? '#purple-text' : MODE_COLOR[mode] || '#dark.75',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03',
+        },
+        fontWeight: isSelected ? 500 : 400,
+        padding: calcPadding(indent),
+    };
+}
+function Item(props) {
+    let { children, mode, indent, onPress, isSelected } = props;
+    return ((0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onPress, styles: getItemStyles({ isSelected, mode, indent }), style: { whiteSpace: 'nowrap' }, children: children }, void 0));
+}
+function sortTreeData(filesTree) {
+    filesTree = filesTree.map((item) => {
+        return {
+            ...item,
+            children: item.children ? sortTreeData(item.children) : undefined,
+        };
+    });
+    return filesTree.sort((a, b) => {
+        if (!a.isLeaf && b.isLeaf) {
+            return -1;
+        }
+        else if (!b.isLeaf && a.isLeaf) {
+            return 1;
+        }
+        else if (a.title && b.title) {
+            return a.title.localeCompare(b.title, 'en', { sensitivity: 'base' });
+        }
+        else {
+            return 0;
+        }
+    });
+}
+const HOVER_CSS = `
+  &:hover .actions {
+    opacity: 1;
+  }
+  &:not(:hover) .actions {
+    opacity: 0;
+  }
+`;
+function DirectoryTree(props) {
+    let { onSelect, treeData, selectedKey, defaultExpandAll, rootTitle, actionsPanel, onlyDirs, ...otherProps } = props;
+    treeData = sortTreeData(treeData);
+    const [expanded, setExpanded] = (0, react_1.useState)(['/']);
+    const [selected, setSelected] = (0, react_1.useState)(selectedKey);
+    const fullTreeData = [
+        {
+            key: '/',
+            title: rootTitle || '/',
+            children: treeData,
+        },
+    ];
+    (0, react_1.useEffect)(() => {
+        setSelected(selectedKey);
+    }, [selectedKey]);
+    (0, react_1.useEffect)(() => {
+        if (defaultExpandAll) {
+            setExpanded(extractLeafKeys(fullTreeData, true));
+        }
+    }, []);
+    function toggle(item) {
+        if (expanded.includes(item.key)) {
+            setExpanded(expanded.filter((key) => key !== item.key));
+        }
+        else {
+            setExpanded([...expanded, item.key]);
+        }
+    }
+    function select(item) {
+        onSelect && onSelect(item.key);
+        setSelected(item.key);
+    }
+    function recursiveRender(subTreeData, indent = 0) {
+        return subTreeData.reduce((list, item) => {
+            if (!item.isLeaf) {
+                list.push((0, jsx_runtime_1.jsx)(Item, { indent: indent, isSelected: selected === item.key, onPress: () => select(item), children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", css: HOVER_CSS, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "clear", margin: "-.5x", padding: ".25x", color: {
+                                    '': '#dark.60',
+                                    hovered: '#purple',
+                                }, onPress: () => toggle(item), label: expanded.includes(item.key) ? 'Collapse' : 'Expand', children: expanded.includes(item.key) ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}, void 0)) }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", flexGrow: 1, color: selected === item.key ? '#purple' : '#dark.50', children: [expanded.includes(item.key) ? ((0, jsx_runtime_1.jsx)(icons_1.FolderOpenFilled, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.FolderFilled, {}, void 0)), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0)] }, void 0), actionsPanel && actionsPanel(item)] }, void 0) }, item.key));
+                if (expanded.includes(item.key)) {
+                    list.push(...recursiveRender(item.children || [], indent + 1));
+                }
+            }
+            else if (!onlyDirs) {
+                list.push((0, jsx_runtime_1.jsx)(Item, { indent: indent + 1.7, isSelected: selected === item.key, onPress: () => select(item), mode: item.mode, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", css: HOVER_CSS, color: selected === item.key ? '#purple' : '#dark.50', children: [(0, jsx_runtime_1.jsx)(icons_1.FileOutlined, {}, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, flexGrow: 1, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0), actionsPanel && actionsPanel(item), item.mode && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { padding: "0 .5x", placeItems: "center", children: IMAGES[item.mode] }, void 0))] }, void 0) }, item.key));
+            }
+            return list;
+        }, []);
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { styles: { flow: 'column', fontWeight: 500, width: '100%', gap: '1bw' }, ...otherProps, children: recursiveRender(fullTreeData) }, void 0));
+}
+exports.DirectoryTree = DirectoryTree;
+
+        

package/dist/cjs/components/organisms/FileTabs/FileTabs.js

@@ -0,0 +1,300 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@ant-design/icons");
+const Block_1 = require("../../Block");
+const Action_1 = require("../../actions/Action");
+const Space_1 = require("../../layout/Space");
+const Flex_1 = require("../../layout/Flex");
+const FileTabsContext = (0, react_1.createContext)({
+    addTab() { },
+    removeTab() { },
+    setTab() { },
+    setDirtyTab() { },
+});
+const TABS_PANEL_CSS = `
+  position: relative;
+  overflow: auto hidden;
+  top: 1px;
+  white-space: nowrap;
+
+  ::-webkit-scrollbar-track {
+    background: var(--grey-light-color);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 1px;
+    background: var(--dark-04-color);
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+`;
+const TABS_CONTAINER_CSS = `
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    width: 32px;
+    height: 37px;
+    transition: all .15s linear;
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 1)
+    );
+    z-index: 10;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 37px;
+    pointer-events: none;
+    transition: all .15s linear;
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 1)
+    );
+    z-index: 10;
+  }
+
+  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
+    opacity: 1;
+  }
+`;
+const DIRTY_BADGE_CSS = `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: all .2s linear;
+`;
+const TAB_STYLES = {
+    radius: '1r 1r 0 0',
+    padding: '1x 1.5x',
+    border: {
+        '': 'left top right #clear',
+        disabled: 'left top right rgb(227, 227, 233)',
+    },
+    fill: {
+        '': '#dark.04',
+        hovered: '#dark.08',
+        'disabled, disabled & hover': '#white',
+    },
+    color: {
+        '': '#dark.75',
+        'disabled, hovered, hovered & disabled': '#dark',
+    },
+    cursor: {
+        '': 'pointer',
+        disabled: 'default',
+    },
+    fontWeight: 500,
+    opacity: 1,
+    preset: 'default',
+    outline: {
+        '': 'inset #purple-03.0',
+        'focused & focus-visible': 'inset #purple-03',
+    },
+};
+const CLOSE_STYLES = {
+    color: {
+        '': '#dark.50',
+        hovered: '#dark',
+    },
+    padding: '0 .25x',
+    outline: {
+        '': '#purple-03.0',
+        'focused & focus-visible': '#purple-03',
+    },
+    radius: '1r',
+};
+const TAB_CSS = `
+  margin-bottom: var(--border-width);
+  transform: translate(0, 0);
+  transition: color .2s linear, background-color .2s linear;
+
+  &[disabled] {
+    transform: translate(0, var(--border-width));
+  }
+
+  &.file-tab--dirty {
+    &:hover {
+      & .file-tab-dirty-badge {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      & .file-tab-close {
+        opacity: 1;
+      }
+    }
+
+    &:not(:hover) {
+      & .file-tab-dirty-badge {
+        opacity: 1;
+      }
+
+      & .file-tab-close {
+        opacity: 0;
+      }
+    }
+  }
+`;
+const Tab = ({ isDirty, isDisabled, children, isClosable, onClose, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Action_1.Action, { className: isDirty ? 'file-tab--dirty' : '', css: TAB_CSS, styles: TAB_STYLES, isDisabled: isDisabled, ...props, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".75x", children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0), (isClosable || isDirty) && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeItems: "center", style: { position: 'relative' }, children: [isClosable ? ((0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onClose, className: "file-tab-close", styles: CLOSE_STYLES, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", {}, void 0)), isDirty ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { className: "file-tab-dirty-badge", css: DIRTY_BADGE_CSS, width: "1x", height: "1x", fill: "#dark.30", radius: "round" }, void 0)) : null] }, void 0))] }, void 0) }, void 0));
+};
+function FileTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, isClosable = true, children, ...props }) {
+    const tabsRef = (0, react_1.useRef)(null);
+    const [tabs, setTabs] = (0, react_1.useState)([]);
+    const [activeKey, setActiveKey] = (0, react_1.useState)(activeKeyProp || defaultActiveKey);
+    const [leftFade, setLeftFade] = (0, react_1.useState)(false);
+    const [rightFade, setRightFade] = (0, react_1.useState)(false);
+    function updateScroll() {
+        const el = tabsRef && tabsRef.current;
+        if (!el)
+            return;
+        setLeftFade(!!el.scrollLeft);
+        setRightFade(el.scrollWidth !== el.offsetWidth
+            && !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
+    }
+    (0, react_1.useLayoutEffect)(updateScroll, [tabs]);
+    function scrollCurrentIntoView() {
+        const el = tabsRef && tabsRef.current;
+        if (!el)
+            return;
+        const current = el.querySelector('button[disabled]');
+        if (!current)
+            return;
+        current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
+    }
+    (0, react_1.useEffect)(() => {
+        function update() {
+            updateScroll();
+        }
+        if (tabsRef && tabsRef.current) {
+            tabsRef.current.addEventListener('scroll', update);
+            tabsRef.current.addEventListener('mousewheel', update);
+            window.addEventListener('resize', update);
+        }
+        return () => {
+            if (tabsRef && tabsRef.current) {
+                tabsRef.current.removeEventListener('scroll', update);
+                tabsRef.current.removeEventListener('mousewheel', update);
+            }
+            window.removeEventListener('resize', update);
+        };
+    }, [tabsRef]);
+    (0, react_1.useEffect)(scrollCurrentIntoView, [activeKey]);
+    (0, react_1.useEffect)(() => {
+        setActiveKey(activeKeyProp);
+    }, [activeKeyProp]);
+    function getTab(tabs, key) {
+        return tabs.find((tab) => tab.id === key);
+    }
+    function setTab(key) {
+        if (getTab(tabs, key)) {
+            setActiveKey(key);
+        }
+    }
+    function addTab(tab) {
+        setTabs((tabs) => {
+            if (!getTab(tabs, tab.id)) {
+                return [...tabs, tab];
+            }
+            return tabs;
+        });
+    }
+    function setDirtyTab(id, isDirty) {
+        setTabs((tabs) => {
+            const tab = getTab(tabs, id);
+            if (tab) {
+                tab.isDirty = isDirty;
+                return [...tabs];
+            }
+            return tabs;
+        });
+    }
+    function handleClose(tab) {
+        if (getTab(tabs, tab.id)) {
+            onTabClose && onTabClose(tab.id);
+        }
+    }
+    function removeTab(tab) {
+        setTabs((tabs) => {
+            const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
+            setActiveKey((prevActiveKey) => {
+                if (prevActiveKey === tab.id) {
+                    return _tabs[0] && _tabs[0].id;
+                }
+                return prevActiveKey;
+            });
+            return _tabs;
+        });
+    }
+    function onPress(tab) {
+        setTab(tab.id);
+        onTabClick && onTabClick(tab.id);
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: (0, jsx_runtime_1.jsxs)(FileTabsContext.Provider, { value: {
+                addTab,
+                setTab,
+                removeTab,
+                setDirtyTab,
+                currentTab: activeKey,
+            }, children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { ref: tabsRef, gap: ".5x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
+                        return ((0, jsx_runtime_1.jsx)(Tab, { onPress: () => onPress(tab), onClose: () => isClosable && handleClose(tab), isClosable: isClosable, isDisabled: tab.id === activeKey || false, isDirty: tab.isDirty, children: tab.title }, tab.id));
+                    }) }, void 0), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
+}
+exports.FileTabs = FileTabs;
+FileTabs.TabPane = function FileTabPane(allProps) {
+    let { id, title, isDirty, children, ...props } = allProps;
+    const { addTab, removeTab, currentTab, setDirtyTab } = (0, react_1.useContext)(FileTabsContext);
+    (0, react_1.useEffect)(() => {
+        const tabData = {
+            id,
+            title,
+            isDirty,
+        };
+        addTab(tabData);
+        return () => {
+            removeTab(tabData);
+        };
+    }, [id, title]);
+    (0, react_1.useEffect)(() => {
+        setDirtyTab(id, isDirty || false);
+    }, [isDirty]);
+    const isCurrent = id === currentTab;
+    return ((0, jsx_runtime_1.jsx)(Block_1.Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }, void 0));
+};
+
+