@gooddata/sdk-ui-dashboard 11.40.0-alpha.3 → 11.40.0-alpha.5

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/presentation/filterBar/filterBar/DefaultDashboardFilterGroup.js

@@ -38,9 +38,14 @@ export function DefaultDashboardFilterGroup(props) {
     }, []);
     const isFilterActive = useCallback((filter) => {
         if (isFilterBarMeasureValueFilter(filter)) {
+            // Measure value filters have no working selection, so they always reflect the
+            // committed filter regardless of the apply mode.
             return !isAllDashboardMeasureValueFilter(filter.filter);
         }
-        const dashboardFilter = filter.filter;
+        // In apply-all-at-once mode the uncommitted (working) selection should be reflected in
+        // the group button subtitle immediately, without waiting for the Apply button. Fall back
+        // to the committed filter when there is no working selection.
+        const dashboardFilter = isApplyAllAtOnceEnabledAndSet && filter.workingFilter ? filter.workingFilter : filter.filter;
         if (isDashboardAttributeFilter(dashboardFilter)) {
             return getSelectedElementsCount(dashboardFilter) > 0;
         }
@@ -51,7 +56,7 @@ export function DefaultDashboardFilterGroup(props) {
             return dashboardFilter.matchAttributeFilter.literal.length > 0;
         }
         return true;
-    }, []);
+    }, [isApplyAllAtOnceEnabledAndSet]);
     const renderFilter = useCallback((filter, AttributeFilterComponent, MeasureValueFilterComponent) => {
         if (isFilterBarMeasureValueFilter(filter)) {
             const localId = dashboardFilterLocalIdentifier(filter.filter);

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.3",
+  "version": "11.40.0-alpha.5",
   "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.3",
-    "@gooddata/sdk-backend-spi": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui": "11.40.0-alpha.3",
-    "@gooddata/sdk-model": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-charts": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-ext": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-geo": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-kit": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-filters": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-pivot": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-vis-commons": "11.40.0-alpha.3",
-    "@gooddata/util": "11.40.0-alpha.3"
+    "@gooddata/sdk-backend-base": "11.40.0-alpha.5",
+    "@gooddata/sdk-backend-spi": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui": "11.40.0-alpha.5",
+    "@gooddata/sdk-model": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-charts": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-ext": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-filters": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-geo": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-kit": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-pivot": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-vis-commons": "11.40.0-alpha.5",
+    "@gooddata/util": "11.40.0-alpha.5"
   },
   "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.3",
-    "@gooddata/eslint-config": "11.40.0-alpha.3",
-    "@gooddata/oxlint-config": "11.40.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.3",
-    "@gooddata/reference-workspace": "11.40.0-alpha.3",
-    "@gooddata/stylelint-config": "11.40.0-alpha.3"
+    "@gooddata/eslint-config": "11.40.0-alpha.5",
+    "@gooddata/i18n-toolkit": "11.40.0-alpha.5",
+    "@gooddata/oxlint-config": "11.40.0-alpha.5",
+    "@gooddata/reference-workspace": "11.40.0-alpha.5",
+    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.5",
+    "@gooddata/stylelint-config": "11.40.0-alpha.5"
   },
   "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;