carbon-react 153.8.0 → 154.1.0

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js

@@ -0,0 +1,307 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { StyledIcon, StyledMenuItemContent, StyledNestedMenu, StyledResponsiveMenuAction, StyledResponsiveMenuItem } from "./responsive-vertical-menu-item.style";
+import { IncreaseDepth, useDepth } from "../__internal__/depth.context";
+import { useMenuFocus } from "../__internal__/focus.context";
+import { useResponsiveVerticalMenu } from "../responsive-vertical-menu.context";
+import Icon from "../../../icon";
+import guid from "../../../../__internal__/utils/helpers/guid";
+
+// Standard TS pattern for overriding props
+
+// Context to hold the parent item ID
+const ParentItemContext = /*#__PURE__*/createContext(undefined);
+// Renders the actual content of the menu item
+const MenuItemContent = ({
+  customIcon,
+  depth,
+  hasChildren,
+  icon,
+  label,
+  responsive
+}) => {
+  // If a custom icon is provided, render it with the label
+  // Otherwise, render the provided icon with the label.
+  // If no icon is provided, render the label only.
+  return customIcon ? /*#__PURE__*/React.createElement(StyledMenuItemContent, {
+    "data-component": "responsive-vertical-menu-custom-icon",
+    "data-role": "responsive-vertical-menu-custom-icon",
+    depth: depth,
+    hasChildren: hasChildren,
+    icon: true,
+    responsive: responsive
+  }, customIcon, label) : /*#__PURE__*/React.createElement(StyledMenuItemContent, {
+    "data-component": "responsive-vertical-menu-icon",
+    "data-role": "responsive-vertical-menu-icon",
+    depth: depth,
+    hasChildren: hasChildren,
+    icon: !!icon,
+    responsive: responsive
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }), label);
+};
+
+// Base component for the menu item
+const BaseItem = /*#__PURE__*/forwardRef(({
+  children,
+  customIcon,
+  icon,
+  id,
+  href,
+  label,
+  ...rest
+}, ref) => {
+  const {
+    activeMenuItem,
+    containerRef,
+    responsiveMode,
+    setActiveMenuItem,
+    reducedMotion
+  } = useResponsiveVerticalMenu();
+  const {
+    expandItem,
+    focusItem,
+    getRegisteredItems,
+    moveFocus,
+    registerMenuItem
+  } = useMenuFocus();
+  const depth = useDepth();
+  const isActive = activeMenuItem?.id === id;
+  const hasChildren = React.Children.count(children) > 0;
+  const parentId = useContext(ParentItemContext);
+  const responsiveDisplay = useMemo(() => responsiveMode && depth === 0, [depth, responsiveMode]);
+  const [expanded, setExpanded] = useState(responsiveDisplay && hasChildren);
+
+  // Register the menu item with the focus context
+  // We can do this here as well as in the wrapping component to ensure
+  // that the item is registered even if it is used as-is (as opposed to
+  // via ResponsiveVerticalMenuItem).
+  useEffect(() => {
+    registerMenuItem(id, ref, parentId);
+  }, [id, parentId, ref, registerMenuItem]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = e => {
+    // Store a list of siblings
+    let siblings;
+    let siblingsAtDepth;
+    switch (e.key) {
+      case "Tab":
+        siblingsAtDepth = containerRef.current?.querySelectorAll(`[data-depth="${depth}"]`) || /* istanbul ignore next */[];
+        siblings = Array.from(siblingsAtDepth);
+
+        // Primary-level menu items
+        if (depth === 0 && hasChildren && activeMenuItem?.id === id) {
+          e.preventDefault();
+          // If the item is active and has children, move focus to the first/last child, based on whether the Shift key is pressed or not
+          moveFocus(!e.shiftKey ? "firstChild" : "lastChild");
+        }
+
+        // Secondary-level menu items
+        if (depth === 1) {
+          const currentIndex = siblings.findIndex(el => el.id === id);
+          const isLastSibling = currentIndex === siblings.length - 1;
+          const isFirstSibling = currentIndex === 0;
+
+          // If the item is the last sibling and has no children (or it does but isn't expanded), move focus to the parent when forward-tabbing
+          /* istanbul ignore else */
+          if (isLastSibling && (!hasChildren || hasChildren && !expanded)) {
+            if (!e.shiftKey) {
+              e.preventDefault();
+              moveFocus("parent");
+            }
+          }
+
+          // If the item is the first sibling and shift is pressed, move focus to the parent
+          if (isFirstSibling && e.shiftKey) {
+            e.preventDefault();
+            moveFocus("parent");
+          }
+        }
+
+        // Tertiary-level menu items
+        if (depth === 2) {
+          const currentIndex = siblings.findIndex(el => el.id === id);
+          const isLastSibling = currentIndex === siblings.length - 1;
+
+          /* istanbul ignore else */
+          if (isLastSibling) {
+            // If the item is the last sibling, find the grand-parent in the menu hierarchy
+            const allMenuItems = getRegisteredItems();
+            const parent = allMenuItems.find(item => item.id === parentId);
+            const grandParent = allMenuItems.find(item => item.id === parent?.parentId);
+
+            /* istanbul ignore else */
+            if (grandParent) {
+              // Check if the parent is the last sibling under the grand-parent
+              const parentSiblings = Array.from(containerRef.current?.querySelectorAll(`[data-depth="${depth - 1}"]`) || /* istanbul ignore next */[]);
+              const parentIsLastSibling = parentSiblings.findIndex(el => el.id === parentId) === parentSiblings.length - 1;
+
+              // If the parent is the last sibling and shift is not pressed, move focus to the grand-parent
+              if (parentIsLastSibling && !e.shiftKey) {
+                e.preventDefault();
+                focusItem(grandParent.id);
+              }
+            }
+          }
+        }
+        break;
+
+      // Handle activation keys
+      case "Enter":
+      case " ":
+        e.preventDefault();
+
+        // If in responsive mode, do not toggle the menu
+        /* istanbul ignore if */
+        if (responsiveDisplay) return;
+
+        /* istanbul ignore else */
+        if (hasChildren) {
+          // Toggle expanded state if not in responsive mode
+          if (depth === 0 && !responsiveMode) {
+            const itemToggled = activeMenuItem?.id === id;
+            const newActiveMenuItem = itemToggled ? null : {
+              id,
+              label,
+              children
+            };
+            // Set the active menu item
+            setActiveMenuItem(newActiveMenuItem);
+          } else {
+            // Expand the menu
+            setExpanded(!expanded);
+            expandItem(id, !expanded);
+          }
+        } else if (href && e.key === "Enter") {
+          // If no children, navigate to the href. Can only be activated with Enter key,
+          // as per accessibility guidelines.
+          window.location.href = href;
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  const handleClick = () => {
+    // If in responsive mode, do not toggle the menu
+    if (responsiveDisplay) return;
+
+    // Mimic the behavior of the Enter key as defined in the handleKeyDown function
+    if (depth === 0 && !responsiveMode) {
+      const itemToggled = activeMenuItem?.id === id;
+      const newActiveMenuItem = itemToggled ? null : {
+        id,
+        label,
+        children
+      };
+      setActiveMenuItem(newActiveMenuItem);
+    } else {
+      setExpanded(!expanded);
+      expandItem(id, !expanded);
+    }
+    // Focus the clicked item
+    focusItem(id);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasChildren ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledResponsiveMenuItem, _extends({
+    active: isActive,
+    "aria-expanded": isActive || expanded,
+    "data-component": `responsive-vertical-menu-item-${id}`,
+    "data-depth": depth,
+    "data-role": `responsive-vertical-menu-item-${id}`,
+    depth: depth,
+    hasIcon: !!icon || !!customIcon,
+    id: id,
+    onClick: handleClick,
+    onKeyDown: e => {
+      /* istanbul ignore else */
+      if (!responsiveMode) {
+        handleKeyDown(e);
+      }
+    },
+    onFocus: () => focusItem(id),
+    ref: ref,
+    responsive: responsiveMode,
+    tabIndex: responsiveDisplay ? -1 : 0,
+    type: "button"
+  }, rest), /*#__PURE__*/React.createElement(MenuItemContent, {
+    customIcon: customIcon,
+    depth: depth,
+    hasChildren: true,
+    icon: icon,
+    label: label,
+    responsive: responsiveMode
+  }), !responsiveDisplay && /*#__PURE__*/React.createElement(StyledIcon, {
+    "data-component": "responsive-vertical-menu-expander-icon",
+    "data-role": "responsive-vertical-menu-expander-icon",
+    depth: depth,
+    expanded: expanded || isActive,
+    reduceMotion: !!reducedMotion,
+    type: depth >= 1 ? "chevron_down_thick" : "chevron_right_thick"
+  })), expanded && /*#__PURE__*/React.createElement(StyledNestedMenu, {
+    "data-component": `${id}-nested-menu`,
+    "data-role": `${id}-nested-menu`,
+    depth: depth,
+    hasIcon: !!icon || !!customIcon,
+    id: `${id}-nested-menu`,
+    responsive: responsiveMode
+  }, /*#__PURE__*/React.createElement(ParentItemContext.Provider, {
+    value: id
+  }, children))) : /*#__PURE__*/React.createElement(StyledResponsiveMenuAction, _extends({
+    "data-component": `responsive-vertical-menu-item-${id}`,
+    "data-depth": depth,
+    "data-role": `responsive-vertical-menu-item-${id}`,
+    depth: depth,
+    href: href,
+    id: id,
+    onFocus: () => focusItem(id),
+    onKeyDown: e => {
+      /* istanbul ignore else */
+      if (!responsiveMode) {
+        handleKeyDown(e);
+      }
+    },
+    ref: ref,
+    responsive: responsiveMode,
+    tabIndex: 0
+  }, rest), /*#__PURE__*/React.createElement(MenuItemContent, {
+    customIcon: customIcon,
+    depth: depth,
+    hasChildren: false,
+    icon: icon,
+    label: label,
+    responsive: responsiveMode
+  })));
+});
+
+// Main component for the responsive vertical menu item
+export const ResponsiveVerticalMenuItem = ({
+  children,
+  id,
+  label,
+  ...props
+}) => {
+  const depth = useDepth();
+  const itemRef = useRef(null);
+  const {
+    registerMenuItem
+  } = useMenuFocus();
+  const parentId = useContext(ParentItemContext);
+  const uniqueId = useRef(id || guid());
+
+  // Register the menu item with the focus context
+  useEffect(() => {
+    registerMenuItem(uniqueId.current, itemRef, parentId);
+  }, [id, registerMenuItem, parentId]);
+  return /*#__PURE__*/React.createElement(BaseItem, _extends({
+    id: uniqueId.current,
+    label: label
+  }, props, {
+    "data-depth": depth,
+    ref: itemRef
+  }), children && /*#__PURE__*/React.createElement(ParentItemContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement(IncreaseDepth, null, children)));
+};
+export default ResponsiveVerticalMenuItem;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+interface StyledResponsiveMenuItemProps {
+    active?: boolean;
+    depth: number;
+    hasIcon?: boolean;
+    responsive?: boolean;
+}
+interface StyledMenuItemContentProps {
+    customIcon?: boolean;
+    depth: number;
+    hasChildren?: boolean;
+    icon?: boolean;
+    responsive?: boolean;
+}
+export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"span", any, StyledMenuItemContentProps, never>;
+export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
+export declare const StyledResponsiveMenuAction: import("styled-components").StyledComponent<"a", any, {
+    depth: number;
+    responsive?: boolean | undefined;
+}, never>;
+export declare const StyledNestedMenu: import("styled-components").StyledComponent<"div", any, {
+    depth: number;
+    hasIcon?: boolean | undefined;
+    responsive?: boolean | undefined;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    depth: number;
+    expanded: boolean;
+    reduceMotion: boolean;
+}, never>;
+export {};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js

@@ -0,0 +1,217 @@
+import styled, { css } from "styled-components";
+import { margin, padding } from "styled-system";
+import Icon from "../../../icon";
+import addFocusStyling from "../../../../style/utils/add-focus-styling";
+const BASE_ACTION_WIDTH = 92;
+const RESPONSIVE_ACTION_WIDTH_NO_NESTED_MENU = BASE_ACTION_WIDTH - 14;
+const RESPONSIVE_ACTION_WIDTH_NESTED_MENU = BASE_ACTION_WIDTH - 20;
+const getRotationData = (depth, expanded) => {
+  if (!depth || !expanded) {
+    return "0deg";
+  }
+  return "180deg";
+};
+export const StyledMenuItemContent = styled.span`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing100);
+
+  svg {
+    margin-right: var(--spacing100);
+    max-width: var(--sizing300);
+    min-width: var(--sizing300);
+  }
+
+  ${({
+  customIcon,
+  depth,
+  hasChildren,
+  icon,
+  responsive
+}) => {
+  if (depth > 0) {
+    if (responsive) {
+      return css`
+          width: 100%;
+        `;
+    }
+  }
+  if (depth === 0 && hasChildren && responsive) {
+    return css`
+        color: #ffffffcc;
+        cursor: default;
+      `;
+  }
+  if (customIcon || icon) {
+    return css`
+        width: 81%;
+      `;
+  }
+  return css`
+      width: 92%;
+    `;
+}}
+`;
+export const StyledResponsiveMenuItem = styled.button`
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--borderRadius100);
+  color: var(--colorsUtilityYang100);
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  font-weight: 500;
+  justify-content: space-between;
+  min-height: var(--sizing500);
+  padding: 0 15px;
+  width: 100%;
+  max-width: 340px;
+
+  ${margin}
+  ${padding}
+
+${({
+  depth,
+  responsive
+}) => depth > 0 && responsive && css`
+      cursor: default;
+      justify-content: space-around;
+      width: 80%;
+    `}
+
+
+  ${({
+  depth,
+  responsive
+}) => depth === 0 && responsive && css`
+      padding: 0;
+    `}
+
+  &:hover {
+    background-color: var(--colorsActionMajor500);
+  }
+
+  ${({
+  active,
+  responsive
+}) => active && !responsive && css`
+      background-color: var(--colorsGray850);
+    `}
+
+  [data-component="icon"] {
+    color: var(--colorsUtilityYang100);
+    margin-right: var(--spacing100);
+  }
+
+  &:focus {
+    ${addFocusStyling(true)}
+  }
+`;
+export const StyledResponsiveMenuAction = styled.a`
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--borderRadius100);
+  color: var(--colorsUtilityYang100);
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  font-weight: 500;
+  justify-content: space-between;
+  min-height: var(--sizing500);
+  padding: 0 var(--spacing200);
+  text-decoration: none;
+  width: 92%;
+  max-width: 92%;
+
+  ${({
+  depth,
+  responsive
+}) => depth > 0 && responsive && css`
+      cursor: default;
+      justify-content: space-around;
+      width: ${depth === 1 ? `${RESPONSIVE_ACTION_WIDTH_NO_NESTED_MENU}%` : `${RESPONSIVE_ACTION_WIDTH_NESTED_MENU}%`};
+    `}
+
+  ${margin}
+  ${padding}
+
+  &:hover {
+    background-color: var(--colorsActionMajor500);
+  }
+
+  [data-component="icon"] {
+    color: var(--colorsUtilityYang100);
+    margin-right: var(--spacing100);
+  }
+
+  &:focus {
+    ${addFocusStyling(true)}
+  }
+`;
+export const StyledNestedMenu = styled.div`
+  width: ${({
+  responsive
+}) => responsive ? "72%" : "92%"};
+  ${({
+  hasIcon
+}) => hasIcon && css`
+      margin-left: 80px;
+      width: 100%;
+    `};
+
+  ${({
+  responsive
+}) => responsive && css`
+      align-items: center
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+    `}
+
+  a {
+    font-weight: 400;
+    ${({
+  hasIcon
+}) => hasIcon && `width: 81%;`};
+
+    ${({
+  depth,
+  responsive
+}) => responsive && css`
+        font-weight: 500;
+        width: 70%;
+
+        ${depth && depth >= 1 && css`
+          font-weight: 400;
+          margin-left: var(--spacing200);
+          margin-right: var(--spacing200);
+          width: 63%;
+        `}
+      `}
+  }
+`;
+export const StyledIcon = styled(Icon)`
+  rotate: ${({
+  depth,
+  expanded
+}) => getRotationData(depth, expanded)};
+  transition: rotate ${({
+  reduceMotion
+}) => reduceMotion ? 0 : "0.2s"}
+    ease-in;
+
+  ${({
+  depth,
+  expanded,
+  reduceMotion
+}) => expanded && css`
+      rotate: ${getRotationData(depth, expanded)};
+      transition: rotate ${reduceMotion ? 0 : "0.2s"} ease-out;
+    `};
+`;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface ResponsiveVerticalMenuProps extends TagProps {
+    /** The content of the menu */
+    children?: ReactNode;
+    /** The height of the primary and secondary menus */
+    height?: string;
+    /** The value (in pixels) at which the ResponsiveVerticalMenu will become responsive/modal */
+    responsiveBreakpoint?: number;
+    /** The width of the primary and secondary menus when in default mode */
+    width?: string;
+}
+export declare const ResponsiveVerticalMenu: ({ children, ...props }: ResponsiveVerticalMenuProps) => React.JSX.Element;
+export default ResponsiveVerticalMenu;