@gooddata/sdk-ui-dashboard 11.32.0-alpha.1 → 11.32.0-alpha.2

package/styles/scss/dashboard.scss

@@ -32,6 +32,10 @@ $dashboard-menu-item-icon-color: var(--gd-palette-complementary-5-from-theme, #b
     flex-basis: 100%;
 }
 
+.gd-dashboards-root--floating-toolbar .dash-section {
+    position: relative;
+}
+
 .gd-dash-tabs {
     $root: &;
 

package/styles/scss/dragAndDrop.scss

@@ -875,3 +875,10 @@
         }
     }
 }
+
+// Overlay that covers the dashboard canvas when a filter is being dragged
+// in enhanced insight picker mode (floating toolbar).
+// Reuses .gd-dropzone-delete styles, only adds z-index for proper layering.
+.gd-filter-delete-overlay {
+    z-index: zIndexes.$drag-and-drop-drop-zone;
+}

package/styles/scss/floatingToolbar.scss

@@ -0,0 +1,174 @@
+// (C) 2026 GoodData Corporation
+
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "zIndexes";
+
+.gd-floating-toolbar {
+    position: fixed;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+    z-index: zIndexes.$toolbar-basic;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 15px;
+
+    background: var(--gd-palette-complementary-0, kit-variables.$default-gd-color-white);
+    border-radius: 3px;
+    border: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+
+    &__button {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 5px;
+        width: 75px;
+        padding: 3px;
+        border: 1px solid transparent;
+        border-radius: 2px;
+        background: transparent;
+        cursor: pointer;
+        transition:
+            background-color 0.15s ease,
+            border-color 0.15s ease;
+
+        &:hover {
+            background: var(--gd-palette-complementary-1, #f5f8fa);
+
+            .gd-floating-toolbar__button-label {
+                color: var(--gd-palette-complementary-8, #464e56);
+            }
+        }
+
+        &.is-dragging {
+            background: var(--gd-palette-complementary-1, #f5f8fa);
+            border-color: var(--gd-palette-complementary-3, #dde4eb);
+            box-shadow:
+                0 1px 3px 0 rgba(20, 57, 93, 0.1),
+                0 2px 9px 0 rgba(20, 57, 93, 0.15);
+
+            .gd-floating-toolbar__button-label {
+                color: var(--gd-palette-complementary-8, #464e56);
+            }
+        }
+
+        &--primary {
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                right: -5px;
+                top: 6px;
+                bottom: 6px;
+                width: 0;
+                border-right: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+            }
+
+            &.is-selected {
+                background: transparent;
+            }
+        }
+    }
+
+    &__button-label {
+        font-size: 11px;
+        line-height: 16px;
+        color: var(--gd-palette-complementary-6, #94a1ad);
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+    }
+}
+
+// Insight picker panel — floating above the toolbar, rendered inside a Dialog overlay.
+// Bottom edge is anchored; the panel grows upward as content loads.
+.gd-insight-picker-panel-overlay {
+    z-index: zIndexes.$toolbar-basic;
+
+    // Override Overlay's inline positioning on the wrapper — anchor bottom, grow upward
+    // stylelint-disable-next-line declaration-no-important
+    > .overlay-wrapper {
+        position: fixed !important; // stylelint-disable-line declaration-no-important
+        bottom: 120px !important; // stylelint-disable-line declaration-no-important
+        top: auto !important; // stylelint-disable-line declaration-no-important
+        left: 50% !important; // stylelint-disable-line declaration-no-important
+        transform: translateX(-50%);
+    }
+
+    // Override default .gd-dialog max-width/padding via container specificity
+    .gd-insight-picker-panel.gd-dialog {
+        max-width: none;
+        max-height: 430px;
+        padding: 10px 0;
+        background: var(--gd-palette-complementary-0, kit-variables.$default-gd-color-white);
+        border-radius: 3px;
+        border: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+    }
+}
+
+// Individual insight picker list item
+.gd-insight-picker-list-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px 10px;
+    cursor: grab;
+    background: var(--gd-palette-complementary-0, kit-variables.$default-gd-color-white);
+    overflow: hidden;
+
+    &:hover {
+        background: var(--gd-palette-complementary-1, #f5f8fa);
+    }
+
+    &.is-dragging {
+        opacity: 0.5;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 30px;
+
+        // Override sdk-ui-kit's %visualisation-icon margin — spacing handled by parent gap
+        .gd-vis-type,
+        [class*="gd-vis-type-"] {
+            margin-right: 0;
+        }
+    }
+
+    &__content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        line-height: 20px;
+        font-size: 14px;
+    }
+
+    &__title {
+        color: var(--gd-palette-complementary-8, #464e56);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__date {
+        color: var(--gd-palette-complementary-6, #94a1ad);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/styles/scss/main.scss

@@ -24,6 +24,7 @@
 @use "visualization";
 @use "shareIndicators";
 @use "sidebar";
+@use "floatingToolbar";
 @use "icons";
 @use "dateFilterConfigWarnings";
 @use "attributeFilterConfig"; // order is important here, must come after "icons"

package/esm/presentation/dragAndDrop/draggableWidget/AddKpiWidgetButton.d.ts

@@ -1,5 +0,0 @@
-export interface IAddAKpiPlaceholderProps {
-    disabled?: boolean;
-}
-export declare function AddKpiWidgetButton({ disabled }: IAddAKpiPlaceholderProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AddKpiWidgetButton.d.ts.map

package/esm/presentation/dragAndDrop/draggableWidget/AddKpiWidgetButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AddKpiWidgetButton.d.ts","sourceRoot":"","sources":["../../../../src/presentation/dragAndDrop/draggableWidget/AddKpiWidgetButton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,wBAAwB;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAMxE"}

package/esm/presentation/dragAndDrop/draggableWidget/AddKpiWidgetButton.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2022-2026 GoodData Corporation
-import cx from "classnames";
-import { FormattedMessage } from "react-intl";
-export function AddKpiWidgetButton({ disabled }) {
-    return (_jsx("div", { className: cx("add-item-placeholder", "add-kpi-placeholder", "s-add-kpi", { disabled }), children: _jsx(FormattedMessage, { id: "addPanel.kpi" }) }));
-}
-//# sourceMappingURL=AddKpiWidgetButton.js.map

package/esm/presentation/dragAndDrop/draggableWidget/AddKpiWidgetButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AddKpiWidgetButton.js","sourceRoot":"","sources":["../../../../src/presentation/dragAndDrop/draggableWidget/AddKpiWidgetButton.tsx"],"names":[],"mappings":";AAAA,qCAAqC;AAErC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAM9C,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAA4B,EAAE;IACvE,OAAO,CACH,cAAK,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,CAAC,YACxF,KAAC,gBAAgB,IAAC,EAAE,EAAC,cAAc,GAAG,GACpC,CACT,CAAC;AAAA,CACL"}