@kaizen/components 0.0.0-canary-rollup-20240408071509 → 0.0.0-canary-rollup--tree-shake-20240408080317

package/dist/esm/TitleBlockZen/subcomponents/MobileActions.mjs

@@ -14,181 +14,290 @@ import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from '../constants.mjs';
 import { isMenuGroupNotButton, convertSecondaryActionsToMenuItems } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import styles from './MobileActions.module.scss.mjs';
-
 var menuItemIsLink = function (item) {
-    return "href" in item;
+  return "href" in item;
 };
 var defaultActionIsLink = function (action) {
-    return "href" in action;
+  return "href" in action;
 };
 var defaultActionIsButton = function (action) {
-    return (!("href" in action) && "onClick" in action) || "component" in action;
+  return !("href" in action) && "onClick" in action || "component" in action;
 };
 var filterActions = function (menuItems, filterType) {
-    return menuItems.filter(function (item) {
-        return filterType === "link" ? menuItemIsLink(item) : !menuItemIsLink(item);
-    });
+  return menuItems.filter(function (item) {
+    return filterType === "link" ? menuItemIsLink(item) : !menuItemIsLink(item);
+  });
 };
 /** Returns a filtered array of TitleBlockMenuItem based on actionType
  * This is use to sort a selectively render the action into a specifc order
  */
 var renderPrimaryActionDrawerContent = function (primaryAction, actionType) {
-    if (!primaryAction)
-        return null;
-    if (isMenuGroupNotButton(primaryAction)) {
-        var filteredActions = filterActions(primaryAction.menuItems, actionType);
-        return filteredActions.map(function (item, idx) {
-            var itemType = menuItemIsLink(item) ? "link" : "action";
-            return (React.createElement(TitleBlockMenuItem, __assign({}, item, { key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx), "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx), "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx) })));
-        });
-    }
-    return null;
+  if (!primaryAction) return null;
+  if (isMenuGroupNotButton(primaryAction)) {
+    var filteredActions = filterActions(primaryAction.menuItems, actionType);
+    return filteredActions.map(function (item, idx) {
+      var itemType = menuItemIsLink(item) ? "link" : "action";
+      return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+        key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
+        "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
+        "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx)
+      }));
+    });
+  }
+  return null;
 };
 var renderDefaultLink = function (defaultAction) {
-    if (!defaultActionIsLink(defaultAction))
-        return;
-    if ("component" in defaultAction) {
-        return (React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, { key: "title-block-mobile-actions-default-link", "data-automation-id": "title-block-mobile-actions-default-link", "data-testid": "title-block-mobile-actions-default-link" })));
-    }
-    return (React.createElement(MenuItem, { href: defaultAction.href, label: defaultAction.label, icon: defaultAction.icon, disabled: defaultAction.disabled, key: "title-block-mobile-actions-default-link", "data-automation-id": "title-block-mobile-actions-default-link", "data-testid": "title-block-mobile-actions-default-link", id: defaultAction.id }));
+  if (!defaultActionIsLink(defaultAction)) return;
+  if ("component" in defaultAction) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, {
+      key: "title-block-mobile-actions-default-link",
+      "data-automation-id": "title-block-mobile-actions-default-link",
+      "data-testid": "title-block-mobile-actions-default-link"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(MenuItem, {
+    href: defaultAction.href,
+    label: defaultAction.label,
+    icon: defaultAction.icon,
+    disabled: defaultAction.disabled,
+    key: "title-block-mobile-actions-default-link",
+    "data-automation-id": "title-block-mobile-actions-default-link",
+    "data-testid": "title-block-mobile-actions-default-link",
+    id: defaultAction.id
+  });
 };
 var renderDefaultAction = function (defaultAction) {
-    if (!defaultActionIsLink(defaultAction)) {
-        return (React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, { key: "title-block-mobile-actions-default-action", "data-automation-id": "title-block-mobile-actions-default-action", "data-testid": "title-block-mobile-actions-default-action" })));
-    }
-    return null;
+  if (!defaultActionIsLink(defaultAction)) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultAction, {
+      key: "title-block-mobile-actions-default-action",
+      "data-automation-id": "title-block-mobile-actions-default-action",
+      "data-testid": "title-block-mobile-actions-default-action"
+    }));
+  }
+  return null;
 };
 var renderSecondaryActions = function (secondaryActions) {
-    if (!secondaryActions)
-        return null;
-    var secondaryActionMenuItems = convertSecondaryActionsToMenuItems(secondaryActions);
-    return secondaryActionMenuItems.map(function (item, idx) { return (React.createElement(TitleBlockMenuItem, __assign({}, item, { key: "title-block-mobile-actions-secondary-action-".concat(idx), "data-testid": "title-block-mobile-actions-secondary-action" }))); });
+  if (!secondaryActions) return null;
+  var secondaryActionMenuItems = convertSecondaryActionsToMenuItems(secondaryActions);
+  return secondaryActionMenuItems.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+      key: "title-block-mobile-actions-secondary-action-".concat(idx),
+      "data-testid": "title-block-mobile-actions-secondary-action"
+    }));
+  });
 };
 var renderSecondaryOverflowMenuItems = function (secondaryOverflowMenuItems) {
-    return secondaryOverflowMenuItems.map(function (item, idx) { return (React.createElement(TitleBlockMenuItem, __assign({}, item, { key: "title-block-mobile-actions-overflow-menu-item-".concat(idx), "data-testid": "title-block-mobile-actions-overflow-menu-item" }))); });
+  return secondaryOverflowMenuItems.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
+      key: "title-block-mobile-actions-overflow-menu-item-".concat(idx),
+      "data-testid": "title-block-mobile-actions-overflow-menu-item"
+    }));
+  });
 };
 var DrawerMenuContent = function (_a) {
-    var primaryAction = _a.primaryAction, defaultAction = _a.defaultAction, secondaryActions = _a.secondaryActions, secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
-    var showOtherActionsHeading = (defaultAction && defaultActionIsButton(defaultAction)) ||
-        secondaryActions ||
-        secondaryOverflowMenuItems;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MenuList, null,
-            primaryAction &&
-                renderPrimaryActionDrawerContent(primaryAction, "link"),
-            defaultAction && renderDefaultLink(defaultAction),
-            primaryAction &&
-                renderPrimaryActionDrawerContent(primaryAction, "action")),
-        (defaultAction || secondaryActions || secondaryOverflowMenuItems) && (React.createElement(MenuList, { heading: showOtherActionsHeading && React.createElement(MenuHeading, null, "Other actions") },
-            defaultAction && renderDefaultAction(defaultAction),
-            secondaryActions && renderSecondaryActions(secondaryActions),
-            secondaryOverflowMenuItems &&
-                renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems)))));
+  var primaryAction = _a.primaryAction,
+    defaultAction = _a.defaultAction,
+    secondaryActions = _a.secondaryActions,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
+  var showOtherActionsHeading = defaultAction && defaultActionIsButton(defaultAction) || secondaryActions || secondaryOverflowMenuItems;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, "link"), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, "action")), (defaultAction || secondaryActions || secondaryOverflowMenuItems) && ( /*#__PURE__*/React.createElement(MenuList, {
+    heading: showOtherActionsHeading && /*#__PURE__*/React.createElement(MenuHeading, null, "Other actions")
+  }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems))));
 };
 var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
-    if (drawerHandleLabelIconPosition === "end") {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: styles.drawerHandleLabelText, "data-testid": "drawer-handle-lable-text" }, label),
-            React.createElement(React.Fragment, null, icon && React.createElement("span", { className: styles.drawerHandleIcon }, icon))));
-    }
-    else {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(React.Fragment, null, icon && React.createElement("span", { className: styles.drawerHandleIcon }, icon)),
-            React.createElement("span", { className: styles.drawerHandleLabelText, "data-testid": "drawer-handle-lable-text" }, label)));
-    }
+  if (drawerHandleLabelIconPosition === "end") {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleLabelText,
+      "data-testid": "drawer-handle-lable-text"
+    }, label), /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleIcon
+    }, icon)));
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleIcon
+    }, icon)), /*#__PURE__*/React.createElement("span", {
+      className: styles.drawerHandleLabelText,
+      "data-testid": "drawer-handle-lable-text"
+    }, label));
+  }
 };
 var ButtonOrLink = function (_a) {
-    var action = _a.action, children = _a.children;
-    if (typeof action === "object" && "onClick" in action && "href" in action) {
-        return (React.createElement("a", { onClick: action.onClick, href: action.href, className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton), "data-testid": "title-block-mobile-actions-primary-button" }, children));
-    }
-    if (typeof action === "function") {
-        return (React.createElement("button", { type: "button", onClick: action, className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton), "data-testid": "title-block-mobile-actions-primary-button" }, children));
-    }
-    if (typeof action === "string") {
-        return (React.createElement("a", { href: action, className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton), "data-testid": "title-block-mobile-actions-primary-button" }, children));
-    }
-    // when there's no action (e.g. primary button is disabled)
-    return (React.createElement("button", { type: "button", className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton), "data-testid": "title-block-mobile-actions-primary-button" }, children));
+  var action = _a.action,
+    children = _a.children;
+  if (typeof action === "object" && "onClick" in action && "href" in action) {
+    return /*#__PURE__*/React.createElement("a", {
+      onClick: action.onClick,
+      href: action.href,
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  if (typeof action === "function") {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: action,
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  if (typeof action === "string") {
+    return /*#__PURE__*/React.createElement("a", {
+      href: action,
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  // when there's no action (e.g. primary button is disabled)
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton),
+    "data-testid": "title-block-mobile-actions-primary-button"
+  }, children);
 };
 var getAction = function (primaryAction) {
-    if (primaryAction && !primaryAction.disabled) {
-        if (primaryAction.onClick && primaryAction.href) {
-            return {
-                href: primaryAction.href,
-                onClick: primaryAction.onClick,
-            };
-        }
-        if (primaryAction.onClick) {
-            return primaryAction.onClick;
-        }
-        if (primaryAction.href) {
-            return primaryAction.href;
-        }
+  if (primaryAction && !primaryAction.disabled) {
+    if (primaryAction.onClick && primaryAction.href) {
+      return {
+        href: primaryAction.href,
+        onClick: primaryAction.onClick
+      };
+    }
+    if (primaryAction.onClick) {
+      return primaryAction.onClick;
+    }
+    if (primaryAction.href) {
+      return primaryAction.href;
     }
-    return undefined;
+  }
+  return undefined;
 };
 var DrawerHandle = function (_a) {
-    var primaryAction = _a.primaryAction, secondaryActions = _a.secondaryActions, defaultAction = _a.defaultAction, secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems, drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition, toggleDisplay = _a.toggleDisplay, isOpen = _a.isOpen;
-    var showDrawer = defaultAction || secondaryActions || secondaryOverflowMenuItems;
-    if (primaryAction) {
-        // If the primary action is a menu
-        if (isMenuGroupNotButton(primaryAction)) {
-            return (React.createElement("div", { className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton), "data-testid": "title-block-mobile-actions-drawer-handle" },
-                React.createElement("button", { type: "button", className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel), onClick: toggleDisplay, "aria-expanded": isOpen },
-                    primaryAction.label,
-                    React.createElement("span", { className: styles.mobileActionsChevronSquare }, isOpen ? (React.createElement(ChevronDownIcon, { role: "presentation" })) : (React.createElement(ChevronUpIcon, { role: "presentation" }))))));
-        }
-        // If the primary action is a button, or has no onClick/href/action
-        return (React.createElement("div", { className: classnames(styles.mobileActionsTopRow, !showDrawer && styles.mobileActionsTopRowSingleButton), "data-testid": "title-block-mobile-actions-drawer-handle" },
-            "component" in primaryAction ? (React.createElement(primaryAction.component, __assign({ className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton) }, primaryAction), primaryAction.label &&
-                renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))) : (React.createElement(ButtonOrLink, { action: getAction(primaryAction) }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))),
-            showDrawer && (React.createElement("button", { type: "button", className: styles.mobileActionsExpandButton, onClick: toggleDisplay, "aria-expanded": isOpen, id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID, "aria-label": "Other actions" }, isOpen ? (React.createElement(ChevronDownIcon, { role: "presentation" })) : (React.createElement(ChevronUpIcon, { role: "presentation" }))))));
-    }
-    // if there are default/secondary actions but no primary action
-    if (showDrawer) {
-        return (React.createElement("div", { className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton), "data-testid": "title-block-mobile-actions-drawer-handle" },
-            React.createElement("button", { type: "button", className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel), onClick: toggleDisplay, "aria-expanded": isOpen, id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID },
-                renderDrawerHandleLabel("Other actions"),
-                React.createElement("span", { className: styles.mobileActionsChevronSquare }, isOpen ? (React.createElement(ChevronDownIcon, { role: "presentation" })) : (React.createElement(ChevronUpIcon, { role: "presentation" }))))));
+  var primaryAction = _a.primaryAction,
+    secondaryActions = _a.secondaryActions,
+    defaultAction = _a.defaultAction,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+    drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+    toggleDisplay = _a.toggleDisplay,
+    isOpen = _a.isOpen;
+  var showDrawer = defaultAction || secondaryActions || secondaryOverflowMenuItems;
+  if (primaryAction) {
+    // If the primary action is a menu
+    if (isMenuGroupNotButton(primaryAction)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton),
+        "data-testid": "title-block-mobile-actions-drawer-handle"
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel),
+        onClick: toggleDisplay,
+        "aria-expanded": isOpen
+      }, primaryAction.label, /*#__PURE__*/React.createElement("span", {
+        className: styles.mobileActionsChevronSquare
+      }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        role: "presentation"
+      })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+        role: "presentation"
+      })))));
     }
-    return null;
+    // If the primary action is a button, or has no onClick/href/action
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.mobileActionsTopRow, !showDrawer && styles.mobileActionsTopRowSingleButton),
+      "data-testid": "title-block-mobile-actions-drawer-handle"
+    }, "component" in primaryAction ? ( /*#__PURE__*/React.createElement(primaryAction.component, __assign({
+      className: classnames(styles.mobileActionsPrimaryLabel, styles.mobileActionsPrimaryButton)
+    }, primaryAction), primaryAction.label && renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))) : ( /*#__PURE__*/React.createElement(ButtonOrLink, {
+      action: getAction(primaryAction)
+    }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition))), showDrawer && ( /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles.mobileActionsExpandButton,
+      onClick: toggleDisplay,
+      "aria-expanded": isOpen,
+      id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
+      "aria-label": "Other actions"
+    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation"
+    })))));
+  }
+  // if there are default/secondary actions but no primary action
+  if (showDrawer) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.mobileActionsTopRow, styles.mobileActionsTopRowSingleButton),
+      "data-testid": "title-block-mobile-actions-drawer-handle"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classnames(styles.mobileActionsExpandButton, styles.mobileActionsPrimaryLabel),
+      onClick: toggleDisplay,
+      "aria-expanded": isOpen,
+      id: TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
+    }, renderDrawerHandleLabel("Other actions"), /*#__PURE__*/React.createElement("span", {
+      className: styles.mobileActionsChevronSquare
+    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation"
+    })))));
+  }
+  return null;
 };
-var MobileActions = function (_a) {
-    var primaryAction = _a.primaryAction, defaultAction = _a.defaultAction, secondaryActions = _a.secondaryActions, secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems, drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition, _b = _a.autoHide, autoHide = _b === void 0 ? false : _b;
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var menuContent = React.createRef();
+const MobileActions = /*#__PURE__*/function () {
+  const MobileActions = function (_a) {
+    var primaryAction = _a.primaryAction,
+      defaultAction = _a.defaultAction,
+      secondaryActions = _a.secondaryActions,
+      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+      drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+      _b = _a.autoHide,
+      autoHide = _b === void 0 ? false : _b;
+    var _c = useState(false),
+      isOpen = _c[0],
+      setIsOpen = _c[1];
+    var menuContent = /*#__PURE__*/React.createRef();
     var toggleDisplay = function () {
-        setIsOpen(!isOpen);
+      setIsOpen(!isOpen);
     };
     // This callback handler will not run when autoHide === "off"
     var handleDocumentClickForAutoHide = useCallback(function (e) {
-        var _a;
-        if (isOpen &&
-            e.target instanceof Node &&
-            ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            setIsOpen(false);
-        }
+      var _a;
+      if (isOpen && e.target instanceof Node && ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        setIsOpen(false);
+      }
     }, [menuContent]);
     useEffect(function () {
+      if (autoHide) {
+        document.addEventListener("click", handleDocumentClickForAutoHide, true);
+      }
+      return function () {
         if (autoHide) {
-            document.addEventListener("click", handleDocumentClickForAutoHide, true);
+          document.removeEventListener("click", handleDocumentClickForAutoHide, true);
         }
-        return function () {
-            if (autoHide) {
-                document.removeEventListener("click", handleDocumentClickForAutoHide, true);
-            }
-        };
+      };
     }, [autoHide, handleDocumentClickForAutoHide]);
-    return (React.createElement("div", { className: classnames(styles.mobileActionsContainer, isOpen && styles.isOpen) },
-        React.createElement(FocusOn, { enabled: isOpen, scrollLock: false },
-            React.createElement(DrawerHandle, { primaryAction: primaryAction, secondaryActions: secondaryActions, defaultAction: defaultAction, secondaryOverflowMenuItems: secondaryOverflowMenuItems, drawerHandleLabelIconPosition: drawerHandleLabelIconPosition, toggleDisplay: toggleDisplay, isOpen: isOpen }),
-            (defaultAction ||
-                secondaryActions ||
-                secondaryOverflowMenuItems ||
-                (primaryAction && isMenuGroupNotButton(primaryAction))) && (React.createElement("div", { ref: menuContent, className: styles.mobileActionsMenuContainer },
-                React.createElement(DrawerMenuContent, { primaryAction: primaryAction, defaultAction: defaultAction, secondaryActions: secondaryActions, secondaryOverflowMenuItems: secondaryOverflowMenuItems }))))));
-};
-MobileActions.displayName = "MobileActions";
-
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.mobileActionsContainer, isOpen && styles.isOpen)
+    }, /*#__PURE__*/React.createElement(FocusOn, {
+      enabled: isOpen,
+      scrollLock: false
+    }, /*#__PURE__*/React.createElement(DrawerHandle, {
+      primaryAction: primaryAction,
+      secondaryActions: secondaryActions,
+      defaultAction: defaultAction,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+      drawerHandleLabelIconPosition: drawerHandleLabelIconPosition,
+      toggleDisplay: toggleDisplay,
+      isOpen: isOpen
+    }), (defaultAction || secondaryActions || secondaryOverflowMenuItems || primaryAction && isMenuGroupNotButton(primaryAction)) && ( /*#__PURE__*/React.createElement("div", {
+      ref: menuContent,
+      className: styles.mobileActionsMenuContainer
+    }, /*#__PURE__*/React.createElement(DrawerMenuContent, {
+      primaryAction: primaryAction,
+      defaultAction: defaultAction,
+      secondaryActions: secondaryActions,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems
+    })))));
+  };
+  MobileActions.displayName = "MobileActions";
+  return MobileActions;
+}();
 export { MobileActions };

package/dist/esm/TitleBlockZen/subcomponents/MobileActions.module.scss.mjs

@@ -1,3 +1,15 @@
-var styles = {"mobileActionsContainer":"MobileActions-module_mobileActionsContainer__ob6ML","slide-up":"MobileActions-module_slide-up__vX8Ad","isOpen":"MobileActions-module_isOpen__mmGTA","mobileActionsMenuContainer":"MobileActions-module_mobileActionsMenuContainer__a7LUt","mobileActionsTopRow":"MobileActions-module_mobileActionsTopRow__51iiz","mobileActionsTopRowSingleButton":"MobileActions-module_mobileActionsTopRowSingleButton__IB5x6","drawerHandleIcon":"MobileActions-module_drawerHandleIcon__z-Hp-","drawerHandleLabelText":"MobileActions-module_drawerHandleLabelText__UDIFl","mobileActionsPrimaryLabel":"MobileActions-module_mobileActionsPrimaryLabel__y-kgB","mobileActionsPrimaryButton":"MobileActions-module_mobileActionsPrimaryButton__5Ggbi","mobileActionsExpandButton":"MobileActions-module_mobileActionsExpandButton__shDFU","mobileActionsChevronSquare":"MobileActions-module_mobileActionsChevronSquare__u4OYT"};
-
+var styles = {
+  "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__ob6ML",
+  "slide-up": "MobileActions-module_slide-up__vX8Ad",
+  "isOpen": "MobileActions-module_isOpen__mmGTA",
+  "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__a7LUt",
+  "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__51iiz",
+  "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__IB5x6",
+  "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__z-Hp-",
+  "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__UDIFl",
+  "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__y-kgB",
+  "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__5Ggbi",
+  "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__shDFU",
+  "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__u4OYT"
+};
 export { styles as default };

package/dist/esm/TitleBlockZen/subcomponents/NavigationTabs.mjs

@@ -3,18 +3,30 @@ import React from 'react';
 import classnames from 'classnames';
 import { NON_REVERSED_VARIANTS } from '../utils.mjs';
 import styles from './NavigationTabs.module.scss.mjs';
-
 var isLight = function (variant) {
-    return variant !== undefined && NON_REVERSED_VARIANTS.includes(variant);
+  return variant !== undefined && NON_REVERSED_VARIANTS.includes(variant);
 };
-var NavigationTab = function (props) {
+const NavigationTab = /*#__PURE__*/function () {
+  const NavigationTab = function (props) {
     var className = classnames(styles.linkAnchor, isLight(props.variant) && styles.lightBackground, props.active && styles.active);
     if (props.render) {
-        var Component = props.render, otherProps = __rest(props, ["render"]);
-        return React.createElement(Component, __assign({}, otherProps, { className: className }));
+      var Component = props.render,
+        otherProps = __rest(props, ["render"]);
+      return /*#__PURE__*/React.createElement(Component, __assign({}, otherProps, {
+        className: className
+      }));
     }
-    return (React.createElement("a", { className: className, href: props.href, onClick: props.handleClick, id: props.id, "data-automation-id": props.automationId, "data-testid": props.automationId, "aria-current": props.active ? "page" : undefined }, props.text));
-};
-NavigationTab.displayName = "NavigationTab";
-
+    return /*#__PURE__*/React.createElement("a", {
+      className: className,
+      href: props.href,
+      onClick: props.handleClick,
+      id: props.id,
+      "data-automation-id": props.automationId,
+      "data-testid": props.automationId,
+      "aria-current": props.active ? "page" : undefined
+    }, props.text);
+  };
+  NavigationTab.displayName = "NavigationTab";
+  return NavigationTab;
+}();
 export { NavigationTab };

package/dist/esm/TitleBlockZen/subcomponents/NavigationTabs.module.scss.mjs

@@ -1,3 +1,7 @@
-var styles = {"container":"NavigationTabs-module_container__lK-HH","linkAnchor":"NavigationTabs-module_linkAnchor__oUsWX","active":"NavigationTabs-module_active__-38QW","lightBackground":"NavigationTabs-module_lightBackground__TR-5T"};
-
+var styles = {
+  "container": "NavigationTabs-module_container__lK-HH",
+  "linkAnchor": "NavigationTabs-module_linkAnchor__oUsWX",
+  "active": "NavigationTabs-module_active__-38QW",
+  "lightBackground": "NavigationTabs-module_lightBackground__TR-5T"
+};
 export { styles as default };