@gooddata/sdk-ui-dashboard 11.40.0-alpha.2 → 11.40.0-alpha.4

package/esm/__version.d.ts

@@ -1,3 +1,3 @@
-export declare const LIB_VERSION = "11.40.0-alpha.2";
+export declare const LIB_VERSION = "11.40.0-alpha.4";
 export declare const LIB_DESCRIPTION = "GoodData SDK - Dashboard Component";
 export declare const LIB_NAME = "@gooddata/sdk-ui-dashboard";

package/esm/__version.js

@@ -1,5 +1,5 @@
 // (C) 2021 GoodData Corporation
 // DO NOT CHANGE THIS FILE, IT IS RE-GENERATED ON EVERY BUILD
-export const LIB_VERSION = "11.40.0-alpha.2";
+export const LIB_VERSION = "11.40.0-alpha.4";
 export const LIB_DESCRIPTION = "GoodData SDK - Dashboard Component";
 export const LIB_NAME = "@gooddata/sdk-ui-dashboard";

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

@@ -8,5 +8,5 @@ export function DraggableInsightList({ recalculateSizeReference, searchAutofocus
     useEffect(() => {
         flexRef.current?.updateSize();
     }, [recalculateSizeReference]);
-    return (_jsx("div", { className: "gd-visualizations-list gd-flex-item-stretch gd-flex-row-container", children: _jsx(FlexDimensions, { ref: flexRef, measureHeight: true, measureWidth: false, className: "visualizations-flex-dimensions", children: _jsx(DraggableInsightListCore, { WrapInsightListItemWithDragComponent: WrapInsightListItemWithDragComponent, searchAutofocus: searchAutofocus, enableDescriptions: enableDescriptions }) }) }));
+    return (_jsx("div", { className: "gd-visualizations-list gd-flex-item-stretch gd-flex-row-container", children: _jsx(FlexDimensions, { ref: flexRef, measureHeight: true, measureWidth: true, className: "visualizations-flex-dimensions", children: _jsx(DraggableInsightListCore, { WrapInsightListItemWithDragComponent: WrapInsightListItemWithDragComponent, searchAutofocus: searchAutofocus, enableDescriptions: enableDescriptions }) }) }));
 }

package/esm/presentation/dashboard/DashboardSidebar/DraggableInsightList/DraggableInsightListItemWrapper.d.ts

@@ -7,5 +7,5 @@ interface IDraggableInsightListItemWrapperProps extends IInsightListItemProps {
     insight: IInsight;
 }
 export declare function DraggableInsightListItemBody(props: CustomDashboardInsightListItemComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare function DraggableInsightListItemWrapper({ WrapInsightListItemWithDragComponent, className, isLocked, title, description, showDescriptionPanel, type, updated, insight, onDescriptionPanelOpen, metadataTimeZone, useRichText, useReferences, LoadingComponent, filters }: IDraggableInsightListItemWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function DraggableInsightListItemWrapper({ WrapInsightListItemWithDragComponent, className, isLocked, title, description, showDescriptionPanel, type, updated, insight, onDescriptionPanelOpen, metadataTimeZone, useRichText, useReferences, LoadingComponent, filters, width }: IDraggableInsightListItemWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/presentation/dashboard/DashboardSidebar/DraggableInsightList/DraggableInsightListItemWrapper.js

@@ -5,7 +5,7 @@ export function DraggableInsightListItemBody(props) {
     const { className } = props;
     return (_jsx("div", { className: className, children: _jsx(InsightListItem, { ...props }) }));
 }
-export function DraggableInsightListItemWrapper({ WrapInsightListItemWithDragComponent, className, isLocked, title, description, showDescriptionPanel, type, updated, insight, onDescriptionPanelOpen, metadataTimeZone, useRichText, useReferences, LoadingComponent, filters, }) {
+export function DraggableInsightListItemWrapper({ WrapInsightListItemWithDragComponent, className, isLocked, title, description, showDescriptionPanel, type, updated, insight, onDescriptionPanelOpen, metadataTimeZone, useRichText, useReferences, LoadingComponent, filters, width, }) {
     return (_jsx(DraggableInsightListItem, { WrapInsightListItemWithDragComponent: WrapInsightListItemWithDragComponent, ListItemComponent: DraggableInsightListItemBody, listItemComponentProps: {
             className,
             isLocked,
@@ -20,5 +20,6 @@ export function DraggableInsightListItemWrapper({ WrapInsightListItemWithDragCom
             useReferences,
             LoadingComponent,
             filters,
+            width,
         }, insight: insight }));
 }

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

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
 import { useWidgetSelection } from "../../../model/react/useWidgetSelection.js";
 import { selectSettings } from "../../../model/store/config/configSelectors.js";
 import { CreationPanel } from "./CreationPanel.js";
 import { FloatingToolbar } from "./FloatingToolbar.js";
+import { SidebarResizeChrome } from "./SidebarResizeChrome.js";
 /**
  * @internal
  */
@@ -13,10 +14,16 @@ export function SidebarConfigurationPanel(props) {
     const DeleteDropZoneComponent = props.DeleteDropZoneComponent;
     const settings = useDashboardSelector(selectSettings);
     const enableEnhancedInsightPicker = settings?.enableEnhancedInsightPicker ?? false;
+    // const enableDashboardSidebarResize = settings?.enableDashboardSidebarResize ?? false;
+    const enableDashboardSidebarResize = true;
     if (enableEnhancedInsightPicker) {
         return _jsx(FloatingToolbar, {});
     }
-    return (_jsxs("div", { className: "col gd-flex-item gd-sidebar-container", onClick: deselectWidgets, children: [
+    const content = (_jsxs(_Fragment, { children: [
             _jsx("div", { className: "flex-panel-full-height", children: _jsx(CreationPanel, { className: configurationPanelClassName, WrapCreatePanelItemWithDragComponent: WrapCreatePanelItemWithDragComponent, WrapInsightListItemWithDragComponent: WrapInsightListItemWithDragComponent, AttributeFilterComponentSet: AttributeFilterComponentSet, InsightWidgetComponentSet: InsightWidgetComponentSet, RichTextWidgetComponentSet: RichTextWidgetComponentSet, VisualizationSwitcherWidgetComponentSet: VisualizationSwitcherWidgetComponentSet, DashboardLayoutWidgetComponentSet: DashboardLayoutWidgetComponentSet }) }), _jsx(DeleteDropZoneComponent, {})
         ] }));
+    if (enableDashboardSidebarResize) {
+        return _jsx(SidebarResizeChrome, { onContainerClick: deselectWidgets, children: content });
+    }
+    return (_jsx("div", { className: "col gd-flex-item gd-sidebar-container", onClick: deselectWidgets, children: content }));
 }

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

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from "react";
+/**
+ * Internal presentational wrapper that holds the dashboard sidebar drag-to-resize state.
+ *
+ * Owns: committed width (persisted to localStorage), live drag width (only used for the dashed
+ * indicator transform), drag phase, and a window-width tracker that enforces a minimum editor
+ * canvas width without overwriting the user's persisted preference.
+ *
+ * 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 declare function SidebarResizeChrome({ onContainerClick, children }: {
+    onContainerClick?: () => void;
+    children: ReactNode;
+}): ReactElement;

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useEffect, useRef, useState, } from "react";
+import cx from "classnames";
+import { clamp } from "lodash-es";
+import { useLocalStorage } from "@gooddata/sdk-ui";
+import { makeKeyboardNavigation, useCloseOnEscape } from "@gooddata/sdk-ui-kit";
+const SIDEBAR_MIN_WIDTH = 230;
+const SIDEBAR_MAX_WIDTH = 500;
+const EDITOR_MIN_WIDTH = 960;
+const KEYBOARD_STEP = 10;
+const LOCAL_STORAGE_KEY = "gd-dashboard-sidebar-width";
+const handleSeparatorKeyboardNavigation = makeKeyboardNavigation({
+    shrink: [{ code: "ArrowLeft" }],
+    grow: [{ code: "ArrowRight" }],
+    minimize: [{ code: "Home" }],
+    maximize: [{ code: "End" }],
+});
+/**
+ * Returns the current `window.innerWidth`, kept in sync with the `resize` event.
+ */
+function useWindowWidth() {
+    const [width, setWidth] = useState(() => window.innerWidth);
+    useEffect(() => {
+        const handleResize = () => setWidth(window.innerWidth);
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return width;
+}
+/**
+ * Internal presentational wrapper that holds the dashboard sidebar drag-to-resize state.
+ *
+ * Owns: committed width (persisted to localStorage), live drag width (only used for the dashed
+ * indicator transform), drag phase, and a window-width tracker that enforces a minimum editor
+ * canvas width without overwriting the user's persisted preference.
+ *
+ * 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 containerWidth = useWindowWidth();
+    const [persistedWidth, setPersistedWidth] = useLocalStorage(LOCAL_STORAGE_KEY, SIDEBAR_MIN_WIDTH);
+    const effectiveMax = clamp(containerWidth - EDITOR_MIN_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH);
+    const effectiveWidth = clamp(persistedWidth, SIDEBAR_MIN_WIDTH, effectiveMax);
+    const isDragging = dragWidth !== null;
+    const isResizable = effectiveMax > SIDEBAR_MIN_WIDTH;
+    const endDrag = () => {
+        dragOriginRef.current = null;
+        setDragWidth(null);
+    };
+    useCloseOnEscape(isDragging, endDrag);
+    const handleKeyDown = handleSeparatorKeyboardNavigation({
+        shrink: () => setPersistedWidth(clamp(effectiveWidth - KEYBOARD_STEP, SIDEBAR_MIN_WIDTH, effectiveMax)),
+        grow: () => setPersistedWidth(clamp(effectiveWidth + KEYBOARD_STEP, SIDEBAR_MIN_WIDTH, effectiveMax)),
+        minimize: () => setPersistedWidth(SIDEBAR_MIN_WIDTH),
+        maximize: () => setPersistedWidth(effectiveMax),
+    });
+    const handlePointerDown = (event) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragOriginRef.current = {
+            clientX: event.clientX,
+            width: effectiveWidth,
+            pointerId: event.pointerId,
+        };
+        setDragWidth(effectiveWidth);
+    };
+    const handlePointerMove = (event) => {
+        if (event.pointerId !== dragOriginRef.current?.pointerId) {
+            return;
+        }
+        const width = widthFromClientX(event.clientX);
+        if (width !== null) {
+            setDragWidth(width);
+        }
+    };
+    const handlePointerUp = (event) => {
+        if (event.pointerId !== dragOriginRef.current?.pointerId) {
+            return;
+        }
+        const width = widthFromClientX(event.clientX);
+        if (width !== null) {
+            setPersistedWidth(width);
+        }
+        endDrag();
+    };
+    const widthFromClientX = (clientX) => {
+        const origin = dragOriginRef.current;
+        if (!origin) {
+            return null;
+        }
+        return clamp(origin.width + (clientX - origin.clientX), SIDEBAR_MIN_WIDTH, effectiveMax);
+    };
+    return (_jsx("div", { className: cx("gd-resizable-sidebar", {
+            "gd-resizable-sidebar--resizable": isResizable,
+            "gd-resizable-sidebar--dragging": isDragging,
+        }), style: { width: effectiveWidth }, children: _jsxs("div", { className: "col gd-flex-item gd-sidebar-container gd-sidebar-container--resizable", onClick: onContainerClick, children: [children, _jsx("button", { type: "button", style: {
+                        "--drag-x": `${isDragging ? dragWidth : effectiveWidth}px`,
+                    }, className: cx("gd-resizable-sidebar__handle", {
+                        "gd-resizable-sidebar__handle--dragging": isDragging,
+                    }), disabled: !isResizable, role: "separator", "aria-orientation": "vertical", "aria-valuemin": SIDEBAR_MIN_WIDTH, "aria-valuemax": effectiveMax, "aria-valuenow": effectiveWidth, onPointerDown: isResizable ? handlePointerDown : undefined, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: endDrag, onKeyDown: isDragging ? undefined : handleKeyDown, children: _jsx("span", { className: "gd-resizable-sidebar__handle-grip", "aria-hidden": "true" }) })
+            ] }) }));
+}

package/esm/presentation/dragAndDrop/types.d.ts

@@ -328,6 +328,7 @@ export type CustomDashboardInsightListItemComponentProps = {
     useRichText?: boolean;
     useReferences?: boolean;
     LoadingComponent?: ComponentType;
+    width?: number;
 };
 /**
  * @internal

package/esm/sdk-ui-dashboard.d.ts

@@ -1764,6 +1764,7 @@ export declare type CustomDashboardInsightListItemComponentProps = {
     useRichText?: boolean;
     useReferences?: boolean;
     LoadingComponent?: ComponentType;
+    width?: number;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-dashboard",
-  "version": "11.40.0-alpha.2",
+  "version": "11.40.0-alpha.4",
   "description": "GoodData SDK - Dashboard Component",
   "license": "LicenseRef-LICENSE",
   "author": "GoodData Corporation",
@@ -60,19 +60,19 @@
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
     "uuid": "11.1.0",
-    "@gooddata/sdk-backend-base": "11.40.0-alpha.2",
-    "@gooddata/sdk-backend-spi": "11.40.0-alpha.2",
-    "@gooddata/sdk-model": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-charts": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-ext": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-filters": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-geo": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-kit": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-pivot": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.2",
-    "@gooddata/sdk-ui-vis-commons": "11.40.0-alpha.2",
-    "@gooddata/util": "11.40.0-alpha.2"
+    "@gooddata/sdk-backend-base": "11.40.0-alpha.4",
+    "@gooddata/sdk-backend-spi": "11.40.0-alpha.4",
+    "@gooddata/sdk-model": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-charts": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-ext": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-filters": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-geo": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-kit": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-pivot": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-vis-commons": "11.40.0-alpha.4",
+    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.4",
+    "@gooddata/util": "11.40.0-alpha.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -106,9 +106,9 @@
     "eslint-plugin-sonarjs": "3.0.6",
     "happy-dom": "18.0.1",
     "npm-run-all": "^4.1.5",
-    "oxfmt": "0.45.0",
-    "oxlint": "^1.43.0",
-    "oxlint-tsgolint": "0.11.4",
+    "oxfmt": "0.52.0",
+    "oxlint": "1.51.0",
+    "oxlint-tsgolint": "0.15.0",
     "raf": "3.4.1",
     "react": "19.1.1",
     "react-dom": "19.1.1",
@@ -116,14 +116,14 @@
     "stylelint": "^16.26.1",
     "svgo": "^2.8.0",
     "typescript": "5.9.3",
-    "vitest": "4.1.0",
+    "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/i18n-toolkit": "11.40.0-alpha.2",
-    "@gooddata/eslint-config": "11.40.0-alpha.2",
-    "@gooddata/oxlint-config": "11.40.0-alpha.2",
-    "@gooddata/reference-workspace": "11.40.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.2",
-    "@gooddata/stylelint-config": "11.40.0-alpha.2"
+    "@gooddata/eslint-config": "11.40.0-alpha.4",
+    "@gooddata/i18n-toolkit": "11.40.0-alpha.4",
+    "@gooddata/oxlint-config": "11.40.0-alpha.4",
+    "@gooddata/reference-workspace": "11.40.0-alpha.4",
+    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.4",
+    "@gooddata/stylelint-config": "11.40.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/styles/css/main.css

@@ -30783,6 +30783,79 @@ figure {
   height: 100vh;
   border-right: 1px solid var(--gd-palette-complementary-3, #dde4eb);
 }
+.gd-sidebar-container--resizable {
+  min-width: 230px;
+  width: 100%;
+}
+
+.gd-resizable-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+.gd-resizable-sidebar--dragging, .gd-resizable-sidebar:has(.gd-resizable-sidebar__handle:focus) {
+  z-index: 9999;
+}
+.gd-resizable-sidebar__handle {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  transform: translateX(calc(var(--drag-x, 0) - 50%));
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 6px;
+  background: transparent;
+  border: 0;
+  cursor: col-resize;
+  touch-action: none;
+}
+.gd-resizable-sidebar__handle:focus {
+  outline: none;
+}
+.gd-resizable-sidebar__handle:disabled {
+  cursor: initial;
+}
+.gd-resizable-sidebar__handle--dragging {
+  opacity: 1;
+}
+.gd-resizable-sidebar--resizable:hover .gd-resizable-sidebar__handle, .gd-resizable-sidebar--resizable:focus-within .gd-resizable-sidebar__handle {
+  opacity: 1;
+}
+.gd-resizable-sidebar__handle-grip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 25px;
+  padding: 5px 3px;
+  background: var(--gd-palette-complementary-0);
+  border: 1px solid var(--gd-palette-complementary-5);
+  border-radius: 2px;
+}
+.gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip {
+  border: 2px solid #14b2e2;
+  border-radius: 3px;
+}
+.gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip::after, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+  width: 2px;
+  background: #14b2e2;
+  box-shadow: 0 0 0 4px var(--gd-palette-primary-base-t85, rgba(20, 178, 226, 0.15));
+}
+
+body:has(.gd-resizable-sidebar--dragging),
+body:has(.gd-resizable-sidebar--dragging) * {
+  cursor: col-resize;
+}
 
 .add-item-panel {
   padding: 0 7px;