@gooddata/sdk-ui-dashboard 11.60.0-alpha.3 → 11.60.0-alpha.4

package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeChrome.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// (C) 2026 GoodData Corporation
-import { useRef, useState, } from "react";
-import cx from "classnames";
-import { clamp } from "lodash-es";
-import { makeKeyboardNavigation, useCloseOnEscape } from "@gooddata/sdk-ui-kit";
-import { useResizableSidebar } from "./SidebarResizeContext.js";
-const KEYBOARD_STEP = 10;
-const handleSeparatorKeyboardNavigation = makeKeyboardNavigation({
-    shrink: [{ code: "ArrowLeft" }],
-    grow: [{ code: "ArrowRight" }],
-    minimize: [{ code: "Home" }],
-    maximize: [{ code: "End" }],
-});
-/**
- * Internal presentational wrapper that drives the dashboard sidebar drag-to-resize interaction.
- *
- * Owns only the live drag state (drag width — used for the dashed indicator transform — and drag
- * phase). The committed width, min/max, and the editor-canvas constraint live in the shared
- * {@link useResizableSidebar} state, so the same value also feeds the content area's width via the
- * `--gd-dashboard-sidebar-width` custom property.
- *
- * Renders `.gd-sidebar-container` itself so the resize handle can be positioned absolutely inside
- * it — that element is sticky+100vh, so the handle (and the grip centered inside it) tracks the
- * visible viewport rather than the full dashboard-root height.
- *
- * Drag uses `setPointerCapture` on the handle button so pointer events keep flowing to it even
- * when the cursor leaves the 6 px hit area. No DOM overlay or window-level listener is needed.
- *
- * @internal
- */
-export function SidebarResizeChrome({ onContainerClick, children, }) {
-    const [dragWidth, setDragWidth] = useState(null);
-    const dragOriginRef = useRef(null);
-    const { width, min, max, canResize, setWidth, isCollapsed } = useResizableSidebar();
-    const isDragging = dragWidth !== null;
-    // Tear down the drag without committing — used when the user presses Escape.
-    const endDrag = () => {
-        dragOriginRef.current = null;
-        setDragWidth(null);
-    };
-    useCloseOnEscape(isDragging, endDrag);
-    const handleKeyDown = handleSeparatorKeyboardNavigation({
-        shrink: () => setWidth(width - KEYBOARD_STEP),
-        grow: () => setWidth(width + KEYBOARD_STEP),
-        minimize: () => setWidth(min),
-        maximize: () => setWidth(max),
-    });
-    const handlePointerDown = (event) => {
-        event.preventDefault();
-        event.currentTarget.setPointerCapture(event.pointerId);
-        dragOriginRef.current = {
-            clientX: event.clientX,
-            width,
-            pointerId: event.pointerId,
-        };
-        setDragWidth(width);
-    };
-    const handlePointerMove = (event) => {
-        if (event.pointerId !== dragOriginRef.current?.pointerId) {
-            return;
-        }
-        const nextWidth = widthFromClientX(event.clientX);
-        if (nextWidth !== null) {
-            setDragWidth(nextWidth);
-        }
-    };
-    // Commit the last dragged width, then tear the drag down. onLostPointerCapture fires whenever the
-    // captured pointer is released for any reason — pointerup, pointercancel, or the pointer being
-    // lost (e.g. the mouse released outside the iframe/window) — so the final width is always
-    // persisted even if a plain pointerup never reaches us.
-    const handleLostPointerCapture = () => {
-        if (dragWidth !== null) {
-            setWidth(dragWidth);
-        }
-        endDrag();
-    };
-    const widthFromClientX = (clientX) => {
-        const origin = dragOriginRef.current;
-        if (!origin) {
-            return null;
-        }
-        return clamp(origin.width + (clientX - origin.clientX), min, max);
-    };
-    return (_jsx("div", { className: cx("gd-resizable-sidebar", {
-            "gd-resizable-sidebar--resizable": canResize,
-            "gd-resizable-sidebar--dragging": isDragging,
-        }), style: { width }, children: _jsxs("div", { className: cx("col gd-flex-item gd-sidebar-container gd-sidebar-container--resizable", {
-                "gd-sidebar-container--collapsed": isCollapsed,
-            }), onClick: onContainerClick, children: [children, _jsx("button", { type: "button", style: {
-                        "--drag-x": `${isDragging ? dragWidth : width}px`,
-                    }, className: cx("gd-resizable-sidebar__handle", {
-                        "gd-resizable-sidebar__handle--dragging": isDragging,
-                    }), disabled: !canResize, role: "separator", "aria-orientation": "vertical", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": width, onPointerDown: canResize ? handlePointerDown : undefined, onPointerMove: handlePointerMove, onLostPointerCapture: handleLostPointerCapture, onKeyDown: isDragging ? undefined : handleKeyDown, children: _jsx("span", { className: "gd-resizable-sidebar__handle-grip", "aria-hidden": "true" }) })] }) }));
-}

package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeContext.d.ts

@@ -1,42 +0,0 @@
-import { type ReactNode } from "react";
-interface IResizableSidebar {
-    width: number;
-    expandedWidth: number;
-    min: number;
-    max: number;
-    canResize: boolean;
-    setWidth: (width: number) => void;
-    canCollapse: boolean;
-    isCollapsed: boolean;
-    setCollapsed: (collapsed: boolean) => void;
-}
-/**
- * Computes the sidebar width state — both the drag-to-resize bounds and the collapsed/expanded
- * state of the panel. When the sidebar is neither resizable nor collapsible (not edit mode, both
- * features are off, or it is replaced by the enhanced insight picker) it returns the static
- * {@link STATIC_SIDEBAR} — no window resize listener, no width math.
- *
- * Reads the config store, so it must be called below the dashboard loading gate where the config is
- * initialized.
- *
- * @internal
- */
-export declare function useResizableSidebarState(): IResizableSidebar;
-/**
- * Shares the resize state produced by {@link useResizableSidebarState} with descendants such as the
- * resize handle, so it stays a single source of truth.
- *
- * @internal
- */
-export declare function ResizableSidebarProvider({ value, children, }: {
-    value: IResizableSidebar;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * Returns the sidebar resize state, or {@link NON_RESIZABLE_SIDEBAR} when the sidebar is not resizable.
- *
- * @internal
- */
-export declare function useResizableSidebar(): IResizableSidebar;
-export {};
-//# sourceMappingURL=SidebarResizeContext.d.ts.map

package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SidebarResizeContext.d.ts","sourceRoot":"","sources":["../../../../src/presentation/dashboard/DashboardSidebar/SidebarResizeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA2D,MAAM,OAAO,CAAC;AAwChG,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAmBD;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,IAAI,iBAAiB,CAwE5D;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACrC,KAAK,EACL,QAAQ,GACX,EAAE;IACC,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACvB,2CAEA;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,iBAAiB,CAEvD"}

package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeContext.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2026 GoodData Corporation
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { clamp } from "lodash-es";
-import { useLocalStorage } from "@gooddata/sdk-ui";
-import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
-import { selectIsAiMode, selectSettings } from "../../../model/store/config/configSelectors.js";
-import { selectIsInEditMode } from "../../../model/store/renderMode/renderModeSelectors.js";
-const SIDEBAR_MIN_WIDTH = 230;
-const SIDEBAR_MAX_WIDTH = 500;
-const SIDEBAR_COLLAPSED_WIDTH = 48;
-const EDITOR_MIN_WIDTH = 960;
-const WIDTH_STORAGE_KEY = "gd-dashboard-sidebar-width";
-const COLLAPSED_STORAGE_KEY = "gd-dashboard-sidebar-collapsed";
-/**
- * Returns the current `window.innerWidth`, kept in sync with the `resize` event. Only attaches the
- * listener while `active`, so a non-resizable sidebar triggers no resize-driven re-renders.
- */
-function useWindowWidth(active) {
-    const [width, setWidth] = useState(() => window.innerWidth);
-    useEffect(() => {
-        if (!active) {
-            return undefined;
-        }
-        setWidth(window.innerWidth);
-        const handleResize = () => setWidth(window.innerWidth);
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [active]);
-    return width;
-}
-// Stable value used whenever the sidebar is neither resizable nor collapsible: it is fixed at the
-// minimum width and ignores writes — so consumers never have to null-check.
-const STATIC_SIDEBAR = {
-    width: SIDEBAR_MIN_WIDTH,
-    expandedWidth: SIDEBAR_MIN_WIDTH,
-    min: SIDEBAR_MIN_WIDTH,
-    max: SIDEBAR_MIN_WIDTH,
-    canResize: false,
-    setWidth: () => { },
-    canCollapse: false,
-    isCollapsed: false,
-    setCollapsed: () => { },
-};
-const ResizableSidebarContext = createContext(STATIC_SIDEBAR);
-ResizableSidebarContext.displayName = "ResizableSidebarContext";
-/**
- * Computes the sidebar width state — both the drag-to-resize bounds and the collapsed/expanded
- * state of the panel. When the sidebar is neither resizable nor collapsible (not edit mode, both
- * features are off, or it is replaced by the enhanced insight picker) it returns the static
- * {@link STATIC_SIDEBAR} — no window resize listener, no width math.
- *
- * Reads the config store, so it must be called below the dashboard loading gate where the config is
- * initialized.
- *
- * @internal
- */
-export function useResizableSidebarState() {
-    const settings = useDashboardSelector(selectSettings);
-    const isEditMode = useDashboardSelector(selectIsInEditMode);
-    const isAiMode = useDashboardSelector(selectIsAiMode);
-    const isSidebarResizeEnabled = settings?.enableDashboardSidebarResize ?? false;
-    const enableEnhancedInsightPicker = settings?.enableEnhancedInsightPicker ?? false;
-    const isGenAiRightPanelEnabled = settings?.enableGenAiRightPanel ?? false;
-    const hasCreationPanel = isEditMode && !enableEnhancedInsightPicker;
-    const isResizable = hasCreationPanel && isSidebarResizeEnabled;
-    const canCollapse = hasCreationPanel && isGenAiRightPanelEnabled;
-    const containerWidth = useWindowWidth(isResizable);
-    const [persistedWidth, setPersistedWidth] = useLocalStorage(WIDTH_STORAGE_KEY, SIDEBAR_MIN_WIDTH);
-    const [persistedCollapsed, setPersistedCollapsed] = useLocalStorage(COLLAPSED_STORAGE_KEY, false);
-    useEffect(() => {
-        if (isAiMode) {
-            setPersistedCollapsed(true);
-        }
-    }, [isAiMode, setPersistedCollapsed]);
-    return useMemo(() => {
-        const max = clamp(containerWidth - EDITOR_MIN_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH);
-        const expandedWidth = isResizable ? clamp(persistedWidth, SIDEBAR_MIN_WIDTH, max) : SIDEBAR_MIN_WIDTH;
-        if (canCollapse && persistedCollapsed) {
-            return {
-                width: SIDEBAR_COLLAPSED_WIDTH,
-                expandedWidth,
-                min: SIDEBAR_COLLAPSED_WIDTH,
-                max: SIDEBAR_COLLAPSED_WIDTH,
-                canResize: false,
-                setWidth: () => { },
-                canCollapse,
-                isCollapsed: true,
-                setCollapsed: setPersistedCollapsed,
-            };
-        }
-        if (!isResizable) {
-            return canCollapse
-                ? { ...STATIC_SIDEBAR, canCollapse, setCollapsed: setPersistedCollapsed }
-                : STATIC_SIDEBAR;
-        }
-        return {
-            width: expandedWidth,
-            expandedWidth,
-            min: SIDEBAR_MIN_WIDTH,
-            max,
-            canResize: max > SIDEBAR_MIN_WIDTH,
-            // Clamp every write to the current bounds, so callers can't persist an out-of-range width and
-            // a non-resizable sidebar (max === min) collapses any value back to the minimum.
-            setWidth: (next) => setPersistedWidth(clamp(next, SIDEBAR_MIN_WIDTH, max)),
-            canCollapse,
-            isCollapsed: false,
-            setCollapsed: setPersistedCollapsed,
-        };
-    }, [
-        canCollapse,
-        persistedCollapsed,
-        setPersistedCollapsed,
-        isResizable,
-        containerWidth,
-        persistedWidth,
-        setPersistedWidth,
-    ]);
-}
-/**
- * Shares the resize state produced by {@link useResizableSidebarState} with descendants such as the
- * resize handle, so it stays a single source of truth.
- *
- * @internal
- */
-export function ResizableSidebarProvider({ value, children, }) {
-    return _jsx(ResizableSidebarContext.Provider, { value: value, children: children });
-}
-/**
- * Returns the sidebar resize state, or {@link NON_RESIZABLE_SIDEBAR} when the sidebar is not resizable.
- *
- * @internal
- */
-export function useResizableSidebar() {
-    return useContext(ResizableSidebarContext);
-}