carbon-react 155.7.0 → 155.8.0
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-item/responsive-vertical-menu-item.component.js +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,useContext as i,createContext as c,useEffect as l,forwardRef as a,useMemo as d,useState as s}from"react";import{StyledResponsiveMenuListItem as p,StyledResponsiveMenuItem as u,StyledNestedMenuWrapper as h,StyledNestedMenu as m,StyledResponsiveMenuAction as v,StyledIcon as f,StyledMenuItemContent as b}from"./responsive-vertical-menu-item.style.js";import{useDepth as y,IncreaseDepth as O}from"../__internal__/depth.context.js";import{useMenuFocus as g}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as j}from"../responsive-vertical-menu.context.js";import I from"../../../icon/icon.component.js";import w from"../../../../__internal__/utils/helpers/guid/index.js";function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function _(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){x(e,n,t[n])}))}return e}function P(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function k(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const C=c(void 0),D=({customIcon:t,depth:r,hasChildren:o,icon:i,label:c,responsive:l})=>n(b,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:l,children:[t,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:l,children:[i&&e(I,{type:i}),c]}),$=a(((o,c)=>{var{children:a,customIcon:b,icon:O,id:I,href:w,label:x,onClick:$,rel:S,target:M}=o,A=k(o,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:K,containerRef:E,responsiveMode:F,setActive:q,setActiveMenuItem:R,reducedMotion:T}=j(),{expandItem:z,focusItem:B,getRegisteredItems:G,moveFocus:H,registerMenuItem:J}=g(),L=y(),N=(null==K?void 0:K.id)===I,Q=r.Children.count(a)>0,U=i(C),V=d((()=>F&&0===L),[L,F]),[W,X]=s(V&&Q);l((()=>{J(I,c,U)}),[I,U,c,J]);const Y=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=E.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${L}"]`))||[],n=Array.from(t),0===L&&Q&&(null==K?void 0:K.id)===I&&(e.preventDefault(),H(e.shiftKey?"lastChild":"firstChild")),1===L){const t=n.findIndex((e=>e.id===I)),r=0===t;t===n.length-1&&(!Q||Q&&!W)&&(e.shiftKey||(e.preventDefault(),H("parent"))),r&&e.shiftKey&&(e.preventDefault(),H("parent"))}if(2===L&&n.findIndex((e=>e.id===I))===n.length-1){const n=G(),t=n.find((e=>e.id===U)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=E.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${L-1}"]`))||[]);n.findIndex((e=>e.id===U))===n.length-1&&!e.shiftKey&&(e.preventDefault(),B(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),V)return;if(Q)if(0!==L||F)X(!W),z(I,!W);else{const e=(null==K?void 0:K.id)===I;R(e?null:{id:I,label:x,children:a})}else w&&"Enter"===e.key&&(window.location.href=w)}};return e(p,{children:Q?n(t,{children:[n(u,P(_({active:N,"aria-expanded":N||W,"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":L,"data-role":`responsive-vertical-menu-item-${I}`,depth:L,hasIcon:!!O||!!b,id:I,onClick:()=>{if(!V){if(0!==L||F)X(!W),z(I,!W);else{const e=(null==K?void 0:K.id)===I;R(e?null:{id:I,label:x,children:a})}B(I)}},onKeyDown:e=>{F||Y(e)},onFocus:()=>B(I),ref:c,responsive:F,tabIndex:V?-1:0,type:"button"},A),{children:[e(D,{customIcon:b,depth:L,hasChildren:!0,icon:O,label:x,responsive:F}),!V&&e(f,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:L,expanded:W||N,reduceMotion:!!T,type:L>=1?"chevron_down_thick":"chevron_right_thick"})]})),W&&e(h,{"data-component":`${I}-nested-menu-wrapper`,"data-role":`${I}-nested-menu-wrapper`,depth:L,hasIcon:!!O||!!b,responsive:F,children:e(m,{"data-component":`${I}-nested-menu`,"data-role":`${I}-nested-menu`,depth:L,hasIcon:!!O||!!b,id:`${I}-nested-menu`,responsive:F,children:e(C.Provider,{value:I,children:a})})})]}):e(v,P(_({"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":L,"data-role":`responsive-vertical-menu-item-${I}`,depth:L,href:w,id:I,onClick:e=>{null==$||$(e),q(!1)},onFocus:()=>B(I),onKeyDown:e=>{F||Y(e)},ref:c,rel:S,responsive:F,tabIndex:0,target:M},A),{children:e(D,{customIcon:b,depth:L,hasChildren:!1,icon:O,label:x,responsive:F})}))})})),S=n=>{var{children:t,id:r,label:c}=n,a=k(n,["children","id","label"]);const d=y(),s=o(null),{registerMenuItem:p}=g(),u=i(C),h=o(r||w());return l((()=>{const e=h.current;p(e,s,u)}),[u,p]),e($,P(_({id:h.current,label:c},a),{"data-depth":d,ref:s,children:t&&e(C.Provider,{value:r,children:e(O,{children:t})})}))};export{S as ResponsiveVerticalMenuItem,S as default};
|
|
1
|
+
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,useContext as i,createContext as c,useEffect as l,forwardRef as a,useMemo as d,useState as s}from"react";import{StyledResponsiveMenuListItem as p,StyledResponsiveMenuItem as u,StyledNestedMenuWrapper as h,StyledNestedMenu as m,StyledResponsiveMenuAction as v,StyledIcon as f,StyledMenuItemContent as b}from"./responsive-vertical-menu-item.style.js";import{useDepth as y,IncreaseDepth as O}from"../__internal__/depth.context.js";import{useMenuFocus as g}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as j}from"../responsive-vertical-menu.context.js";import I from"../../../icon/icon.component.js";import w from"../../../../__internal__/utils/helpers/guid/index.js";function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function _(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){x(e,n,t[n])}))}return e}function P(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function k(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const C=c(void 0),D=({customIcon:t,depth:r,hasChildren:o,icon:i,label:c,responsive:l})=>n(b,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:l,children:[t,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:l,children:[i&&e(I,{type:i}),c]}),$=a(((o,c)=>{var{children:a,customIcon:b,icon:O,id:I,href:w,label:x,onClick:$,rel:S,target:M}=o,A=k(o,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:K,containerRef:E,responsiveMode:F,setActive:q,setActiveMenuItem:R,reducedMotion:T}=j(),{expandItem:z,focusItem:B,getRegisteredItems:G,moveFocus:H,registerMenuItem:J}=g(),L=y(),N=(null==K?void 0:K.id)===I,Q=r.Children.count(a)>0,U=i(C),V=d((()=>F&&0===L),[L,F]),[W,X]=s(V&&Q||L>=2);l((()=>{J(I,c,U)}),[I,U,c,J]);const Y=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=E.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${L}"]`))||[],n=Array.from(t),0===L&&Q&&(null==K?void 0:K.id)===I&&(e.preventDefault(),H(e.shiftKey?"lastChild":"firstChild")),1===L){const t=n.findIndex((e=>e.id===I)),r=0===t;t===n.length-1&&(!Q||Q&&!W)&&(e.shiftKey||(e.preventDefault(),H("parent"))),r&&e.shiftKey&&(e.preventDefault(),H("parent"))}if(2===L&&n.findIndex((e=>e.id===I))===n.length-1){const n=G(),t=n.find((e=>e.id===U)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=E.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${L-1}"]`))||[]);n.findIndex((e=>e.id===U))===n.length-1&&!e.shiftKey&&(e.preventDefault(),B(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),V)return;if(Q)if(0!==L||F)X(!W),z(I,!W);else{const e=(null==K?void 0:K.id)===I;R(e?null:{id:I,label:x,children:a})}else w&&"Enter"===e.key&&(window.location.href=w)}};return e(p,{children:Q?n(t,{children:[n(u,P(_({active:N,"aria-expanded":N||W,"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":L,"data-role":`responsive-vertical-menu-item-${I}`,depth:L,hasIcon:!!O||!!b,id:I,onClick:()=>{if(!V){if(0!==L||F)X(!W),z(I,!W);else{const e=(null==K?void 0:K.id)===I;R(e?null:{id:I,label:x,children:a})}B(I)}},onKeyDown:e=>{F||Y(e)},onFocus:()=>B(I),ref:c,responsive:F,tabIndex:V?-1:0,type:"button"},A),{children:[e(D,{customIcon:b,depth:L,hasChildren:!0,icon:O,label:x,responsive:F}),!V&&e(f,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:L,expanded:W||N,reduceMotion:!!T,type:L>=1?"chevron_down_thick":"chevron_right_thick"})]})),W&&e(h,{"data-component":`${I}-nested-menu-wrapper`,"data-role":`${I}-nested-menu-wrapper`,depth:L,hasIcon:!!O||!!b,responsive:F,children:e(m,{"data-component":`${I}-nested-menu`,"data-role":`${I}-nested-menu`,depth:L,hasIcon:!!O||!!b,id:`${I}-nested-menu`,responsive:F,children:e(C.Provider,{value:I,children:a})})})]}):e(v,P(_({"data-component":`responsive-vertical-menu-item-${I}`,"data-depth":L,"data-role":`responsive-vertical-menu-item-${I}`,depth:L,href:w,id:I,onClick:e=>{null==$||$(e),q(!1)},onFocus:()=>B(I),onKeyDown:e=>{F||Y(e)},ref:c,rel:S,responsive:F,tabIndex:0,target:M},A),{children:e(D,{customIcon:b,depth:L,hasChildren:!1,icon:O,label:x,responsive:F})}))})})),S=n=>{var{children:t,id:r,label:c}=n,a=k(n,["children","id","label"]);const d=y(),s=o(null),{registerMenuItem:p}=g(),u=i(C),h=o(r||w());return l((()=>{const e=h.current;p(e,s,u)}),[u,p]),e($,P(_({id:h.current,label:c},a),{"data-depth":d,ref:s,children:t&&e(C.Provider,{value:r,children:e(O,{children:t})})}))};export{S as ResponsiveVerticalMenuItem,S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{margin as i,padding as
|
|
1
|
+
import e,{css as t}from"styled-components";import{margin as i,padding as o}from"styled-system";import n from"../../../icon/icon.component.js";import a from"../../../../style/utils/add-focus-styling.js";const r=(e,t)=>e&&t?"180deg":"0deg",s=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;"," ",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,o,a(!0)),c=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-d6a04aac-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],r(e,i),o?0:"0.2s"))),d=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-d6a04aac-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-d6a04aac-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:i})=>1===e&&i&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-d6a04aac-3"})(["padding:0;",""],(({depth:e,hasIcon:i,responsive:o})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!i?"100%":"88%",o&&t(["margin-left:",";"],i||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),g=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-d6a04aac-4"})(["list-style:none;margin:0;padding:0;width:100%;max-width:340px;"]),m=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-d6a04aac-5"})([""," "," "," ",""],s,(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:i})=>0===e&&i&&t(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:e})=>e>=2&&t(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),v=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-d6a04aac-6"})([""," height:40px;text-decoration:none;",""],s,(({depth:e,responsive:i})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],i&&e>=3&&t(["margin-left:var(--spacing300);"]))));export{c as StyledIcon,d as StyledMenuItemContent,p as StyledNestedMenu,l as StyledNestedMenuWrapper,v as StyledResponsiveMenuAction,m as StyledResponsiveMenuItem,g as StyledResponsiveMenuListItem};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./responsive-vertical-menu-item.style.js"),r=require("../__internal__/depth.context.js"),i=require("../__internal__/focus.context.js"),o=require("../responsive-vertical-menu.context.js"),s=require("../../../icon/icon.component.js"),l=require("../../../../__internal__/utils/helpers/guid/index.js");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(t);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(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){a(e,t,n[t])}))}return e}function p(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}function v(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const f=t.createContext(void 0),h=({customIcon:t,depth:r,hasChildren:i,icon:o,label:l,responsive:c})=>t?e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:c,children:[t,l]}):e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:c,children:[o&&e.jsx(s.default,{type:o}),l]}),m=t.forwardRef(((s,l)=>{var{children:c,customIcon:a,icon:m,id:y,href:b,label:j,onClick:x,rel:O,target:I}=s,g=v(s,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:M,containerRef:w,responsiveMode:_,setActive:C,setActiveMenuItem:S,reducedMotion:P}=o.useResponsiveVerticalMenu(),{expandItem:D,focusItem:k,getRegisteredItems:$,moveFocus:q,registerMenuItem:R}=i.useMenuFocus(),A=r.useDepth(),E=(null==M?void 0:M.id)===y,F=d.default.Children.count(c)>0,K=t.useContext(f),N=t.useMemo((()=>_&&0===A),[A,_]),[V,L]=t.useState(N&&F);t.useEffect((()=>{R(y,l,K)}),[y,K,l,R]);const T=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=w.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${A}"]`))||[],t=Array.from(n),0===A&&F&&(null==M?void 0:M.id)===y&&(e.preventDefault(),q(e.shiftKey?"lastChild":"firstChild")),1===A){const n=t.findIndex((e=>e.id===y)),r=0===n;n===t.length-1&&(!F||F&&!V)&&(e.shiftKey||(e.preventDefault(),q("parent"))),r&&e.shiftKey&&(e.preventDefault(),q("parent"))}if(2===A&&t.findIndex((e=>e.id===y))===t.length-1){const t=$(),n=t.find((e=>e.id===K)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=w.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${A-1}"]`))||[]);t.findIndex((e=>e.id===K))===t.length-1&&!e.shiftKey&&(e.preventDefault(),k(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),N)return;if(F)if(0!==A||_)L(!V),D(y,!V);else{const e=(null==M?void 0:M.id)===y;S(e?null:{id:y,label:j,children:c})}else b&&"Enter"===e.key&&(window.location.href=b)}};return e.jsx(n.StyledResponsiveMenuListItem,{children:F?e.jsxs(e.Fragment,{children:[e.jsxs(n.StyledResponsiveMenuItem,p(u({active:E,"aria-expanded":E||V,"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":A,"data-role":`responsive-vertical-menu-item-${y}`,depth:A,hasIcon:!!m||!!a,id:y,onClick:()=>{if(!N){if(0!==A||_)L(!V),D(y,!V);else{const e=(null==M?void 0:M.id)===y;S(e?null:{id:y,label:j,children:c})}k(y)}},onKeyDown:e=>{_||T(e)},onFocus:()=>k(y),ref:l,responsive:_,tabIndex:N?-1:0,type:"button"},g),{children:[e.jsx(h,{customIcon:a,depth:A,hasChildren:!0,icon:m,label:j,responsive:_}),!N&&e.jsx(n.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:A,expanded:V||E,reduceMotion:!!P,type:A>=1?"chevron_down_thick":"chevron_right_thick"})]})),V&&e.jsx(n.StyledNestedMenuWrapper,{"data-component":`${y}-nested-menu-wrapper`,"data-role":`${y}-nested-menu-wrapper`,depth:A,hasIcon:!!m||!!a,responsive:_,children:e.jsx(n.StyledNestedMenu,{"data-component":`${y}-nested-menu`,"data-role":`${y}-nested-menu`,depth:A,hasIcon:!!m||!!a,id:`${y}-nested-menu`,responsive:_,children:e.jsx(f.Provider,{value:y,children:c})})})]}):e.jsx(n.StyledResponsiveMenuAction,p(u({"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":A,"data-role":`responsive-vertical-menu-item-${y}`,depth:A,href:b,id:y,onClick:e=>{null==x||x(e),C(!1)},onFocus:()=>k(y),onKeyDown:e=>{_||T(e)},ref:l,rel:O,responsive:_,tabIndex:0,target:I},g),{children:e.jsx(h,{customIcon:a,depth:A,hasChildren:!1,icon:m,label:j,responsive:_})}))})})),y=n=>{var{children:o,id:s,label:c}=n,d=v(n,["children","id","label"]);const a=r.useDepth(),h=t.useRef(null),{registerMenuItem:y}=i.useMenuFocus(),b=t.useContext(f),j=t.useRef(s||l.default());return t.useEffect((()=>{const e=j.current;y(e,h,b)}),[b,y]),e.jsx(m,p(u({id:j.current,label:c},d),{"data-depth":a,ref:h,children:o&&e.jsx(f.Provider,{value:s,children:e.jsx(r.IncreaseDepth,{children:o})})}))};exports.ResponsiveVerticalMenuItem=y,exports.default=y;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./responsive-vertical-menu-item.style.js"),r=require("../__internal__/depth.context.js"),i=require("../__internal__/focus.context.js"),o=require("../responsive-vertical-menu.context.js"),s=require("../../../icon/icon.component.js"),l=require("../../../../__internal__/utils/helpers/guid/index.js");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(t);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(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){a(e,t,n[t])}))}return e}function p(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}function v(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const f=t.createContext(void 0),h=({customIcon:t,depth:r,hasChildren:i,icon:o,label:l,responsive:c})=>t?e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:c,children:[t,l]}):e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:c,children:[o&&e.jsx(s.default,{type:o}),l]}),m=t.forwardRef(((s,l)=>{var{children:c,customIcon:a,icon:m,id:y,href:b,label:j,onClick:x,rel:O,target:I}=s,g=v(s,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:M,containerRef:w,responsiveMode:_,setActive:C,setActiveMenuItem:S,reducedMotion:P}=o.useResponsiveVerticalMenu(),{expandItem:D,focusItem:k,getRegisteredItems:$,moveFocus:q,registerMenuItem:R}=i.useMenuFocus(),A=r.useDepth(),E=(null==M?void 0:M.id)===y,F=d.default.Children.count(c)>0,K=t.useContext(f),N=t.useMemo((()=>_&&0===A),[A,_]),[V,L]=t.useState(N&&F||A>=2);t.useEffect((()=>{R(y,l,K)}),[y,K,l,R]);const T=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=w.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${A}"]`))||[],t=Array.from(n),0===A&&F&&(null==M?void 0:M.id)===y&&(e.preventDefault(),q(e.shiftKey?"lastChild":"firstChild")),1===A){const n=t.findIndex((e=>e.id===y)),r=0===n;n===t.length-1&&(!F||F&&!V)&&(e.shiftKey||(e.preventDefault(),q("parent"))),r&&e.shiftKey&&(e.preventDefault(),q("parent"))}if(2===A&&t.findIndex((e=>e.id===y))===t.length-1){const t=$(),n=t.find((e=>e.id===K)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=w.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${A-1}"]`))||[]);t.findIndex((e=>e.id===K))===t.length-1&&!e.shiftKey&&(e.preventDefault(),k(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),N)return;if(F)if(0!==A||_)L(!V),D(y,!V);else{const e=(null==M?void 0:M.id)===y;S(e?null:{id:y,label:j,children:c})}else b&&"Enter"===e.key&&(window.location.href=b)}};return e.jsx(n.StyledResponsiveMenuListItem,{children:F?e.jsxs(e.Fragment,{children:[e.jsxs(n.StyledResponsiveMenuItem,p(u({active:E,"aria-expanded":E||V,"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":A,"data-role":`responsive-vertical-menu-item-${y}`,depth:A,hasIcon:!!m||!!a,id:y,onClick:()=>{if(!N){if(0!==A||_)L(!V),D(y,!V);else{const e=(null==M?void 0:M.id)===y;S(e?null:{id:y,label:j,children:c})}k(y)}},onKeyDown:e=>{_||T(e)},onFocus:()=>k(y),ref:l,responsive:_,tabIndex:N?-1:0,type:"button"},g),{children:[e.jsx(h,{customIcon:a,depth:A,hasChildren:!0,icon:m,label:j,responsive:_}),!N&&e.jsx(n.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:A,expanded:V||E,reduceMotion:!!P,type:A>=1?"chevron_down_thick":"chevron_right_thick"})]})),V&&e.jsx(n.StyledNestedMenuWrapper,{"data-component":`${y}-nested-menu-wrapper`,"data-role":`${y}-nested-menu-wrapper`,depth:A,hasIcon:!!m||!!a,responsive:_,children:e.jsx(n.StyledNestedMenu,{"data-component":`${y}-nested-menu`,"data-role":`${y}-nested-menu`,depth:A,hasIcon:!!m||!!a,id:`${y}-nested-menu`,responsive:_,children:e.jsx(f.Provider,{value:y,children:c})})})]}):e.jsx(n.StyledResponsiveMenuAction,p(u({"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":A,"data-role":`responsive-vertical-menu-item-${y}`,depth:A,href:b,id:y,onClick:e=>{null==x||x(e),C(!1)},onFocus:()=>k(y),onKeyDown:e=>{_||T(e)},ref:l,rel:O,responsive:_,tabIndex:0,target:I},g),{children:e.jsx(h,{customIcon:a,depth:A,hasChildren:!1,icon:m,label:j,responsive:_})}))})})),y=n=>{var{children:o,id:s,label:c}=n,d=v(n,["children","id","label"]);const a=r.useDepth(),h=t.useRef(null),{registerMenuItem:y}=i.useMenuFocus(),b=t.useContext(f),j=t.useRef(s||l.default());return t.useEffect((()=>{const e=j.current;y(e,h,b)}),[b,y]),e.jsx(m,p(u({id:j.current,label:c},d),{"data-depth":a,ref:h,children:o&&e.jsx(f.Provider,{value:s,children:e.jsx(r.IncreaseDepth,{children:o})})}))};exports.ResponsiveVerticalMenuItem=y,exports.default=y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function
|
|
1
|
+
"use strict";var e=require("styled-components"),t=require("styled-system"),n=require("../../../icon/icon.component.js"),i=require("../../../../style/utils/add-focus-styling.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const a=(e,t)=>e&&t?"180deg":"0deg",r=e.css(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);width:100%;"," ",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],t.margin,t.padding,i.default(!0)),d=s.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-d6a04aac-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>a(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:n,reduceMotion:i})=>n&&e.css(["rotate:",";transition:rotate "," ease-out;"],a(t,n),i?0:"0.2s"))),c=s.default.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-d6a04aac-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),l=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-d6a04aac-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:t,responsive:n})=>1===t&&n&&e.css(["padding:0 0 0 16px;"]))),p=s.default.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-d6a04aac-3"})(["padding:0;",""],(({depth:t,hasIcon:n,responsive:i})=>e.css(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],t<2&&!n?"100%":"88%",i&&e.css(["margin-left:",";"],n||1===t?"var(--spacing200)":"0"),1===t?"var(--fontWeights400)":"var(--fontWeights500)"))),g=s.default.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-d6a04aac-4"})(["list-style:none;margin:0;padding:0;width:100%;max-width:340px;"]),v=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-d6a04aac-5"})([""," "," "," ",""],r,(({active:t,responsive:n})=>t&&!n&&e.css(["background-color:var(--colorsGray850);"])),(({depth:t,responsive:n})=>0===t&&n&&e.css(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:t})=>t>=2&&e.css(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),u=s.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-d6a04aac-6"})([""," height:40px;text-decoration:none;",""],r,(({depth:t,responsive:n})=>t>=2&&e.css(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],n&&t>=3&&e.css(["margin-left:var(--spacing300);"]))));exports.StyledIcon=d,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=l,exports.StyledResponsiveMenuAction=u,exports.StyledResponsiveMenuItem=v,exports.StyledResponsiveMenuListItem=g;
|