@openfin/ui-library 0.25.0-alpha.1716474081 → 0.25.0-alpha.1716916009

package/dist/components/controls/CustomContextMenu/useContextMenuKeyboardNavigation.d.ts

@@ -10,8 +10,8 @@ import { CustomContextMenuData, SubmenulessMenuItemTemplate } from './CustomCont
  * @param { React.Dispatch<React.SetStateAction<number>> } setSelectedIndex - setState function to update the selected index.
  * @param { (data: CustomContextMenuData) => void } onClick - Callback function to handle click events on menu items.
  * @param { (submenuLabel: string) => void } handleNavigateToSubmenu - Function to navigate to a submenu.
- * @param { (submenuLabel: string) => void } handleBackToParentMenu - Function to navigate back to the parent menu.
+ * @param { (submenuLabel: string, method: 'click' | 'keyboard') => void } handleBackToParentMenu - Function to navigate back to the parent menu.
  * @param { () => void } handleNavigateToBase - Function to navigate back to the base menu.
  * @returns { void }
  */
-export declare const useContextMenuKeyboardNavigation: (menuOptions: SubmenulessMenuItemTemplate[], menuLabelStack: string[], activeMenuLabel: string, selectedIndex: number, setSelectedIndex: React.Dispatch<React.SetStateAction<number>>, onClick: (data: CustomContextMenuData) => void, handleNavigateToSubmenu: (submenuLabel: string) => void, handleBackToParentMenu: (submenuLabel: string) => void, handleNavigateToBase: () => void) => void;
+export declare const useContextMenuKeyboardNavigation: (menuOptions: SubmenulessMenuItemTemplate[], menuLabelStack: string[], activeMenuLabel: string, selectedIndex: number, setSelectedIndex: React.Dispatch<React.SetStateAction<number>>, onClick: (data: CustomContextMenuData) => void, handleNavigateToSubmenu: (submenuLabel: string) => void, handleBackToParentMenu: (submenuLabel: string, method: 'click' | 'keyboard') => void, handleNavigateToBase: () => void) => void;

package/dist/components/controls/CustomContextMenu/useContextMenuNavigation.d.ts

@@ -16,6 +16,6 @@ import { SubMenuNavigationTemplate } from './CustomContextMenu';
  */
 export declare const useContextMenuNavigation: (transitionSpeed: number, setTransitionSpeed: React.Dispatch<React.SetStateAction<number>>, menuLabelStack: string[], setMenuLabelStack: React.Dispatch<React.SetStateAction<string[]>>, activeMenuLabel: string | undefined, setActiveMenuLabel: React.Dispatch<React.SetStateAction<string | undefined>>, setSelectedIndex: React.Dispatch<React.SetStateAction<number>>, menuCollection: SubMenuNavigationTemplate[], onMenuResize?: ((height: number, width: number) => void) | undefined) => {
     handleNavigateToSubmenu: (parentLabel: string) => void;
-    handleNavigateBackToParent: (submenuLabel: string) => void;
+    handleNavigateBackToParent: (submenuLabel: string, method?: 'click' | 'keyboard') => void;
     handleNavigateToBase: () => void;
 };

package/dist/index.js

@@ -157,22 +157,22 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
     border-top: 1px solid ${({theme:e})=>e.palette.borderNeutral};
     border-bottom: 1px solid ${({theme:e})=>e.palette.borderNeutral};
   }
-`},7401:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(124),t)},9318:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CustomContextMenu=t.CONTEXT_MENU_ANIMATION_DURATION=t.PRIOR_CONTEXT_MENU_CLASS=t.BASE_CONTEXT_MENU=t.ACTIVE_CONTEXT_MENU_CLASS=t.CONTEXT_MENU_FRAME_ID=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(7641),c=n(1335),u=n(9306),s=n(7336),f=n(4725),d=n(4740),p=n(6449);t.CONTEXT_MENU_FRAME_ID="context_menu_frame",t.ACTIVE_CONTEXT_MENU_CLASS="active_context_menu",t.BASE_CONTEXT_MENU="base_context_menu",t.PRIOR_CONTEXT_MENU_CLASS="previous_context_menu",t.CONTEXT_MENU_ANIMATION_DURATION=200,t.CustomContextMenu=({menuTemplate:e,onClick:n,icon:r,onMenuResize:a,onContextMenuReady:c,isWindows:v=!0})=>{var g;const m=(0,i.useRef)(null),[b,w]=(0,i.useState)(!1),[y,x]=(0,i.useState)(160),[_,O]=(0,i.useState)(0),[L,M]=(0,i.useState)([]),[j,E]=(0,i.useState)(),[H,V]=(0,i.useState)([]),[S,R]=(0,i.useState)(e.map((e=>e.label||""))),[P,Z]=(0,i.useState)(-1);(0,i.useEffect)((()=>{R(e.map((e=>e.label||""))),Z(S.findIndex((e=>e===j)))}),[e]);const{resizeContextMenuFrameToActiveMenu:k}=(0,u.useResizeContextMenu)(j,x),{handleNavigateToSubmenu:I,handleNavigateBackToParent:D,handleNavigateToBase:B}=(0,f.useContextMenuNavigation)(_,O,H,V,j,E,Z,L,a);return(0,i.useEffect)((()=>{M((0,s.getMenuNavigationOrder)(e)),E(t.BASE_CONTEXT_MENU),V([]);const{width:n}=k();x(n)}),[e]),(0,d.useContextMenuKeyboardNavigation)(null===(g=L.find((e=>e.parentLabel===j)))||void 0===g?void 0:g.menuTemplate,H,j,P,Z,n,I,D,B),(0,i.useEffect)((()=>{m.current&&(b||(c&&c(),w(!0)))}),[m.current]),(0,o.jsx)(C,Object.assign({id:t.CONTEXT_MENU_FRAME_ID,transitionSpeed:_,isWindows:v},{children:L.map((({parentLabel:e,menuTemplate:i})=>(0,o.jsx)("div",Object.assign({ref:e===j?m:void 0},{children:(0,o.jsxs)(h,Object.assign({className:(0,s.getClassName)(e,j,H),activeMenuWidth:y,transitionSpeed:_,id:e},{children:[e!==t.BASE_CONTEXT_MENU?(0,o.jsx)(l.CustomContextMenuItem,{type:"submenuHeader",label:e,onBack:()=>D(e),onClose:B,showShouldHomeButton:H.slice(2).includes(e)||H.length>=2&&j===e,selected:-1===P},`${e}-submenu-header`):r&&(0,o.jsx)(p.RootMenuHeader,{icon:r}),i.map(((t,r)=>(0,o.jsx)(l.CustomContextMenuItem,Object.assign({onClick:()=>{t.hasSubMenu?I(t.label||""):n(t.data),Z(-2)}},t,{submenu:t.hasSubMenu,selected:P===r}),`${e}-${t.label}-${r}`)))]}))}),e)))}))};const C=a.default.div`
+`},7401:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(124),t)},9318:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CustomContextMenu=t.CONTEXT_MENU_ANIMATION_DURATION=t.PRIOR_CONTEXT_MENU_CLASS=t.BASE_CONTEXT_MENU=t.ACTIVE_CONTEXT_MENU_CLASS=t.CONTEXT_MENU_FRAME_ID=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(7641),c=n(1335),u=n(9306),s=n(7336),f=n(4725),d=n(4740),p=n(6449);t.CONTEXT_MENU_FRAME_ID="context_menu_frame",t.ACTIVE_CONTEXT_MENU_CLASS="active_context_menu",t.BASE_CONTEXT_MENU="base_context_menu",t.PRIOR_CONTEXT_MENU_CLASS="previous_context_menu",t.CONTEXT_MENU_ANIMATION_DURATION=200,t.CustomContextMenu=({menuTemplate:e,onClick:n,icon:r,onMenuResize:a,onContextMenuReady:c,isWindows:v=!0})=>{var g;const m=(0,i.useRef)(null),[b,w]=(0,i.useState)(!1),[y,x]=(0,i.useState)(160),[_,O]=(0,i.useState)(0),[L,M]=(0,i.useState)([]),[j,E]=(0,i.useState)(),[H,V]=(0,i.useState)([]),[S,R]=(0,i.useState)(e.map((e=>e.label||""))),[P,Z]=(0,i.useState)(-1);(0,i.useEffect)((()=>{R(e.map((e=>e.label||""))),Z(S.findIndex((e=>e===j)))}),[e]);const{resizeContextMenuFrameToActiveMenu:k}=(0,u.useResizeContextMenu)(j,x),{handleNavigateToSubmenu:I,handleNavigateBackToParent:D,handleNavigateToBase:B}=(0,f.useContextMenuNavigation)(_,O,H,V,j,E,Z,L,a);return(0,i.useEffect)((()=>{M((0,s.getMenuNavigationOrder)(e)),E(t.BASE_CONTEXT_MENU),V([]);const{width:n}=k();x(n)}),[e]),(0,d.useContextMenuKeyboardNavigation)(null===(g=L.find((e=>e.parentLabel===j)))||void 0===g?void 0:g.menuTemplate,H,j,P,Z,n,I,D,B),(0,i.useEffect)((()=>{m.current&&(b||(c&&c(),w(!0)))}),[m.current]),(0,o.jsx)(C,Object.assign({id:t.CONTEXT_MENU_FRAME_ID,transitionSpeed:_,isWindows:v},{children:L.map((({parentLabel:e,menuTemplate:i})=>(0,o.jsx)("div",Object.assign({ref:e===j?m:void 0},{children:(0,o.jsxs)(h,Object.assign({className:(0,s.getClassName)(e,j,H),activeMenuWidth:y,transitionSpeed:_,id:e},{children:[e!==t.BASE_CONTEXT_MENU?(0,o.jsx)(l.CustomContextMenuItem,{type:"submenuHeader",label:e,onBack:()=>D(e,"click"),onClose:B,showShouldHomeButton:H.slice(2).includes(e)||H.length>=2&&j===e,selected:-1===P},`${e}-submenu-header`):r&&(0,o.jsx)(p.RootMenuHeader,{icon:r}),i.map(((t,r)=>(0,o.jsx)(l.CustomContextMenuItem,Object.assign({onClick:()=>{t.hasSubMenu?I(t.label||""):n(t.data),Z(-2)}},t,{submenu:t.hasSubMenu,selected:P===r}),`${e}-${t.label}-${r}`)))]}))}),e)))}))};const C=a.default.div`
   position: relative;
   min-width: fit-content;
   min-height: fit-content;
   overflow: hidden;
 
-  background-color: ${({theme:e})=>e.palette.background2};
+  background-color: ${({theme:e})=>e.palette.background1};
   transition: ${({transitionSpeed:e})=>`all ${e}ms linear`};
-  border: ${({theme:e})=>`1px solid ${e.palette.background3}`};
+  border: ${({theme:e})=>`1px solid ${e.palette.background2}`};
   border-radius: ${({isWindows:e})=>!e&&"10px"};
 `,h=(0,a.default)(c.Box)`
   display: flex;
   flex-direction: column;
   position: absolute;
   width: max-content;
-  background-color: ${({theme:e})=>e.palette.background2};
+  background-color: ${({theme:e})=>e.palette.background1};
   padding: ${({theme:e})=>`${e.px.small} 0 ${e.px.small} 0`};
 
   transform: translateX(${({activeMenuWidth:e})=>`${e}px`});
@@ -198,10 +198,10 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   align-items: center;
   justify-content: flex-start;
   border-radius: ${({theme:e})=>e.radius.small};
-  background-color: ${({theme:e,selected:t,enabled:n})=>"false"!==n&&t?e.palette.background4:"transparent"};
+  background-color: ${({theme:e,selected:t,enabled:n})=>"false"!==n&&t?e.palette.background3:"transparent"};
 
   &:hover {
-    background-color: ${({theme:e,enabled:t})=>"false"!==t?e.palette.background4:"transparent"};
+    background-color: ${({theme:e,enabled:t})=>"false"!==t?e.palette.background3:"transparent"};
   }
 `,f=(0,i.default)(a.Box)`
   padding: ${({theme:e,side:t})=>"right"===t?`0 ${e.px.small} 0 0`:`0 0 0 ${e.px.small}`};
@@ -209,12 +209,14 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
 `,d=(0,i.default)(c.Icon)`
   svg path {
     fill: ${({theme:e,enabled:t,checked:n})=>"true"===t?n?e.palette.textDefault:"transparent":e.palette.textInactive};
+    stroke-width: 1.25;
   }
 `,p=(0,i.default)(c.Icon)`
   margin-left: auto;
 
   svg path {
     fill: ${({theme:e,enabled:t})=>"true"===t?e.palette.textDefault:e.palette.textInactive};
+    stroke-width: 1.25;
   }
 `,C=(0,i.default)(l.Text)`
   color: ${({theme:e,enabled:t})=>t?e.palette.textDefault:e.palette.textInactive};
@@ -235,7 +237,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   width: 100%;
   height: 1px;
   border: none;
-  background-color: ${({theme:e})=>e.palette.background3};
+  background-color: ${({theme:e})=>e.palette.background2};
 `},9068:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.SubmenuHeaderCustomContextMenuItem=void 0;const o=n(5893),i=n(6689),a=r(n(7518)),l=n(9634),c=n(7769),u=n(1335),s=n(3600);t.SubmenuHeaderCustomContextMenuItem=({label:e,showShouldHomeButton:t,onClose:n,onBack:r,selected:a})=>{const l=(0,i.useCallback)((e=>{e.stopPropagation(),null==r||r()}),[r]),c=(0,i.useCallback)((e=>{e.stopPropagation(),null==n||n()}),[n]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(f,{children:[(0,o.jsx)(d,Object.assign({side:"left",selected:a},{children:(0,o.jsx)(p,{icon:"ArrowLeftIcon",onClick:l,id:"back-icon",selected:a})})),(0,o.jsx)(C,Object.assign({size:"base",weight:"normal"},{children:e})),t&&(0,o.jsx)(d,Object.assign({side:"right"},{children:(0,o.jsx)(h,{icon:"Cross1Icon",onClick:c,id:"close-icon"})}))]}),(0,o.jsx)(s.SeparatorCustomContextMenuItem,{})]})};const f=(0,a.default)(u.Box)`
   width: 100%;
   height: 28px;
@@ -249,24 +251,26 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   margin-left: ${({side:e})=>"right"===e?"auto":0};
 `,p=(0,a.default)(l.Icon)`
   border-radius: ${({theme:e})=>e.radius.small};
-  background-color: ${({selected:e,theme:t})=>e?t.palette.background4:"transparent"};
-  color: ${({theme:e,selected:t})=>t?e.palette.textDefault:e.palette.textInactive};
+  background-color: ${({selected:e,theme:t})=>e?t.palette.background3:"transparent"};
+  color: ${({theme:e,selected:t})=>t?e.palette.textDefault:e.palette.textHelp};
+  stroke-width: 1.25;
 
   &:hover {
     color: ${({theme:e})=>e.palette.textDefault};
   }
 `,C=(0,a.default)(c.Text)`
-  color: ${({theme:e})=>e.palette.textInactive};
+  color: ${({theme:e})=>e.palette.textHelp};
   padding: ${({theme:e})=>`0 ${e.px.xxxlarge} 0 ${e.px.small}`};
   cursor: default;
 `,h=(0,a.default)(l.Icon)`
-  color: ${({theme:e})=>e.palette.textInactive};
+  color: ${({theme:e})=>e.palette.textHelp};
   margin-left: auto;
+  stroke-width: 1.25;
 
   &:hover {
     color: ${({theme:e})=>e.palette.textDefault};
   }
-`},9501:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(9318),t)},4740:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContextMenuKeyboardNavigation=void 0;const r=n(6689),o=n(9318);t.useContextMenuKeyboardNavigation=(e,t,n,i,a,l,c,u,s)=>{const f=t=>{var n,r,o;return"separator"===(null===(n=e[t])||void 0===n?void 0:n.type)||!1===(null===(r=e[t])||void 0===r?void 0:r.enabled)||!1===(null===(o=e[t])||void 0===o?void 0:o.visible)},d=(0,r.useCallback)((()=>{a((t=>{let n=t;do{if(n===(null==e?void 0:e.length)-1)break;n+=1}while(f(n));return f(n)?t:n}))}),[a,e]),p=(0,r.useCallback)((()=>{a((e=>{let t=e;do{if(n===o.BASE_CONTEXT_MENU&&0===t||-1===t)break;t-=1}while(f(t));return t}))}),[a,e]),C=(0,r.useCallback)((()=>{a(n===o.BASE_CONTEXT_MENU?0:-1)}),[a,n]),h=(0,r.useCallback)((()=>{a((t=>{for(let n=e.length-1;n>=t;n--)if(!f(n))return n;return t}))}),[null==e?void 0:e.length,a]),v=(0,r.useCallback)((()=>{var t,r;if(null===(t=e[i])||void 0===t?void 0:t.hasSubMenu)c((null===(r=e[i])||void 0===r?void 0:r.label)||"");else{if(-1===i)return void u(n);l(e[i].data)}a(-1)}),[a,l,c,e,i,u,n]),g=(0,r.useCallback)((()=>{var t,n;(null===(t=e[i])||void 0===t?void 0:t.hasSubMenu)&&(c((null===(n=e[i])||void 0===n?void 0:n.label)||""),a(-1))}),[a,c,e,i]),m=(0,r.useCallback)((()=>{(t.slice(1).includes(n)||(null==t?void 0:t.length)>=1)&&u(n)}),[u,t,n]),b=(0,r.useCallback)((()=>{t.slice(2).includes(n)||(null==t?void 0:t.length)>=2?s():l({type:"close"})}),[s,t,n]);(0,r.useEffect)((()=>{const e=e=>{switch(e.key){case"ArrowDown":d();break;case"ArrowUp":p();break;case"Home":case"PageUp":C();break;case"End":case"PageDown":h();break;case"Enter":v();break;case"ArrowRight":g();break;case"ArrowLeft":m();break;case"Escape":b()}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[d,p,C,h,v,g,m,b])}},4725:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContextMenuNavigation=void 0;const r=n(6689),o=n(9318);t.useContextMenuNavigation=(e,t,n,i,a,l,c,u,s)=>{const f=(0,r.useCallback)((e=>{const t=document.getElementById(e),n=null==t?void 0:t.getBoundingClientRect();return{height:(null==n?void 0:n.height)||0,width:(null==n?void 0:n.width)||0}}),[]);return{handleNavigateToSubmenu:(0,r.useCallback)((r=>{if(s){const{height:e,width:t}=f(r);s(e,t)}e||t(o.CONTEXT_MENU_ANIMATION_DURATION),l(r),i([...n,a])}),[a,n,i,s,t,f]),handleNavigateBackToParent:(0,r.useCallback)((e=>{if(s){const e=1===n.length?o.BASE_CONTEXT_MENU:n[n.length-1],{height:t,width:r}=f(e);s(t,r)}const t=n,r=t.pop(),a=u.find((e=>e.parentLabel===r));l(r),i(t),c((null==a?void 0:a.menuTemplate.findIndex((t=>t.label===e)))||0)}),[n,i,c,f,s,u]),handleNavigateToBase:(0,r.useCallback)((()=>{if(s){const{height:e,width:t}=f(o.BASE_CONTEXT_MENU);s(e,t)}l(o.BASE_CONTEXT_MENU),i([]),c(0)}),[l,i,c,f,s])}}},9306:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useResizeContextMenu=void 0;const r=n(6689),o=n(9318);t.useResizeContextMenu=(e,t)=>{const n=()=>{const e=document.getElementById(o.CONTEXT_MENU_FRAME_ID),t=document.getElementsByClassName(o.ACTIVE_CONTEXT_MENU_CLASS)[0];if(!t||!e)return{height:0,width:0};const{height:n,width:r}=t.getBoundingClientRect();return e.style.height=`${n}px`,e.style.width=`${r}px`,{height:n,width:r}};return(0,r.useEffect)((()=>{if(e){const{width:e}=n();t(e)}}),[e]),{resizeContextMenuFrameToActiveMenu:n}}},7336:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.getMenuNavigationOrder=t.getClassName=void 0;const r=n(9318);t.getClassName=(e,t,n)=>t===e?r.ACTIVE_CONTEXT_MENU_CLASS:n.includes(e)?r.PRIOR_CONTEXT_MENU_CLASS:"",t.getMenuNavigationOrder=e=>{if(!e)return[];const t=[{parentLabel:r.BASE_CONTEXT_MENU,template:e}],n=[];for(;t.length;){const{template:e,parentLabel:r}=t.pop();e.forEach((({submenu:n,label:r},o)=>{n&&(t.push({parentLabel:r||"",template:n}),delete e[o].submenu,e[o].hasSubMenu=!0)})),n.push({parentLabel:r,menuTemplate:e})}return n}},9644:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandDirection=void 0,(n=t.ExpandDirection||(t.ExpandDirection={}))[n.Up=0]="Up",n[n.Down=1]="Down"},4021:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandableButton=void 0;const o=n(5893),i=n(6689),a=n(4130),l=r(n(7518)),c=n(9634),u=n(9141),s=n(3030),f=n(1335),d=n(9644);t.ExpandableButton=e=>{var t,n,r,l,c,p;const[w,y]=(0,i.useState)({show:!1,requestedByCollapse:!1}),x={size:e.size,kind:e.kind,disabled:e.disabled,tabIndex:e.tabIndex},_=Object.assign(Object.assign({},e),{shape:a.ButtonShape.square,"aria-label":null!==(t=e["aria-label"])&&void 0!==t?t:`Primary Button ${e.title}`}),O=null!==(n=e.expandDirection)&&void 0!==n?n:d.ExpandDirection.Down;return(0,i.useEffect)((()=>{if(!w.requestedByCollapse)return;const e=setTimeout((()=>y({requestedByCollapse:!1,show:!1})),200);return()=>clearTimeout(e)}),[w.requestedByCollapse]),(0,o.jsxs)(b,{children:[(0,o.jsxs)(m,{children:[(0,o.jsx)(h,Object.assign({},_,{children:(0,o.jsx)(v,{children:null!==(r=e.children)&&void 0!==r?r:_.title})})),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(f.Box,Object.assign({id:"dropdown-container"},{children:(0,o.jsxs)(g,Object.assign({},x,{role:"combobox",onClick:()=>{w.requestedByCollapse||y({requestedByCollapse:!1,show:!w.show})},"aria-label":"Expand Secondary Buttons Panel","aria-expanded":w.show},{children:[O===d.ExpandDirection.Down&&(0,o.jsx)(C,{kind:null!==(l=e.kind)&&void 0!==l?l:a.ButtonKind.primary,icon:"CaretDownIcon"}),O===d.ExpandDirection.Up&&(0,o.jsx)(C,{kind:null!==(c=e.kind)&&void 0!==c?c:a.ButtonKind.primary,icon:"CaretUpIcon"})]}))}))]}),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(u.AnimatePresence,{children:w.show&&(0,o.jsx)(s.ExpandablePanel,{expandDirection:O,secondaryButtons:null!==(p=e.secondaryButtons)&&void 0!==p?p:[],stretch:e.stretchExpandablePanel,closePanelOnSecondaryButtonClick:e.closePanelOnSecondaryButtonClick,onCollapseRequest:()=>y({show:!1,requestedByCollapse:!0}),buttonSize:e.size,document:e.document})})]})};const p={[a.ButtonKind.primary]:e=>e.palette.brandPrimaryText,[a.ButtonKind.secondary]:e=>e.palette.brandSecondaryText,[a.ButtonKind.textOnly]:e=>e.palette.textDefault},C=(0,l.default)(c.Icon)`
+`},9501:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||r(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),o(n(9318),t)},4740:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContextMenuKeyboardNavigation=void 0;const r=n(6689),o=n(9318);t.useContextMenuKeyboardNavigation=(e,t,n,i,a,l,c,u,s)=>{const f=t=>{var n,r,o;return"separator"===(null===(n=e[t])||void 0===n?void 0:n.type)||!1===(null===(r=e[t])||void 0===r?void 0:r.enabled)||!1===(null===(o=e[t])||void 0===o?void 0:o.visible)},d=(0,r.useCallback)((()=>{a((t=>{let n=t;do{if(n===(null==e?void 0:e.length)-1)break;n+=1}while(f(n));return f(n)?t:n}))}),[a,e]),p=(0,r.useCallback)((()=>{a((e=>{let t=e;do{if(n===o.BASE_CONTEXT_MENU&&0===t||-1===t)break;t-=1}while(f(t));return t}))}),[a,e]),C=(0,r.useCallback)((()=>{a(n===o.BASE_CONTEXT_MENU?0:-1)}),[a,n]),h=(0,r.useCallback)((()=>{a((t=>{for(let n=e.length-1;n>=t;n--)if(!f(n))return n;return t}))}),[null==e?void 0:e.length,a]),v=(0,r.useCallback)((()=>{var t,r;if(null===(t=e[i])||void 0===t?void 0:t.hasSubMenu)c((null===(r=e[i])||void 0===r?void 0:r.label)||"");else{if(-1===i)return void u(n,"keyboard");l(e[i].data)}a(-1)}),[a,l,c,e,i,u,n]),g=(0,r.useCallback)((()=>{var t,n;(null===(t=e[i])||void 0===t?void 0:t.hasSubMenu)&&(c((null===(n=e[i])||void 0===n?void 0:n.label)||""),a(-1))}),[a,c,e,i]),m=(0,r.useCallback)((()=>{(t.slice(1).includes(n)||(null==t?void 0:t.length)>=1)&&u(n,"keyboard")}),[u,t,n]),b=(0,r.useCallback)((()=>{t.slice(2).includes(n)||(null==t?void 0:t.length)>=2?s():l({type:"close"})}),[s,t,n]);(0,r.useEffect)((()=>{const e=e=>{switch(e.key){case"ArrowDown":d();break;case"ArrowUp":p();break;case"Home":case"PageUp":C();break;case"End":case"PageDown":h();break;case"Enter":v();break;case"ArrowRight":g();break;case"ArrowLeft":m();break;case"Escape":b()}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[d,p,C,h,v,g,m,b])}},4725:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useContextMenuNavigation=void 0;const r=n(6689),o=n(9318);t.useContextMenuNavigation=(e,t,n,i,a,l,c,u,s)=>{const f=(0,r.useCallback)((e=>{const t=document.getElementById(e),n=null==t?void 0:t.getBoundingClientRect();return{height:(null==n?void 0:n.height)||0,width:(null==n?void 0:n.width)||0}}),[]);return{handleNavigateToSubmenu:(0,r.useCallback)((r=>{if(s){const{height:e,width:t}=f(r);s(e,t)}e||t(o.CONTEXT_MENU_ANIMATION_DURATION),l(r),i([...n,a])}),[a,n,i,s,t,f]),handleNavigateBackToParent:(0,r.useCallback)(((e,t="click")=>{if(s){const e=1===n.length?o.BASE_CONTEXT_MENU:n[n.length-1],{height:t,width:r}=f(e);s(t,r)}const r=n,a=r.pop(),d=u.find((e=>e.parentLabel===a));l(a),i(r),c("keyboard"===t?(null==d?void 0:d.menuTemplate.findIndex((t=>t.label===e)))||0:-1)}),[n,i,c,f,s,u]),handleNavigateToBase:(0,r.useCallback)((()=>{if(s){const{height:e,width:t}=f(o.BASE_CONTEXT_MENU);s(e,t)}l(o.BASE_CONTEXT_MENU),i([]),c(0)}),[l,i,c,f,s])}}},9306:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useResizeContextMenu=void 0;const r=n(6689),o=n(9318);t.useResizeContextMenu=(e,t)=>{const n=()=>{const e=document.getElementById(o.CONTEXT_MENU_FRAME_ID),t=document.getElementsByClassName(o.ACTIVE_CONTEXT_MENU_CLASS)[0];if(!t||!e)return{height:0,width:0};const{height:n,width:r}=t.getBoundingClientRect();return e.style.height=`${n}px`,e.style.width=`${r}px`,{height:n,width:r}};return(0,r.useEffect)((()=>{if(e){const{width:e}=n();t(e)}}),[e]),{resizeContextMenuFrameToActiveMenu:n}}},7336:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.getMenuNavigationOrder=t.getClassName=void 0;const r=n(9318);t.getClassName=(e,t,n)=>t===e?r.ACTIVE_CONTEXT_MENU_CLASS:n.includes(e)?r.PRIOR_CONTEXT_MENU_CLASS:"",t.getMenuNavigationOrder=e=>{if(!e)return[];const t=[{parentLabel:r.BASE_CONTEXT_MENU,template:e}],n=[];for(;t.length;){const{template:e,parentLabel:r}=t.pop();e.forEach((({submenu:n,label:r},o)=>{n&&(t.push({parentLabel:r||"",template:n}),delete e[o].submenu,e[o].hasSubMenu=!0)})),n.push({parentLabel:r,menuTemplate:e})}return n}},9644:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandDirection=void 0,(n=t.ExpandDirection||(t.ExpandDirection={}))[n.Up=0]="Up",n[n.Down=1]="Down"},4021:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ExpandableButton=void 0;const o=n(5893),i=n(6689),a=n(4130),l=r(n(7518)),c=n(9634),u=n(9141),s=n(3030),f=n(1335),d=n(9644);t.ExpandableButton=e=>{var t,n,r,l,c,p;const[w,y]=(0,i.useState)({show:!1,requestedByCollapse:!1}),x={size:e.size,kind:e.kind,disabled:e.disabled,tabIndex:e.tabIndex},_=Object.assign(Object.assign({},e),{shape:a.ButtonShape.square,"aria-label":null!==(t=e["aria-label"])&&void 0!==t?t:`Primary Button ${e.title}`}),O=null!==(n=e.expandDirection)&&void 0!==n?n:d.ExpandDirection.Down;return(0,i.useEffect)((()=>{if(!w.requestedByCollapse)return;const e=setTimeout((()=>y({requestedByCollapse:!1,show:!1})),200);return()=>clearTimeout(e)}),[w.requestedByCollapse]),(0,o.jsxs)(b,{children:[(0,o.jsxs)(m,{children:[(0,o.jsx)(h,Object.assign({},_,{children:(0,o.jsx)(v,{children:null!==(r=e.children)&&void 0!==r?r:_.title})})),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(f.Box,Object.assign({id:"dropdown-container"},{children:(0,o.jsxs)(g,Object.assign({},x,{role:"combobox",onClick:()=>{w.requestedByCollapse||y({requestedByCollapse:!1,show:!w.show})},"aria-label":"Expand Secondary Buttons Panel","aria-expanded":w.show},{children:[O===d.ExpandDirection.Down&&(0,o.jsx)(C,{kind:null!==(l=e.kind)&&void 0!==l?l:a.ButtonKind.primary,icon:"CaretDownIcon"}),O===d.ExpandDirection.Up&&(0,o.jsx)(C,{kind:null!==(c=e.kind)&&void 0!==c?c:a.ButtonKind.primary,icon:"CaretUpIcon"})]}))}))]}),e.secondaryButtons&&e.secondaryButtons.length>0&&(0,o.jsx)(u.AnimatePresence,{children:w.show&&(0,o.jsx)(s.ExpandablePanel,{expandDirection:O,secondaryButtons:null!==(p=e.secondaryButtons)&&void 0!==p?p:[],stretch:e.stretchExpandablePanel,closePanelOnSecondaryButtonClick:e.closePanelOnSecondaryButtonClick,onCollapseRequest:()=>y({show:!1,requestedByCollapse:!0}),buttonSize:e.size,document:e.document})})]})};const p={[a.ButtonKind.primary]:e=>e.palette.brandPrimaryText,[a.ButtonKind.secondary]:e=>e.palette.brandSecondaryText,[a.ButtonKind.textOnly]:e=>e.palette.textDefault},C=(0,l.default)(c.Icon)`
   svg path {
     color: ${({theme:e,kind:t})=>p[t](e)};
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.25.0-alpha.1716474081",
+  "version": "0.25.0-alpha.1716916009",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",