carbon-react 158.2.0 → 158.2.1
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/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,{forwardRef as i,useState as o,useRef as l,useImperativeHandle as
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import t,{forwardRef as i,useState as o,useRef as l,useImperativeHandle as c,useCallback as a,useLayoutEffect as s,useEffect as u}from"react";import{DepthProvider as p}from"./__internal__/depth.context.js";import{MenuFocusProvider as d}from"./__internal__/focus.context.js";import{ResponsiveVerticalMenuProvider as v,useResponsiveVerticalMenu as m}from"./responsive-vertical-menu.context.js";import{StyledButton as h,ModalContainer as f,StyledCloseButton as b,StyledResponsiveMenu as y,StyledGlobalVerticalMenuWrapper as w}from"./responsive-vertical-menu.style.js";import{Box as g}from"../../box/box.component.js";import j from"../../modal/modal.component.js";import O from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import _ from"../../../hooks/useMediaQuery/useMediaQuery.js";import x from"../../../hooks/__internal__/useLocale/useLocale.js";import L from"../../../__internal__/focus-trap/focus-trap.component.js";import k from"../../../__internal__/utils/helpers/tags/tags.js";import E from"../../../__internal__/utils/helpers/events/events.js";function M(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function P(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){M(e,r,n[r])}))}return e}function B(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 T(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 C=i(((i,p)=>{var d,{children:v,height:M,responsiveBreakpoint:C=700,width:R,launcherButtonDataProps:S}=i,I=T(i,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const D=x(),{active:z,activeMenuItem:A,buttonRef:$,containerRef:q,menuRef:Q,responsiveMode:V,top:G,setActive:F,setActiveMenuItem:H,setReducedMotion:J,setResponsiveMode:K,setLeft:N,setTop:U}=m(),[W,X]=o(0),Y=O(C),[Z,ee]=o("100%"),re=!_("screen and (prefers-reduced-motion: no-preference)"),ne=l(null),{current:te}=Q,{current:ie}=$;c(p,(()=>({focusLaunchButton(){null==ie||ie.focus({preventScroll:!0})}})),[ie]);const oe=a((()=>{if(z&&V){const e=te||document.querySelector("[id='responsive-vertical-menu-primary']");e&&ee(`${e.getBoundingClientRect().width}px`)}N(A&&te?`${te.getBoundingClientRect().right}px`:"auto"),U(A&&ie?`${ie.getBoundingClientRect().bottom}px`:"auto")}),[z,te,V,A,ie]),le=a((e=>{q.current&&!q.current.contains(e.target)&&F(!1)}),[q]),ce=a((()=>{F((e=>!e)),H(null)}),[z,F,H]);s((()=>(oe(),window.addEventListener("resize",oe),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",oe)})),[z,oe,te,V]);const ae=l(!1),se=l(null);u((()=>{const e=()=>{ae.current=!0,null!==se.current&&clearTimeout(se.current),se.current=window.setTimeout((()=>{ae.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==se.current&&clearTimeout(se.current)}}),[]),u((()=>{let e=null;const r=r=>{q.current&&(E.composedPath(r).includes($.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=q.current)||void 0===e?void 0:e.contains(document.activeElement))||F(!1)}),0)))},n=e=>{"Escape"===e.key&&(e.preventDefault(),F(!1))},t=q.current;return z&&!V&&(document.addEventListener("keydown",n),window.addEventListener("click",le),null==t||t.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",n),window.removeEventListener("click",le),null==t||t.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[z,A,$,q,le,V]),u((()=>{null==J||J(re),null==K||K(!Y)}),[Y,re,J,K]);const ue=a((e=>{if(!e)return 0;if(t.isValidElement(e))return 1+ue(e.props.children);const r=t.Children.toArray(e);return r.length?r.reduce(((e,r)=>t.isValidElement(r)?e+1+ue(r.props.children):e),0):0}),[]);return u((()=>{const e=W,r=ue(v);e!==r&&(X(r),H(null))}),[W,v,ue,H]),r("div",{ref:q,children:[e(h,P({active:z,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:ce,ref:$},k("responsive-vertical-menu-launcher",P({"data-role":"responsive-vertical-menu-launcher"},S)),(()=>{var e,r;return V?{"aria-label":null===(r=D.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":z,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),V?e(j,{open:z,children:e(L,{wrapperRef:ne,isOpen:z,children:r(f,B(P({ref:ne,width:Z,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=D.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e(g,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e(b,{"aria-label":null===(d=D.verticalMenu.ariaLabels)||void 0===d?void 0:d.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{F(!1),H(null)}})}),e(y,{height:M,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!0,tabIndex:-1,top:"48px",width:R,children:v})]}))})}):e(w,B(P({},I,k("responsive-vertical-menu",I)),{children:z&&e(n,{children:e(y,{childOpen:!!A,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:M||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:re,ref:Q,responsive:!1,tabIndex:-1,top:G,width:R,children:v})})}))]})})),R=i(((r,n)=>{var{children:t,width:i,height:o}=r,l=T(r,["children","width","height"]);return e(p,{children:e(d,{children:e(v,{width:i,height:o,children:e(C,B(P({ref:n,width:i,height:o},l),{children:t}))})})})}));export{R as ResponsiveVerticalMenu,R as default};
|
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"),
|
|
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"),u=require("../../box/box.component.js"),l=require("../../modal/modal.component.js"),s=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 w=r.forwardRef(((t,n)=>{var f,{children:m,height:w,responsiveBreakpoint:x=700,width:g,launcherButtonDataProps:O}=t,_=j(t,["children","height","responsiveBreakpoint","width","launcherButtonDataProps"]);const M=c.default(),{active:k,activeMenuItem:E,buttonRef:L,containerRef:P,menuRef:R,responsiveMode:q,top:S,setActive:C,setActiveMenuItem:B,setReducedMotion:T,setResponsiveMode:I,setLeft:D,setTop:z}=i.useResponsiveVerticalMenu(),[A,V]=r.useState(0),$=s.default(x),[F,G]=r.useState("100%"),Q=!a.default("screen and (prefers-reduced-motion: no-preference)"),H=r.useRef(null),{current:W}=R,{current:J}=L;r.useImperativeHandle(n,(()=>({focusLaunchButton(){null==J||J.focus({preventScroll:!0})}})),[J]);const K=r.useCallback((()=>{if(k&&q){const e=W||document.querySelector("[id='responsive-vertical-menu-primary']");e&&G(`${e.getBoundingClientRect().width}px`)}D(E&&W?`${W.getBoundingClientRect().right}px`:"auto"),z(E&&J?`${J.getBoundingClientRect().bottom}px`:"auto")}),[k,W,q,E,J]),N=r.useCallback((e=>{P.current&&!P.current.contains(e.target)&&C(!1)}),[P]),U=r.useCallback((()=>{C((e=>!e)),B(null)}),[k,C,B]);r.useLayoutEffect((()=>(K(),window.addEventListener("resize",K),()=>{var e;null===(e=window)||void 0===e||e.removeEventListener("resize",K)})),[k,K,W,q]);const X=r.useRef(!1),Y=r.useRef(null);r.useEffect((()=>{const e=()=>{X.current=!0,null!==Y.current&&clearTimeout(Y.current),Y.current=window.setTimeout((()=>{X.current=!1}),100)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==Y.current&&clearTimeout(Y.current)}}),[]),r.useEffect((()=>{let e=null;const r=r=>{P.current&&(v.default.composedPath(r).includes(L.current)||(e&&(clearTimeout(e),e=null),e=setTimeout((()=>{var e;(null===(e=P.current)||void 0===e?void 0:e.contains(document.activeElement))||C(!1)}),0)))},t=e=>{"Escape"===e.key&&(e.preventDefault(),C(!1))},n=P.current;return k&&!q&&(document.addEventListener("keydown",t),window.addEventListener("click",N),null==n||n.addEventListener("focusout",r)),()=>{document.removeEventListener("keydown",t),window.removeEventListener("click",N),null==n||n.removeEventListener("focusout",r),e&&clearTimeout(e),e=null}}),[k,E,L,P,N,q]),r.useEffect((()=>{null==T||T(Q),null==I||I(!$)}),[$,Q,T,I]);const Z=r.useCallback((e=>{if(!e)return 0;if(h.default.isValidElement(e))return 1+Z(e.props.children);const r=h.default.Children.toArray(e);return r.length?r.reduce(((e,r)=>h.default.isValidElement(r)?e+1+Z(r.props.children):e),0):0}),[]);return r.useEffect((()=>{const e=A,r=Z(m);e!==r&&(V(r),B(null))}),[A,m,Z,B]),e.jsxs("div",{ref:P,children:[e.jsx(o.StyledButton,b({active:k,buttonType:"tertiary",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:U,ref:L},p.default("responsive-vertical-menu-launcher",b({"data-role":"responsive-vertical-menu-launcher"},O)),(()=>{var e,r;return q?{"aria-label":null===(r=M.verticalMenu.ariaLabels)||void 0===r?void 0:r.responsiveMenuLauncher()}:{"aria-expanded":k,"aria-controls":"responsive-vertical-menu-primary","aria-label":null===(e=M.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuLauncher()}})())),q?e.jsx(l.default,{open:k,children:e.jsx(d.default,{wrapperRef:H,isOpen:k,children:e.jsxs(o.ModalContainer,y(b({ref:H,width:F,tabIndex:-1,id:"responsive-vertical-menu-dialog"},(()=>{var e;return{role:"dialog","aria-modal":!0,"aria-label":null===(e=M.verticalMenu.ariaLabels)||void 0===e?void 0:e.responsiveMenuAria()}})()),{children:[e.jsx(u.Box,{boxSizing:"border-box",display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(o.StyledCloseButton,{"aria-label":null===(f=M.verticalMenu.ariaLabels)||void 0===f?void 0:f.responsiveMenuCloseButton(),"data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{C(!1),B(null)}})}),e.jsx(o.StyledResponsiveMenu,{height:w,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:R,responsive:!0,tabIndex:-1,top:"48px",width:g,children:m})]}))})}):e.jsx(o.StyledGlobalVerticalMenuWrapper,y(b({},_,p.default("responsive-vertical-menu",_)),{children:k&&e.jsx(e.Fragment,{children:e.jsx(o.StyledResponsiveMenu,{childOpen:!!E,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:w||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:Q,ref:R,responsive:!1,tabIndex:-1,top:S,width:g,children:m})})}))]})})),x=r.forwardRef(((r,o)=>{var{children:u,width:l,height:s}=r,a=j(r,["children","width","height"]);return e.jsx(t.DepthProvider,{children:e.jsx(n.MenuFocusProvider,{children:e.jsx(i.ResponsiveVerticalMenuProvider,{width:l,height:s,children:e.jsx(w,y(b({ref:o,width:l,height:s},a),{children:u}))})})})}));exports.ResponsiveVerticalMenu=x,exports.default=x;
|