carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.72 kB
JavaScript
import{jsx as e}from"react/jsx-runtime";import t,{useMemo as o,useCallback as n,useState as r}from"react";import i from"invariant";import{MenuItemDivider as p,Menu as a}from"../action-popover.style.js";import s from"../../../__internal__/utils/helpers/events/events.js";import{ActionPopoverItem as l}from"../action-popover-item/action-popover-item.component.js";import"../action-popover-divider/action-popover-divider.component.js";import{useActionPopoverContext as c}from"../__internal__/action-popover.context.js";import{getItems as u,isItemDisabled as f,findFirstFocusableItem as m,findLastFocusableItem as y}from"../__internal__/action-popover.utils.js";function d(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}const v=t.forwardRef(((v,b)=>{var{children:O,parentID:P,focusIndex:j,isOpen:g,menuID:h,setOpen:w,setFocusIndex:D,placement:I="bottom"}=v,_=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(v,["children","parentID","focusIndex","isOpen","menuID","setOpen","setFocusIndex","placement"]);const{focusButton:x,submenuPosition:A,horizontalAlignment:E}=c();i(w&&D&&void 0!==j,"ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");const S=o((()=>!t.Children.toArray(O).find((e=>!t.isValidElement(e)||"ActionPopoverItem"!==e.type.displayName&&"ActionPopoverDivider"!==e.type.displayName))),[O]);i(S,`ActionPopoverMenu only accepts children of type \`${l.displayName}\` and \`${p.displayName}\`.`);const K=o((()=>u(O)),[O]),k=n((e=>f(K[e])),[K]),C=m(K),N=y(K),L=n((e=>{if(s.isTabKey(e))e.preventDefault(),x(),w(!1);else if(s.isDownKey(e)){e.preventDefault(),e.stopPropagation();let t=j+1;for(;t<K.length&&k(t);)t+=1;t>=K.length&&(t=C),D(t)}else if(s.isUpKey(e)){e.preventDefault(),e.stopPropagation();let t=j-1;for(;t>=C&&k(t);)t-=1;t<C&&(t=N),D(t)}else if(s.isHomeKey(e))e.preventDefault(),e.stopPropagation(),D(C);else if(s.isEndKey(e))e.preventDefault(),e.stopPropagation(),D(N);else if(1===e.key.length){let o,n;e.stopPropagation(),K.forEach(((r,i)=>{t.isValidElement(r)&&!k(i)&&r.props.children.toLowerCase().startsWith(e.key.toLowerCase())&&(void 0===o&&(o=i),i>j&&void 0===n&&(n=i))})),void 0!==n?D(n):void 0!==o&&D(o)}}),[x,w,j,K,k,D,C,N]),[M,V]=r(A),F=o((()=>{let e=0;return t.Children.map(O,(o=>t.isValidElement(o)&&o.type===l?(e+=1,t.cloneElement(o,{focusItem:g&&j===e-1,currentSubmenuPosition:M,setCurrentSubmenuPosition:V})):o))}),[O,j,g,M]);return e(a,($=function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(t){d(e,t,o[t])}))}return e}({"data-component":"action-popover","data-submenu-placement":I,isOpen:!!g,onKeyDown:L,id:h,"aria-labelledby":P,ref:b,role:"list",submenuLeft:"left"===M,iconLeft:"left"===E},_),z=null!=(z={children:F})?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties($,Object.getOwnPropertyDescriptors(z)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(z)).forEach((function(e){Object.defineProperty($,e,Object.getOwnPropertyDescriptor(z,e))})),$));var $,z}));v.displayName="ActionPopoverMenu";export{v as default};