carbon-react 154.9.0 → 154.10.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/menu/__internal__/submenu/submenu.component.d.ts +1 -1
- package/esm/components/menu/menu-item/menu-item.component.d.ts +1 -1
- package/esm/components/menu/menu-item/menu-item.component.js +1 -1
- package/esm/components/popover-container/popover-container.component.js +1 -1
- package/lib/components/menu/__internal__/submenu/submenu.component.d.ts +1 -1
- package/lib/components/menu/menu-item/menu-item.component.d.ts +1 -1
- package/lib/components/menu/menu-item/menu-item.component.js +1 -1
- package/lib/components/popover-container/popover-container.component.js +1 -1
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@ export interface SubmenuProps {
|
|
|
15
15
|
/** Defines which direction the submenu will hang eg. left/right */
|
|
16
16
|
submenuDirection?: string;
|
|
17
17
|
/** A title for the menu item that has a submenu. */
|
|
18
|
-
title?:
|
|
18
|
+
title?: React.ReactNode;
|
|
19
19
|
/** onKeyDown handler */
|
|
20
20
|
onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
21
21
|
/** set the colour variant for a menuType */
|
|
@@ -11,7 +11,7 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
|
|
|
11
11
|
/** Is the menu item the currently selected item. */
|
|
12
12
|
selected?: boolean;
|
|
13
13
|
/** A title for the menu item that has a submenu. */
|
|
14
|
-
submenu?:
|
|
14
|
+
submenu?: React.ReactNode;
|
|
15
15
|
/** The href to use for the menu item. */
|
|
16
16
|
href?: string;
|
|
17
17
|
/** onKeyDown handler */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useRef as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t,{useRef as n,useContext as r,useState as o,useLayoutEffect as i,useEffect as u}from"react";import l from"invariant";import{defaultFocusableSelectors as s}from"../../../__internal__/focus-trap/focus-trap-utils.js";import a from"../../../style/utils/filter-styled-system-padding-props.js";import c from"./menu-item.style.js";import m from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../__internal__/strict-menu.context.js";import p from"../__internal__/submenu/submenu.component.js";import b from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as f}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as h}from"../menu.style.js";import y from"../../../__internal__/utils/helpers/guid/index.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(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){v(e,t,n[t])}))}return e}function g(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 j=v=>{var{submenu:j,submenuMaxWidth:w,submenuMinWidth:_,children:x,href:S,onClick:P,target:D,submenuDirection:k="right",icon:I,selected:W,onKeyDown:C,variant:F="default",showDropdownArrow:M=!0,ariaLabel:T,clickToOpen:V,maxWidth:E,onSubmenuOpen:L,onSubmenuClose:K,overrideColor:A,rel:q,as:H,"data-element":N,"data-role":Y}=v,z=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(v,["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"]);l(I||x,"Either prop `icon` must be defined or this node must have `children`."),l(x||T||j||"string"==typeof j&&j.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),l("boolean"==typeof j||void 0===j||t.isValidElement(j)||x&&"string"==typeof j&&j.length,"You should not pass `children` when `submenu` is an empty string");const B=n(y()),{isChildOfSegment:G,overriddenVariant:J}=r(f),{inFullscreenView:Q,registerItem:R,unregisterItem:U,focusId:X,updateFocusId:Z,menuType:$}=d(),ee=r(b),te=Object.keys(ee).length>0,{submenuFocusId:ne,updateFocusId:re,handleKeyDown:oe,submenuHasMaxWidth:ie}=ee,ue=X===B.current,le=ne?ne===B.current:void 0,[se,ae]=o(null),[ce,me]=o(null);i((()=>{var e;const t=null!==(e=null==se?void 0:se.querySelector(s))&&void 0!==e?e:null;t!==ce&&me(t)}),[ce,se]),u((()=>{const e=B.current;return R&&R(e),()=>{U&&U(e)}}),[R,U]),u((()=>{if(ue&&!le||le){if(ce)return void ce.focus();null==se||se.focus()}}),[ce,ue,le,se]);const de=e=>{te?(e.stopPropagation(),null==re||re(B.current)):null==Z||Z(B.current)},pe={className:S||P?"carbon-menu-item--has-link":"",href:ce?void 0:S,onClick:ce?void 0:P,target:D,rel:q,icon:I,removeAriaLabelOnIcon:!0,selected:W,onKeyDown:Q?void 0:e=>{null==C||C(e),m.isEscKey(e)&&(null==se||se.focus()),null==oe||oe(e)},overrideColor:A,ref:ae};"alternate"===J&&G&&"alternate"===F&&["white","black"].includes($)&&(pe.overrideColor=!0);const be=e=>E&&"string"==typeof e?e:void 0,fe=Q?void 0:E,he=!(P||S||ce);if(j)return e(h,g(O({"data-component":"menu-item","data-element":N,"data-role":Y,menuType:$,title:be(j),maxWidth:fe},z),{inFullscreenView:Q,id:B.current,as:H,onFocus:de,children:e(p,g(O(g(O(g(O({},"boolean"!=typeof j&&{title:j}),{submenuDirection:k,showDropdownArrow:M,clickToOpen:V,maxWidth:E,asPassiveItem:he,ariaLabel:T,onSubmenuOpen:L,onSubmenuClose:K,submenuMaxWidth:w,submenuMinWidth:_}),pe),{variant:F}),z),{children:x}))}));const ye=a(z),ve=!!(null==se?void 0:se.querySelector("[data-element='input']"));return e(h,g(O({"data-component":"menu-item","data-element":N,"data-role":Y,menuType:$,inSubmenu:te,title:be(x),maxWidth:fe},z),{inFullscreenView:Q&&!Object.keys(ee).length,id:B.current,as:H,onFocus:de,children:e(c,g(O(g(O({menuType:$,"data-role":"menu-item-wrapper"},pe),{menuItemVariant:F,ariaLabel:T,maxWidth:ie?void 0:fe,inFullscreenView:Q,asPassiveItem:he}),ye),{asDiv:ve||"div"===H,hasFocusableChild:!!ce,hasInput:ve,inSubmenu:te,children:x}))}))};export{j as MenuItem,j as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as c,useImperativeHandle as s,useMemo as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as c,useImperativeHandle as s,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m}from"@floating-ui/dom";import f from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerOpenIcon as b,PopoverContainerCloseIcon as v,PopoverContainerWrapperStyle as h,PopoverContainerContentStyle as y,PopoverContainerHeaderStyle as _,PopoverContainerTitleStyle as O}from"./popover-container.style.js";import g from"../icon/icon.component.js";import j from"../../__internal__/popover/popover.component.js";import x from"../../__internal__/utils/helpers/guid/index.js";import P from"../../style/utils/filter-styled-system-padding-props.js";import C from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import w from"../../__internal__/utils/helpers/events/events.js";import k from"../../__internal__/focus-trap/focus-trap.component.js";import A from"../modal/__internal__/modal.context.js";import B from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import I from"../../__internal__/utils/helpers/tags/tags.js";import{defaultFocusableSelectors as D}from"../../__internal__/focus-trap/focus-trap-utils.js";import L from"../flat-table/__internal__/flat-table.context.js";import{useGlobalHeader as E}from"../global-header/__internal__/global-header.context.js";function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function F(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){S(e,t,n[t])}))}return e}function M(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 W=({tabIndex:t,onClick:n,"data-element":r,ref:o,"aria-label":i,id:a,"aria-expanded":l,"aria-haspopup":c})=>e(b,{tabIndex:t,onClick:n,"data-element":r,ref:o,"aria-label":i,"aria-haspopup":c,"aria-expanded":l,id:a,children:e(g,{type:"settings"})}),R=({"data-element":t,tabIndex:n,onClick:r,ref:o,"aria-label":i,closeButtonDataProps:a})=>e(v,M(F({tabIndex:n,onClick:r,ref:o,"aria-label":i},I("close",F({"data-element":t},a))),{children:e(g,{type:"close"})})),H=r(((r,b)=>{var{children:v,title:g,position:S="right",open:H,onOpen:Q,onClose:T,renderOpenComponent:q=W,renderCloseComponent:z=R,shouldCoverButton:G=!1,ariaDescribedBy:K,openButtonAriaLabel:N,closeButtonAriaLabel:U="close",containerAriaLabel:$,closeButtonDataProps:J,disableAnimation:V=!1,hasFullWidth:X=!1}=r,Y=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(r,["children","title","position","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const Z=void 0!==H,[ee,te]=o(!1),ne=i(null),re=i(null),oe=i(null),ie=i(x()),ae=i(null),le=g?`PopoverContainer_${ie.current}`:void 0,ce=Z?H:ee,se=!f("screen and (prefers-reduced-motion: no-preference)"),pe=function(e){return p((()=>[u(e?({rects:e})=>({mainAxis:-e.reference.height}):6),m({fallbackStrategy:"initialPlacement"})]),[e])}(G),{isInFlatTable:de}=a(L),ue=l((e=>{var t;Z||te(!1),null==T||T(e),ce&&(null===(t=re.current)||void 0===t||t.focus())}),[Z,ce,T]),me=l((e=>{!w.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&w.isEscKey(e)&&ue(e)}),[ue]);c((()=>(document.addEventListener("keydown",me),()=>{document.removeEventListener("keydown",me)})),[me]),c((()=>{var e;!G&&ce&&(null===(e=ae.current)||void 0===e||e.focus({preventScroll:!0}))}),[ce,G,ae]),B(G?void 0:ae,G?void 0:re,ue);const fe=l((e=>{const t=Array.from(document.querySelectorAll(D)||[]).filter((e=>e===re.current||-1!==Number(e.tabIndex))),n=t.indexOf(re.current);t[n+1].focus(),ue(e)}),[]),be=(e,t)=>{var n;"next"===e&&fe?fe(t):"prev"===e&&(null===(n=re.current)||void 0===n||n.focus())},ve={tabIndex:0,"aria-expanded":ce,"aria-haspopup":"dialog",isOpen:ce,"data-element":"popover-container-open-component",onClick:e=>{Z||te(!ce),ce?null==T||T(e):null==Q||Q(e)},ref:re,"aria-label":N||g,id:ce?void 0:le},he={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{ue(e)},ref:ne,"aria-label":U,closeButtonDataProps:J},ye=C((e=>{Z||te(!1),ce&&(null==T||T(e))}),"mousedown"),[_e,Oe]=o(!1),{isWithinGlobalHeader:ge}=E();s(b,(()=>({focusButton(){var e;null===(e=re.current)||void 0===e||e.focus()}})),[]);const je=()=>t(y,M(F({"data-element":"popover-container-content",role:"dialog","aria-labelledby":le,"aria-label":$,"aria-describedby":K,p:"16px 24px",ref:ae,tabIndex:-1,disableAnimation:V||se,zIndex:ge?1e4:2e3},P(Y)),{children:[t(_,{children:[e(O,{id:le,"data-element":"popover-container-title",children:g}),z(he)]}),v]}));return t(h,M(F({onMouseDown:ye,hasFullWidth:X},I("popover-container",Y)),{children:[e("div",{ref:oe,children:q(ve)}),e(d,{nodeRef:ae,timeout:{exit:V?0:300},in:ce,unmountOnExit:!0,onEntered:G?()=>Oe(!0):void 0,onExiting:G?()=>Oe(!1):void 0,children:e(j,{reference:oe,placement:"right"===S?"bottom-start":"bottom-end",popoverStrategy:V||se?"fixed":"absolute",middleware:pe,childRefOverride:ae,disableBackgroundUI:de,children:G?e(A.Provider,{value:{isAnimationComplete:_e},children:e(k,{wrapperRef:ae,isOpen:ce,children:je()})}):t(n,{children:[e("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>be("prev",e)}),je(),e("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>be("next",e)})]})})})]}))}));export{H as PopoverContainer,H as default,R as renderClose,W as renderOpen};
|
|
@@ -15,7 +15,7 @@ export interface SubmenuProps {
|
|
|
15
15
|
/** Defines which direction the submenu will hang eg. left/right */
|
|
16
16
|
submenuDirection?: string;
|
|
17
17
|
/** A title for the menu item that has a submenu. */
|
|
18
|
-
title?:
|
|
18
|
+
title?: React.ReactNode;
|
|
19
19
|
/** onKeyDown handler */
|
|
20
20
|
onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
21
21
|
/** set the colour variant for a menuType */
|
|
@@ -11,7 +11,7 @@ interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWi
|
|
|
11
11
|
/** Is the menu item the currently selected item. */
|
|
12
12
|
selected?: boolean;
|
|
13
13
|
/** A title for the menu item that has a submenu. */
|
|
14
|
-
submenu?:
|
|
14
|
+
submenu?: React.ReactNode;
|
|
15
15
|
/** The href to use for the menu item. */
|
|
16
16
|
href?: string;
|
|
17
17
|
/** onKeyDown handler */
|
|
@@ -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"),i=require("./menu-item.style.js"),o=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 b(e){return e&&e.__esModule?e:{default:e}}var f=b(n);function
|
|
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"),i=require("./menu-item.style.js"),o=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 b(e){return e&&e.__esModule?e:{default:e}}var f=b(t),p=b(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=n=>{var{submenu:b,submenuMaxWidth:h,submenuMinWidth:O,children:g,href:j,onClick:w,target:x,submenuDirection:_="right",icon:S,selected:P,onKeyDown:C,variant:I="default",showDropdownArrow:q=!0,ariaLabel:D,clickToOpen:M,maxWidth:k,onSubmenuOpen:W,onSubmenuClose:F,overrideColor:E,rel:L,as:T,"data-element":V,"data-role":K}=n,A=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[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(S||g,"Either prop `icon` must be defined or this node must have `children`."),p.default(g||D||b||"string"==typeof b&&b.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof b||void 0===b||f.default.isValidElement(b)||g&&"string"==typeof b&&b.length,"You should not pass `children` when `submenu` is an empty string");const H=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:R}=t.useContext(c.MenuSegmentContext),{inFullscreenView:Y,registerItem:z,unregisterItem:B,focusId:G,updateFocusId:J,menuType:Q}=l.useStrictMenuContext(),U=t.useContext(a.default),X=Object.keys(U).length>0,{submenuFocusId:Z,updateFocusId:$,handleKeyDown:ee,submenuHasMaxWidth:te}=U,ne=G===H.current,re=Z?Z===H.current:void 0,[ue,ie]=t.useState(null),[oe,le]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==ue?void 0:ue.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==oe&&le(t)}),[oe,ue]),t.useEffect((()=>{const e=H.current;return z&&z(e),()=>{B&&B(e)}}),[z,B]),t.useEffect((()=>{if(ne&&!re||re){if(oe)return void oe.focus();null==ue||ue.focus()}}),[oe,ne,re,ue]);const se=e=>{X?(e.stopPropagation(),null==$||$(H.current)):null==J||J(H.current)},ae={className:j||w?"carbon-menu-item--has-link":"",href:oe?void 0:j,onClick:oe?void 0:w,target:x,rel:L,icon:S,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:Y?void 0:e=>{null==C||C(e),o.default.isEscKey(e)&&(null==ue||ue.focus()),null==ee||ee(e)},overrideColor:E,ref:ie};"alternate"===R&&N&&"alternate"===I&&["white","black"].includes(Q)&&(ae.overrideColor=!0);const ce=e=>k&&"string"==typeof e?e:void 0,de=Y?void 0:k,me=!(w||j||oe);if(b)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":V,"data-role":K,menuType:Q,title:ce(b),maxWidth:de},A),{inFullscreenView:Y,id:H.current,as:T,onFocus:se,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof b&&{title:b}),{submenuDirection:_,showDropdownArrow:q,clickToOpen:M,maxWidth:k,asPassiveItem:me,ariaLabel:D,onSubmenuOpen:W,onSubmenuClose:F,submenuMaxWidth:h,submenuMinWidth:O}),ae),{variant:I}),A),{children:g}))}));const be=u.default(A),fe=!!(null==ue?void 0:ue.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":V,"data-role":K,menuType:Q,inSubmenu:X,title:ce(g),maxWidth:de},A),{inFullscreenView:Y&&!Object.keys(U).length,id:H.current,as:T,onFocus:se,children:e.jsx(i.default,v(y(v(y({menuType:Q,"data-role":"menu-item-wrapper"},ae),{menuItemVariant:I,ariaLabel:D,maxWidth:te?void 0:de,inFullscreenView:Y,asPassiveItem:me}),be),{asDiv:fe||"div"===T,hasFocusableChild:!!oe,hasInput:fe,inSubmenu:X,children:g}))}))};exports.MenuItem=O,exports.default=O;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),n=require("@floating-ui/dom"),o=require("../../hooks/useMediaQuery/useMediaQuery.js"),a=require("./popover-container.style.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),n=require("@floating-ui/dom"),o=require("../../hooks/useMediaQuery/useMediaQuery.js"),a=require("./popover-container.style.js"),l=require("../icon/icon.component.js"),i=require("../../__internal__/popover/popover.component.js"),s=require("../../__internal__/utils/helpers/guid/index.js"),u=require("../../style/utils/filter-styled-system-padding-props.js"),c=require("../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js"),d=require("../../__internal__/utils/helpers/events/events.js"),p=require("../../__internal__/focus-trap/focus-trap.component.js"),f=require("../modal/__internal__/modal.context.js"),b=require("../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js"),m=require("../../__internal__/utils/helpers/tags/tags.js"),v=require("../../__internal__/focus-trap/focus-trap-utils.js"),x=require("../flat-table/__internal__/flat-table.context.js"),j=require("../global-header/__internal__/global-header.context.js");function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){y(e,t,r[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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const O=({tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":i,id:s,"aria-expanded":u,"aria-haspopup":c})=>e.jsx(a.PopoverContainerOpenIcon,{tabIndex:t,onClick:r,"data-element":n,ref:o,"aria-label":i,"aria-haspopup":c,"aria-expanded":u,id:s,children:e.jsx(l.default,{type:"settings"})}),g=({"data-element":t,tabIndex:r,onClick:n,ref:o,"aria-label":i,closeButtonDataProps:s})=>e.jsx(a.PopoverContainerCloseIcon,h(_({tabIndex:r,onClick:n,ref:o,"aria-label":i},m.default("close",_({"data-element":t},s))),{children:e.jsx(l.default,{type:"close"})})),C=t.forwardRef(((l,y)=>{var{children:C,title:P,position:k="right",open:q,onOpen:w,onClose:S,renderOpenComponent:A=O,renderCloseComponent:I=g,shouldCoverButton:B=!1,ariaDescribedBy:E,openButtonAriaLabel:D,closeButtonAriaLabel:L="close",containerAriaLabel:F,closeButtonDataProps:R,disableAnimation:M=!1,hasFullWidth:H=!1}=l,W=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(l,["children","title","position","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const T=void 0!==q,[G,Q]=t.useState(!1),z=t.useRef(null),K=t.useRef(null),N=t.useRef(null),U=t.useRef(s.default()),$=t.useRef(null),J=P?`PopoverContainer_${U.current}`:void 0,V=T?q:G,X=!o.default("screen and (prefers-reduced-motion: no-preference)"),Y=function(e){return t.useMemo((()=>[n.offset(e?({rects:e})=>({mainAxis:-e.reference.height}):6),n.flip({fallbackStrategy:"initialPlacement"})]),[e])}(B),{isInFlatTable:Z}=t.useContext(x.default),ee=t.useCallback((e=>{var t;T||Q(!1),null==S||S(e),V&&(null===(t=K.current)||void 0===t||t.focus())}),[T,V,S]),te=t.useCallback((e=>{!d.default.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&d.default.isEscKey(e)&&ee(e)}),[ee]);t.useEffect((()=>(document.addEventListener("keydown",te),()=>{document.removeEventListener("keydown",te)})),[te]),t.useEffect((()=>{var e;!B&&V&&(null===(e=$.current)||void 0===e||e.focus({preventScroll:!0}))}),[V,B,$]),b.default(B?void 0:$,B?void 0:K,ee);const re=t.useCallback((e=>{const t=Array.from(document.querySelectorAll(v.defaultFocusableSelectors)||[]).filter((e=>e===K.current||-1!==Number(e.tabIndex))),r=t.indexOf(K.current);t[r+1].focus(),ee(e)}),[]),ne=(e,t)=>{var r;"next"===e&&re?re(t):"prev"===e&&(null===(r=K.current)||void 0===r||r.focus())},oe={tabIndex:0,"aria-expanded":V,"aria-haspopup":"dialog",isOpen:V,"data-element":"popover-container-open-component",onClick:e=>{T||Q(!V),V?null==S||S(e):null==w||w(e)},ref:K,"aria-label":D||P,id:V?void 0:J},ae={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{ee(e)},ref:z,"aria-label":L,closeButtonDataProps:R},le=c.default((e=>{T||Q(!1),V&&(null==S||S(e))}),"mousedown"),[ie,se]=t.useState(!1),{isWithinGlobalHeader:ue}=j.useGlobalHeader();t.useImperativeHandle(y,(()=>({focusButton(){var e;null===(e=K.current)||void 0===e||e.focus()}})),[]);const ce=()=>e.jsxs(a.PopoverContainerContentStyle,h(_({"data-element":"popover-container-content",role:"dialog","aria-labelledby":J,"aria-label":F,"aria-describedby":E,p:"16px 24px",ref:$,tabIndex:-1,disableAnimation:M||X,zIndex:ue?1e4:2e3},u.default(W)),{children:[e.jsxs(a.PopoverContainerHeaderStyle,{children:[e.jsx(a.PopoverContainerTitleStyle,{id:J,"data-element":"popover-container-title",children:P}),I(ae)]}),C]}));return e.jsxs(a.PopoverContainerWrapperStyle,h(_({onMouseDown:le,hasFullWidth:H},m.default("popover-container",W)),{children:[e.jsx("div",{ref:N,children:A(oe)}),e.jsx(r.CSSTransition,{nodeRef:$,timeout:{exit:M?0:300},in:V,unmountOnExit:!0,onEntered:B?()=>se(!0):void 0,onExiting:B?()=>se(!1):void 0,children:e.jsx(i.default,{reference:N,placement:"right"===k?"bottom-start":"bottom-end",popoverStrategy:M||X?"fixed":"absolute",middleware:Y,childRefOverride:$,disableBackgroundUI:Z,children:B?e.jsx(f.default.Provider,{value:{isAnimationComplete:ie},children:e.jsx(p.default,{wrapperRef:$,isOpen:V,children:ce()})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>ne("prev",e)}),ce(),e.jsx("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>ne("next",e)})]})})})]}))}));exports.PopoverContainer=C,exports.default=C,exports.renderClose=g,exports.renderOpen=O;
|