@splunk/dashboard-toolbar 29.3.4 → 29.4.0

package/index.js

@@ -149,7 +149,7 @@ __export(styled_components_exports, {
 });
 var defaultImport3 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+var styled_components_default = defaultImport3.default;
 
 // esm-externals:@splunk/react-ui/Button
 var Button_exports = {};
@@ -304,6 +304,9 @@ var StyledTransitionOpen = styled_components_default(TransitionOpen_default)`
     border-right: ${({ open }) => open ? "solid" : "none"};
     border-width: 0 1px 0 0;
     border-color: ${themes_exports.variables.interactiveColorBorder};
+    // this has to be done to avoid a random scrollbar showing up during the animation
+    ${({ $isAnimating }) => $isAnimating && "overflow: hidden;"}
+    max-width: fit-content;
 `;
 var ToolbarItemsWrapper = styled_components_default.div`
     display: flex;
@@ -338,10 +341,14 @@ var CollapsibleToolbar = ({
 }) => {
   const apiRegistry = (0, dashboard_context_exports.useApiRegistry)();
   const [expanded, setExpanded] = (0, react_exports.useState)(initialExpanded);
-  const handleExpandToggle = (0, react_exports.useCallback)(
-    () => setExpanded((prevExpanded) => !prevExpanded),
-    []
-  );
+  const [isAnimating, setIsAnimating] = (0, react_exports.useState)(true);
+  const handleExpandToggle = (0, react_exports.useCallback)(() => {
+    setIsAnimating(true);
+    setExpanded((prevExpanded) => !prevExpanded);
+  }, []);
+  const handleAnimationEnd = (0, react_exports.useCallback)(() => {
+    setIsAnimating(false);
+  }, []);
   const layoutType = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectLayoutType);
   const injectedToolbarItems = (0, react_exports.useMemo)(
     () => toolbarItems.map(
@@ -370,7 +377,16 @@ var CollapsibleToolbar = ({
       apiRegistry.removeToolbarApi();
     };
   }, [apiRegistry, handleExpandToggle]);
-  return /* @__PURE__ */ react_default.createElement(ToolbarWrapper, { "data-test": "dashboard-toolbar" }, /* @__PURE__ */ react_default.createElement(StyledTransitionOpen, { animation: "slideFromRight", open: expanded }, /* @__PURE__ */ react_default.createElement(ToolbarItemsWrapper, { "data-test": "toolbar-items" }, injectedToolbarItems)), /* @__PURE__ */ react_default.createElement(
+  return /* @__PURE__ */ react_default.createElement(ToolbarWrapper, { "data-test": "dashboard-toolbar" }, /* @__PURE__ */ react_default.createElement(
+    StyledTransitionOpen,
+    {
+      animation: "slideFromRight",
+      open: expanded,
+      onAnimationEnd: handleAnimationEnd,
+      $isAnimating: isAnimating
+    },
+    /* @__PURE__ */ react_default.createElement(ToolbarItemsWrapper, { "data-test": "toolbar-items" }, injectedToolbarItems)
+  ), /* @__PURE__ */ react_default.createElement(
     ExpandButton,
     {
       appearance: "subtle",
@@ -959,6 +975,9 @@ var Checkmark_default = "default" in defaultImport23 ? defaultImport23.default :
 var menuStyle = {
   minWidth: "150px"
 };
+var CheckmarkIcon = styled_components_default(Checkmark_default)`
+    color: ${themes_exports.variables.contentColorActive};
+`;
 var CheckmarkPlaceholder = styled_components_default.span`
     display: inline-block;
     width: 16px;
@@ -972,11 +991,23 @@ var Display = ({
   const hasGlobalInputs = ((_a = globalInputs == null ? void 0 : globalInputs.length) != null ? _a : 0) > 0;
   const areInputsCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGlobalItemsCollapsed);
   const showInputs = !areInputsCollapsed;
+  const description = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectDescription);
+  const { showTitleAndDescription = true } = (0, dashboard_state_exports.useSelector)(
+    dashboard_state_exports.selectLayoutGlobalOptions
+  );
+  const hasDescription = !!description && showTitleAndDescription;
+  const isDescriptionCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectIsDescriptionCollapsed);
+  const showDescription = !isDescriptionCollapsed;
   const handleInputsToggle = (0, react_exports.useCallback)(() => {
     dashboardApi == null ? void 0 : dashboardApi.setAreGlobalInputsCollapsed({
       collapsed: !areInputsCollapsed
     });
   }, [dashboardApi, areInputsCollapsed]);
+  const handleDescriptionToggle = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.setIsDescriptionCollapsed({
+      collapsed: !isDescriptionCollapsed
+    });
+  }, [dashboardApi, isDescriptionCollapsed]);
   const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
     isContentClickClose: true
   });
@@ -994,11 +1025,28 @@ var Display = ({
     ),
     [appearance]
   );
-  const checkmarkIcon = (0, react_exports.useMemo)(() => {
-    return showInputs ? /* @__PURE__ */ react_default.createElement(Checkmark_default, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
+  const inputsCheckmarkIcon = (0, react_exports.useMemo)(() => {
+    return showInputs ? /* @__PURE__ */ react_default.createElement(CheckmarkIcon, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
   }, [showInputs]);
+  const descriptionCheckmarkIcon = (0, react_exports.useMemo)(() => {
+    return showDescription ? /* @__PURE__ */ react_default.createElement(CheckmarkIcon, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
+  }, [showDescription]);
   const dropdownMenuChildren = (0, react_exports.useMemo)(() => {
     const items = [];
+    if (hasDescription) {
+      items.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            key: "description-item",
+            "data-test": "description-menu-item",
+            onClick: handleDescriptionToggle,
+            startAdornment: descriptionCheckmarkIcon
+          },
+          (0, i18n_exports._)("Dashboard description")
+        )
+      );
+    }
     if (hasGlobalInputs) {
       items.push(
         /* @__PURE__ */ react_default.createElement(
@@ -1007,14 +1055,21 @@ var Display = ({
             key: "inputs-item",
             "data-test": "inputs-menu-item",
             onClick: handleInputsToggle,
-            startAdornment: checkmarkIcon
+            startAdornment: inputsCheckmarkIcon
           },
           (0, i18n_exports._)("Inputs")
         )
       );
     }
     return items;
-  }, [hasGlobalInputs, handleInputsToggle, checkmarkIcon]);
+  }, [
+    hasDescription,
+    hasGlobalInputs,
+    handleDescriptionToggle,
+    handleInputsToggle,
+    descriptionCheckmarkIcon,
+    inputsCheckmarkIcon
+  ]);
   if (dropdownMenuChildren.length === 0) {
     return null;
   }
@@ -1080,6 +1135,10 @@ var EmptyVisualization_default = EmptyVisualization;
 
 // src/buttons/ExportDashboardButton.tsx
 var downloadIcon = /* @__PURE__ */ react_default.createElement(ArrowBroadUnderbarDown_default, null);
+var StyledButton = styled_components_default(Button_default)`
+    flex-shrink: 0;
+    flex-grow: 0;
+`;
 var ExportDashboardButton = ({
   appearance = "secondary",
   scale = 1
@@ -1093,7 +1152,7 @@ var ExportDashboardButton = ({
     setOpen(false);
   }, []);
   return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
-    Button_default,
+    StyledButton,
     {
       elementRef: buttonRef,
       icon: downloadIcon,
@@ -1125,6 +1184,24 @@ var defaultImport25 = __toESM(require("@splunk/react-icons/ChevronsOut"));
 __reExport(ChevronsOut_exports, require("@splunk/react-icons/ChevronsOut"));
 var ChevronsOut_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
+// src/hooks/useToolbarButtonClick.ts
+var useToolbarButtonClick = (event, onClick) => {
+  const dispatch = (0, dashboard_state_exports.useDispatch)();
+  return (0, react_exports.useCallback)(
+    (...args) => {
+      if (dispatch && event) {
+        dispatch(
+          (0, dashboard_state_exports.toolbarButtonClicked)({
+            event
+          })
+        );
+      }
+      onClick == null ? void 0 : onClick(...args);
+    },
+    [dispatch, event, onClick]
+  );
+};
+
 // src/buttons/Fullscreen.tsx
 var icon3 = prepareIcon({
   Icon: ChevronsOut_default,
@@ -1132,9 +1209,10 @@ var icon3 = prepareIcon({
 });
 var FullScreen = ({ dashboardApi }) => {
   const isFullscreen = !!(0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectFullscreenElement);
-  const handleClick = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
-  }, [dashboardApi]);
+  const enterFullscreen = (0, react_exports.useCallback)(() => __async(null, null, function* () {
+    yield dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
+  }), [dashboardApi]);
+  const handleClick = useToolbarButtonClick("fullscreen", enterFullscreen);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -1324,7 +1402,7 @@ var HelpButton = ({ helpLinks = [] }) => {
     }
     return helpLinks.map((link) => {
       const { label = "", description = "", url } = link;
-      const key = label.replace(/\s/g, "");
+      const key = label.replaceAll(/\s/g, "");
       return /* @__PURE__ */ react_default.createElement(
         Menu_default.Item,
         {
@@ -2174,6 +2252,7 @@ var StyledNumber = styled_components_default(Number_default)`
 var StyledEndAdornment = styled_components_default.span`
     color: ${themes_exports.variables.contentColorActive};
 `;
+var percentAdornment = /* @__PURE__ */ react_default.createElement(StyledEndAdornment, null, "%");
 var ZoomNumber = ({
   currentScale,
   onScaleChange
@@ -2200,7 +2279,7 @@ var ZoomNumber = ({
       min: 1,
       max: 1e4,
       roundTo: 0,
-      endAdornment: /* @__PURE__ */ react_default.createElement(StyledEndAdornment, null, "%"),
+      endAdornment: percentAdornment,
       hideStepButtons: true,
       "data-test": "zoom-number",
       append: true