@kaizen/components 2.2.4 → 2.3.1

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

@@ -1,300 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/types/TitleBlock/subcomponents/MobileActions.d.ts

@@ -1,14 +0,0 @@
-import type { ButtonProps } from "../../Button";
-import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
-export type MobileActionsProps = {
-    primaryAction?: PrimaryActionProps;
-    defaultAction?: DefaultActionProps;
-    secondaryActions?: SecondaryActionsProps;
-    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
-    drawerHandleLabelIconPosition?: ButtonProps['iconPosition'];
-    autoHide?: boolean;
-};
-export declare const MobileActions: {
-    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, drawerHandleLabelIconPosition, autoHide, }: MobileActionsProps): JSX.Element;
-    displayName: string;
-};

package/src/TitleBlock/subcomponents/MobileActions.module.scss

@@ -1,208 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/layout';
-@import '~@kaizen/design-tokens/sass/border';
-@import '../../../styles/utils/legacy/layout';
-@import '../../../styles/utils/legacy/grid';
-@import '../../../styles/utils/layers';
-@import '../mixins';
-
-@layer kz-components {
-  $expand-button-width: 3.75rem;
-  $focus-spacing: 2px;
-  $focus-ring-border-width: 2px; // should be $border-focus-ring-border-width but CSS vars makes this hard
-  $space-for-focus-ring: ($focus-ring-border-width * 2) + ($focus-spacing * 2);
-  $slide-up-duration: 0.4s;
-
-  /* stylelint-disable no-descending-specificity */
-  .mobileActionsContainer {
-    display: none;
-    z-index: $ca-z-index-fixed;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-start-start-radius: $border-solid-border-radius;
-    border-start-end-radius: $border-solid-border-radius;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-    transition: $slide-up-duration ease;
-    animation: slide-up 1s ease;
-
-    &.isOpen {
-      transform: translateY(0%);
-
-      .mobileActionsMenuContainer {
-        visibility: visible;
-      }
-    }
-
-    @include title-block-small {
-      display: flex;
-    }
-  }
-
-  .mobileActionsTopRow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: $layout-mobile-actions-drawer-height;
-  }
-
-  .mobileActionsTopRow.mobileActionsTopRowSingleButton {
-    justify-content: center;
-  }
-
-  .mobileActionsMenuContainer {
-    visibility: hidden;
-    width: 100%;
-    background: $color-white;
-    padding: $spacing-xs 0;
-    transition: visibility $slide-up-duration;
-  }
-
-  .drawerHandleIcon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
-
-    .drawerHandleLabelText + & {
-      @include ca-margin($start: calc(#{$ca-grid} / 2));
-    }
-  }
-
-  .mobileActionsPrimaryLabel {
-    text-align: left;
-    text-decoration: none;
-    color: $color-white;
-    font-family: $typography-button-primary-font-family;
-    font-weight: $typography-button-primary-font-weight;
-    font-size: $typography-button-primary-font-size;
-    line-height: $typography-button-primary-line-height;
-    letter-spacing: $typography-button-primary-letter-spacing;
-
-    @include ca-padding($start: $ca-grid * 0.75);
-  }
-
-  .mobileActionsPrimaryButton,
-  .mobileActionsExpandButton {
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    border: 0;
-    box-sizing: border-box;
-    color: $color-white;
-    background-color: $color-blue-500;
-
-    &:focus {
-      background-color: $color-blue-600;
-      outline: none;
-    }
-
-    &:focus-visible {
-      height: $layout-mobile-actions-drawer-height - $space-for-focus-ring;
-
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2));
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-width: $focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        border-color: $color-blue-500;
-        inset: calc(-1 * #{$focus-ring-offset});
-      }
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // Full width versions
-  .mobileActionsPrimaryButton:only-child,
-  .mobileActionsExpandButton:only-child {
-    flex-basis: 100%;
-    border-start-start-radius: $border-solid-border-radius;
-    border-start-end-radius: $border-solid-border-radius;
-
-    &:focus-visible {
-      flex-basis: calc(100% - #{$space-for-focus-ring});
-
-      &::after {
-        border-start-start-radius: $border-focus-ring-border-radius;
-        border-start-end-radius: $border-focus-ring-border-radius;
-      }
-    }
-  }
-
-  // Non full width versions
-  .mobileActionsPrimaryButton:not(:only-child) {
-    flex: 0 0 calc(100% - #{$expand-button-width});
-
-    &:focus-visible {
-      flex-basis: calc(100% - #{$expand-button-width} - #{$space-for-focus-ring});
-      margin-left: $focus-ring-border-width * 2;
-      border-start-start-radius: $border-solid-border-radius;
-
-      & + .mobileActionsExpandButton {
-        border-color: $color-white;
-      }
-
-      &::after {
-        border-start-start-radius: $border-focus-ring-border-radius;
-      }
-    }
-  }
-
-  .mobileActionsExpandButton:not(:only-child) {
-    flex: 0 0 $expand-button-width;
-    border-left: 2px solid $color-blue-200;
-    justify-content: center;
-
-    &:focus-visible {
-      border-color: $color-white;
-      flex-basis: calc(#{$expand-button-width} - #{$space-for-focus-ring});
-      margin-right: $focus-ring-border-width * 2;
-      border-start-end-radius: $border-solid-border-radius;
-
-      &::after {
-        border-start-end-radius: $border-focus-ring-border-radius;
-      }
-    }
-  }
-
-  .mobileActionsChevronSquare {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: absolute;
-
-    @include ca-position($end: 20px);
-  }
-  /* stylelint-enable no-descending-specificity */
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translateY(100%);
-  }
-
-  50% {
-    transform: translateY(100%);
-  }
-
-  100% {
-    transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-  }
-}