@gooddata/sdk-ui-dashboard 10.12.0-alpha.41 → 10.12.0-alpha.43

package/styles/scss/visualizationSwitcherToolbar.scss

@@ -1,4 +1,5 @@
 // (C) 2024 GoodData Corporation
+@use "sass:color";
 @use "variables";
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 
@@ -122,10 +123,61 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0 15px;
         height: 40px;
         cursor: pointer;
 
+        .switcher-visualizations-list-item-content {
+            width: 100%;
+            padding: 0 0 0 15px;
+        }
+
+        .gd-vis-switcher-show-more-button {
+            display: none;
+            position: relative;
+            padding: 5px 14px;
+            border: 1px solid transparent;
+            outline: 0;
+            font: 700 14px/20px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+            height: 40px;
+            white-space: nowrap;
+            vertical-align: middle;
+            cursor: pointer;
+            text-align: left;
+            background: transparent;
+        }
+
+        &:not(.is-selected) {
+            .gd-vis-switcher-show-more-button {
+                // stylelint-disable-next-line max-nesting-depth
+                &:hover {
+                    background: var(--gd-palette-complementary-7, #ccd8e2);
+                    color: kit-variables.$gd-color-state-blank;
+                }
+            }
+        }
+        &.is-selected.is-active {
+            background-color: kit-variables.$gd-palette-primary-dimmed;
+
+            .gd-vis-switcher-show-more-button {
+                display: block;
+                background: var(
+                    --gd-palette-primary-dimmed50,
+                    color.mix(kit-variables.$gd-color-highlight, kit-variables.$default-gd-color-white, 30%)
+                );
+                color: var(--gd-palette-primary-0, #14b2e2);
+            }
+        }
+
+        &.is-active:not(.is-selected) {
+            background: kit-variables.$is-focused-background;
+
+            .gd-vis-switcher-show-more-button {
+                display: block;
+                background: var(--gd-palette-complementary-7, #ccd8e2);
+                color: kit-variables.$gd-color-state-blank;
+            }
+        }
+
         &:hover {
             background-color: kit-variables.$is-focused-background;
 
@@ -133,6 +185,11 @@
             .gd-vis-type {
                 color: kit-variables.$is-focused-color;
             }
+
+            .gd-vis-switcher-show-more-button {
+                display: block;
+                color: kit-variables.$gd-color-state-blank;
+            }
         }
 
         &.is-selected {
@@ -141,8 +198,30 @@
                 font-weight: 700;
                 color: var(--gd-palette-primary-0, #14b2e2);
             }
+
+            .gd-vis-switcher-show-more-button {
+                color: var(--gd-palette-primary-0, #14b2e2);
+            }
+
             &:hover {
                 background-color: kit-variables.$gd-palette-primary-dimmed;
+
+                // stylelint-disable-next-line max-nesting-depth
+                .gd-vis-switcher-show-more-button {
+                    color: var(--gd-palette-primary-0, #14b2e2);
+
+                    // stylelint-disable-next-line max-nesting-depth
+                    &:hover {
+                        background: var(
+                            --gd-palette-primary-dimmed50,
+                            color.mix(
+                                kit-variables.$gd-color-highlight,
+                                kit-variables.$default-gd-color-white,
+                                30%
+                            )
+                        );
+                    }
+                }
             }
         }
         .visualization-title {
@@ -161,3 +240,16 @@
         }
     }
 }
+
+.gd-vis-swicher-show-more-item-remove {
+    &:hover {
+        background-color: var(--gd-palette-error-lightest, #fff2f1);
+        color: kit-variables.$gd-palette-error-base;
+    }
+}
+
+.gd-vis-switcher-show-more-item {
+    &.is-disabled {
+        cursor: default;
+    }
+}

package/esm/presentation/widget/visualizationSwitcher/configuration/VisualizationsList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VisualizationsList.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/widget/visualizationSwitcher/configuration/VisualizationsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAEzF,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAevE,UAAU,uBAAuB;IAC7B,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9B,qBAAqB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,sBAAsB,EAAE,CAAC,qBAAqB,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,qBAAqB,EAAE,CAAC,qBAAqB,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0ChE,CAAC"}

package/esm/presentation/widget/visualizationSwitcher/configuration/VisualizationsList.js

@@ -1,36 +0,0 @@
-// (C) 2024 GoodData Corporation
-import { Button, InsightListItemTypeIcon, ShortenedText } from "@gooddata/sdk-ui-kit";
-import React from "react";
-import cx from "classnames";
-import { insightVisualizationType } from "@gooddata/sdk-model";
-import { selectInsightsMap, useDashboardSelector } from "../../../../model/index.js";
-const visualizationIconWidthAndPadding = 42;
-const tooltipAlignPoints = [
-    {
-        align: "cr cl",
-    },
-    {
-        align: "cl cr",
-        offset: {
-            x: -visualizationIconWidthAndPadding,
-            y: 0,
-        },
-    },
-];
-export const VisualizationsList = ({ visualizations, activeVisualizationId, onVisualizationDeleted, onVisualizationSelect, }) => {
-    const insightsMap = useDashboardSelector(selectInsightsMap);
-    return visualizations.map((visualization) => {
-        const insight = insightsMap.get(visualization.insight);
-        const isActive = visualization.identifier === activeVisualizationId;
-        return (React.createElement("div", { key: visualization.identifier, className: cx("switcher-visualizations-list-item", {
-                "is-selected": isActive,
-            }) },
-            React.createElement("div", { className: "visualization-title", onClick: () => onVisualizationSelect(visualization.identifier) },
-                insight ? React.createElement(InsightListItemTypeIcon, { type: insightVisualizationType(insight) }) : null,
-                React.createElement("div", { className: "gd-visualizations-list-item-content" },
-                    React.createElement("div", { className: "gd-visualizations-list-item-content-name" },
-                        React.createElement(ShortenedText, { className: "gd-visualizations-list-item-content-name-text", tooltipAlignPoints: tooltipAlignPoints }, visualization.title)))),
-            React.createElement(Button, { className: "gd-button-link gd-button-icon-only gd-icon-trash s-visualization-switcher-remove-button", onClick: () => onVisualizationDeleted(visualization.identifier) })));
-    });
-};
-//# sourceMappingURL=VisualizationsList.js.map

package/esm/presentation/widget/visualizationSwitcher/configuration/VisualizationsList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VisualizationsList.js","sourceRoot":"","sources":["../../../../../src/presentation/widget/visualizationSwitcher/configuration/VisualizationsList.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,EAAE,MAAM,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACtF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAA4B,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAGrF,MAAM,gCAAgC,GAAG,EAAE,CAAC;AAC5C,MAAM,kBAAkB,GAAG;IACvB;QACI,KAAK,EAAE,OAAO;KACjB;IACD;QACI,KAAK,EAAE,OAAO;QACd,MAAM,EAAE;YACJ,CAAC,EAAE,CAAC,gCAAgC;YACpC,CAAC,EAAE,CAAC;SACP;KACJ;CACJ,CAAC;AASF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAClE,cAAc,EACd,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,GACxB,EAAE,EAAE;IACD,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAE5D,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,QAAQ,GAAG,aAAa,CAAC,UAAU,KAAK,qBAAqB,CAAC;QAEpE,OAAO,CACH,6BACI,GAAG,EAAE,aAAa,CAAC,UAAU,EAC7B,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE;gBAC/C,aAAa,EAAE,QAAQ;aAC1B,CAAC;YAEF,6BACI,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,aAAa,CAAC,UAAU,CAAC;gBAE7D,OAAO,CAAC,CAAC,CAAC,oBAAC,uBAAuB,IAAC,IAAI,EAAE,wBAAwB,CAAC,OAAQ,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI;gBACvF,6BAAK,SAAS,EAAC,qCAAqC;oBAChD,6BAAK,SAAS,EAAC,0CAA0C;wBACrD,oBAAC,aAAa,IACV,SAAS,EAAC,+CAA+C,EACzD,kBAAkB,EAAE,kBAAkB,IAErC,aAAa,CAAC,KAAK,CACR,CACd,CACJ,CACJ;YACN,oBAAC,MAAM,IACH,SAAS,EAAC,yFAAyF,EACnG,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,aAAa,CAAC,UAAU,CAAC,GACjE,CACA,CACT,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC,CAAC"}