carbon-react 157.1.0 → 157.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/menu/menu-item/menu-item.style.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/lib/components/menu/menu-item/menu-item.style.js +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as n}from"styled-components";import{padding as t}from"styled-system";import r from"../menu.config.js";import{Link as a}from"../../link/link.component.js";import e from"../../button/button.style.js";import i from"../../icon-button/icon-button.style.js";import c from"../../icon/icon.style.js";import{StyledContent as u,StyledLink as s}from"../../link/link.style.js";import p from"../../../style/themes/apply-base-theme.js";import d from"../../../style/utils/add-focus-styling.js";const l=o=>{var n,t;const{paddingRight:r}=o,a=null===(t=String(r))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===r||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(r){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:r};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:r};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:r};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:r};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:r};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:r};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:r};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:r};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},g=o.a.attrs(p).attrs({as:a}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-
|
|
1
|
+
import o,{css as n}from"styled-components";import{padding as t}from"styled-system";import r from"../menu.config.js";import{Link as a}from"../../link/link.component.js";import e from"../../button/button.style.js";import i from"../../icon-button/icon-button.style.js";import c from"../../icon/icon.style.js";import{StyledContent as u,StyledLink as s}from"../../link/link.style.js";import p from"../../../style/themes/apply-base-theme.js";import d from"../../../style/utils/add-focus-styling.js";const l=o=>{var n,t;const{paddingRight:r}=o,a=null===(t=String(r))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===r||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(r){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:r};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:r};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:r};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:r};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:r};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:r};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:r};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:r};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},g=o.a.attrs(p).attrs({as:a}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-919c9426-0"})([""," &&&{> a,> button{","}}"],(({menuType:o,selected:a,hasSubmenu:p,isOpen:g,menuItemVariant:b,showDropdownArrow:m,href:h,clickToOpen:v,maxWidth:f,inFullscreenView:x,overrideColor:k,asPassiveItem:w,asDiv:y,hasFocusableChild:S,hasInput:C,inSubmenu:M})=>n(["display:flex;align-items:center;font-size:14px;font-weight:500;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;}a:focus,button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],d(!0),u,!k&&n(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],r[o].background),k&&n(["&&&&{background-color:",";}"],"alternate"===b?r[o].alternate:r[o].submenuItemBackground),!x&&n(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],M?"":"justify-content: center;",r[o].background,r[o].color,f&&n(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),e,!y&&!w&&n(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&n(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!x&&n(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],e,u,e),i,r[o].color),!S&&!x&&n(["",""],p||f?n(["> a,> button{padding:11px 16px ",";}"],p&&f?"12px":"10px"):n(["> a,> button{padding:11px 16px;}"])),s,s,x&&n(["height:auto;white-space:normal;","{top:-2px;}"],c),s,s,s,!C&&`color: ${r[o].color};`,!x&&n(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c,c),a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],r[o].selected,r[o].selected),"alternate"===b&&!x&&n(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],r[o].alternate,r[o].alternate,!C&&n(["&&& a:hover,&&& button:hover{background-color:",";}"],r[o].alternateHover)),g&&n(["a,button{background-color:",";color:",";}"],r[o].submenuItemBackground,r[o].color),p&&n(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],r[o].submenuBackground,r[o].submenuBackground,r[o].color,r[o].color,v&&g&&n(["background-color:",";"],r[o].submenuOpenedBackground),r[o].submenuOpenedBackground,!(h||v)&&n(["cursor:default;background-color:",";color:",";"],r[o].submenuItemBackground,r[o].color),r[o].color,a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],r[o].submenuSelected,r[o].submenuSelected),m&&n(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],i,(o=>l(t(o)).padding),(o=>l(t(o)).iconSpacing))),x&&n([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&n(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],r[o].title,r[o].title),!w&&n(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!C&&n(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),t);export{g as default};
|
package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{useState as i,useRef as o,useCallback as
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{useState as i,useRef as o,useCallback as l,useLayoutEffect as a,useEffect as c}from"react";import{DepthProvider as s}from"./__internal__/depth.context.js";import{MenuFocusProvider as u}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as d,useResponsiveVerticalMenu as p}from"./responsive-vertical-menu.context.js";import{StyledButton as v,ModalContainer as m,StyledCloseButton as h,StyledResponsiveMenu as f,StyledGlobalVerticalMenuWrapper as b}from"./responsive-vertical-menu.style.js";import{Box as y}from"../../box/box.component.js";import w from"../../modal/modal.component.js";import g from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import j from"../../../hooks/useMediaQuery/useMediaQuery.js";import O from"../../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../../__internal__/focus-trap/focus-trap.component.js";import x from"../../../__internal__/utils/helpers/tags/tags.js";import L from"../../../__internal__/utils/helpers/events/events.js";function k(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function E(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){k(e,r,n[r])}))}return e}function M(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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}function P(e,r){if(null==e)return{};var n,t,i=function(e,r){if(null==e)return{};var n,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(i[n]=e[n]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const T=s=>{var u,{children:d,height:k,responsiveBreakpoint:T=700,width:B,launcherButtonDataProps:C}=s,R=P(s,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const I=O(),{active:S,activeMenuItem:D,buttonRef:z,containerRef:A,menuRef:$,responsiveMode:q,top:Q,setActive:V,setActiveMenuItem:G,setReducedMotion:F,setResponsiveMode:H,setLeft:J,setTop:K}=p(),[N,U]=i(0),W=g(T),[X,Y]=i("100%"),Z=!j("screen and (prefers-reduced-motion: no-preference)"),ee=o(null),{current:re}=$,{current:ne}=z,te=l((()=>{if(S&&q){const e=re||document.querySelector("[id='responsive-vertical-menu-primary']");e&&Y(`${e.getBoundingClientRect().width}px`)}J(D&&re?`${re.getBoundingClientRect().right}px`:"auto"),K(D&&ne?`${ne.getBoundingClientRect().bottom}px`:"auto")}),[S,re,q,D,ne]),ie=l((e=>{A.current&&!A.current.contains(e.target)&&V(!1)}),[A]),oe=l((()=>{V((e=>!e)),G(null)}),[S,V,G]);a((()=>(te(),window.addEventListener("resize",te),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",te)})),[S,te,re,q]);const le=o(!1),ae=o(null);c((()=>{const e=()=>{le.current=!0,null!==ae.current&&clearTimeout(ae.current),ae.current=window.setTimeout((()=>{le.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==ae.current&&clearTimeout(ae.current)}}),[]),c((()=>{let e=null;const r=r=>{A.current&&(L.composedPath(r).includes(z.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=A.current)||void 0===e?void 0:e.contains(document.activeElement))||V(!1)}),0)))},n=e=>{"Escape"===e.key&&(e.preventDefault(),V(!1))},t=A.current;return S&&!q&&(document.addEventListener("keydown",n),window.addEventListener("click",ie),null==t||t.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",n),window.removeEventListener("click",ie),null==t||t.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[S,D,z,A,ie,q]),c((()=>{null==F||F(Z),null==H||H(!W)}),[W,Z,F,H]);const ce=l((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+ce(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+ce(r.props.children):e),0):0}),[]);return c((()=>{const e=N,r=ce(d);e!==r&&(U(r),G(null))}),[N,d,ce,G]),r("div",{ref:A,children:[e(v,E({active:S,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:oe,ref:z},x("responsive-vertical-menu-launcher",E({"data-role":"responsive-vertical-menu-launcher"},C)),(()=>{var e,r;return q?{"aria-expanded":void 0,"aria-controls":"responsive-vertical-menu-dialog","aria-label":null===(r=I.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":S,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=I.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),q?e(w,{open:S,children:e(_,{wrapperRef:ee,isOpen:S,children:r(m,M(E({ref:ee,width:X,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=I.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e(y,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(h,{"aria-label":null===(u=I.verticalMenu.ariaLabels)||void 0===u?void 0:u.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{V(!1),G(null)}})}),e(f,{height:k,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:$,responsive:!0,tabIndex:-1,top:"48px",width:B,children:d})]}))})}):e(b,M(E({},R,x("responsive-vertical-menu",R)),{children:S&&e(n,{children:e(f,{childOpen:!!D,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:k||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Z,ref:$,responsive:!1,tabIndex:-1,top:Q,width:B,children:d})})}))]})},B=r=>{var{children:n,width:t,height:i}=r,o=P(r,["children","width","height"]);return e(s,{children:e(u,{children:e(d,{width:t,height:i,children:e(T,M(E({width:t,height:i},o),{children:n}))})})})};export{B as ResponsiveVerticalMenu,B as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-919c9426-0"})([""," &&&{> a,> button{","}}"],(({menuType:e,selected:s,hasSubmenu:d,isOpen:p,menuItemVariant:g,showDropdownArrow:b,href:h,clickToOpen:f,maxWidth:m,inFullscreenView:v,overrideColor:x,asPassiveItem:k,asDiv:y,hasFocusableChild:S,hasInput:w,inSubmenu:C})=>o.css(["display:flex;align-items:center;font-size:14px;font-weight:500;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;}a:focus,button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],u.default(!0),i.StyledContent,!x&&o.css(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],t.default[e].background),x&&o.css(["&&&&{background-color:",";}"],"alternate"===g?t.default[e].alternate:t.default[e].submenuItemBackground),!v&&o.css(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],C?"":"justify-content: center;",t.default[e].background,t.default[e].color,m&&o.css(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),a.default,!y&&!k&&o.css(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&o.css(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!v&&o.css(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],a.default,i.StyledContent,a.default),r.default,t.default[e].color),!S&&!v&&o.css(["",""],d||m?o.css(["> a,> button{padding:11px 16px ",";}"],d&&m?"12px":"10px"):o.css(["> a,> button{padding:11px 16px;}"])),i.StyledLink,i.StyledLink,v&&o.css(["height:auto;white-space:normal;","{top:-2px;}"],c.default),i.StyledLink,i.StyledLink,i.StyledLink,!w&&`color: ${t.default[e].color};`,!v&&o.css(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c.default,c.default),s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],t.default[e].selected,t.default[e].selected),"alternate"===g&&!v&&o.css(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],t.default[e].alternate,t.default[e].alternate,!w&&o.css(["&&& a:hover,&&& button:hover{background-color:",";}"],t.default[e].alternateHover)),p&&o.css(["a,button{background-color:",";color:",";}"],t.default[e].submenuItemBackground,t.default[e].color),d&&o.css(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],t.default[e].submenuBackground,t.default[e].submenuBackground,t.default[e].color,t.default[e].color,f&&p&&o.css(["background-color:",";"],t.default[e].submenuOpenedBackground),t.default[e].submenuOpenedBackground,!(h||f)&&o.css(["cursor:default;background-color:",";color:",";"],t.default[e].submenuItemBackground,t.default[e].color),t.default[e].color,s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],t.default[e].submenuSelected,t.default[e].submenuSelected),b&&o.css(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],r.default,(o=>l(n.padding(o)).padding),(o=>l(n.padding(o)).iconSpacing))),v&&o.css([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&o.css(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],t.default[e].title,t.default[e].title),!k&&o.css(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!w&&o.css(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),n.padding);exports.default=p;
|
package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./__internal__/depth.context.js"),n=require("./__internal__/focus.context.js"),i=require("./responsive-vertical-menu.context.js"),o=require("./responsive-vertical-menu.style.js"),s=require("../../box/box.component.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./__internal__/depth.context.js"),n=require("./__internal__/focus.context.js"),i=require("./responsive-vertical-menu.context.js"),o=require("./responsive-vertical-menu.style.js"),s=require("../../box/box.component.js"),l=require("../../modal/modal.component.js"),u=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),a=require("../../../hooks/useMediaQuery/useMediaQuery.js"),c=require("../../../hooks/__internal__/useLocale/useLocale.js"),d=require("../../../__internal__/focus-trap/focus-trap.component.js"),p=require("../../../__internal__/utils/helpers/tags/tags.js"),v=require("../../../__internal__/utils/helpers/events/events.js");function f(e){return e&&e.__esModule?e:{default:e}}var h=f(r);function m(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(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){m(e,r,t[r])}))}return e}function y(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 j(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const x=t=>{var n,{children:f,height:m,responsiveBreakpoint:x=700,width:g,launcherButtonDataProps:w}=t,O=j(t,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const _=c.default(),{active:M,activeMenuItem:k,buttonRef:E,containerRef:L,menuRef:P,responsiveMode:R,top:q,setActive:C,setActiveMenuItem:S,setReducedMotion:B,setResponsiveMode:T,setLeft:D,setTop:I}=i.useResponsiveVerticalMenu(),[z,A]=r.useState(0),V=u.default(x),[$,F]=r.useState("100%"),G=!a.default("screen and (prefers-reduced-motion: no-preference)"),Q=r.useRef(null),{current:W}=P,{current:H}=E,J=r.useCallback((()=>{if(M&&R){const e=W||document.querySelector("[id='responsive-vertical-menu-primary']");e&&F(`${e.getBoundingClientRect().width}px`)}D(k&&W?`${W.getBoundingClientRect().right}px`:"auto"),I(k&&H?`${H.getBoundingClientRect().bottom}px`:"auto")}),[M,W,R,k,H]),K=r.useCallback((e=>{L.current&&!L.current.contains(e.target)&&C(!1)}),[L]),N=r.useCallback((()=>{C((e=>!e)),S(null)}),[M,C,S]);r.useLayoutEffect((()=>(J(),window.addEventListener("resize",J),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",J)})),[M,J,W,R]);const U=r.useRef(!1),X=r.useRef(null);r.useEffect((()=>{const e=()=>{U.current=!0,null!==X.current&&clearTimeout(X.current),X.current=window.setTimeout((()=>{U.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==X.current&&clearTimeout(X.current)}}),[]),r.useEffect((()=>{let e=null;const r=r=>{L.current&&(v.default.composedPath(r).includes(E.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=L.current)||void 0===e?void 0:e.contains(document.activeElement))||C(!1)}),0)))},t=e=>{"Escape"===e.key&&(e.preventDefault(),C(!1))},n=L.current;return M&&!R&&(document.addEventListener("keydown",t),window.addEventListener("click",K),null==n||n.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",t),window.removeEventListener("click",K),null==n||n.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[M,k,E,L,K,R]),r.useEffect((()=>{null==B||B(G),null==T||T(!V)}),[V,G,B,T]);const Y=r.useCallback((e=>{if(!e)return 0;if(h.default.isValidElement(e))return 1+Y(e.props.children);const r=h.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>h.default.isValidElement(r)?e+1+Y(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=z,r=Y(f);e!==r&&(A(r),S(null))}),[z,f,Y,S]),e.jsxs("div",{ref:L,children:[e.jsx(o.StyledButton,b({active:M,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:N,ref:E},p.default("responsive-vertical-menu-launcher",b({"data-role":"responsive-vertical-menu-launcher"},w)),(()=>{var e,r;return R?{"aria-expanded":void 0,"aria-controls":"responsive-vertical-menu-dialog","aria-label":null===(r=_.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":M,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=_.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),R?e.jsx(l.default,{open:M,children:e.jsx(d.default,{wrapperRef:Q,isOpen:M,children:e.jsxs(o.ModalContainer,y(b({ref:Q,width:$,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=_.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e.jsx(s.Box,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(o.StyledCloseButton,{"aria-label":null===(n=_.verticalMenu.ariaLabels)||void 0===n?void 0:n.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{C(!1),S(null)}})}),e.jsx(o.StyledResponsiveMenu,{height:m,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:G,ref:P,responsive:!0,tabIndex:-1,top:"48px",width:g,children:f})]}))})}):e.jsx(o.StyledGlobalVerticalMenuWrapper,y(b({},O,p.default("responsive-vertical-menu",O)),{children:M&&e.jsx(e.Fragment,{children:e.jsx(o.StyledResponsiveMenu,{childOpen:!!k,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:m||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:G,ref:P,responsive:!1,tabIndex:-1,top:q,width:g,children:f})})}))]})},g=r=>{var{children:o,width:s,height:l}=r,u=j(r,["children","width","height"]);return e.jsx(t.DepthProvider,{children:e.jsx(n.MenuFocusProvider,{children:e.jsx(i.ResponsiveVerticalMenuProvider,{width:s,height:l,children:e.jsx(x,y(b({width:s,height:l},u),{children:o}))})})})};exports.ResponsiveVerticalMenu=g,exports.default=g;
|