carbon-react 155.5.5 → 155.6.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/menu/index.d.ts +1 -1
- package/esm/components/menu/menu-item/index.d.ts +1 -1
- package/esm/components/menu/menu-item/menu-item.component.d.ts +5 -1
- package/esm/components/menu/menu-item/menu-item.component.js +1 -1
- package/lib/components/menu/index.d.ts +1 -1
- package/lib/components/menu/menu-item/index.d.ts +1 -1
- package/lib/components/menu/menu-item/menu-item.component.d.ts +5 -1
- package/lib/components/menu/menu-item/menu-item.component.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Menu } from "./menu.component";
|
|
2
2
|
export type { MenuProps } from "./menu.types";
|
|
3
3
|
export { default as MenuItem } from "./menu-item";
|
|
4
|
-
export type { MenuWithIcon, MenuWithChildren } from "./menu-item";
|
|
4
|
+
export type { MenuWithIcon, MenuWithChildren, MenuItemHandle, } from "./menu-item";
|
|
5
5
|
export { default as MenuDivider } from "./menu-divider";
|
|
6
6
|
export type { MenuDividerProps } from "./menu-divider";
|
|
7
7
|
export { default as MenuSegmentTitle } from "./menu-segment-title";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./menu-item.component";
|
|
2
|
-
export type { MenuWithChildren, MenuWithIcon, VariantType, } from "./menu-item.component";
|
|
2
|
+
export type { MenuWithChildren, MenuWithIcon, VariantType, MenuItemHandle, } from "./menu-item.component";
|
|
@@ -72,5 +72,9 @@ export interface MenuWithIcon extends MenuItemBaseProps {
|
|
|
72
72
|
icon: IconType;
|
|
73
73
|
children?: React.ReactNode;
|
|
74
74
|
}
|
|
75
|
-
export
|
|
75
|
+
export type MenuItemHandle = {
|
|
76
|
+
/** Programmatically focus the MenuItem. */
|
|
77
|
+
focus: () => void;
|
|
78
|
+
} | null;
|
|
79
|
+
export declare const MenuItem: React.ForwardRefExoticComponent<(MenuWithChildren | MenuWithIcon) & React.RefAttributes<MenuItemHandle>>;
|
|
76
80
|
export default MenuItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t,
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import n,{forwardRef as t,useRef as r,useContext as o,useState as i,useLayoutEffect as u,useEffect as l,useImperativeHandle as s}from"react";import a from"invariant";import{defaultFocusableSelectors as c}from"../../../__internal__/focus-trap/focus-trap-utils.js";import m from"../../../style/utils/filter-styled-system-padding-props.js";import d from"./menu-item.style.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as b}from"../__internal__/strict-menu.context.js";import f from"../__internal__/submenu/submenu.component.js";import h from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as y}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as v}from"../menu.style.js";import O from"../../../__internal__/utils/helpers/guid/index.js";function g(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function j(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){g(e,n,t[n])}))}return e}function w(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}const _=t(((t,g)=>{var{submenu:_,submenuMaxWidth:x,submenuMinWidth:S,children:P,href:D,onClick:k,target:I,submenuDirection:W="right",icon:C,selected:F,onKeyDown:M,variant:T="default",showDropdownArrow:V=!0,ariaLabel:E,clickToOpen:L,maxWidth:K,onSubmenuOpen:A,onSubmenuClose:q,overrideColor:H,rel:N,as:Y,"data-element":z,"data-role":B}=t,G=function(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}(t,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);a(C||P,"Either prop `icon` must be defined or this node must have `children`."),a(P||E||_||"string"==typeof _&&_.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),a("boolean"==typeof _||void 0===_||n.isValidElement(_)||P&&"string"==typeof _&&_.length,"You should not pass `children` when `submenu` is an empty string");const J=r(O()),{isChildOfSegment:Q,overriddenVariant:R}=o(y),{inFullscreenView:U,registerItem:X,unregisterItem:Z,focusId:$,updateFocusId:ee,menuType:ne}=b(),te=o(h),re=Object.keys(te).length>0,{submenuFocusId:oe,updateFocusId:ie,handleKeyDown:ue,submenuHasMaxWidth:le}=te,se=$===J.current,ae=oe?oe===J.current:void 0,[ce,me]=i(null),[de,pe]=i(null);u((()=>{var e;const n=null!==(e=null==ce?void 0:ce.querySelector(c))&&void 0!==e?e:null;n!==de&&pe(n)}),[de,ce]),l((()=>{const e=J.current;return X&&X(e),()=>{Z&&Z(e)}}),[X,Z]),l((()=>{if(se&&!ae||ae){if(de)return void de.focus();null==ce||ce.focus()}}),[de,se,ae,ce]),s(g,(()=>({focus(){null==ce||ce.focus()}})),[ce]);const be=e=>{re?(e.stopPropagation(),null==ie||ie(J.current)):null==ee||ee(J.current)},fe={className:D||k?"carbon-menu-item--has-link":"",href:de?void 0:D,onClick:de?void 0:k,target:I,rel:N,icon:C,removeAriaLabelOnIcon:!0,selected:F,onKeyDown:U?void 0:e=>{null==M||M(e),p.isEscKey(e)&&(null==ce||ce.focus()),null==ue||ue(e)},overrideColor:H,ref:me};"alternate"===R&&Q&&"alternate"===T&&["white","black"].includes(ne)&&(fe.overrideColor=!0);const he=e=>K&&"string"==typeof e?e:void 0,ye=U?void 0:K,ve=!(k||D||de);if(_)return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,title:he(_),maxWidth:ye},G),{inFullscreenView:U,id:J.current,as:Y,onFocus:be,children:e(f,w(j(w(j(w(j({},"boolean"!=typeof _&&{title:_}),{submenuDirection:W,showDropdownArrow:V,clickToOpen:L,maxWidth:K,asPassiveItem:ve,ariaLabel:E,onSubmenuOpen:A,onSubmenuClose:q,submenuMaxWidth:x,submenuMinWidth:S}),fe),{variant:T}),G),{children:P}))}));const Oe=m(G),ge=!!(null==ce?void 0:ce.querySelector("[data-element='input']"));return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,inSubmenu:re,title:he(P),maxWidth:ye},G),{inFullscreenView:U&&!Object.keys(te).length,id:J.current,as:Y,onFocus:be,children:e(d,w(j(w(j({menuType:ne,"data-role":"menu-item-wrapper"},fe),{menuItemVariant:T,ariaLabel:E,maxWidth:le?void 0:ye,inFullscreenView:U,asPassiveItem:ve}),Oe),{asDiv:ge||"div"===Y,hasFocusableChild:!!de,hasInput:ge,inSubmenu:re,children:P}))}))}));export{_ as MenuItem,_ as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Menu } from "./menu.component";
|
|
2
2
|
export type { MenuProps } from "./menu.types";
|
|
3
3
|
export { default as MenuItem } from "./menu-item";
|
|
4
|
-
export type { MenuWithIcon, MenuWithChildren } from "./menu-item";
|
|
4
|
+
export type { MenuWithIcon, MenuWithChildren, MenuItemHandle, } from "./menu-item";
|
|
5
5
|
export { default as MenuDivider } from "./menu-divider";
|
|
6
6
|
export type { MenuDividerProps } from "./menu-divider";
|
|
7
7
|
export { default as MenuSegmentTitle } from "./menu-segment-title";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./menu-item.component";
|
|
2
|
-
export type { MenuWithChildren, MenuWithIcon, VariantType, } from "./menu-item.component";
|
|
2
|
+
export type { MenuWithChildren, MenuWithIcon, VariantType, MenuItemHandle, } from "./menu-item.component";
|
|
@@ -72,5 +72,9 @@ export interface MenuWithIcon extends MenuItemBaseProps {
|
|
|
72
72
|
icon: IconType;
|
|
73
73
|
children?: React.ReactNode;
|
|
74
74
|
}
|
|
75
|
-
export
|
|
75
|
+
export type MenuItemHandle = {
|
|
76
|
+
/** Programmatically focus the MenuItem. */
|
|
77
|
+
focus: () => void;
|
|
78
|
+
} | null;
|
|
79
|
+
export declare const MenuItem: React.ForwardRefExoticComponent<(MenuWithChildren | MenuWithIcon) & React.RefAttributes<MenuItemHandle>>;
|
|
76
80
|
export default MenuItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),o=require("./menu-item.style.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var b=f(t),p=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){h(e,t,n[t])}))}return e}function v(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}const O=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:O,submenuMinWidth:g,children:j,href:w,onClick:x,target:_,submenuDirection:S="right",icon:I,selected:P,onKeyDown:C,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,clickToOpen:k,maxWidth:W,onSubmenuOpen:F,onSubmenuClose:E,overrideColor:L,rel:T,as:V,"data-element":K,"data-role":A}=n,H=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(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)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(I||j,"Either prop `icon` must be defined or this node must have `children`."),p.default(j||M||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof h||void 0===h||b.default.isValidElement(h)||j&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const R=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:Y}=t.useContext(c.MenuSegmentContext),{inFullscreenView:z,registerItem:B,unregisterItem:G,focusId:J,updateFocusId:Q,menuType:U}=l.useStrictMenuContext(),X=t.useContext(a.default),Z=Object.keys(X).length>0,{submenuFocusId:$,updateFocusId:ee,handleKeyDown:te,submenuHasMaxWidth:ne}=X,re=J===R.current,ue=$?$===R.current:void 0,[oe,ie]=t.useState(null),[le,se]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==oe?void 0:oe.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==le&&se(t)}),[le,oe]),t.useEffect((()=>{const e=R.current;return B&&B(e),()=>{G&&G(e)}}),[B,G]),t.useEffect((()=>{if(re&&!ue||ue){if(le)return void le.focus();null==oe||oe.focus()}}),[le,re,ue,oe]),t.useImperativeHandle(f,(()=>({focus(){null==oe||oe.focus()}})),[oe]);const ae=e=>{Z?(e.stopPropagation(),null==ee||ee(R.current)):null==Q||Q(R.current)},ce={className:w||x?"carbon-menu-item--has-link":"",href:le?void 0:w,onClick:le?void 0:x,target:_,rel:T,icon:I,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:z?void 0:e=>{null==C||C(e),i.default.isEscKey(e)&&(null==oe||oe.focus()),null==te||te(e)},overrideColor:L,ref:ie};"alternate"===Y&&N&&"alternate"===q&&["white","black"].includes(U)&&(ce.overrideColor=!0);const de=e=>W&&"string"==typeof e?e:void 0,me=z?void 0:W,fe=!(x||w||le);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,title:de(h),maxWidth:me},H),{inFullscreenView:z,id:R.current,as:V,onFocus:ae,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:k,maxWidth:W,asPassiveItem:fe,ariaLabel:M,onSubmenuOpen:F,onSubmenuClose:E,submenuMaxWidth:O,submenuMinWidth:g}),ce),{variant:q}),H),{children:j}))}));const be=u.default(H),pe=!!(null==oe?void 0:oe.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,inSubmenu:Z,title:de(j),maxWidth:me},H),{inFullscreenView:z&&!Object.keys(X).length,id:R.current,as:V,onFocus:ae,children:e.jsx(o.default,v(y(v(y({menuType:U,"data-role":"menu-item-wrapper"},ce),{menuItemVariant:q,ariaLabel:M,maxWidth:ne?void 0:me,inFullscreenView:z,asPassiveItem:fe}),be),{asDiv:pe||"div"===V,hasFocusableChild:!!le,hasInput:pe,inSubmenu:Z,children:j}))}))}));exports.MenuItem=O,exports.default=O;
|