carbon-react 157.9.0 → 158.0.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/index.d.ts +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.d.ts +1 -1
- package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts +2 -1
- 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.d.ts +5 -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/index.d.ts +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.d.ts +1 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts +2 -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.d.ts +5 -1
- package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js +1 -1
- package/package.json +3 -3
|
@@ -2,6 +2,6 @@ export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.conte
|
|
|
2
2
|
export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
|
|
3
3
|
export type { ResponsiveVerticalMenuProps, ResponsiveVerticalMenuHandle, } from "./responsive-vertical-menu.component";
|
|
4
4
|
export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
|
|
5
|
-
export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item";
|
|
5
|
+
export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item";
|
|
6
6
|
export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
|
|
7
7
|
export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
|
|
2
|
-
export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item.component";
|
|
2
|
+
export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item.component";
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
2
|
import { MarginProps, PaddingProps } from "styled-system";
|
|
3
3
|
import { IconType } from "../../../icon";
|
|
4
|
+
export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
|
|
4
5
|
interface BaseItemProps extends MarginProps, PaddingProps {
|
|
5
6
|
/** The content of the menu item. This will render the menu item as a parent menu. */
|
|
6
7
|
children?: ReactNode;
|
|
@@ -15,7 +16,7 @@ interface BaseItemProps extends MarginProps, PaddingProps {
|
|
|
15
16
|
/** The label for the menu item. */
|
|
16
17
|
label: React.ReactNode;
|
|
17
18
|
/** A custom click handler to run when an anchor link is clicked */
|
|
18
|
-
onClick?: (event:
|
|
19
|
+
onClick?: (event: ResponsiveVerticalMenuItemClickEvent) => void;
|
|
19
20
|
/** The rel attribute to be used for the underlying <a> tag */
|
|
20
21
|
rel?: string;
|
|
21
22
|
/** The target to use for the menu item. */
|
|
@@ -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 l,useEffect as c,forwardRef as s,useMemo as d,useState as a}from"react";import{StyledResponsiveMenu as p}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as u,StyledResponsiveMenuItem as m,StyledIcon as v,StyledNestedMenuWrapper as h,StyledNestedMenu as f,
|
|
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 l,useEffect as c,forwardRef as s,useMemo as d,useState as a}from"react";import{StyledResponsiveMenu as p}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as u,StyledResponsiveMenuItem as m,StyledIcon as v,StyledNestedMenuWrapper as h,StyledNestedMenu as f,StyledMenuItemContent as y,StyledResponsiveMenuActionButton as b,StyledResponsiveMenuActionLink as g}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import O from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as j,IncreaseDepth as w}from"../__internal__/depth.context.js";import{useMenuFocus as I}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as x}from"../responsive-vertical-menu.context.js";import _ from"../../../icon/icon.component.js";import P from"../../../../__internal__/utils/helpers/guid/index.js";function k(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){k(e,n,t[n])}))}return e}function C(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 D(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 M=l(void 0),S=({customIcon:t,depth:r,hasChildren:o,icon:i,label:l,responsive:c})=>n(y,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:c,children:[t,l]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:c,children:[i&&e(_,{type:i}),l]}),A=s(((l,s)=>{var{children:y,customIcon:w,icon:_,id:P,href:k,label:A,onClick:E,rel:K,target:F}=l,q=D(l,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:R,containerRef:T,responsiveMode:z,setActive:B,setActiveMenuItem:G,reducedMotion:H,left:J,top:L,width:N,height:Q}=x(),{expandItem:U,focusItem:V,getRegisteredItems:W,moveFocus:X,registerMenuItem:Y}=I(),Z=j(),ee=(null==R?void 0:R.id)===P,ne=r.Children.count(y)>0,te=i(M),re=o(null),oe=d((()=>z&&0===Z),[Z,z]),[ie,le]=a(oe&&ne||Z>=2);c((()=>{Y(P,s,te)}),[P,te,s,Y]);const ce=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=T.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${Z}"]`))||[],n=Array.from(t),0===Z&&ne&&(null==R?void 0:R.id)===P&&e.shiftKey&&(e.preventDefault(),X("lastChild")),1===Z&&n.findIndex((e=>e.id===P))===n.length-1&&(!ne||ne&&!ie)&&(e.shiftKey||(e.preventDefault(),X("parent"))),2===Z&&n.findIndex((e=>e.id===P))===n.length-1&&(!ne||ne&&!ie)){const n=W(),t=n.find((e=>e.id===te)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var o;const n=Array.from((null===(o=T.current)||void 0===o?void 0:o.querySelectorAll(`[data-depth="${Z-1}"]`))||[]);n.findIndex((e=>e.id===te))===n.length-1&&!e.shiftKey&&(e.preventDefault(),V(r.id))}}break;case"Enter":case" ":if(ne&&e.preventDefault(),E||" "!==e.key||e.preventDefault(),oe)return;if(ne)if(0!==Z||z)le(!ie),U(P,!ie);else{const e=(null==R?void 0:R.id)===P;G(e?null:{id:P,label:A,children:y})}else k&&"Enter"===e.key&&(window.location.href=k)}},se=e=>{null==E||E(e),B(!1)};return e(u,C($({},O(q)),{children:ne?n(t,{children:[n(m,C($({active:ee,"aria-expanded":z&&0===Z?void 0:ee||ie,"aria-controls":ee||ie?z?0===Z?void 0:`${P}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${P}`,"data-depth":Z,"data-role":`responsive-vertical-menu-item-${P}`,depth:Z,hasIcon:!!_||!!w,id:P,onClick:()=>{if(!oe){if(0!==Z||z)le(!ie),U(P,!ie);else{const e=(null==R?void 0:R.id)===P;G(e?null:{id:P,label:A,children:y})}V(P)}},onKeyDown:e=>{z||ce(e)},onFocus:()=>V(P),ref:s,responsive:z,tabIndex:oe?-1:0,type:"button"},q),{children:[e(S,{customIcon:w,depth:Z,hasChildren:!0,icon:_,label:A,responsive:z}),!oe&&e(v,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:Z,expanded:ie||ee,reduceMotion:!!H,type:Z>=1?"chevron_down_thick":"chevron_right_thick"})]})),ie&&e(h,{"data-component":`${P}-nested-menu-wrapper`,"data-role":`${P}-nested-menu-wrapper`,depth:Z,hasIcon:!!_||!!w,id:`${P}-nested-menu-wrapper`,responsive:z,children:e(f,{"data-component":`${P}-nested-menu`,"data-role":`${P}-nested-menu`,depth:Z,hasIcon:!!_||!!w,id:`${P}-nested-menu`,responsive:z,children:e(M.Provider,{value:P,children:y})})}),ee&&!z&&e(p,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:Q||"100%",id:"responsive-vertical-menu-secondary",left:J,menu:"secondary",reduceMotion:!1,ref:re,responsive:!1,tabIndex:-1,top:L,width:N,children:R.children})]}):(()=>{const n=$({"data-component":`responsive-vertical-menu-item-${P}`,"data-depth":Z,"data-role":`responsive-vertical-menu-item-${P}`,depth:Z,href:k,id:P,onClick:se,onFocus:()=>V(P),onKeyDown:e=>{z||ce(e)},rel:K,responsive:z,tabIndex:0,target:F},q),t=e(S,{customIcon:w,depth:Z,hasChildren:!1,icon:_,label:A,responsive:z});return e(E&&!k?b:g,C($({ref:s},n),{children:t}))})()}))})),E=n=>{var{children:t,id:r,label:l}=n,s=D(n,["children","id","label"]);const d=j(),a=o(null),{registerMenuItem:p}=I(),u=i(M),m=o(r||P());return c((()=>{const e=m.current;p(e,a,u)}),[u,p]),e(A,C($({id:m.current,label:l},s),{"data-depth":d,ref:a,children:t&&e(M.Provider,{value:r,children:e(w,{children:t})})}))};export{E as ResponsiveVerticalMenuItem,E as default};
|
|
@@ -30,7 +30,11 @@ export declare const StyledNestedMenu: import("styled-components").StyledCompone
|
|
|
30
30
|
}, never>;
|
|
31
31
|
export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
32
32
|
export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
|
|
33
|
-
export declare const
|
|
33
|
+
export declare const StyledResponsiveMenuActionLink: import("styled-components").StyledComponent<"a", any, {
|
|
34
|
+
depth: number;
|
|
35
|
+
responsive?: boolean;
|
|
36
|
+
}, never>;
|
|
37
|
+
export declare const StyledResponsiveMenuActionButton: import("styled-components").StyledComponent<"button", any, {
|
|
34
38
|
depth: number;
|
|
35
39
|
responsive?: boolean;
|
|
36
40
|
}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{padding as
|
|
1
|
+
import e,{css as t}from"styled-components";import{padding as i,margin as o}from"styled-system";import n from"../../../icon/icon.component.js";import a from"../../../../style/utils/add-focus-styling.js";const s=(e,t)=>e&&t?"180deg":"0deg",r=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:var(--spacing100) 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,a(!0)),c=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-ffae1a5b-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>s(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],s(e,i),o?0:"0.2s"))),l=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-ffae1a5b-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);}"]),d=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-ffae1a5b-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-ffae1a5b-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-ffae1a5b-4"})(["list-style:none;"," padding:0;"],o),m=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-ffae1a5b-5"})([""," "," "," ",""],r,(({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__StyledResponsiveMenuActionLink",componentId:"sc-ffae1a5b-6"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:e,responsive:i})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],i&&e>=3&&t(["margin-left:var(--spacing300);"])))),f=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"sc-ffae1a5b-7"})([""," min-height:40px;text-decoration:none;",""],r,(({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,l as StyledMenuItemContent,p as StyledNestedMenu,d as StyledNestedMenuWrapper,f as StyledResponsiveMenuActionButton,v as StyledResponsiveMenuActionLink,m as StyledResponsiveMenuItem,g as StyledResponsiveMenuListItem};
|
|
@@ -2,6 +2,6 @@ export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.conte
|
|
|
2
2
|
export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
|
|
3
3
|
export type { ResponsiveVerticalMenuProps, ResponsiveVerticalMenuHandle, } from "./responsive-vertical-menu.component";
|
|
4
4
|
export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
|
|
5
|
-
export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item";
|
|
5
|
+
export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item";
|
|
6
6
|
export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
|
|
7
7
|
export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
|
|
2
|
-
export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item.component";
|
|
2
|
+
export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item.component";
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
2
|
import { MarginProps, PaddingProps } from "styled-system";
|
|
3
3
|
import { IconType } from "../../../icon";
|
|
4
|
+
export type ResponsiveVerticalMenuItemClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
|
|
4
5
|
interface BaseItemProps extends MarginProps, PaddingProps {
|
|
5
6
|
/** The content of the menu item. This will render the menu item as a parent menu. */
|
|
6
7
|
children?: ReactNode;
|
|
@@ -15,7 +16,7 @@ interface BaseItemProps extends MarginProps, PaddingProps {
|
|
|
15
16
|
/** The label for the menu item. */
|
|
16
17
|
label: React.ReactNode;
|
|
17
18
|
/** A custom click handler to run when an anchor link is clicked */
|
|
18
|
-
onClick?: (event:
|
|
19
|
+
onClick?: (event: ResponsiveVerticalMenuItemClickEvent) => void;
|
|
19
20
|
/** The rel attribute to be used for the underlying <a> tag */
|
|
20
21
|
rel?: string;
|
|
21
22
|
/** The target to use for the menu item. */
|
|
@@ -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.style.js"),r=require("./responsive-vertical-menu-item.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),o=require("../__internal__/depth.context.js"),s=require("../__internal__/focus.context.js"),l=require("../responsive-vertical-menu.context.js"),c=require("../../../icon/icon.component.js"),d=require("../../../../__internal__/utils/helpers/guid/index.js");function a(e){return e&&e.__esModule?e:{default:e}}var u=a(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function h(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 f(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 m=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:o,label:s,responsive:l})=>t?e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:n,hasChildren:i,icon:!0,responsive:l,children:[t,s]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(c.default,{type:o}),s]}),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../responsive-vertical-menu.style.js"),r=require("./responsive-vertical-menu-item.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),o=require("../__internal__/depth.context.js"),s=require("../__internal__/focus.context.js"),l=require("../responsive-vertical-menu.context.js"),c=require("../../../icon/icon.component.js"),d=require("../../../../__internal__/utils/helpers/guid/index.js");function a(e){return e&&e.__esModule?e:{default:e}}var u=a(t);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){p(e,t,n[t])}))}return e}function h(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 f(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 m=t.createContext(void 0),y=({customIcon:t,depth:n,hasChildren:i,icon:o,label:s,responsive:l})=>t?e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:n,hasChildren:i,icon:!0,responsive:l,children:[t,s]}):e.jsxs(r.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:n,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(c.default,{type:o}),s]}),j=t.forwardRef(((c,d)=>{var{children:a,customIcon:p,icon:j,id:b,href:x,label:g,onClick:O,rel:I,target:w}=c,M=f(c,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:_,containerRef:S,responsiveMode:C,setActive:P,setActiveMenuItem:k,reducedMotion:D,left:q,top:R,width:$,height:A}=l.useResponsiveVerticalMenu(),{expandItem:E,focusItem:F,getRegisteredItems:K,moveFocus:L,registerMenuItem:N}=s.useMenuFocus(),V=o.useDepth(),B=(null==_?void 0:_.id)===b,T=u.default.Children.count(a)>0,W=t.useContext(m),z=t.useRef(null),G=t.useMemo((()=>C&&0===V),[V,C]),[H,J]=t.useState(G&&T||V>=2);t.useEffect((()=>{N(b,d,W)}),[b,W,d,N]);const Q=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=S.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${V}"]`))||[],t=Array.from(n),0===V&&T&&(null==_?void 0:_.id)===b&&e.shiftKey&&(e.preventDefault(),L("lastChild")),1===V&&t.findIndex((e=>e.id===b))===t.length-1&&(!T||T&&!H)&&(e.shiftKey||(e.preventDefault(),L("parent"))),2===V&&t.findIndex((e=>e.id===b))===t.length-1&&(!T||T&&!H)){const t=K(),n=t.find((e=>e.id===W)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=S.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${V-1}"]`))||[]);t.findIndex((e=>e.id===W))===t.length-1&&!e.shiftKey&&(e.preventDefault(),F(r.id))}}break;case"Enter":case" ":if(T&&e.preventDefault(),O||" "!==e.key||e.preventDefault(),G)return;if(T)if(0!==V||C)J(!H),E(b,!H);else{const e=(null==_?void 0:_.id)===b;k(e?null:{id:b,label:g,children:a})}else x&&"Enter"===e.key&&(window.location.href=x)}},U=e=>{null==O||O(e),P(!1)};return e.jsx(r.StyledResponsiveMenuListItem,h(v({},i.default(M)),{children:T?e.jsxs(e.Fragment,{children:[e.jsxs(r.StyledResponsiveMenuItem,h(v({active:B,"aria-expanded":C&&0===V?void 0:B||H,"aria-controls":B||H?C?0===V?void 0:`${b}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":V,"data-role":`responsive-vertical-menu-item-${b}`,depth:V,hasIcon:!!j||!!p,id:b,onClick:()=>{if(!G){if(0!==V||C)J(!H),E(b,!H);else{const e=(null==_?void 0:_.id)===b;k(e?null:{id:b,label:g,children:a})}F(b)}},onKeyDown:e=>{C||Q(e)},onFocus:()=>F(b),ref:d,responsive:C,tabIndex:G?-1:0,type:"button"},M),{children:[e.jsx(y,{customIcon:p,depth:V,hasChildren:!0,icon:j,label:g,responsive:C}),!G&&e.jsx(r.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:V,expanded:H||B,reduceMotion:!!D,type:V>=1?"chevron_down_thick":"chevron_right_thick"})]})),H&&e.jsx(r.StyledNestedMenuWrapper,{"data-component":`${b}-nested-menu-wrapper`,"data-role":`${b}-nested-menu-wrapper`,depth:V,hasIcon:!!j||!!p,id:`${b}-nested-menu-wrapper`,responsive:C,children:e.jsx(r.StyledNestedMenu,{"data-component":`${b}-nested-menu`,"data-role":`${b}-nested-menu`,depth:V,hasIcon:!!j||!!p,id:`${b}-nested-menu`,responsive:C,children:e.jsx(m.Provider,{value:b,children:a})})}),B&&!C&&e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:A||"100%",id:"responsive-vertical-menu-secondary",left:q,menu:"secondary",reduceMotion:!1,ref:z,responsive:!1,tabIndex:-1,top:R,width:$,children:_.children})]}):(()=>{const t=v({"data-component":`responsive-vertical-menu-item-${b}`,"data-depth":V,"data-role":`responsive-vertical-menu-item-${b}`,depth:V,href:x,id:b,onClick:U,onFocus:()=>F(b),onKeyDown:e=>{C||Q(e)},rel:I,responsive:C,tabIndex:0,target:w},M),n=e.jsx(y,{customIcon:p,depth:V,hasChildren:!1,icon:j,label:g,responsive:C});return O&&!x?e.jsx(r.StyledResponsiveMenuActionButton,h(v({ref:d},t),{children:n})):e.jsx(r.StyledResponsiveMenuActionLink,h(v({ref:d},t),{children:n}))})()}))})),b=n=>{var{children:r,id:i,label:l}=n,c=f(n,["children","id","label"]);const a=o.useDepth(),u=t.useRef(null),{registerMenuItem:p}=s.useMenuFocus(),y=t.useContext(m),b=t.useRef(i||d.default());return t.useEffect((()=>{const e=b.current;p(e,u,y)}),[y,p]),e.jsx(j,h(v({id:b.current,label:l},c),{"data-depth":a,ref:u,children:r&&e.jsx(m.Provider,{value:i,children:e.jsx(o.IncreaseDepth,{children:r})})}))};exports.ResponsiveVerticalMenuItem=b,exports.default=b;
|
|
@@ -30,7 +30,11 @@ export declare const StyledNestedMenu: import("styled-components").StyledCompone
|
|
|
30
30
|
}, never>;
|
|
31
31
|
export declare const StyledResponsiveMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
32
32
|
export declare const StyledResponsiveMenuItem: import("styled-components").StyledComponent<"button", any, StyledResponsiveMenuItemProps, never>;
|
|
33
|
-
export declare const
|
|
33
|
+
export declare const StyledResponsiveMenuActionLink: import("styled-components").StyledComponent<"a", any, {
|
|
34
|
+
depth: number;
|
|
35
|
+
responsive?: boolean;
|
|
36
|
+
}, never>;
|
|
37
|
+
export declare const StyledResponsiveMenuActionButton: import("styled-components").StyledComponent<"button", any, {
|
|
34
38
|
depth: number;
|
|
35
39
|
responsive?: boolean;
|
|
36
40
|
}, never>;
|
|
@@ -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 o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const
|
|
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:var(--spacing100) 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.padding,i.default(!0)),l=s.default(n.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-ffae1a5b-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-ffae1a5b-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);}"]),d=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-ffae1a5b-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-ffae1a5b-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-ffae1a5b-4"})(["list-style:none;"," padding:0;"],t.margin),v=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-ffae1a5b-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);}}']))),f=s.default.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionLink",componentId:"sc-ffae1a5b-6"})([""," min-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);"])))),u=s.default.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"sc-ffae1a5b-7"})([""," min-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=l,exports.StyledMenuItemContent=c,exports.StyledNestedMenu=p,exports.StyledNestedMenuWrapper=d,exports.StyledResponsiveMenuActionButton=u,exports.StyledResponsiveMenuActionLink=f,exports.StyledResponsiveMenuItem=v,exports.StyledResponsiveMenuListItem=g;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "158.0.0",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"test-storybook": "test-storybook --url http://127.0.0.1:9001",
|
|
15
15
|
"format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
|
|
16
16
|
"lint": "npm run generate-tokens:dev && eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
|
|
17
|
-
"precompile": "npm run type-check && npm run build",
|
|
17
|
+
"precompile": "npm run generate-tokens && npm run type-check && npm run build",
|
|
18
18
|
"prepublishOnly": "npm run precompile",
|
|
19
19
|
"build-storybook": "npm run generate-tokens:dev && dotenvx run -- storybook build -c .storybook",
|
|
20
20
|
"build-storybook:prod": "npm run generate-tokens && dotenvx run -f .env.production -- storybook build -c .storybook",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
|
|
33
33
|
"test:ct:coverage": "npm run generate-tokens:dev && npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
|
|
34
34
|
"pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
|
|
35
|
-
"build": "npm run clean-lib &&
|
|
35
|
+
"build": "npm run clean-lib && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
|
|
36
36
|
"build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
|
|
37
37
|
"build:move-svg": "node ./scripts/copy_svg/index.js",
|
|
38
38
|
"generate-tokens": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs",
|