@kaizen/components 0.0.0-canary-04-titleblock-logic-20251211225600 → 0.0.0-canary-guidance-block-codemod-20251212045145

package/dist/esm/src/TitleBlock/subcomponents/MobileActions.mjs

@@ -0,0 +1,300 @@
+import { __assign } from 'tslib';
+import React, { useState, useCallback, useEffect } from 'react';
+import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
+import { Icon } from '../../Icon/Icon.mjs';
+import { MenuList, MenuHeading, MenuItem } from '../../MenuV1/index.mjs';
+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;
+};
+var defaultActionIsLink = function (action) {
+  return 'href' in action;
+};
+var defaultActionIsButton = function (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);
+  });
+};
+/** 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 /*#__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 /*#__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 /*#__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 /*#__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 /*#__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 _b, _c, _d;
+  var primaryAction = _a.primaryAction,
+    defaultAction = _a.defaultAction,
+    secondaryActions = _a.secondaryActions,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
+  var showOtherActionsHeading = (_c = (_b = defaultAction && defaultActionIsButton(defaultAction)) !== null && _b !== void 0 ? _b : secondaryActions) !== null && _c !== void 0 ? _c : secondaryOverflowMenuItems;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'link'), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'action')), ((_d = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _d !== void 0 ? _d : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(MenuList, {
+    heading: showOtherActionsHeading ? /*#__PURE__*/React.createElement(MenuHeading, null, "Other actions") : undefined
+  }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems))));
+};
+var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
+  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 /*#__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;
+    }
+  }
+  return undefined;
+};
+var DrawerHandle = function (_a) {
+  var _b;
+  var primaryAction = _a.primaryAction,
+    secondaryActions = _a.secondaryActions,
+    defaultAction = _a.defaultAction,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+    drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+    toggleDisplay = _a.toggleDisplay,
+    isOpen = _a.isOpen;
+  var showDrawer = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : 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
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
+        isPresentational: true
+      }))));
+    }
+    // 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"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
+      isPresentational: true
+    }))));
+  }
+  // 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
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
+      isPresentational: true
+    }))));
+  }
+  return null;
+};
+const MobileActions = /*#__PURE__*/function () {
+  const MobileActions = function (_a) {
+    var _b, _c;
+    var primaryAction = _a.primaryAction,
+      defaultAction = _a.defaultAction,
+      secondaryActions = _a.secondaryActions,
+      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+      drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+      _d = _a.autoHide,
+      autoHide = _d === void 0 ? false : _d;
+    var _e = useState(false),
+      isOpen = _e[0],
+      setIsOpen = _e[1];
+    var menuContent = /*#__PURE__*/React.createRef();
+    var toggleDisplay = function () {
+      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);
+      }
+    },
+    // @todo: Fix if possible - avoiding breaking in eslint upgrade
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [menuContent]);
+    useEffect(function () {
+      if (autoHide) {
+        document.addEventListener('click', handleDocumentClickForAutoHide, true);
+      }
+      return function () {
+        if (autoHide) {
+          document.removeEventListener('click', handleDocumentClickForAutoHide, true);
+        }
+      };
+    }, [autoHide, handleDocumentClickForAutoHide]);
+    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
+    }), ((_c = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems) !== null && _c !== void 0 ? _c : 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/src/TitleBlock/subcomponents/MobileActions.module.scss.mjs

@@ -0,0 +1,14 @@
+var styles = {
+  "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__XoepA",
+  "isOpen": "MobileActions-module_isOpen__D40v5",
+  "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__x--Eb",
+  "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__RXNFZ",
+  "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__5EjiI",
+  "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__q9ewm",
+  "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__MwJTA",
+  "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__8yfuH",
+  "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__Xsvo-",
+  "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__XuHNU",
+  "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__SPIsI"
+};
+export { styles as default };

package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs

@@ -6,64 +6,26 @@ import { Icon } from '../../Icon/Icon.mjs';
 import { Menu, MenuList } from '../../MenuV1/index.mjs';
 import styles from '../TitleBlock.module.scss.mjs';
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
-import { convertSecondaryActionsToMenuItems } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
 var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
-  if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.secondaryOverflowMenu
-  }, /*#__PURE__*/React.createElement(Menu, {
-    align: "right",
-    button: /*#__PURE__*/React.createElement(Button, {
-      secondary: true,
-      reversed: reversed,
-      label: "Menu",
-      "data-automation-id": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
-      "data-testid": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        name: "keyboard_arrow_down",
-        isPresentational: true
-      }),
-      iconPosition: 'end'
-    })
-  }, /*#__PURE__*/React.createElement(MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
-    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
-      key: i
-    }, menuItem));
-  }))));
-};
-// New: combined overflow menu (secondary actions converted + overflow menu items)
-var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
-  console.log('this is renderCombinedSecondaryOverflowMenu called');
-  var secondaryConverted = secondaryActions ? convertSecondaryActionsToMenuItems(secondaryActions) : [];
-  var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
-  console.log('this is secondaryConverted', secondaryConverted);
-  console.log('this is secondaryConverted:', secondaryConverted);
-  console.log('this is overflowItems:', overflowItems);
-  // Only render if we have at least one secondary action AND at least one overflow item to avoid duplicating single menus
-  // || overflowItems.length === 0
-  if (secondaryConverted.length === 0) return undefined;
-  var combined = __spreadArray(__spreadArray([], secondaryConverted, true), overflowItems, true);
-  console.log('this is combined:', combined);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.secondaryOverflowCombinedMenu
-  }, /*#__PURE__*/React.createElement(Menu, {
+  if (!secondaryOverflowMenuItems) return undefined;
+  return /*#__PURE__*/React.createElement(Menu, {
     align: "right",
     button: /*#__PURE__*/React.createElement(IconButton, {
-      label: "Open combined secondary + overflow menu",
+      label: "Open secondary menu",
       reversed: reversed,
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "more_horiz",
         isPresentational: true
       }),
-      id: "".concat(TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID, "__combined")
+      id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
     })
-  }, /*#__PURE__*/React.createElement(MenuList, null, combined.map(function (menuItem, i) {
+  }, /*#__PURE__*/React.createElement(MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
     return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
       key: i
     }, menuItem));
-  }))));
+  })));
 };
 // Unfortunately, you'll notice below, that I needed to use the array index,
 // against react best practices (https://reactjs.org/docs/lists-and-keys.html)
@@ -78,10 +40,9 @@ const SecondaryActions = /*#__PURE__*/function () {
     var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
       if ('menuItems' in action) {
         return {
-          key: "titleblock_secondary_action_".concat(i),
-          node: (/*#__PURE__*/React.createElement("div", {
-            className: styles.secondaryButtonContainer
-          }, /*#__PURE__*/React.createElement(Menu, {
+          key: "".concat(i),
+          // We shouldn't use an index here, see note above
+          node: (/*#__PURE__*/React.createElement(Menu, {
             align: "right",
             button: /*#__PURE__*/React.createElement(Button, {
               secondary: true,
@@ -97,7 +58,7 @@ const SecondaryActions = /*#__PURE__*/function () {
             return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
               key: i2
             }, menuItem));
-          })))))
+          }))))
         };
       } else {
         if ('onClick' in action && 'href' in action) {
@@ -106,28 +67,21 @@ const SecondaryActions = /*#__PURE__*/function () {
         }
         return {
           key: "".concat(i),
-          node: (/*#__PURE__*/React.createElement("div", {
-            className: styles.secondaryButtonContainer
-          }, /*#__PURE__*/React.createElement(Button, __assign({
+          // We shouldn't use an index here, see note above
+          node: (/*#__PURE__*/React.createElement(Button, __assign({
             secondary: true,
             reversed: reversed
           }, action, {
             "data-automation-id": "title-block-secondary-actions-button",
             "data-testid": "title-block-secondary-actions-button"
-          }))))
+          })))
         };
       }
     }) : [];
     var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
-    var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
-    console.log('SecondaryActions this is overflowMenu:', overflowMenu);
-    console.log('SecondaryActions this is combinedOverflowMenu :', combinedOverflowMenu);
-    var toolbarItems = __spreadArray(__spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
+    var toolbarItems = __spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
       key: 'overflowMenu',
       node: overflowMenu
-    }] : [], true), combinedOverflowMenu ? [{
-      key: 'combinedOverflowMenu',
-      node: combinedOverflowMenu
     }] : [], true);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.secondaryActionsContainer