@cube-dev/ui-kit 0.57.0 → 0.59.0

package/cjs/components/layout/ResizablePanel.js

@@ -1,286 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResizablePanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const index_1 = require("../../tasty/index");
-const react_2 = require("../../utils/react");
-const hooks_1 = require("../../_internal/hooks");
-const Panel_1 = require("./Panel");
-const HandlerElement = (0, index_1.tasty)({
-    qa: 'ResizeHandler',
-    styles: {
-        // The real size is slightly bigger than the visual one.
-        width: {
-            '': 'initial',
-            horizontal: '9px',
-            'disabled & horizontal': '1bw',
-        },
-        height: {
-            '': '9px',
-            horizontal: 'initial',
-            'disabled & !horizontal': '1bw',
-        },
-        top: {
-            '': 0,
-            '[data-direction="top"]': 'initial',
-        },
-        bottom: {
-            '': 0,
-            '[data-direction="bottom"]': 'initial',
-        },
-        right: {
-            '': 0,
-            '[data-direction="right"]': 'initial',
-        },
-        left: {
-            '': 0,
-            '[data-direction="left"]': 'initial',
-        },
-        // Transform requires a separate visual size property to respect size boundaries
-        transform: {
-            '[data-direction="top"]': 'translate(0, (@size-compensation - @visual-size))',
-            '[data-direction="right"]': 'translate((@visual-size - @size-compensation), 0)',
-            '[data-direction="bottom"]': 'translate(0, (@visual-size - @size-compensation))',
-            '[data-direction="left"]': 'translate((@size-compensation - @visual-size), 0)',
-        },
-        position: 'absolute',
-        zIndex: 1,
-        cursor: {
-            '': 'col-resize',
-            disabled: 'not-allowed',
-        },
-        fill: {
-            '': '#clear',
-            drag: '#purple-02',
-        },
-        padding: 0,
-        boxSizing: 'border-box',
-        transition: 'theme',
-        '--size-compensation': {
-            '': '7px',
-            disabled: '1bw',
-        },
-        Track: {
-            width: {
-                '': 'initial',
-                horizontal: '5px',
-                'disabled & horizontal': '1px',
-            },
-            height: {
-                '': '5px',
-                horizontal: 'initial',
-                'disabled & !horizontal': '1px',
-            },
-            position: 'absolute',
-            inset: {
-                '': '2px 0',
-                horizontal: '0 2px',
-                disabled: '0 0',
-            },
-            fill: {
-                '': '#border-opaque',
-                '(hovered | drag) & !disabled': '#purple-03',
-            },
-            transition: 'theme',
-        },
-        Drag: {
-            display: 'grid',
-            gap: '2bw',
-            flow: {
-                '': 'row',
-                horizontal: 'column',
-            },
-            gridColumns: {
-                '': '3px 3px 3px 3px 3px',
-                horizontal: 'auto',
-            },
-            gridRows: {
-                '': 'auto',
-                horizontal: '3px 3px 3px 3px 3px',
-            },
-            width: {
-                '': 'auto',
-                horizontal: '3px',
-            },
-            height: {
-                '': '3px',
-                horizontal: 'auto',
-            },
-            inset: {
-                '': '3px 50% auto auto',
-                horizontal: '50% 3px auto auto',
-            },
-            transform: {
-                '': 'translate(-50%, 0)',
-                horizontal: 'translate(0, -50%)',
-            },
-            position: 'absolute',
-            transition: 'theme',
-        },
-        DragPart: {
-            radius: true,
-            fill: {
-                '': '#dark-03',
-                'hovered | drag': '#dark-02',
-                disabled: '#dark-04',
-            },
-        },
-    },
-});
-const Handler = (props) => {
-    const { direction = 'right', isDisabled, ...otherProps } = props;
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
-    const isHorizontal = direction === 'left' || direction === 'right';
-    const localIsHovered = (0, hooks_1.useDebouncedValue)(isHovered, 150);
-    return ((0, jsx_runtime_1.jsxs)(HandlerElement, { ...(0, react_2.mergeProps)(hoverProps, {
-            mods: {
-                hovered: localIsHovered,
-                horizontal: isHorizontal,
-                disabled: isDisabled,
-            },
-            'data-direction': direction,
-        }, otherProps), children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Track" }), !isDisabled ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Drag", children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "DragPart" }), (0, jsx_runtime_1.jsx)("div", { "data-element": "DragPart" }), (0, jsx_runtime_1.jsx)("div", { "data-element": "DragPart" }), (0, jsx_runtime_1.jsx)("div", { "data-element": "DragPart" }), (0, jsx_runtime_1.jsx)("div", { "data-element": "DragPart" })] })) : null] }));
-};
-const StyledPanel = (0, index_1.tasty)(Panel_1.Panel, {
-    styles: {
-        flexGrow: 0,
-        width: {
-            '': '@min-size @size @max-size',
-            '[data-direction="top"] | [data-direction="bottom"]': 'initial',
-        },
-        height: {
-            '': '@min-size @size @max-size',
-            '[data-direction="left"] | [data-direction="right"]': 'initial',
-        },
-        placeSelf: 'stretch',
-        touchAction: 'none',
-        '--indent-compensation': {
-            '': '5px',
-            disabled: '1bw',
-        },
-    },
-});
-function ResizablePanel(props, ref) {
-    const isControllable = typeof props.size === 'number';
-    const { isDisabled, direction = 'right', size: providedSize, onSizeChange, minSize = 200, maxSize = isControllable ? undefined : 'min(50%, 400px)', ...restProps } = props;
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const isHorizontal = direction === 'left' || direction === 'right';
-    ref = (0, react_2.useCombinedRefs)(ref);
-    const onResize = (0, hooks_1.useEvent)(() => {
-        if (ref?.current) {
-            const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
-            const containerSize = ref.current[offsetProp];
-            if (Math.abs(containerSize - size) < 1 && !isDisabled) {
-                setVisualSize(size);
-            }
-            else {
-                setVisualSize(containerSize);
-            }
-        }
-    });
-    (0, utils_1.useResizeObserver)({
-        ref,
-        onResize,
-    });
-    function clamp(size) {
-        if (typeof maxSize === 'number') {
-            size = Math.min(maxSize, size);
-        }
-        if (typeof minSize === 'number' || !minSize) {
-            size = Math.max(minSize || 0, size);
-        }
-        return Math.max(size, 0);
-    }
-    let [size, setSize] = (0, react_1.useState)(providedSize != null ? clamp(providedSize) : 200);
-    let [visualSize, setVisualSize] = (0, react_1.useState)(null);
-    let { moveProps } = (0, react_aria_1.useMove)({
-        onMoveStart(e) {
-            if (isDisabled) {
-                return;
-            }
-            setIsDragging(true);
-            const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
-            if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) {
-                setSize(Math.round(ref.current[offsetProp]));
-            }
-        },
-        onMove(e) {
-            setSize((size) => {
-                if (isDisabled) {
-                    return size;
-                }
-                if (e.pointerType === 'keyboard') {
-                    return size;
-                }
-                size += isHorizontal
-                    ? e.deltaX * (direction === 'right' ? 1 : -1)
-                    : e.deltaY * (direction === 'bottom' ? 1 : -1);
-                return size;
-            });
-        },
-        onMoveEnd(e) {
-            setIsDragging(false);
-            setSize((size) => clamp(Math.round(size)));
-        },
-    });
-    // Since we sync provided size and the local one in two ways
-    // we need a way to prevent infinite loop in some cases.
-    // We will run this in setTimeout and make sure it will get the most recent state.
-    const notifyChange = (0, hooks_1.useEvent)(() => {
-        setSize((size) => {
-            if (providedSize && Math.abs(providedSize - size) > 0.5) {
-                return providedSize;
-            }
-            return size;
-        });
-    });
-    (0, react_1.useEffect)(() => {
-        onResize();
-    }, [size, isDisabled]);
-    (0, react_1.useEffect)(() => {
-        if (!isDragging &&
-            visualSize != null &&
-            (providedSize == null || Math.abs(providedSize - visualSize) > 0.5)) {
-            onSizeChange?.(Math.round(visualSize));
-        }
-    }, [visualSize, isDragging]);
-    (0, react_1.useEffect)(() => {
-        setTimeout(notifyChange);
-    }, [providedSize]);
-    const mods = (0, react_1.useMemo)(() => {
-        return {
-            drag: isDragging,
-            horizontal: isHorizontal,
-            disabled: isDisabled,
-        };
-    }, [isDragging, isHorizontal, isDisabled]);
-    return ((0, jsx_runtime_1.jsx)(StyledPanel, { ref: ref, "data-direction": direction, mods: mods, extra: (0, jsx_runtime_1.jsx)(Handler, { isDisabled: isDisabled || visualSize == null, direction: direction, ...moveProps, mods: mods }), ...(0, react_2.mergeProps)(restProps, {
-            style: {
-                // We set a current size further via width/min-width/max-width styles to respect size boundaries
-                '--size': `${size}px`,
-                // We use a separate visual size to paint the handler for smoother experience
-                '--visual-size': `${visualSize}px`,
-                '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,
-                '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,
-            },
-            innerStyles: {
-                // The panel inner space compensation for the handler
-                margin: `@indent-compensation ${direction}`,
-            },
-        }) }));
-}
-const _ResizablePanel = (0, react_1.forwardRef)(ResizablePanel);
-exports.ResizablePanel = _ResizablePanel;
-_ResizablePanel.displayName = 'ResizablePanel';
-
-        

package/cjs/components/layout/Space.js

@@ -1,37 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Space = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const tasty_1 = require("../../tasty");
-const SpaceElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'flex',
-        gap: true,
-        flow: {
-            '': 'row',
-            vertical: 'column',
-        },
-        placeItems: {
-            '': 'center stretch',
-            vertical: 'stretch',
-        },
-    },
-});
-exports.Space = (0, react_1.forwardRef)(function Space(props, ref) {
-    const { mods, direction, ...otherProps } = props;
-    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(SpaceElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, mods: {
-            vertical: direction === 'vertical' || otherProps.flow === 'column',
-            ...mods,
-        }, styles: styles }));
-});
-
-        

package/cjs/components/layout/Suffix.js

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Suffix = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const tasty_1 = require("../../tasty");
-const react_2 = require("../../utils/react");
-const SuffixElement = (0, tasty_1.tasty)({
-    element: 'Suffix',
-    styles: {
-        position: 'absolute',
-        display: 'grid',
-        placeContent: 'stretch',
-        placeItems: 'center',
-        flow: 'column',
-        gap: 0,
-        right: '@suffix-gap',
-        top: '@suffix-gap',
-        bottom: '@suffix-gap',
-        color: '#dark-02',
-        height: '(100% - (2 * @suffix-gap))',
-    },
-});
-exports.Suffix = (0, react_1.forwardRef)(function Suffix(allProps, outerRef) {
-    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    const ref = (0, react_2.useCombinedRefs)(outerRef);
-    (0, react_1.useEffect)(() => {
-        if (ref && ref.current && onWidthChange) {
-            onWidthChange(ref.current.offsetWidth);
-        }
-    }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(SuffixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles, style: {
-            '--suffix-gap': (0, tasty_1.parseStyle)(outerGap).value,
-        }, children: children }));
-});
-
-        

package/cjs/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,282 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.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.LegacyTabs = LegacyTabs;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Block_1 = require("../../Block");
-const Space_1 = require("../../layout/Space");
-const Flex_1 = require("../../layout/Flex");
-const actions_1 = require("../../actions");
-const tasty_1 = require("../../../tasty");
-const Flow_1 = require("../../layout/Flow");
-const react_2 = require("../../../utils/react");
-const LegacyTabsContext = (0, react_1.createContext)({
-    addTab() { },
-    removeTab() { },
-    setTab() { },
-    changeTab() { },
-});
-const TabElement = (0, tasty_1.tasty)(actions_1.Button, {
-    type: 'tab',
-    styles: {
-        color: {
-            '': '#dark',
-            'selected, hovered': '#purple-text',
-            disabled: '#dark.50',
-        },
-        fill: '#purple.0',
-        textAlign: 'center',
-        fontWeight: 600,
-        padding: '(1x - 1px) (1x - 1px)',
-        radius: '1r 1r 0 0',
-        border: 0,
-    },
-});
-const StyledTabElement = (0, styled_components_1.default)(TabElement) `
-  &::before {
-    --outline-size: 0px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
-    pointer-events: none;
-    transition:
-      opacity linear 0.2s,
-      box-shadow linear 0.2s;
-  }
-
-  &[data-is-selected]::before {
-    --outline-size: 2px;
-  }
-
-  &:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
-    --outline-size: 1px;
-  }
-`;
-const TabsPanelElement = (0, tasty_1.tasty)(Space_1.Space, {
-    styles: {
-        gap: '1x',
-        flexShrink: 0,
-    },
-});
-const StyledTabsPanelElement = (0, styled_components_1.default)(TabsPanelElement) `
-  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 TabsContainerElement = (0, tasty_1.tasty)(Flow_1.Flow, {
-    styles: {
-        flow: 'column',
-        height: 'max 100%',
-        width: 'max 100%',
-    },
-});
-const StyledTabsContainerElement = (0, styled_components_1.default)(TabsContainerElement) `
-  position: relative;
-
-  &::before {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    width: 32px;
-    height: 37px;
-    transition: all 0.15s linear;
-    background-image: linear-gradient(
-      to left,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-    z-index: 1;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    height: 37px;
-    pointer-events: none;
-    transition: all 0.15s linear;
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-    z-index: 1;
-  }
-
-  &[data-is-left-fade]::before,
-  &[data-is-right-fade]::after {
-    opacity: 1;
-  }
-`;
-function Tab({ isSelected, isHidden, onClose, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }));
-}
-function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, 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_2.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 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 changeTab(tab) {
-        setTabs((tabs) => {
-            const existTab = tabs.find((_tab) => _tab.id === tab.id);
-            if (existTab) {
-                Object.assign(existTab, tab);
-            }
-            return [...tabs];
-        });
-    }
-    function onPress(tab) {
-        onTabClick && onTabClick(tab.id);
-        setTab(tab.id);
-    }
-    return ((0, jsx_runtime_1.jsx)(StyledTabsContainerElement, { "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, ...props, children: (0, jsx_runtime_1.jsxs)(LegacyTabsContext.Provider, { value: {
-                addTab,
-                setTab,
-                removeTab,
-                changeTab,
-                currentTab: activeKey,
-            }, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", placeContent: "center space-between", children: [(0, jsx_runtime_1.jsx)(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
-                                return ((0, jsx_runtime_1.jsx)(Tab, { "data-qa": tab.qa, isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, onPress: () => onPress(tab), children: tab.title }, tab.id));
-                            }) }), extra] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children })] }) }));
-}
-LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {
-    const { addTab, removeTab, changeTab, currentTab } = (0, react_1.useContext)(LegacyTabsContext);
-    (0, react_1.useEffect)(() => {
-        const tabData = {
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        };
-        addTab(tabData);
-        return () => {
-            removeTab(tabData);
-        };
-    }, [id]);
-    (0, react_1.useEffect)(() => {
-        changeTab({
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        });
-    }, [title, isDisabled, isHidden]);
-    const isCurrent = id === currentTab;
-    return ((0, jsx_runtime_1.jsx)(Block_1.Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }));
-};
-
-        

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

@@ -1,18 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.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 actions_1 = require("../../actions");
-exports.Link = (0, react_1.forwardRef)(function Link(props, ref) {
-    return (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "link", ...props, ref: ref });
-});
-
-