@cube-dev/ui-kit 0.114.0 → 0.116.0

package/es/components/helpers/IconSwitch/IconSwitch.js

@@ -1,138 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
-import { tasty } from '../../../tasty/index.js';
-import { DisplayTransition } from '../DisplayTransition/DisplayTransition.js';
-function isNullishContent(node) {
-    // React treats `null`, `undefined`, and `false` as "render nothing"
-    return node == null || node === false;
-}
-const typeIds = new WeakMap();
-let lastTypeId = 0;
-function getTypeId(type) {
-    const existing = typeIds.get(type);
-    if (existing != null)
-        return existing;
-    const next = (lastTypeId += 1);
-    typeIds.set(type, next);
-    return next;
-}
-/**
- * Best-effort key derivation for icon switching when `contentKey` is not provided.
- * The goal is to:
- * - Transition when icon component type changes
- * - Not transition when only props change for the same icon type (self-animating icons)
- * - Transition when toggling to/from nullish content
- */
-function deriveContentKey(children) {
-    if (isNullishContent(children))
-        return 'nullish';
-    if (!isValidElement(children))
-        return `non-element:${typeof children}`;
-    const { type, key } = children;
-    const keyPart = key == null ? '' : `:${String(key)}`;
-    if (typeof type === 'string')
-        return `host:${type}${keyPart}`;
-    if (typeof type === 'function')
-        return `fn:${getTypeId(type)}${keyPart}`;
-    if (typeof type === 'object' && type != null)
-        return `obj:${getTypeId(type)}${keyPart}`;
-    if (typeof type === 'symbol')
-        return `sym:${String(type)}${keyPart}`;
-    return `unknown${keyPart}`;
-}
-const IconSwitchElement = tasty({
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-    },
-});
-const IconSlotElement = tasty({
-    styles: {
-        gridArea: '1 / 1',
-        display: 'grid',
-        placeItems: 'center',
-        opacity: {
-            '': 0,
-            entered: 1,
-        },
-        transition: {
-            '': 'theme $transition ease-out',
-            'exit | entered': 'theme $transition ease-in',
-        },
-    },
-});
-/**
- * A component that cross-fades between icons when children change.
- * Useful for animated icon transitions in buttons, items, etc.
- *
- * When `contentKey` changes, a transition is triggered.
- * When only `children` changes (same `contentKey`), content is updated in-place
- * without transition, allowing self-animating icons (like DirectionIcon) to work.
- */
-export function IconSwitch(props) {
-    const { children, contentKey, noWrapper, ...rest } = props;
-    const keyCounterRef = useRef(0);
-    const effectiveKey = contentKey ?? deriveContentKey(children);
-    const prevEffectiveKeyRef = useRef(effectiveKey);
-    const prevChildrenRef = useRef(children);
-    const [icons, setIcons] = useState(() => [
-        { key: keyCounterRef.current, content: children },
-    ]);
-    useLayoutEffect(() => {
-        const prevKey = prevEffectiveKeyRef.current;
-        const prevChildren = prevChildrenRef.current;
-        const hasKeyChanged = effectiveKey !== prevKey;
-        const hasNullishToggled = isNullishContent(children) !== isNullishContent(prevChildren);
-        // Transition rules:
-        // - If key changed -> transition (add new icon entry)
-        // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)
-        // - Otherwise -> no state update (children reference changes are handled at render time)
-        if (hasKeyChanged || hasNullishToggled) {
-            keyCounterRef.current += 1;
-            const newEntry = {
-                key: keyCounterRef.current,
-                content: children,
-            };
-            setIcons((prev) => [...prev, newEntry]);
-        }
-        prevEffectiveKeyRef.current = effectiveKey;
-        prevChildrenRef.current = children;
-    }, [children, effectiveKey]);
-    const handleExitComplete = useCallback((exitedKey) => {
-        setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));
-    }, []);
-    const latestKey = icons[icons.length - 1]?.key;
-    // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).
-    // In this state, we must use stored content to avoid flashing the new icon before the transition.
-    const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;
-    const isNullishChangePending = isNullishContent(children) !== isNullishContent(prevChildrenRef.current);
-    const isTransitionPending = isKeyChangePending || isNullishChangePending;
-    const content = icons.map((icon) => {
-        const isActive = icon.key === latestKey;
-        // Use current children for active icon ONLY when no transition is pending.
-        // During intermediate renders (before effect adds new entry), use stored content.
-        // For exiting icons, always use stored content to preserve appearance during fade-out.
-        const displayContent = isActive && !isTransitionPending ? children : icon.content;
-        return (_jsx(DisplayTransition, { isShown: isActive, animateOnMount: icon.key !== 0, onRest: (transition) => {
-                if (transition === 'exit') {
-                    handleExitComplete(icon.key);
-                }
-            }, children: ({ isShown, phase, ref }) => (_jsx(IconSlotElement, { ref: ref, mods: {
-                    entered: isShown,
-                    phase,
-                }, children: displayContent })) }, icon.key));
-    });
-    if (noWrapper) {
-        return _jsx(_Fragment, { children: content });
-    }
-    return _jsx(IconSwitchElement, { ...rest, children: content });
-}
-
-        

package/es/components/helpers/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export * from './DisplayTransition/DisplayTransition.js';
-export * from './IconSwitch/IconSwitch.js';
-
-        

package/es/components/layout/Flex.js

@@ -1,22 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty/index.js';
-const FlexElement = tasty({
-    styles: {
-        display: 'flex',
-        flow: 'row',
-    },
-});
-export const Flex = forwardRef(function Flex(props, ref) {
-    const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
-});
-
-        

package/es/components/layout/Flow.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty/index.js';
-const FlowElement = tasty({
-    styles: {
-        display: 'block',
-        flow: 'column',
-    },
-});
-const STYLE_PROPS = CONTAINER_STYLES;
-export const Flow = forwardRef(function Flow(props, ref) {
-    const styles = extractStyles(props, STYLE_PROPS);
-    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
-});
-
-        

package/es/components/layout/Grid.js

@@ -1,28 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty/index.js';
-const GridElement = tasty({
-    styles: {
-        display: 'grid',
-        flow: 'row',
-    },
-});
-const PROP_MAP = {
-    template: 'gridTemplate',
-    columns: 'gridColumns',
-    rows: 'gridRows',
-    areas: 'gridAreas',
-};
-export const Grid = forwardRef(function Grid(props, ref) {
-    const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);
-    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
-});
-
-        

package/es/components/layout/Panel.js

@@ -1,109 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty, } from '../../tasty/index.js';
-const PanelElement = tasty({
-    as: 'section',
-    qa: 'Panel',
-    styles: {
-        position: {
-            '': 'relative',
-            'stretched | floating': 'absolute',
-        },
-        inset: {
-            '': 'initial',
-            stretched: true,
-        },
-        display: 'block',
-        radius: {
-            '': '0',
-            card: '1r',
-        },
-        border: {
-            '': '0',
-            card: '1bw',
-        },
-        flexGrow: 1,
-        placeSelf: 'stretch',
-    },
-});
-const PanelInnerElement = tasty({
-    styles: {
-        position: 'absolute',
-        display: {
-            '': 'grid',
-            flex: 'flex',
-        },
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        overflow: 'auto',
-        scrollbar: 'thin #dark.2',
-        gridColumns: 'minmax(100%, 100%)',
-        gridRows: {
-            '': 'initial',
-            stretched: 'minmax(0, 1fr)',
-        },
-        radius: {
-            '': '0',
-            card: '(1r - 1bw)',
-        },
-        flow: 'row',
-        placeContent: 'start stretch',
-    },
-    styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
-});
-const STYLES = [
-    'placeContent',
-    'placeItems',
-    'gridColumns',
-    'gridRows',
-    'flow',
-    'gap',
-    'padding',
-    'overflow',
-    'fill',
-    'color',
-    'preset',
-];
-function Panel(props, ref) {
-    let { qa, mods, isStretched, isFloating, isCard, isFlex, styles, innerStyles, children, extra, style, ...otherProps } = props;
-    STYLES.forEach((style) => {
-        if (props[style]) {
-            innerStyles = { ...innerStyles, [style]: props[style] };
-            delete otherProps[style];
-        }
-    });
-    [
-        ...OUTER_STYLES,
-        ...BASE_STYLES,
-        ...BLOCK_STYLES,
-        ...COLOR_STYLES,
-        ...DIMENSION_STYLES,
-    ].forEach((style) => {
-        if (style in otherProps) {
-            styles = { ...styles, [style]: otherProps[style] };
-            delete otherProps[style];
-        }
-    });
-    const appliedMods = useMemo(() => ({
-        floating: isFloating,
-        stretched: isStretched,
-        card: isCard,
-        flex: isFlex,
-        ...mods,
-    }), [isStretched, isCard, mods]);
-    return (_jsxs(PanelElement, { ref: ref, qa: qa, mods: appliedMods, styles: styles, style: style, ...otherProps, children: [_jsx(PanelInnerElement, { mods: appliedMods, styles: innerStyles, children: children }), extra] }));
-}
-const _Panel = forwardRef(Panel);
-_Panel.displayName = 'Panel';
-export { _Panel as Panel };
-
-        

package/es/components/layout/Prefix.js

@@ -1,43 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty/index.js';
-import { useCombinedRefs, useLayoutEffect } from '../../utils/react/index.js';
-const PrefixElement = tasty({
-    element: 'Prefix',
-    styles: {
-        position: 'absolute',
-        display: 'grid',
-        placeContent: 'stretch',
-        placeItems: 'center',
-        flow: 'column',
-        gap: 0,
-        left: '$prefix-gap',
-        top: '$prefix-gap',
-        bottom: '$prefix-gap',
-        color: '#dark-02',
-        height: '(100% - (2 * $prefix-gap))',
-    },
-});
-export const Prefix = forwardRef(function Prefix(allProps, outerRef) {
-    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES);
-    const ref = useCombinedRefs(outerRef);
-    useLayoutEffect(() => {
-        if (ref?.current && onWidthChange) {
-            onWidthChange(ref.current.offsetWidth);
-        }
-    }, [children, ref, onWidthChange]);
-    return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
-            // @ts-ignore
-            '--prefix-gap': parseStyle(outerGap).output,
-        }, children: children }));
-});
-
-        

package/es/components/layout/ResizablePanel.js

@@ -1,291 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useResizeObserver } from '@react-aria/utils';
-import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
-import { useHover, useMove } from 'react-aria';
-import { useDebouncedValue, useEvent } from '../../_internal/hooks/index.js';
-import { tasty } from '../../tasty/index.js';
-import { mergeProps, useCombinedRefs } from '../../utils/react/index.js';
-import { Panel } from './Panel.js';
-const HandlerElement = 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: {
-            '': 'row-resize',
-            horizontal: 'col-resize',
-            disabled: 'not-allowed',
-        },
-        padding: 0,
-        boxSizing: 'border-box',
-        transition: 'theme',
-        '--size-compensation': {
-            '': '6px',
-            disabled: '1bw',
-        },
-        Track: {
-            width: {
-                '': 'initial',
-                horizontal: '3px',
-                'disabled & horizontal': '1px',
-            },
-            height: {
-                '': '3px',
-                horizontal: 'initial',
-                'disabled & !horizontal': '1px',
-            },
-            position: 'absolute',
-            inset: {
-                '': '3px 0',
-                horizontal: '0 3px',
-                disabled: '0 0',
-            },
-            fill: {
-                '': '#border',
-                '(hovered | drag) & !disabled': '#purple-03',
-            },
-            transition: 'theme',
-            outline: {
-                '': '1bw #primary-text.0',
-                drag: '1bw #primary-text',
-            },
-            outlineOffset: 1,
-        },
-        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: '1px',
-            },
-            height: {
-                '': '1px',
-                horizontal: 'auto',
-            },
-            inset: {
-                '': '4px 50% auto auto',
-                horizontal: '50% 4px 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 } = useHover({});
-    const isHorizontal = direction === 'left' || direction === 'right';
-    const localIsHovered = useDebouncedValue(isHovered, 150);
-    return (_jsxs(HandlerElement, { ...mergeProps(hoverProps, {
-            mods: {
-                hovered: localIsHovered,
-                horizontal: isHorizontal,
-                disabled: isDisabled,
-            },
-            'data-direction': direction,
-        }, otherProps), children: [_jsx("div", { "data-element": "Track" }), !isDisabled ? (_jsxs("div", { "data-element": "Drag", children: [_jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" }), _jsx("div", { "data-element": "DragPart" })] })) : null] }));
-};
-const StyledPanel = tasty(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': {
-            '': '3px',
-            disabled: '1bw',
-        },
-    },
-});
-function ResizablePanel(props, ref) {
-    const timerRef = useRef(null);
-    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] = useState(false);
-    const isHorizontal = direction === 'left' || direction === 'right';
-    ref = useCombinedRefs(ref);
-    const onResize = 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);
-            }
-        }
-    });
-    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] = useState(providedSize != null ? clamp(providedSize) : 200);
-    let [visualSize, setVisualSize] = useState(null);
-    let { moveProps } = 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 = useEvent(() => {
-        setSize((size) => {
-            if (providedSize && Math.abs(providedSize - size) > 0.5) {
-                return providedSize;
-            }
-            return size;
-        });
-    });
-    useEffect(() => {
-        onResize();
-    }, [size, isDisabled]);
-    useEffect(() => {
-        if (!isDragging &&
-            visualSize != null &&
-            (providedSize == null || Math.abs(providedSize - visualSize) > 0.5)) {
-            onSizeChange?.(Math.round(visualSize));
-        }
-    }, [visualSize, isDragging]);
-    useEffect(() => {
-        timerRef.current = setTimeout(notifyChange, 500);
-        return () => {
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
-            }
-        };
-    }, [providedSize]);
-    const mods = useMemo(() => {
-        return {
-            drag: isDragging,
-            horizontal: isHorizontal,
-            disabled: isDisabled,
-        };
-    }, [isDragging, isHorizontal, isDisabled]);
-    return (_jsx(StyledPanel, { ref: ref, "data-direction": direction, mods: mods, extra: _jsx(Handler, { isDisabled: isDisabled || visualSize == null, direction: direction, ...moveProps, mods: mods }), ...mergeProps(restProps, {
-            style: {
-                // We set the 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 a 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 = forwardRef(ResizablePanel);
-_ResizablePanel.displayName = 'ResizablePanel';
-export { _ResizablePanel as ResizablePanel };
-
-