@cube-dev/ui-kit 0.94.2 → 0.96.0

package/es/components/content/Layout/LayoutContent.js

@@ -0,0 +1,112 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from 'react';
+import { useHover } from 'react-aria';
+import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { useCombinedRefs } from '../../../utils/react';
+import { useTinyScrollbar } from './hooks/useTinyScrollbar';
+import { LayoutContextReset } from './LayoutContext';
+const ContentElement = tasty({
+    as: 'div',
+    qa: 'LayoutContent',
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        gridColumns: '1sf',
+        gridRows: '1sf',
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+        placeSelf: 'stretch',
+        flexGrow: 1,
+        flexShrink: 1,
+        height: 'min 0',
+        overflow: 'hidden',
+        boxSizing: 'content-box',
+        Inner: {
+            $: '>',
+            display: 'flex',
+            flow: 'column',
+            padding: '($content-padding, 1x)',
+            overflow: {
+                '': 'auto',
+                'scrollbar=none': 'clip',
+            },
+            placeSelf: 'stretch',
+            scrollbar: {
+                '': 'thin',
+                'scrollbar=tiny | scrollbar=none': 'none',
+            },
+        },
+        // Custom scrollbar handles (when scrollbar="tiny")
+        ScrollbarV: {
+            position: 'absolute',
+            right: '1px',
+            top: '$scrollbar-v-top',
+            width: '1ow',
+            height: '$scrollbar-v-height',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                '(hovered | focused | scrolling) & scrollbar=tiny': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+        ScrollbarH: {
+            position: 'absolute',
+            bottom: '1px',
+            left: '$scrollbar-h-left',
+            height: '1ow',
+            width: '$scrollbar-h-width',
+            radius: 'round',
+            fill: '#dark.35',
+            opacity: {
+                '': 0,
+                '(hovered | focused | scrolling) & scrollbar=tiny': 1,
+            },
+            transition: 'opacity 0.15s',
+            pointerEvents: 'none',
+        },
+    },
+});
+function LayoutContent(props, ref) {
+    const { children, scrollbar = 'thin', styles, mods: externalMods, ...otherProps } = props;
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
+    const innerStyles = extractStyles(otherProps, INNER_STYLES);
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(ref);
+    const isTinyScrollbar = scrollbar === 'tiny';
+    const { hoverProps, isHovered } = useHover({});
+    const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling, } = useTinyScrollbar(innerRef, isTinyScrollbar);
+    const scrollbarStyle = useMemo(() => {
+        if (!isTinyScrollbar)
+            return {};
+        return {
+            ...handleVStyle,
+            ...handleHStyle,
+        };
+    }, [isTinyScrollbar, handleVStyle, handleHStyle]);
+    const mods = useMemo(() => ({
+        ...externalMods,
+        scrollbar,
+        hovered: isHovered,
+        scrolling: isScrolling,
+    }), [externalMods, scrollbar, isHovered, isScrolling]);
+    // Merge styles: outer styles to root, inner styles to Inner element
+    const finalStyles = useMemo(() => {
+        return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
+    }, [styles, outerStyles, innerStyles]);
+    return (_jsxs(ContentElement, { ref: combinedRef, ...filterBaseProps(otherProps, { eventProps: true }), ...hoverProps, mods: mods, styles: finalStyles, style: scrollbarStyle, children: [_jsx("div", { ref: innerRef, "data-element": "Inner", children: _jsx(LayoutContextReset, { children: children }) }), isTinyScrollbar && hasOverflowY && _jsx("div", { "data-element": "ScrollbarV" }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }));
+}
+const _LayoutContent = forwardRef(LayoutContent);
+_LayoutContent.displayName = 'Layout.Content';
+export { _LayoutContent as LayoutContent };
+
+        

package/es/components/content/Layout/LayoutContext.js

@@ -0,0 +1,105 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+export const LayoutContext = createContext(null);
+export function useLayoutContext() {
+    return useContext(LayoutContext);
+}
+export function LayoutProvider({ children, hasTransition = false, }) {
+    const registeredPanels = useRef(new Set());
+    const [panelSizes, setPanelSizes] = useState({
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const registerPanel = useCallback((side, size) => {
+        if (registeredPanels.current.has(side)) {
+            throw new Error(`Layout: Only one panel per side is allowed. ` +
+                `A panel is already registered on the "${side}" side.`);
+        }
+        // Check for axis conflict
+        const isHorizontal = side === 'left' || side === 'right';
+        const conflictingSides = isHorizontal
+            ? ['top', 'bottom']
+            : ['left', 'right'];
+        for (const conflictSide of conflictingSides) {
+            if (registeredPanels.current.has(conflictSide)) {
+                throw new Error(`Layout: Panels from different axes cannot be combined. ` +
+                    `Cannot register "${side}" panel when "${conflictSide}" panel exists. ` +
+                    `Use either horizontal (left/right) or vertical (top/bottom) panels.`);
+            }
+        }
+        registeredPanels.current.add(side);
+        setPanelSizes((prev) => {
+            if (prev[side] === size)
+                return prev;
+            return { ...prev, [side]: size };
+        });
+    }, []);
+    const unregisterPanel = useCallback((side) => {
+        registeredPanels.current.delete(side);
+        setPanelSizes((prev) => {
+            if (prev[side] === 0)
+                return prev;
+            return { ...prev, [side]: 0 };
+        });
+    }, []);
+    const updatePanelSize = useCallback((side, size) => {
+        setPanelSizes((prev) => {
+            // Only update if the size actually changed
+            if (prev[side] === size)
+                return prev;
+            return { ...prev, [side]: size };
+        });
+    }, []);
+    const setDragging = useCallback((dragging) => {
+        setIsDragging(dragging);
+    }, []);
+    const markReady = useCallback(() => {
+        setIsReady(true);
+    }, []);
+    const value = useMemo(() => ({
+        registerPanel,
+        unregisterPanel,
+        updatePanelSize,
+        setDragging,
+        markReady,
+        panelSizes,
+        isDragging,
+        isReady,
+        hasTransition,
+    }), [
+        registerPanel,
+        unregisterPanel,
+        updatePanelSize,
+        setDragging,
+        markReady,
+        panelSizes,
+        isDragging,
+        isReady,
+        hasTransition,
+    ]);
+    return (_jsx(LayoutContext.Provider, { value: value, children: children }));
+}
+/**
+ * Provider that resets the layout context for sub-components.
+ * Used to prevent panels in nested Layouts from affecting parent layouts.
+ */
+export function LayoutContextReset({ children }) {
+    return (_jsx(LayoutContext.Provider, { value: null, children: children }));
+}
+export const LayoutPanelContext = createContext(null);
+export function useLayoutPanelContext() {
+    return useContext(LayoutPanelContext);
+}
+
+        

package/es/components/content/Layout/LayoutFlex.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContent } from './LayoutContent';
+const FlexElement = tasty(LayoutContent, {
+    qa: 'LayoutFlex',
+    styles: {
+        flexShrink: 0,
+        flexGrow: 0,
+        Inner: {
+            display: 'flex',
+            flow: 'row',
+            padding: 0,
+        },
+    },
+});
+function LayoutFlex(props, ref) {
+    const { children, scrollbar = 'tiny', ...otherProps } = props;
+    return (_jsx(FlexElement, { ...otherProps, ref: ref, scrollbar: scrollbar, children: children }));
+}
+const _LayoutFlex = forwardRef(LayoutFlex);
+_LayoutFlex.displayName = 'Layout.Flex';
+export { _LayoutFlex as LayoutFlex };
+
+        

package/es/components/content/Layout/LayoutFooter.js

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContent } from './LayoutContent';
+const FooterElement = tasty(LayoutContent, {
+    as: 'footer',
+    qa: 'LayoutFooter',
+    role: 'contentinfo',
+    styles: {
+        border: 'top',
+        height: 'min 5x',
+        flexShrink: 0,
+        flexGrow: 0,
+        whiteSpace: 'nowrap',
+        Inner: {
+            display: 'flex',
+            flow: {
+                '': 'row nowrap',
+                inverted: 'row-reverse nowrap',
+            },
+            placeContent: 'center space-between',
+            placeItems: 'center stretch',
+            gap: '1x',
+        },
+    },
+});
+function LayoutFooter(props, ref) {
+    const { children, invertOrder, scrollbar = 'tiny', mods, ...otherProps } = props;
+    const finalMods = useMemo(() => ({
+        inverted: invertOrder,
+        ...mods,
+    }), [invertOrder, mods]);
+    return (_jsx(FooterElement, { ...otherProps, ref: ref, mods: finalMods, scrollbar: scrollbar, children: children }));
+}
+const _LayoutFooter = forwardRef(LayoutFooter);
+_LayoutFooter.displayName = 'Layout.Footer';
+export { _LayoutFooter as LayoutFooter };
+
+        

package/es/components/content/Layout/LayoutGrid.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { LayoutContent } from './LayoutContent';
+const GridElement = tasty(LayoutContent, {
+    qa: 'LayoutGrid',
+    styles: {
+        flexShrink: 0,
+        flexGrow: 0,
+        Inner: {
+            display: 'grid',
+            flow: 'row',
+            padding: 0,
+        },
+    },
+});
+function LayoutGrid(props, ref) {
+    const { children, scrollbar = 'tiny', columns, rows, template, ...otherProps } = props;
+    return (_jsx(GridElement, { ...otherProps, ref: ref, scrollbar: scrollbar, gridColumns: columns, gridRows: rows, gridTemplate: template, children: children }));
+}
+const _LayoutGrid = forwardRef(LayoutGrid);
+_LayoutGrid.displayName = 'Layout.Grid';
+export { _LayoutGrid as LayoutGrid };
+
+        

package/es/components/content/Layout/LayoutHeader.js

@@ -0,0 +1,106 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.96.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, } from 'react';
+import { SlashIcon } from '../../../icons/SlashIcon';
+import { tasty } from '../../../tasty';
+import { Link } from '../../actions/Link/Link';
+import { Text } from '../Text';
+import { useAutoTooltip } from '../use-auto-tooltip';
+import { LayoutContent } from './LayoutContent';
+const HeaderElement = tasty(LayoutContent, {
+    as: 'header',
+    qa: 'LayoutHeader',
+    styles: {
+        border: 'bottom',
+        flexShrink: 0,
+        flexGrow: 0,
+        Inner: {
+            display: 'grid',
+            gridTemplate: `
+        "breadcrumbs breadcrumbs breadcrumbs" auto
+        "title suffix extra" 1fr
+        "subtitle subtitle extra" auto
+        / max-content 1fr minmax(0, auto)
+      `,
+            gap: 0,
+            placeContent: 'stretch',
+            placeItems: 'center stretch',
+        },
+        Breadcrumbs: {
+            gridArea: 'breadcrumbs',
+            display: 'flex',
+            flow: 'row nowrap',
+            placeItems: 'center start',
+            gap: '0.5x',
+            preset: 't3',
+            color: '#dark-02',
+        },
+        Title: {
+            gridArea: 'title',
+            preset: {
+                '': 'h3',
+                'level=1': 'h1',
+                'level=2': 'h2',
+                'level=3': 'h3',
+                'level=4': 'h4',
+                'level=5': 'h5',
+                'level=6': 'h6',
+            },
+            color: '#dark',
+            margin: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+        Suffix: {
+            gridArea: 'suffix',
+            display: 'flex',
+            placeItems: 'center',
+        },
+        Extra: {
+            gridArea: 'extra',
+            display: 'flex',
+            placeItems: 'center',
+            placeSelf: 'end',
+            gap: '1x',
+            width: 'max 100%',
+        },
+        Subtitle: {
+            gridArea: 'subtitle',
+            preset: 't3',
+            color: '#dark-02',
+        },
+    },
+});
+function LayoutHeader(props, ref) {
+    const { title, level = 3, suffix, extra, subtitle, breadcrumbs, scrollbar = 'tiny', children, mods, ...otherProps } = props;
+    // Use auto tooltip for title overflow detection
+    const { labelRef, renderWithTooltip } = useAutoTooltip({
+        tooltip: true,
+        children: typeof title === 'string' ? title : undefined,
+    });
+    const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;
+    const renderBreadcrumbs = () => {
+        if (!hasBreadcrumbs)
+            return null;
+        return (_jsxs("div", { "data-element": "Breadcrumbs", children: [breadcrumbs.map(([label, href], index) => (_jsxs(Fragment, { children: [_jsx(Link, { to: href, children: label }), _jsx(SlashIcon, {})] }, href))), typeof title === 'string' && _jsx(Text, { color: "#dark-02", children: title })] }));
+    };
+    const renderTitle = (tooltipProps, tooltipRef) => {
+        if (!title)
+            return null;
+        const TitleTag = `h${level}`;
+        return (_jsx(TitleTag, { ref: tooltipRef, "data-element": "Title", "data-level": level, ...tooltipProps, children: _jsx("span", { ref: labelRef, children: title }) }));
+    };
+    return (_jsxs(HeaderElement, { ...otherProps, ref: ref, mods: { ...mods, level }, scrollbar: scrollbar, children: [renderBreadcrumbs(), renderWithTooltip(renderTitle, 'bottom'), suffix && _jsx("div", { "data-element": "Suffix", children: suffix }), extra && _jsx("div", { "data-element": "Extra", children: extra }), subtitle && _jsx("div", { "data-element": "Subtitle", children: subtitle }), children] }));
+}
+const _LayoutHeader = forwardRef(LayoutHeader);
+_LayoutHeader.displayName = 'Layout.Header';
+export { _LayoutHeader as LayoutHeader };
+
+