carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -1,113 +1 @@
-import React, { useCallback, useRef } from "react";
-import { CSSTransition } from "react-transition-group";
-import { StyledMenuFullscreen, StyledMenuModal, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
-import { StyledMenuWrapper } from "../menu.style";
-import { useStrictMenuContext, StrictMenuProvider } from "../__internal__/strict-menu.context";
-import Events from "../../../__internal__/utils/helpers/events";
-import Box from "../../box";
-import IconButton from "../../icon-button";
-import Icon from "../../icon";
-import Portal from "../../portal";
-import FocusTrap from "../../../__internal__/focus-trap";
-import MenuDivider from "../menu-divider/menu-divider.component";
-import { getDocument } from "../../../__internal__/dom/globals";
-import useLocale from "../../../hooks/__internal__/useLocale";
-import useModalAria from "../../../hooks/__internal__/useModalAria";
-import useModalManager from "../../../hooks/__internal__/useModalManager";
-export const MenuFullscreen = ({
-  "aria-label": ariaLabel = "Fullscreen menu",
-  "data-element": dataElement,
-  "data-role": dataRole,
-  children,
-  isOpen = false,
-  onClose,
-  startPosition = "left",
-  topModalOverride
-}) => {
-  const menuRef = useRef(null);
-  const modalRef = useRef(null);
-  const contentRef = useRef(null);
-  const isTopModal = useModalAria(modalRef);
-  const {
-    menuType
-  } = useStrictMenuContext();
-  const isDarkVariant = ["dark", "black"].includes(menuType);
-  const transitionDuration = 200;
-  const locale = useLocale();
-  const flattenedChildren = React.Children.toArray(children);
-  const childArray = React.Children.toArray(flattenedChildren.map((child, index) => {
-    if (index < flattenedChildren.length - 1) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, child, /*#__PURE__*/React.createElement(MenuDivider, {
-        "data-role": "divider"
-      }));
-    }
-    return child;
-  }));
-  const closeModal = useCallback(ev => {
-    /* istanbul ignore else */
-    if (onClose && Events.isEscKey(ev)) {
-      ev.stopImmediatePropagation();
-      onClose(ev);
-    }
-  }, [onClose]);
-  useModalManager({
-    open: isOpen,
-    closeModal,
-    modalRef: menuRef,
-    topModalOverride,
-    focusCallToActionElement: getDocument()?.activeElement
-  });
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
-    nodeRef: menuRef,
-    in: isOpen,
-    timeout: transitionDuration,
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, {
-    ref: menuRef,
-    startPosition: startPosition,
-    transitionDuration: transitionDuration
-  }, /*#__PURE__*/React.createElement(FocusTrap, {
-    wrapperRef: modalRef,
-    isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(StyledMenuModal, {
-    "aria-label": ariaLabel,
-    "aria-modal": isTopModal ? true : undefined,
-    "data-component": "menu-fullscreen",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    menuType: menuType,
-    ref: modalRef,
-    role: "dialog",
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
-    menuType: menuType
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": locale.menuFullscreen.ariaLabels.closeButton(),
-    onClick: onClose,
-    "data-element": "close"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "close",
-    color: isDarkVariant ? "--colorsYang100" : undefined
-  }))), /*#__PURE__*/React.createElement(Box, {
-    overflowY: "auto",
-    scrollVariant: isDarkVariant ? "dark" : "light",
-    width: "100%",
-    height: "calc(100% - 40px)"
-  }, /*#__PURE__*/React.createElement(StyledMenuWrapper, {
-    "data-component": "menu",
-    menuType: menuType,
-    ref: contentRef,
-    display: "flex",
-    flexDirection: "column",
-    role: "list",
-    inFullscreenView: true
-  }, /*#__PURE__*/React.createElement(StrictMenuProvider, {
-    value: {
-      inFullscreenView: true,
-      menuType,
-      openSubmenuId: null,
-      setOpenSubmenuId: /* istanbul ignore next */() => {}
-    }
-  }, childArray)))))))));
-};
-export default MenuFullscreen;
+import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import r,{useRef as l,useCallback as t}from"react";import{CSSTransition as i}from"react-transition-group";import{StyledMenuFullscreen as a,StyledMenuModal as m,StyledMenuFullscreenHeader as s}from"./menu-full-screen.style.js";import{StyledMenuWrapper as c}from"../menu.style.js";import{useStrictMenuContext as d,StrictMenuProvider as u}from"../__internal__/strict-menu.context.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{Box as f}from"../../box/box.component.js";import _ from"../../icon-button/icon-button.component.js";import h from"../../icon/icon.component.js";import{Portal as j}from"../../portal/portal.js";import v from"../../../__internal__/focus-trap/focus-trap.component.js";import b from"../menu-divider/menu-divider.component.js";import{getDocument as y}from"../../../__internal__/dom/globals.js";import g from"../../../hooks/__internal__/useLocale/useLocale.js";import x from"../../../hooks/__internal__/useModalAria/useModalAria.js";import M from"../../../hooks/__internal__/useModalManager/useModalManager.js";const k=({"aria-label":k="Fullscreen menu","data-element":O,"data-role":T,children:w,isOpen:A=!1,onClose:C,startPosition:E="left",topModalOverride:F})=>{var I;const L=l(null),P=l(null),R=l(null),V=x(P),{menuType:D}=d(),S=["dark","black"].includes(D),Y=g(),B=r.Children.toArray(w),K=r.Children.toArray(B.map(((r,l)=>l<B.length-1?e(o,{children:[r,n(b,{"data-role":"divider"})]}):r))),q=t((e=>{C&&p.isEscKey(e)&&(e.stopImmediatePropagation(),C(e))}),[C]);return M({open:A,closeModal:q,modalRef:L,topModalOverride:F,focusCallToActionElement:null===(I=y())||void 0===I?void 0:I.activeElement}),n("li",{children:n(j,{children:n(i,{nodeRef:L,in:A,timeout:200,unmountOnExit:!0,children:n(a,{ref:L,startPosition:E,transitionDuration:200,children:n(v,{wrapperRef:P,isOpen:A,children:e(m,{"aria-label":k,"aria-modal":!!V||void 0,"data-component":"menu-fullscreen","data-element":O,"data-role":T,menuType:D,ref:P,role:"dialog",tabIndex:-1,children:[n(s,{menuType:D,children:n(_,{"aria-label":Y.menuFullscreen.ariaLabels.closeButton(),onClick:C,"data-element":"close",children:n(h,{type:"close",color:S?"--colorsYang100":void 0})})}),n(f,{overflowY:"auto",scrollVariant:S?"dark":"light",width:"100%",height:"calc(100% - 40px)",children:n(c,{"data-component":"menu",menuType:D,ref:R,display:"flex",flexDirection:"column",role:"list",inFullscreenView:!0,children:n(u,{value:{inFullscreenView:!0,menuType:D,openSubmenuId:null,setOpenSubmenuId:()=>{}},children:K})})})]})})})})})})};export{k as MenuFullscreen,k as default};

package/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -1,130 +1 @@
-import styled, { css } from "styled-components";
-import { baseTheme } from "../../../style/themes";
-import StyledIconButton from "../../icon-button/icon-button.style";
-import StyledBox from "../../box/box.style";
-import StyledSearch from "../../search/search.style";
-import StyledIcon from "../../icon/icon.style";
-import StyledButton from "../../button/button.style";
-import menuConfigVariants from "../menu.config";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
-import { StyledLink } from "../../link/link.style";
-const StyledMenuFullscreen = styled.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-
-  ${({
-  theme
-}) => css`
-    z-index: ${theme.zIndex.fullScreenModal};
-  `}
-
-  ${({
-  startPosition,
-  transitionDuration
-}) => css`
-    &.enter {
-      visibility: hidden;
-      ${startPosition}: -100%;
-    }
-
-    &.enter-active {
-      visibility: visible;
-      ${startPosition}: 0;
-      transition: all ${transitionDuration}ms ease;
-    }
-
-    &.exit {
-      visibility: visible;
-      ${startPosition}: 0;
-    }
-
-    &.exit-active {
-      visibility: hidden;
-      ${startPosition}: -100%;
-      transition: all ${transitionDuration}ms ease;
-    }
-  `}
-`;
-const StyledMenuModal = styled.div`
-  height: 100vh;
-  width: 100vw;
-  outline: none;
-
-  && {
-    ${StyledLink} {
-      max-width: 100vw;
-    }
-
-    ${StyledLink} > a,
-    ${StyledLink} > button,
-    > div {
-      font-size: var(--fontSizes200);
-    }
-  }
-
-  ${({
-  menuType
-}) => css`
-    background-color: ${menuConfigVariants[menuType].background};
-
-    && {
-      ${StyledSearch} {
-        ${StyledIcon} {
-          display: inline-flex;
-          bottom: auto;
-        }
-
-        ${StyledButton} {
-          display: flex;
-          line-height: normal;
-          padding-bottom: 0;
-
-          &:focus {
-            border-bottom-right-radius: var(--borderRadius050);
-            border-top-right-radius: var(--borderRadius050);
-
-            ${addFocusStyling()}
-          }
-        }
-      }
-    }
-
-    ${StyledBox} {
-      scrollbar-color: ${menuConfigVariants[menuType].scrollbarColor};
-
-      &::-webkit-scrollbar {
-        width: var(--sizing150);
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: ${menuConfigVariants[menuType].scrollbarThumb};
-      }
-      &::-webkit-scrollbar-track {
-        background-color: ${menuConfigVariants[menuType].scrollbarTrack};
-      }
-    }
-  `}
-`;
-const StyledMenuFullscreenHeader = styled.div`
-  height: 40px;
-
-  ${StyledIconButton} {
-    position: absolute;
-    z-index: 1;
-    right: 16px;
-    top: 8px;
-  }
-
-  ${({
-  menuType
-}) => css`
-    background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-  `}
-`;
-StyledMenuFullscreen.defaultProps = {
-  theme: baseTheme
-};
-StyledMenuModal.defaultProps = {
-  theme: baseTheme
-};
-export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };
+import e,{css as o}from"styled-components";import"../../../style/themes/sage/index.js";import t from"../../../style/themes/base/index.js";import"../../../style/themes/none/index.js";import i from"../../icon-button/icon-button.style.js";import r from"../../box/box.style.js";import s from"../../search/search.style.js";import n from"../../icon/icon.style.js";import l from"../../button/button.style.js";import a from"../menu.config.js";import d from"../../../style/utils/add-focus-styling.js";import{StyledLink as m}from"../../link/link.style.js";const c=e.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"sc-89e198a7-0"})(["position:fixed;top:0;bottom:0;"," ",""],(({theme:e})=>o(["z-index:",";"],e.zIndex.fullScreenModal)),(({startPosition:e,transitionDuration:t})=>o(["&.enter{visibility:hidden;",":-100%;}&.enter-active{visibility:visible;",":0;transition:all ","ms ease;}&.exit{visibility:visible;",":0;}&.exit-active{visibility:hidden;",":-100%;transition:all ","ms ease;}"],e,e,t,e,e,t))),u=e.div.withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"sc-89e198a7-1"})(["height:100vh;width:100vw;outline:none;&&{","{max-width:100vw;}"," > a,"," > button,> div{font-size:var(--fontSizes200);}}",""],m,m,m,(({menuType:e})=>o(["background-color:",";&&{","{","{display:inline-flex;bottom:auto;}","{display:flex;line-height:normal;padding-bottom:0;&:focus{border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);","}}}}","{scrollbar-color:",";&::-webkit-scrollbar{width:var(--sizing150);}&::-webkit-scrollbar-thumb{background-color:",";}&::-webkit-scrollbar-track{background-color:",";}}"],a[e].background,s,n,l,d(),r,a[e].scrollbarColor,a[e].scrollbarThumb,a[e].scrollbarTrack))),b=e.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"sc-89e198a7-2"})(["height:40px;","{position:absolute;z-index:1;right:16px;top:8px;}",""],i,(({menuType:e})=>o(["background-color:",";"],a[e].submenuItemBackground)));c.defaultProps={theme:t},u.defaultProps={theme:t};export{c as StyledMenuFullscreen,b as StyledMenuFullscreenHeader,u as StyledMenuModal};

package/esm/components/menu/menu-item/index.js

@@ -1 +1 @@
-export { default } from "./menu-item.component";
+export{MenuItem as default}from"./menu-item.component.js";

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

@@ -1,192 +1 @@
-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, { useRef, useEffect, useContext, useState, useLayoutEffect } from "react";
-import invariant from "invariant";
-import { defaultFocusableSelectors as focusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import StyledMenuItemWrapper from "./menu-item.style";
-import Events from "../../../__internal__/utils/helpers/events";
-import { useStrictMenuContext } from "../__internal__/strict-menu.context";
-import Submenu from "../__internal__/submenu/submenu.component";
-import SubmenuContext from "../__internal__/submenu/submenu.context";
-import MenuSegmentContext from "../menu-segment-title/menu-segment-title.context";
-import { StyledMenuItem } from "../menu.style";
-import guid from "../../../__internal__/utils/helpers/guid";
-export const MenuItem = ({
-  submenu,
-  submenuMaxWidth,
-  submenuMinWidth,
-  children,
-  href,
-  onClick,
-  target,
-  submenuDirection = "right",
-  icon,
-  selected,
-  onKeyDown,
-  variant = "default",
-  showDropdownArrow = true,
-  ariaLabel,
-  clickToOpen,
-  maxWidth,
-  onSubmenuOpen,
-  onSubmenuClose,
-  overrideColor,
-  rel,
-  as,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  ...rest
-}) => {
-  !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
-  !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : invariant(false) : void 0;
-  !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not pass `children` when `submenu` is an empty string") : invariant(false) : void 0;
-  const menuItemId = useRef(guid());
-  const {
-    isChildOfSegment,
-    overriddenVariant
-  } = useContext(MenuSegmentContext);
-  const {
-    inFullscreenView,
-    registerItem,
-    unregisterItem,
-    focusId,
-    updateFocusId,
-    menuType
-  } = useStrictMenuContext();
-  const submenuContext = useContext(SubmenuContext);
-  const isInSubmenu = Object.keys(submenuContext).length > 0;
-  const {
-    submenuFocusId,
-    updateFocusId: updateSubmenuFocusId,
-    handleKeyDown: handleSubmenuKeyDown,
-    submenuHasMaxWidth
-  } = submenuContext;
-  const focusFromMenu = focusId === menuItemId.current;
-  const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const [ref, setRef] = useState(null);
-  const [firstFocusableChild, setFirstFocusableChild] = useState(null);
-  useLayoutEffect(() => {
-    const firstFocusable = ref?.querySelector(focusableSelectors) ?? null;
-    if (firstFocusable !== firstFocusableChild) {
-      setFirstFocusableChild(firstFocusable);
-    }
-  }, [firstFocusableChild, ref]);
-  useEffect(() => {
-    const id = menuItemId.current;
-
-    /* istanbul ignore else */
-    if (registerItem) {
-      registerItem(id);
-    }
-    return () => {
-      /* istanbul ignore else */
-      if (unregisterItem) {
-        unregisterItem(id);
-      }
-    };
-  }, [registerItem, unregisterItem]);
-  useEffect(() => {
-    if (focusFromMenu && !focusFromSubmenu || focusFromSubmenu) {
-      if (firstFocusableChild) {
-        firstFocusableChild.focus();
-        return;
-      }
-      ref?.focus();
-    }
-  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu, ref]);
-  const handleFocus = event => {
-    if (isInSubmenu) {
-      event.stopPropagation();
-      updateSubmenuFocusId?.(menuItemId.current);
-    } else {
-      updateFocusId?.(menuItemId.current);
-    }
-  };
-  const handleKeyDown = event => {
-    onKeyDown?.(event);
-    if (Events.isEscKey(event)) {
-      ref?.focus();
-    }
-    handleSubmenuKeyDown?.(event);
-  };
-  const elementProps = {
-    className: href || onClick ? "carbon-menu-item--has-link" : "",
-    href: firstFocusableChild ? undefined : href,
-    onClick: firstFocusableChild ? undefined : onClick,
-    target,
-    rel,
-    icon,
-    removeAriaLabelOnIcon: true,
-    selected,
-    onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
-    overrideColor,
-    ref: setRef
-  };
-  if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
-    elementProps.overrideColor = true;
-  }
-  const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
-  const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
-  const asPassiveItem = !(onClick || href || firstFocusableChild);
-  if (submenu) {
-    return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
-      "data-component": "menu-item",
-      "data-element": dataElement,
-      "data-role": dataRole,
-      menuType: menuType,
-      title: getTitle(submenu),
-      maxWidth: itemMaxWidth
-    }, rest, {
-      inFullscreenView: inFullscreenView,
-      id: menuItemId.current,
-      as: as,
-      onFocus: handleFocus
-    }), /*#__PURE__*/React.createElement(Submenu, _extends({}, typeof submenu !== "boolean" && {
-      title: submenu
-    }, {
-      submenuDirection: submenuDirection,
-      showDropdownArrow: showDropdownArrow,
-      clickToOpen: clickToOpen,
-      maxWidth: maxWidth,
-      asPassiveItem: asPassiveItem,
-      ariaLabel: ariaLabel,
-      onSubmenuOpen: onSubmenuOpen,
-      onSubmenuClose: onSubmenuClose,
-      submenuMaxWidth: submenuMaxWidth,
-      submenuMinWidth: submenuMinWidth
-    }, elementProps, {
-      variant: variant
-    }, rest), children));
-  }
-  const paddingProps = filterStyledSystemPaddingProps(rest);
-  const hasInput = !!ref?.querySelector("[data-element='input']");
-  return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
-    "data-component": "menu-item",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    menuType: menuType,
-    inSubmenu: isInSubmenu,
-    title: getTitle(children),
-    maxWidth: itemMaxWidth
-  }, rest, {
-    inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
-    id: menuItemId.current,
-    as: as,
-    onFocus: handleFocus
-  }), /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({
-    menuType: menuType,
-    "data-role": "menu-item-wrapper"
-  }, elementProps, {
-    menuItemVariant: variant,
-    ariaLabel: ariaLabel,
-    maxWidth: !submenuHasMaxWidth ? itemMaxWidth : undefined,
-    inFullscreenView: inFullscreenView,
-    asPassiveItem: asPassiveItem
-  }, paddingProps, {
-    asDiv: hasInput || as === "div",
-    hasFocusableChild: !!firstFocusableChild,
-    hasInput: hasInput,
-    inSubmenu: isInSubmenu
-  }), children));
-};
-export default MenuItem;
+import{jsx as e}from"react/jsx-runtime";import{useRef as t,useContext as n,useState as r,useLayoutEffect as o,useEffect as i}from"react";import u from"invariant";import{defaultFocusableSelectors as l}from"../../../__internal__/focus-trap/focus-trap-utils.js";import s from"../../../style/utils/filter-styled-system-padding-props.js";import a from"./menu-item.style.js";import c from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as m}from"../__internal__/strict-menu.context.js";import d from"../__internal__/submenu/submenu.component.js";import p from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as b}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as f}from"../menu.style.js";import h from"../../../__internal__/utils/helpers/guid/index.js";function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){y(e,t,n[t])}))}return e}function O(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const g=y=>{var{submenu:g,submenuMaxWidth:j,submenuMinWidth:w,children:_,href:x,onClick:S,target:P,submenuDirection:D="right",icon:k,selected:I,onKeyDown:W,variant:C="default",showDropdownArrow:F=!0,ariaLabel:M,clickToOpen:T,maxWidth:L,onSubmenuOpen:V,onSubmenuClose:E,overrideColor:K,rel:A,as:q,"data-element":H,"data-role":N}=y,Y=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(y,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);u(k||_,"Either prop `icon` must be defined or this node must have `children`."),u(_||M||"string"==typeof g,"If no text is provided an `ariaLabel` should be given to facilitate accessibility."),u("boolean"==typeof g||void 0===g||_&&"string"==typeof g&&g.length,"You should not pass `children` when `submenu` is an empty string");const z=t(h()),{isChildOfSegment:B,overriddenVariant:G}=n(b),{inFullscreenView:J,registerItem:Q,unregisterItem:R,focusId:U,updateFocusId:X,menuType:Z}=m(),$=n(p),ee=Object.keys($).length>0,{submenuFocusId:te,updateFocusId:ne,handleKeyDown:re,submenuHasMaxWidth:oe}=$,ie=U===z.current,ue=te?te===z.current:void 0,[le,se]=r(null),[ae,ce]=r(null);o((()=>{var e;const t=null!==(e=null==le?void 0:le.querySelector(l))&&void 0!==e?e:null;t!==ae&&ce(t)}),[ae,le]),i((()=>{const e=z.current;return Q&&Q(e),()=>{R&&R(e)}}),[Q,R]),i((()=>{if(ie&&!ue||ue){if(ae)return void ae.focus();null==le||le.focus()}}),[ae,ie,ue,le]);const me=e=>{ee?(e.stopPropagation(),null==ne||ne(z.current)):null==X||X(z.current)},de={className:x||S?"carbon-menu-item--has-link":"",href:ae?void 0:x,onClick:ae?void 0:S,target:P,rel:A,icon:k,removeAriaLabelOnIcon:!0,selected:I,onKeyDown:J?void 0:e=>{null==W||W(e),c.isEscKey(e)&&(null==le||le.focus()),null==re||re(e)},overrideColor:K,ref:se};"alternate"===G&&B&&"alternate"===C&&["white","black"].includes(Z)&&(de.overrideColor=!0);const pe=e=>L&&"string"==typeof e?e:void 0,be=J?void 0:L,fe=!(S||x||ae);if(g)return e(f,O(v({"data-component":"menu-item","data-element":H,"data-role":N,menuType:Z,title:pe(g),maxWidth:be},Y),{inFullscreenView:J,id:z.current,as:q,onFocus:me,children:e(d,O(v(O(v(O(v({},"boolean"!=typeof g&&{title:g}),{submenuDirection:D,showDropdownArrow:F,clickToOpen:T,maxWidth:L,asPassiveItem:fe,ariaLabel:M,onSubmenuOpen:V,onSubmenuClose:E,submenuMaxWidth:j,submenuMinWidth:w}),de),{variant:C}),Y),{children:_}))}));const he=s(Y),ye=!!(null==le?void 0:le.querySelector("[data-element='input']"));return e(f,O(v({"data-component":"menu-item","data-element":H,"data-role":N,menuType:Z,inSubmenu:ee,title:pe(_),maxWidth:be},Y),{inFullscreenView:J&&!Object.keys($).length,id:z.current,as:q,onFocus:me,children:e(a,O(v(O(v({menuType:Z,"data-role":"menu-item-wrapper"},de),{menuItemVariant:C,ariaLabel:M,maxWidth:oe?void 0:be,inFullscreenView:J,asPassiveItem:fe}),he),{asDiv:ye||"div"===q,hasFocusableChild:!!ae,hasInput:ye,inSubmenu:ee,children:_}))}))};export{g as MenuItem,g as default};