carbon-react 154.4.1 → 154.4.3

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

@@ -1,186 +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, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useResponsiveVerticalMenu } from "./responsive-vertical-menu.context";
-import { StyledButton, StyledCloseButton, StyledGlobalVerticalMenuWrapper, StyledResponsiveMenu } from "./responsive-vertical-menu.style";
-import Box from "../../box";
-import Modal from "../../modal";
-import useIsAboveBreakpoint from "../../../hooks/__internal__/useIsAboveBreakpoint";
-import useMediaQuery from "../../../hooks/useMediaQuery";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import { DepthProvider } from "./__internal__/depth.context";
-import { MenuFocusProvider } from "./__internal__/focus.context";
-const BaseMenu = ({
-  children,
-  height,
-  responsiveBreakpoint = 700,
-  width,
-  ...rest
-}) => {
-  const {
-    activeMenuItem,
-    buttonRef,
-    containerRef,
-    menuRef,
-    responsiveMode,
-    setActiveMenuItem,
-    setReducedMotion,
-    setResponsiveMode
-  } = useResponsiveVerticalMenu();
-  const [active, setActive] = useState(false);
-  const largeScreen = useIsAboveBreakpoint(responsiveBreakpoint);
-  const [left, setLeft] = useState("auto");
-  const [responsiveWidth, setResponsiveWidth] = useState("100%");
-  const [top, setTop] = useState("auto");
-  const subMenuRef = useRef(null);
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
-  const {
-    current: menu
-  } = menuRef;
-  const {
-    current: button
-  } = buttonRef;
-  const measureDimensions = useCallback(() => {
-    // Only calculate the width of the menu if the menu is open in responsive mode
-    if (active && responsiveMode) {
-      // Get the width of the menu container. The ref might not be set yet, hence
-      // the use of `document.querySelector` to find the menu container.
-      const menuContainer = menu || document.querySelector("[id='responsive-vertical-menu-primary']");
-      /* istanbul ignore else */
-      if (menuContainer) {
-        setResponsiveWidth(`${menuContainer.getBoundingClientRect().width - 16}px`);
-      }
-    }
-    if (activeMenuItem && menu) {
-      setLeft(`${menu.getBoundingClientRect().right}px`);
-    } else {
-      setLeft("auto");
-    }
-    if (activeMenuItem && button) {
-      setTop(`${button.getBoundingClientRect().bottom}px`);
-    } else {
-      setTop("auto");
-    }
-  }, [active, menu, responsiveMode, activeMenuItem, button]);
-  const handleOutsideClick = useCallback(event => {
-    const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
-    if (notInContainer) {
-      setActive(false);
-    }
-  }, [containerRef]);
-  const handleActiveToggle = useCallback(() => {
-    setActive(previousState => !previousState);
-    // Make sure the menu is closed when the button is clicked (prevents historic menu items being retained in memory)
-    setActiveMenuItem(null);
-  }, [setActiveMenuItem]);
-  useLayoutEffect(() => {
-    measureDimensions();
-  }, [active, measureDimensions, menu, responsiveMode]);
-  useEffect(() => {
-    const handleBlur = () => {
-      setTimeout(() => {
-        if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
-          setActive(false);
-        }
-      }, 0);
-    };
-    const handleClose = e => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        setActive(false);
-      }
-    };
-    const currentContainer = containerRef.current;
-    if (active && !responsiveMode) {
-      document.addEventListener("keydown", handleClose);
-      window.addEventListener("click", handleOutsideClick);
-      currentContainer?.addEventListener("focusout", handleBlur);
-    }
-    return () => {
-      document.removeEventListener("keydown", handleClose);
-      window.removeEventListener("click", handleOutsideClick);
-      currentContainer?.removeEventListener("focusout", handleBlur);
-    };
-  }, [active, containerRef, handleOutsideClick, responsiveMode]);
-  useEffect(() => {
-    setReducedMotion?.(reduceMotion);
-    setResponsiveMode?.(!largeScreen);
-  }, [largeScreen, reduceMotion, setReducedMotion, setResponsiveMode]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(StyledButton, {
-    active: active,
-    buttonType: "tertiary",
-    "data-component": "responsive-vertical-menu-launcher",
-    "data-role": "responsive-vertical-menu-launcher",
-    iconType: "squares_nine",
-    id: "responsive-vertical-menu-launcher",
-    onClick: handleActiveToggle,
-    ref: buttonRef
-  }), responsiveMode ? /*#__PURE__*/React.createElement(Modal, {
-    open: active
-  }, /*#__PURE__*/React.createElement(Box, {
-    position: "fixed",
-    top: 0,
-    width: responsiveWidth
-  }, /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    justifyContent: "flex-end",
-    width: "100%",
-    backgroundColor: "var(--colorsGray850)",
-    p: 1
-  }, /*#__PURE__*/React.createElement(StyledCloseButton, {
-    "aria-label": "close-menu",
-    "data-component": "responsive-vertical-menu-close",
-    "data-role": "responsive-vertical-menu-close",
-    iconType: "close",
-    size: "small",
-    buttonType: "tertiary",
-    onClick: () => {
-      setActive(false);
-      setActiveMenuItem(null);
-    }
-  })), /*#__PURE__*/React.createElement(StyledResponsiveMenu, {
-    height: height,
-    id: "responsive-vertical-menu-primary",
-    menu: "primary",
-    reduceMotion: reduceMotion,
-    ref: menuRef,
-    responsive: true,
-    tabIndex: -1,
-    top: "48px",
-    width: width
-  }, children))) : /*#__PURE__*/React.createElement(StyledGlobalVerticalMenuWrapper, _extends({}, rest, tagComponent("responsive-vertical-menu", rest)), active && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledResponsiveMenu, {
-    childOpen: !!activeMenuItem,
-    "data-component": "responsive-vertical-menu-primary",
-    "data-role": "responsive-vertical-menu-primary",
-    height: height || "100%",
-    id: "responsive-vertical-menu-primary",
-    menu: "primary",
-    reduceMotion: reduceMotion,
-    ref: menuRef,
-    responsive: false,
-    tabIndex: -1,
-    top: top,
-    width: width
-  }, children), activeMenuItem ? /*#__PURE__*/React.createElement(StyledResponsiveMenu, {
-    "data-component": "responsive-vertical-menu-secondary",
-    "data-role": "responsive-vertical-menu-secondary",
-    height: height || "100%",
-    id: "responsive-vertical-menu-secondary",
-    left: left,
-    menu: "secondary",
-    reduceMotion: reduceMotion,
-    ref: subMenuRef,
-    responsive: false,
-    tabIndex: -1,
-    top: top,
-    width: width
-  }, activeMenuItem.children) : null)));
-};
-export const ResponsiveVerticalMenu = ({
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(DepthProvider, null, /*#__PURE__*/React.createElement(MenuFocusProvider, null, /*#__PURE__*/React.createElement(BaseMenu, props, children)));
-};
-export default ResponsiveVerticalMenu;
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as n,useRef as o,useCallback as i,useLayoutEffect as c,useEffect as s}from"react";import{useResponsiveVerticalMenu as l}from"./responsive-vertical-menu.context.js";import{StyledButton as a,StyledCloseButton as u,StyledResponsiveMenu as p,StyledGlobalVerticalMenuWrapper as d}from"./responsive-vertical-menu.style.js";import{Box as m}from"../../box/box.component.js";import v from"../../modal/modal.component.js";import f from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import y from"../../../hooks/useMediaQuery/useMediaQuery.js";import h from"../../../__internal__/utils/helpers/tags/tags.js";import{DepthProvider as b}from"./__internal__/depth.context.js";import{MenuFocusProvider as O}from"./__internal__/focus.context.js";function g(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){g(e,r,t[r])}))}return e}function w(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function x(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const k=b=>{var{children:O,height:g,responsiveBreakpoint:k=700,width:_}=b,P=x(b,["children","height","responsiveBreakpoint","width"]);const{activeMenuItem:E,buttonRef:M,containerRef:I,menuRef:R,responsiveMode:B,setActiveMenuItem:C,setReducedMotion:S,setResponsiveMode:L}=l(),[D,T]=n(!1),A=f(k),[q,Q]=n("auto"),[$,z]=n("100%"),[G,F]=n("auto"),H=o(null),J=!y("screen and (prefers-reduced-motion: no-preference)"),{current:K}=R,{current:N}=M,U=i((()=>{if(D&&B){const e=K||document.querySelector("[id='responsive-vertical-menu-primary']");e&&z(e.getBoundingClientRect().width-16+"px")}Q(E&&K?`${K.getBoundingClientRect().right}px`:"auto"),F(E&&N?`${N.getBoundingClientRect().bottom}px`:"auto")}),[D,K,B,E,N]),V=i((e=>{I.current&&!I.current.contains(e.target)&&T(!1)}),[I]),W=i((()=>{T((e=>!e)),C(null)}),[C]);return c((()=>{U()}),[D,U,K,B]),s((()=>{const e=()=>{setTimeout((()=>{I.current&&!I.current.contains(document.activeElement)&&T(!1)}),0)},r=e=>{"Escape"===e.key&&(e.preventDefault(),T(!1))},t=I.current;return D&&!B&&(document.addEventListener("keydown",r),window.addEventListener("click",V),null==t||t.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",r),window.removeEventListener("click",V),null==t||t.removeEventListener("focusout",e)}}),[D,I,V,B]),s((()=>{null==S||S(J),null==L||L(!A)}),[A,J,S,L]),r("div",{ref:I,children:[e(a,{active:D,buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:W,ref:M}),B?e(v,{open:D,children:r(m,{position:"fixed",top:0,width:$,children:[e(m,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(u,{"aria-label":"close-menu","data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{T(!1),C(null)}})}),e(p,{height:g,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:J,ref:R,responsive:!0,tabIndex:-1,top:"48px",width:_,children:O})]})}):e(d,w(j({},P,h("responsive-vertical-menu",P)),{children:D&&r(t,{children:[e(p,{childOpen:!!E,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:g||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:J,ref:R,responsive:!1,tabIndex:-1,top:G,width:_,children:O}),E?e(p,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:g||"100%",id:"responsive-vertical-menu-secondary",left:q,menu:"secondary",reduceMotion:J,ref:H,responsive:!1,tabIndex:-1,top:G,width:_,children:E.children}):null]})}))]})},_=r=>{var{children:t}=r,n=x(r,["children"]);return e(b,{children:e(O,{children:e(k,w(j({},n),{children:t}))})})};export{_ as ResponsiveVerticalMenu,_ as default};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js

@@ -1,32 +1 @@
-import React, { createContext, useContext, useRef, useState } from "react";
-export const ResponsiveVerticalMenuContext = /*#__PURE__*/createContext(null);
-export const useResponsiveVerticalMenu = () => {
-  const context = useContext(ResponsiveVerticalMenuContext);
-  if (context === null) {
-    throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");
-  }
-  return context;
-};
-export const ResponsiveVerticalMenuProvider = ({
-  children
-}) => {
-  const [activeMenuItem, setActiveMenuItem] = useState(null);
-  const buttonRef = useRef(null);
-  const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const [responsiveMode, setResponsiveMode] = useState(false);
-  const [reducedMotion, setReducedMotion] = useState(false);
-  return /*#__PURE__*/React.createElement(ResponsiveVerticalMenuContext.Provider, {
-    value: {
-      activeMenuItem,
-      buttonRef,
-      containerRef,
-      menuRef,
-      reducedMotion,
-      responsiveMode,
-      setActiveMenuItem,
-      setReducedMotion,
-      setResponsiveMode
-    }
-  }, children);
-};
+import{jsx as e}from"react/jsx-runtime";import{createContext as n,useContext as t,useState as r,useRef as o}from"react";const i=n(null),u=()=>{const e=t(i);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e},s=({children:n})=>{const[t,u]=r(null),s=o(null),l=o(null),c=o(null),[d,m]=r(!1),[v,a]=r(!1);return e(i.Provider,{value:{activeMenuItem:t,buttonRef:s,containerRef:l,menuRef:c,reducedMotion:v,responsiveMode:d,setActiveMenuItem:u,setReducedMotion:a,setResponsiveMode:m},children:n})};export{i as ResponsiveVerticalMenuContext,s as ResponsiveVerticalMenuProvider,u as useResponsiveVerticalMenu};

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

@@ -1,95 +1 @@
-import styled, { css } from "styled-components";
-import Button from "../../button";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
-export const StyledButton = styled(Button)`
-  border-radius: 0;
-  background-color: var(
-    ${({
-  active
-}) => active ? "--colorsActionMinorGray700" : "--colorsUtilityYin100"}
-  );
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-  }
-
-  &:focus {
-    appearance: none;
-    -webkit-appearance: none;
-    -webkit-box-shadow: ${addFocusStyling(true)};
-    box-shadow: ${addFocusStyling(true)};
-    border: 1px solid black;
-    outline: transparent 3px solid;
-  }
-`;
-export const StyledCloseButton = styled(Button)`
-  border-radius: 0;
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-  }
-`;
-export const StyledGlobalVerticalMenuWrapper = styled.div`
-  background-color: black;
-  color: white;
-  display: flex;
-  flex-direction: row;
-  position: absolute;
-  width: fit-content;
-`;
-export const StyledResponsiveMenu = styled.div`
-  align-items: center;
-  background-color: var(--colorsUtilityYin100);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: ${({
-  height
-}) => height || "100%"};
-  justify-content: flex-start;
-  overflow-y: auto;
-  padding-bottom: var(--spacing100);
-  ${({
-  responsive
-}) => !responsive && css`
-      padding-left: var(--spacing200);
-      padding-right: var(--spacing200);
-    `};
-  padding-top: var(--spacing100);
-  position: fixed;
-  top: ${({
-  top
-}) => top};
-  width: ${({
-  width
-}) => width || "100%"};
-  max-width: 375px;
-  z-index: 1000;
-  border-right: ${({
-  childOpen,
-  menu
-}) => menu === "secondary" || !childOpen && menu === "primary" ? "2px solid var(--colorsGray850)" : "1px solid var(--colorsGray850)"};
-
-  ${({
-  childOpen
-}) => childOpen && css`
-      padding-right: calc(var(--spacing200) + 1px);
-    `}
-
-  ${({
-  height,
-  left,
-  menu
-}) => menu === "secondary" && css`
-      left: ${left};
-      min-height: ${height};
-    `}
-
-    ${({
-  responsive
-}) => !responsive && css`
-      & > :last-child {
-        margin-bottom: 40px;
-      }
-    `}
-`;
+import o,{css as i}from"styled-components";import t from"../../button/button.component.js";import e from"../../../style/utils/add-focus-styling.js";const n=o(t).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-a548a029-0"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:o})=>o?"--colorsActionMinorGray700":"--colorsUtilityYin100"),e(!0),e(!0)),a=o(t).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-a548a029-1"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),r=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-a548a029-2"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),s=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-a548a029-3"})(["align-items:center;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;top:",";width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&i(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({top:o})=>o),(({width:o})=>o||"100%"),(({childOpen:o,menu:i})=>"secondary"===i||!o&&"primary"===i?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({childOpen:o})=>o&&i(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:t,menu:e})=>"secondary"===e&&i(["left:",";min-height:",";"],t,o)),(({responsive:o})=>!o&&i(["& > :last-child{margin-bottom:40px;}"])));export{n as StyledButton,a as StyledCloseButton,r as StyledGlobalVerticalMenuWrapper,s as StyledResponsiveMenu};

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

@@ -1,73 +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, { useCallback, useRef } from "react";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import useLocale from "../../../hooks/__internal__/useLocale";
-import Portal from "../../portal";
-import FocusTrap from "../../../__internal__/focus-trap/focus-trap.component";
-import IconButton from "../../icon-button";
-import Icon from "../../icon";
-import Box from "../../box";
-import { StyledList, StyledVerticalMenuFullScreen } from "../vertical-menu.style";
-import { VerticalMenuProvider } from "../__internal__/vertical-menu.context";
-import { getDocument } from "../../../__internal__/dom/globals";
-import Events from "../../../__internal__/utils/helpers/events/events";
-import useModalManager from "../../../hooks/__internal__/useModalManager";
-import useMediaQuery from "../../../hooks/useMediaQuery";
-export const VerticalMenuFullScreen = ({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  children,
-  isOpen,
-  onClose,
-  ...rest
-}) => {
-  const l = useLocale();
-  const menuWrapperRef = useRef(null);
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
-  const handleKeyDown = useCallback(ev => {
-    // istanbul ignore else
-    if (Events.isEscKey(ev)) {
-      onClose(ev);
-    }
-  }, [onClose]);
-  const safeDocument = getDocument();
-  useModalManager({
-    open: isOpen,
-    closeModal: handleKeyDown,
-    modalRef: menuWrapperRef,
-    topModalOverride: true,
-    focusCallToActionElement: safeDocument?.activeElement
-  });
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
-    isOpen: isOpen,
-    wrapperRef: menuWrapperRef
-  }, /*#__PURE__*/React.createElement(StyledVerticalMenuFullScreen, _extends({
-    ref: menuWrapperRef,
-    isOpen: isOpen,
-    prefersReducedMotion: reduceMotion,
-    scrollVariant: "light",
-    as: "nav",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
-  }, tagComponent("vertical-menu-full-screen", rest)), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    justifyContent: "flex-end",
-    height: "60px",
-    alignItems: "flex-start",
-    px: "20px",
-    pt: "20px",
-    boxSizing: "border-box"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": l.verticalMenuFullScreen.ariaLabels.close(),
-    onClick: onClose,
-    "data-element": "close"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
-  }))), /*#__PURE__*/React.createElement(VerticalMenuProvider, {
-    value: {
-      isFullScreen: true
-    }
-  }, /*#__PURE__*/React.createElement(StyledList, null, children)))));
-};
-export default VerticalMenuFullScreen;
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useCallback as o}from"react";import n from"../../../__internal__/utils/helpers/tags/tags.js";import l from"../../../hooks/__internal__/useLocale/useLocale.js";import{Portal as i}from"../../portal/portal.js";import a from"../../../__internal__/focus-trap/focus-trap.component.js";import c from"../../icon-button/icon-button.component.js";import s from"../../icon/icon.component.js";import{Box as p}from"../../box/box.component.js";import{StyledVerticalMenuFullScreen as u,StyledList as f}from"../vertical-menu.style.js";import{VerticalMenuProvider as m}from"../__internal__/vertical-menu.context.js";import{getDocument as b}from"../../../__internal__/dom/globals.js";import d from"../../../__internal__/utils/helpers/events/events.js";import y from"../../../hooks/__internal__/useModalManager/useModalManager.js";import O from"../../../hooks/useMediaQuery/useMediaQuery.js";function j(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){j(e,r,t[r])}))}return e}const g=j=>{var{"aria-label":g,"aria-labelledby":h,children:v,isOpen:x,onClose:P}=j,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(j,["aria-label","aria-labelledby","children","isOpen","onClose"]);const M=l(),S=t(null),k=!O("screen and (prefers-reduced-motion: no-preference)"),C=o((e=>{d.isEscKey(e)&&P(e)}),[P]),E=b();return y({open:x,closeModal:C,modalRef:S,topModalOverride:!0,focusCallToActionElement:null==E?void 0:E.activeElement}),e(i,{children:e(a,{isOpen:x,wrapperRef:S,children:r(u,(D=_({ref:S,isOpen:x,prefersReducedMotion:k,scrollVariant:"light",as:"nav","aria-label":g,"aria-labelledby":h},n("vertical-menu-full-screen",w)),L={children:[e(p,{display:"flex",justifyContent:"flex-end",height:"60px",alignItems:"flex-start",px:"20px",pt:"20px",boxSizing:"border-box",children:e(c,{"aria-label":M.verticalMenuFullScreen.ariaLabels.close(),onClick:P,"data-element":"close",children:e(s,{type:"close",color:"var(--colorsComponentsLeftnavWinterStandardContent)"})})}),e(m,{value:{isFullScreen:!0},children:e(f,{children:v})})]},L=null!=L?L:{},Object.getOwnPropertyDescriptors?Object.defineProperties(D,Object.getOwnPropertyDescriptors(L)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(L)).forEach((function(e){Object.defineProperty(D,e,Object.getOwnPropertyDescriptor(L,e))})),D))})});var D,L};export{g as VerticalMenuFullScreen,g as default};

package/esm/components/vertical-menu/vertical-menu-item/__internal__/menu-item.context.js

@@ -1,4 +1 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({
-  level: 0
-});
+import e from"react";var t=e.createContext({level:0});export{t as default};

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

@@ -1,71 +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, { useState, useContext } from "react";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledVerticalMenuItem, StyledTitle, StyledAdornment, StyledList, StyledChevronIcon, StyledTitleIcon } from "../vertical-menu.style";
-import MenuItemContext from "./__internal__/menu-item.context";
-import { useVerticalMenuContext } from "../__internal__/vertical-menu.context";
-export const VerticalMenuItem = ({
-  defaultOpen = false,
-  title,
-  iconType,
-  adornment,
-  children,
-  component,
-  active,
-  height = "56px",
-  href,
-  ...rest
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const handleOnClick = () => {
-    setIsOpen(state => !state);
-  };
-  const {
-    level
-  } = useContext(MenuItemContext);
-  const {
-    isFullScreen
-  } = useVerticalMenuContext();
-  const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
-  const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
-  let itemProps = {};
-  if (href) {
-    itemProps = {
-      as: "a",
-      href
-    };
-  }
-  if (component) {
-    itemProps = {
-      as: component,
-      href,
-      tabIndex: 0,
-      ...rest
-    };
-  }
-  if (children) {
-    itemProps = {
-      as: "button",
-      type: "button",
-      "aria-expanded": isOpen,
-      onClick: handleOnClick
-    };
-  }
-  const paddingX = `calc(var(--spacing500) + (${level} * var(--spacing400)))`;
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledVerticalMenuItem, _extends({
-    height: height,
-    px: paddingX,
-    py: 2,
-    active: shouldDisplayActiveState
-  }, itemProps, filterStyledSystemPaddingProps(rest), tagComponent("vertical-menu-item", rest)), iconType && /*#__PURE__*/React.createElement(StyledTitleIcon, {
-    type: iconType
-  }), /*#__PURE__*/React.createElement(StyledTitle, null, title), adornment && /*#__PURE__*/React.createElement(StyledAdornment, null, renderAdornment()), children && !isFullScreen && /*#__PURE__*/React.createElement(StyledChevronIcon, {
-    type: isOpen ? "chevron_up_thick" : "chevron_down_thick"
-  })), (isOpen || isFullScreen) && /*#__PURE__*/React.createElement(MenuItemContext.Provider, {
-    value: {
-      level: level + 1
-    }
-  }, /*#__PURE__*/React.createElement(StyledList, null, children)));
-};
-export default VerticalMenuItem;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useContext as n}from"react";import o from"../../../__internal__/utils/helpers/tags/tags.js";import i from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as c,StyledTitleIcon as l,StyledTitle as p,StyledAdornment as a,StyledChevronIcon as f,StyledList as u}from"../vertical-menu.style.js";import s from"./__internal__/menu-item.context.js";import{useVerticalMenuContext as y}from"../__internal__/vertical-menu.context.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){m(e,t,r[t])}))}return e}const O=m=>{var{defaultOpen:O=!1,title:h,iconType:d,adornment:j,children:v,component:g,active:_,height:P="56px",href:w}=m,x=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(m,["defaultOpen","title","iconType","adornment","children","component","active","height","href"]);const[S,k]=r(O),{level:D}=n(s),{isFullScreen:E}=y(),I="function"==typeof _?_(S):_;let T={};return w&&(T={as:"a",href:w}),g&&(T=b({as:g,href:w,tabIndex:0},x)),v&&(T={as:"button",type:"button","aria-expanded":S,onClick:()=>{k((e=>!e))}}),e("li",{children:[e(c,(C=b({height:P,px:`calc(var(--spacing500) + (${D} * var(--spacing400)))`,py:2,active:I},T,i(x),o("vertical-menu-item",x)),F={children:[d&&t(l,{type:d}),t(p,{children:h}),j&&t(a,{children:"function"==typeof j?j(S):j}),v&&!E&&t(f,{type:S?"chevron_up_thick":"chevron_down_thick"})]},F=null!=F?F:{},Object.getOwnPropertyDescriptors?Object.defineProperties(C,Object.getOwnPropertyDescriptors(F)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(F)).forEach((function(e){Object.defineProperty(C,e,Object.getOwnPropertyDescriptor(F,e))})),C)),(S||E)&&t(s.Provider,{value:{level:D+1},children:t(u,{children:v})})]});var C,F};export{O as VerticalMenuItem,O as default};

package/esm/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.component.js

@@ -1,22 +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 from "react";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledVerticalMenuItem, StyledTitle } from "../vertical-menu.style";
-export const VerticalMenuTrigger = ({
-  height = "40px",
-  p = 2,
-  onClick,
-  children,
-  ...rest
-}) => {
-  const paddingProps = filterStyledSystemPaddingProps(rest);
-  return /*#__PURE__*/React.createElement(StyledVerticalMenuItem, _extends({
-    onClick: onClick,
-    as: "button",
-    height: height,
-    p: p,
-    tabIndex: 0
-  }, paddingProps, tagComponent("vertical-menu-trigger", rest)), /*#__PURE__*/React.createElement(StyledTitle, null, children));
-};
-export default VerticalMenuTrigger;
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../../__internal__/utils/helpers/tags/tags.js";import r from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledVerticalMenuItem as n,StyledTitle as o}from"../vertical-menu.style.js";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var{height:l="40px",p=2,onClick:s,children:u}=c,a=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,["height","p","onClick","children"]);const f=r(a);return e(n,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({onClick:s,as:"button",height:l,p,tabIndex:0},f,t("vertical-menu-trigger",a)),O=null!=(O={children:e(o,{children:u})})?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b));var b,O};export{c as VerticalMenuTrigger,c as default};

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

@@ -1,31 +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 from "react";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { StyledVerticalMenu, StyledList } from "./vertical-menu.style";
-import { VerticalMenuProvider } from "./__internal__/vertical-menu.context";
-export const VerticalMenu = ({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  width = "322px",
-  children,
-  height = "100%",
-  ...rest
-}) => {
-  return /*#__PURE__*/React.createElement(StyledVerticalMenu, _extends({
-    boxSizing: "border-box",
-    scrollVariant: "light",
-    backgroundColor: "var(--colorsComponentsLeftnavWinterStandardBackground)",
-    width: width,
-    height: height,
-    py: 1,
-    as: "nav",
-    overflow: "auto",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
-  }, tagComponent("vertical-menu", rest)), /*#__PURE__*/React.createElement(StyledList, null, /*#__PURE__*/React.createElement(VerticalMenuProvider, {
-    value: {
-      isFullScreen: false
-    }
-  }, children)));
-};
-export default VerticalMenu;
+import{jsx as e}from"react/jsx-runtime";import"react";import r from"../../__internal__/utils/helpers/tags/tags.js";import{StyledVerticalMenu as t,StyledList as n}from"./vertical-menu.style.js";import{VerticalMenuProvider as o}from"./__internal__/vertical-menu.context.js";function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const i=i=>{var a,c,{"aria-label":b,"aria-labelledby":u,width:p="322px",children:s,height:f="100%"}=i,y=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(i,["aria-label","aria-labelledby","width","children","height"]);return e(t,(a=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){l(e,r,t[r])}))}return e}({boxSizing:"border-box",scrollVariant:"light",backgroundColor:"var(--colorsComponentsLeftnavWinterStandardBackground)",width:p,height:f,py:1,as:"nav",overflow:"auto","aria-label":b,"aria-labelledby":u},r("vertical-menu",y)),c=null!=(c={children:e(n,{children:e(o,{value:{isFullScreen:!1},children:s})})})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(c)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(c)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(c,e))})),a))};export{i as VerticalMenu,i as default};