@openfin/ui-library 0.27.0-alpha.1728499203 → 0.27.0-alpha.1731000443

package/dist/assets/fonts/index.d.ts

@@ -1,6 +1,2 @@
-export declare const Fonts: {
-    regular: any;
-    italic: any;
-    semiBold: any;
-    semiBoldItalic: any;
-};
+import type { ImportFonts } from '../../components/system';
+export declare const Fonts: ImportFonts;

package/dist/components/controls/Menus/ContentMenu/ContentMenu.d.ts

@@ -21,10 +21,6 @@ export interface ContentMenuProps {
      * The list of content menu items at the first level of the content menu.
      */
     structure: ContentMenuEntry[];
-    /**
-     * The ID of the target content menu item to search for and be navigated to within the content menu.
-     */
-    targetId: string;
     /**
      * Callback to handle a click on a content menu item.
      */
@@ -33,6 +29,10 @@ export interface ContentMenuProps {
      * Callback to handle a click on the bookmark icon of a content menu item.
      */
     handleBookmarkItem: (id: string) => void;
+    /**
+     * The ID of the target content menu item to search for and be navigated to within the content menu.
+     */
+    targetId?: string;
 }
 type SearchNode = {
     children?: SearchNode[];

package/dist/components/controls/Menus/ContentMenu/ContentMenuItem/useImageLoader.d.ts

@@ -4,4 +4,5 @@
  * @param { src } string - Source URL for the icon image.
  * @returns {isImageReady} boolean - Boolean indicate whether image is ready to be shown.
  */
-export declare const useImageLoader: (src?: string) => boolean;
+export type ImageState = 'error' | 'loading' | 'success';
+export declare const useImageLoader: (src?: string) => ImageState;

package/dist/components/system/GlobalStyles/globalStyles.d.ts

@@ -1 +1,4 @@
-export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+import { ImportFonts } from '../ThemeProvider/lib/createFontFaceCss';
+export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{
+    fonts: ImportFonts;
+}, import("styled-components").DefaultTheme>;

package/dist/components/system/GlobalStyles/globalStyles.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/system/ThemeProvider/lib/createFontFaceCss.d.ts

@@ -1,9 +1,9 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
 export interface ImportFonts {
-    regular?: string;
-    italic?: string;
-    semiBold?: string;
-    semiBoldItalic?: string;
+    regular: string;
+    italic: string;
+    semiBold: string;
+    semiBoldItalic: string;
 }
 /**
  * Import global fonts using your own config.

package/dist/components/system/ThemeProvider/themeProvider.d.ts

@@ -2,9 +2,11 @@ import { FC } from 'react';
 import { ColorSchemeType } from '../../../hooks/useColorScheme';
 import { ThemeSet } from './lib/types';
 import { DeepPartial } from '../../../types';
+import { ImportFonts } from './lib/createFontFaceCss';
 export type ThemeProviderProps = {
     themes?: DeepPartial<ThemeSet>;
     scheme?: ColorSchemeType;
+    fonts?: ImportFonts;
 };
 /**
  * ## OpenFin ThemeProvider

package/dist/index.js

@@ -245,7 +245,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       opacity: unset;
     }
   }
-`},4925: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(4021),t),o(n(9644),t)},9654: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.ContentMenu=t.findPathToItemWithId=void 0;const o=n(5893),i=n(6689),a=n(3137),l=r(n(7518)),c=n(1335);t.findPathToItemWithId=(e,n,r)=>{if(e.id===r)return n.pop(),n;if(e.children)for(let o=0;o<e.children.length;++o){const i=e.children[o];n.push(i.id);const a=(0,t.findPathToItemWithId)(i,n,r);if(a)return a;n.pop()}},t.ContentMenu=({structure:e,targetId:n,handleClickItem:r,handleBookmarkItem:l})=>{const[c,s]=(0,i.useState)([]),[f,d]=(0,i.useState)();return(0,i.useEffect)((()=>{if(n){const r=(0,t.findPathToItemWithId)({id:"",children:e},[],n);r&&(s(r),d(`content-menu-item-${n}`))}}),[n]),(0,i.useEffect)((()=>{var e;f&&(null===(e=document.getElementById(f))||void 0===e||e.scrollIntoView({behavior:"smooth"}))}),[f]),(0,o.jsx)(u,{children:(0,o.jsx)(a.ContentMenuColumn,{entries:e,depth:0,path:c,setCurrentlySelectedPath:s,handleClickItem:r,handleBookmarkItem:l})})};const u=(0,l.default)(c.Box)`
+`},4925: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(4021),t),o(n(9644),t)},9654: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.ContentMenu=t.findPathToItemWithId=void 0;const o=n(5893),i=n(6689),a=n(3137),l=r(n(7518)),c=n(1335);t.findPathToItemWithId=(e,n,r)=>{if(e.id===r)return n.pop(),n;if(e.children)for(let o=0;o<e.children.length;++o){const i=e.children[o];n.push(i.id);const a=(0,t.findPathToItemWithId)(i,n,r);if(a)return a;n.pop()}},t.ContentMenu=({structure:e,handleClickItem:n,handleBookmarkItem:r,targetId:l})=>{const[c,s]=(0,i.useState)([]),[f,d]=(0,i.useState)();return(0,i.useEffect)((()=>{if(l){const n=(0,t.findPathToItemWithId)({id:"",children:e},[],l);n&&(s(n),d(`content-menu-item-${l}`))}}),[l]),(0,i.useEffect)((()=>{var e;f&&(null===(e=document.getElementById(f))||void 0===e||e.scrollIntoView({behavior:"smooth"}))}),[f]),(0,o.jsx)(u,{children:(0,o.jsx)(a.ContentMenuColumn,{entries:e,depth:0,path:c,setCurrentlySelectedPath:s,handleClickItem:n,handleBookmarkItem:r})})};const u=(0,l.default)(c.Box)`
   height: 100%;
   width: 100%;
 
@@ -256,17 +256,14 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   overflow-y: hidden;
 `},3137: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.ContentMenuColumn=void 0;const o=n(5893),i=r(n(7518)),a=n(6758),l=n(6689),c=n(2659);t.ContentMenuColumn=({entries:e,depth:n,path:r,setCurrentlySelectedPath:i,handleClickItem:a,handleBookmarkItem:f})=>{const d=(0,l.useRef)(null),p=r[n],h=p?e.find((e=>e.id===p)):void 0;(0,l.useEffect)((()=>{var e;p||null===(e=d.current)||void 0===e||e.scrollIntoView({behavior:"smooth"})}),[]);const C=(0,l.useCallback)((e=>{i((t=>e?(t[n]=e,t.slice(0,n+1)):t.slice(0,n)))}),[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(u,Object.assign({ref:d},{children:e.length>0?(0,o.jsx)("div",{children:e.map((e=>(0,o.jsx)(c.ContentMenuItem,{entry:e,active:e.id===p,handleClick:t=>{"folder"===e.type?C(t):a(t)},handleBookmark:f},e.id)))}):(0,o.jsx)(s,{children:"No content available."})})),h&&"folder"===h.type&&(0,o.jsx)(t.ContentMenuColumn,{entries:h.children,depth:n+1,path:r,setCurrentlySelectedPath:i,handleClickItem:a,handleBookmarkItem:f})]})};const u=(0,i.default)(a.MenuFrame)`
   height: 100%;
-  width: 240px;
+  width: 241px;
   padding: ${({theme:e})=>e.px.xsmall};
   overflow-y: auto;
 
   position: unset;
   flex-shrink: 0;
 
-  :not(:last-child) {
-    width: 241px;
-    border-right: 1px solid ${({theme:e})=>e.palette.background5};
-  }
+  border-right: 1px solid ${({theme:e})=>e.palette.background5};
 `,s=i.default.div`
   height: 100%;
 
@@ -275,7 +272,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   align-items: center;
 
   user-select: none;
-`},2659: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.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.ContentMenuItem=void 0;const a=n(5893),l=i(n(7518)),c=n(6758),u=n(9634),s=n(1009);t.ContentMenuItem=({entry:e,active:t,handleClick:n,handleBookmark:r})=>{const{label:o,type:i}=e;return(0,a.jsxs)(p,Object.assign({id:`content-menu-item-${e.id}`,onClick:()=>n(e.id),active:t},{children:["item"===i&&(0,a.jsx)(s.IconWithFallback,{iconUrl:e.icon}),(0,a.jsx)(f,Object.assign({size:"base",weight:"normal"},{children:o})),(0,a.jsx)(d,Object.assign({side:"right",bookmarked:e.bookmarked,onClick:t=>{null==t||t.stopPropagation(),r&&r(e.id)},"data-testid":`content-menu-item-${e.id}-bookmark-icon`},{children:e.bookmarked?(0,a.jsx)(u.Icon,{icon:"BookmarkFilled"}):(0,a.jsx)(u.Icon,{icon:"BookmarkOutlined"})})),"folder"===i&&(0,a.jsx)(c.MenuItemIconContainer,Object.assign({side:"right","data-testid":`content-menu-item-${e.id}-chevron-icon`},{children:(0,a.jsx)(c.MenuItemRightIcon,{icon:"ChevronRightIcon"})}))]}))};const f=(0,l.default)(c.MenuItemText)`
+`},2659: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.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.ContentMenuItem=void 0;const a=n(5893),l=i(n(7518)),c=n(6758),u=n(9634),s=n(1009);t.ContentMenuItem=({entry:e,active:t,handleClick:n,handleBookmark:r})=>{const{label:o,type:i}=e;return(0,a.jsxs)(p,Object.assign({id:`content-menu-item-${e.id}`,onClick:()=>n(e.id),active:t},{children:["item"===i&&(0,a.jsx)(s.IconWithFallback,{iconUrl:e.icon}),(0,a.jsx)(f,Object.assign({size:"base",weight:"normal"},{children:o})),(0,a.jsx)(d,Object.assign({side:"right",bookmarked:e.bookmarked,onClick:t=>{null==t||t.stopPropagation(),r&&r(e.id)},"data-testid":`content-menu-item-${e.id}-bookmark-icon`},{children:e.bookmarked?(0,a.jsx)(u.Icon,{icon:"StarFilledIcon"}):(0,a.jsx)(u.Icon,{icon:"StarIcon"})})),"folder"===i&&(0,a.jsx)(c.MenuItemIconContainer,Object.assign({side:"right","data-testid":`content-menu-item-${e.id}-chevron-icon`},{children:(0,a.jsx)(c.MenuItemRightIcon,{icon:"ChevronRightIcon"})}))]}))};const f=(0,l.default)(c.MenuItemText)`
   padding-right: ${({theme:e})=>e.px.large};
 `,d=(0,l.default)(c.MenuItemIconContainer)`
   ${({bookmarked:e})=>e?l.css`
@@ -291,8 +288,6 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
     width: ${({theme:e})=>e.px.large};
   }
 `,p=(0,l.default)(c.MenuItemInnerContainer)`
-  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
   ${({theme:e,active:t})=>t&&l.css`
       background-color: ${e.palette.background3};
     `}
@@ -308,19 +303,25 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
       margin-left: unset;
     }
   }
-`},1009: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.IconWithFallback=void 0;const o=n(5893),i=r(n(7518)),a=n(9106),l=n(9634);t.IconWithFallback=({iconUrl:e,alt:t})=>(0,a.useImageLoader)(e)?(0,o.jsx)(u,{src:e,alt:t}):(0,o.jsx)(c,{children:(0,o.jsx)(l.Icon,{icon:"FallbackGlobeIcon"})});const c=i.default.div`
+`},1009: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.IconWithFallback=void 0;const o=n(5893),i=r(n(7518)),a=n(9106),l=n(9634);t.IconWithFallback=({iconUrl:e,alt:t})=>{const n=(0,a.useImageLoader)(e);return"error"===n?(0,o.jsx)(c,{children:(0,o.jsx)(l.Icon,{icon:"FallbackGlobeIcon"})}):"loading"===n?(0,o.jsx)(u,{}):(0,o.jsx)(s,{src:e,alt:t})};const c=i.default.div`
   height: ${({theme:e})=>e.px.large};
   width: ${({theme:e})=>e.px.large};
   margin-left: ${({theme:e})=>e.px.small};
 
   border-radius: ${({theme:e})=>e.radius.small};
-`,u=i.default.img`
+`,u=i.default.div`
+  height: ${({theme:e})=>e.px.large};
+  width: ${({theme:e})=>e.px.large};
+  margin-left: ${({theme:e})=>e.px.small};
+`,s=i.default.img`
   height: ${({theme:e})=>e.px.large};
   width: ${({theme:e})=>e.px.large};
   margin-left: ${({theme:e})=>e.px.small};
 
   border-radius: ${({theme:e})=>e.radius.small};
-`},9106:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useImageLoader=void 0;const r=n(6689);t.useImageLoader=e=>{const[t,n]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{if(n(!1),!e)return;const t=new Image,r=()=>{n(!0)},o=()=>{n(!1)};return t.addEventListener("load",r),t.addEventListener("error",o),t.src=e,()=>{t.removeEventListener("load",r),t.removeEventListener("error",o)}}),[e]),t}},7e3: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(9654),t)},4471: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(2850),c=n(8899),u=n(9478),s=n(2421),f=n(4571),d=n(2838),p=n(6758);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:p,isWindows:v=!0})=>{var g;const m=(0,i.useRef)(null),[b,w]=(0,i.useState)(!1),[y,x]=(0,i.useState)({width:160,height:160}),[_,O]=(0,i.useState)(0),[L,M]=(0,i.useState)([]),[j,E]=(0,i.useState)(),[H,V]=(0,i.useState)([]),[S,P]=(0,i.useState)(e.map((e=>e.label||""))),[R,Z]=(0,i.useState)(-1);(0,i.useEffect)((()=>{P(e.map((e=>e.label||""))),Z(S.findIndex((e=>e===j)))}),[e]);const{width:k,height:I}=(0,c.useResizeContextMenu)(j),{handleNavigateToSubmenu:D,handleNavigateBackToParent:B,handleNavigateToBase:T}=(0,s.useContextMenuNavigation)(_,O,H,V,j,E,x,Z,L,a);return(0,i.useEffect)((()=>{M((0,u.getMenuNavigationOrder)(e)),E(t.BASE_CONTEXT_MENU),V([]),x({width:k,height:I})}),[e]),(0,f.useContextMenuKeyboardNavigation)(null===(g=L.find((e=>e.parentLabel===j)))||void 0===g?void 0:g.menuTemplate,H,j,R,Z,n,D,B,T),(0,i.useEffect)((()=>{m.current&&(b||(p&&p(),w(!0)))}),[m.current]),(0,o.jsx)(h,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)(C,Object.assign({className:(0,u.getClassName)(e,j,H),activeMenuWidth:y.width,transitionSpeed:_,id:e},{children:[e!==t.BASE_CONTEXT_MENU?(0,o.jsx)(l.CustomContextMenuItem,{type:"submenuHeader",label:e,onBack:()=>B(e,"click"),onClose:T,showShouldHomeButton:H.slice(2).includes(e)||H.length>=2&&j===e,selected:-1===R},`${e}-submenu-header`):r&&(0,o.jsx)(d.RootMenuHeader,{icon:r}),i.map(((t,r)=>(0,o.jsx)(l.CustomContextMenuItem,Object.assign({onClick:()=>{t.hasSubMenu?D(t.label||""):n(t.data),Z(-2)}},t,{submenu:t.hasSubMenu,selected:R===r}),`${e}-${t.label}-${r}`)))]}))}),e)))}))};const h=a.default.div`
+
+  user-select: none;
+`},9106:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useImageLoader=void 0;const r=n(6689);t.useImageLoader=e=>{const[t,n]=(0,r.useState)("loading");return(0,r.useEffect)((()=>{if(!e)return void n("error");n("loading");const t=new Image,r=()=>{n("success")},o=()=>{n("error")};return t.addEventListener("load",r),t.addEventListener("error",o),t.src=e,()=>{t.removeEventListener("load",r),t.removeEventListener("error",o)}}),[e]),t}},7e3: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(9654),t)},4471: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(2850),c=n(8899),u=n(9478),s=n(2421),f=n(4571),d=n(2838),p=n(6758);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:p,isWindows:v=!0})=>{var g;const m=(0,i.useRef)(null),[b,w]=(0,i.useState)(!1),[y,x]=(0,i.useState)({width:160,height:160}),[_,O]=(0,i.useState)(0),[L,M]=(0,i.useState)([]),[j,E]=(0,i.useState)(),[H,V]=(0,i.useState)([]),[S,P]=(0,i.useState)(e.map((e=>e.label||""))),[R,Z]=(0,i.useState)(-1);(0,i.useEffect)((()=>{P(e.map((e=>e.label||""))),Z(S.findIndex((e=>e===j)))}),[e]);const{width:k,height:I}=(0,c.useResizeContextMenu)(j),{handleNavigateToSubmenu:D,handleNavigateBackToParent:B,handleNavigateToBase:T}=(0,s.useContextMenuNavigation)(_,O,H,V,j,E,x,Z,L,a);return(0,i.useEffect)((()=>{M((0,u.getMenuNavigationOrder)(e)),E(t.BASE_CONTEXT_MENU),V([]),x({width:k,height:I})}),[e]),(0,f.useContextMenuKeyboardNavigation)(null===(g=L.find((e=>e.parentLabel===j)))||void 0===g?void 0:g.menuTemplate,H,j,R,Z,n,D,B,T),(0,i.useEffect)((()=>{m.current&&(b||(p&&p(),w(!0)))}),[m.current]),(0,o.jsx)(h,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)(C,Object.assign({className:(0,u.getClassName)(e,j,H),activeMenuWidth:y.width,transitionSpeed:_,id:e},{children:[e!==t.BASE_CONTEXT_MENU?(0,o.jsx)(l.CustomContextMenuItem,{type:"submenuHeader",label:e,onBack:()=>B(e,"click"),onClose:T,showShouldHomeButton:H.slice(2).includes(e)||H.length>=2&&j===e,selected:-1===R},`${e}-submenu-header`):r&&(0,o.jsx)(d.RootMenuHeader,{icon:r}),i.map(((t,r)=>(0,o.jsx)(l.CustomContextMenuItem,Object.assign({onClick:()=>{t.hasSubMenu?D(t.label||""):n(t.data),Z(-2)}},t,{submenu:t.hasSubMenu,selected:R===r}),`${e}-${t.label}-${r}`)))]}))}),e)))}))};const h=a.default.div`
   position: relative;
   min-width: fit-content;
   min-height: fit-content;
@@ -1196,7 +1197,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   font-size: ${({theme:e})=>e.fontSize.small};
   line-height: ${({theme:e})=>e.px.base};
   padding-bottom: ${({theme:e})=>e.px.small};
-`},5377: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(6710),t)},9431:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.GlobalStyles=void 0;const r=n(7518),o=n(575),i=n(9507),a=n(6218);t.GlobalStyles=r.createGlobalStyle`
+`},5377: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(6710),t)},9431:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.GlobalStyles=void 0;const r=n(7518),o=n(575),i=n(9272);t.GlobalStyles=r.createGlobalStyle`
   /** -> Define Global CSS Vars */
   :root {
     --openfin-ui-globalTransition: ${({theme:e})=>e.transition.base};
@@ -1207,7 +1208,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   }
 
   /** -> @font-face Declaration */
-  ${(0,i.createFontFaceCss)(a.Fonts)}
+  ${({fonts:e})=>(0,i.createFontFaceCss)(e)}
 
   /** -> Micro Reset */
   * {
@@ -1312,7 +1313,7 @@ var e={8594:(e,t,n)=>{n.d(t,{Z:()=>o});var r=/^((children|dangerouslySetInnerHTM
   -webkit-app-region: drag;
 `,s=o.css`
   -webkit-app-region: no-drag;
-`;t.Mixins={noSelect:i,textOverflow:a,scrollbar:{[r.Size.base]:l,[r.Size.small]:c},appRegion:{drag:u,noDrag:s}}},5459:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Palette=void 0,t.Palette={background1:"background1",background2:"background2",background3:"background3",background4:"background4",background5:"background5",background6:"background6",brandPrimary:"brandPrimary",brandSecondary:"brandSecondary",brandPrimaryActive:"brandPrimaryActive",brandPrimaryHover:"brandPrimaryHover",brandPrimaryFocused:"brandPrimaryFocused",brandPrimaryText:"brandPrimaryText",brandSecondaryActive:"brandSecondaryActive",brandSecondaryHover:"brandSecondaryHover",brandSecondaryFocused:"brandSecondaryFocused",brandSecondaryText:"brandSecondaryText",inputBackground:"inputBackground",inputColor:"inputColor",inputPlaceholder:"inputPlaceholder",inputDisabled:"inputDisabled",inputFocused:"inputFocused",inputBorder:"inputBorder",statusSuccess:"statusSuccess",statusWarning:"statusWarning",statusCritical:"statusCritical",statusActive:"statusActive",textDefault:"textDefault",textHelp:"textHelp",textInactive:"textInactive",borderNeutral:"borderNeutral",contentBackground1:"contentBackground1",contentBackground2:"contentBackground2",contentBackground3:"contentBackground3",contentBackground4:"contentBackground4",contentBackground5:"contentBackground5",linkDefault:"linkDefault",linkHover:"linkHover"}},5317:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},4266: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(9483),t)},9483:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.OpenFinDarkTheme=t.OpenFinLightTheme=void 0;const r=n(5459),o=n(3471),i=n(6714),a={[r.Palette.brandPrimary]:o.Color.openFin,[r.Palette.statusSuccess]:o.Color.functional1,[r.Palette.statusWarning]:o.Color.functional10,[r.Palette.statusCritical]:o.Color.functional7,[r.Palette.statusActive]:o.Color.functional3,[r.Palette.borderNeutral]:o.Color.silverGray,[r.Palette.contentBackground1]:o.Color.openFin,[r.Palette.contentBackground2]:"#000000",[r.Palette.contentBackground3]:"#000000",[r.Palette.contentBackground4]:"#000000",[r.Palette.contentBackground5]:"#000000",[r.Palette.linkDefault]:o.Color.functional4,[r.Palette.linkHover]:o.Color.functional5};t.OpenFinLightTheme=(0,i.createTheme)(Object.assign(Object.assign({},a),{[r.Palette.background1]:o.Color.white,[r.Palette.background2]:o.Color.lightGray1,[r.Palette.background3]:o.Color.lightGray2,[r.Palette.background4]:o.Color.lightGray3,[r.Palette.background5]:o.Color.lightGray3,[r.Palette.background6]:o.Color.lightGray5,[r.Palette.brandSecondary]:o.Color.lightGray4,[r.Palette.inputBackground]:o.Color.lightGray3,[r.Palette.inputColor]:o.Color.darkGray5,[r.Palette.inputPlaceholder]:o.Color.darkGray2,[r.Palette.inputDisabled]:o.Color.neutralGray,[r.Palette.inputFocused]:o.Color.lightGray5,[r.Palette.inputBorder]:o.Color.neutralGray,[r.Palette.textDefault]:o.Color.darkGray5,[r.Palette.textHelp]:o.Color.neutralGray,[r.Palette.textInactive]:o.Color.neutralGray})),t.OpenFinDarkTheme=(0,i.createTheme)(Object.assign(Object.assign({},a),{[r.Palette.background1]:o.Color.darkGray6,[r.Palette.background2]:o.Color.darkGray5,[r.Palette.background3]:o.Color.darkGray4,[r.Palette.background4]:o.Color.darkGray3,[r.Palette.background5]:o.Color.darkGray2,[r.Palette.background6]:o.Color.darkGray1,[r.Palette.brandSecondary]:o.Color.darkGray2,[r.Palette.inputBackground]:o.Color.darkGray1,[r.Palette.inputColor]:o.Color.white,[r.Palette.inputPlaceholder]:o.Color.lightGray5,[r.Palette.inputDisabled]:o.Color.neutralGray,[r.Palette.inputFocused]:o.Color.lightGray5,[r.Palette.inputBorder]:o.Color.neutralGray,[r.Palette.textDefault]:o.Color.white,[r.Palette.textHelp]:o.Color.lightGray5,[r.Palette.textInactive]:o.Color.neutralGray}))},420:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ThemeProvider=void 0;const r=n(5893),o=n(7518),i=n(3190),a=n(7088),l=n(1069);t.ThemeProvider=({children:e,themes:t,scheme:n=i.ColorScheme.system})=>{const c=(0,a.useTheme)({themes:t,scheme:n});return(0,r.jsx)(o.ThemeProvider,Object.assign({theme:c},{children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.GlobalStyles,{}),e]})}))}},3877: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(1069),t),o(n(1310),t),o(n(9507),t)},9758: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.ContactStatusIcon=void 0;const o=n(5893),i=r(n(7518)),a=n(1333),l={available:(0,o.jsx)(a.CheckSVG,{}),away:(0,o.jsx)(a.BusySVG,{}),"do-not-disturb":(0,o.jsx)(a.DoNotDisturbSVG,{}),offline:(0,o.jsx)(a.OfflineSVG,{}),busy:null};t.ContactStatusIcon=({onlineStatus:e})=>e?(0,o.jsx)(c,Object.assign({onlineStatus:e},{children:l[e]||null})):null;const c=i.default.div`
+`;t.Mixins={noSelect:i,textOverflow:a,scrollbar:{[r.Size.base]:l,[r.Size.small]:c},appRegion:{drag:u,noDrag:s}}},5459:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Palette=void 0,t.Palette={background1:"background1",background2:"background2",background3:"background3",background4:"background4",background5:"background5",background6:"background6",brandPrimary:"brandPrimary",brandSecondary:"brandSecondary",brandPrimaryActive:"brandPrimaryActive",brandPrimaryHover:"brandPrimaryHover",brandPrimaryFocused:"brandPrimaryFocused",brandPrimaryText:"brandPrimaryText",brandSecondaryActive:"brandSecondaryActive",brandSecondaryHover:"brandSecondaryHover",brandSecondaryFocused:"brandSecondaryFocused",brandSecondaryText:"brandSecondaryText",inputBackground:"inputBackground",inputColor:"inputColor",inputPlaceholder:"inputPlaceholder",inputDisabled:"inputDisabled",inputFocused:"inputFocused",inputBorder:"inputBorder",statusSuccess:"statusSuccess",statusWarning:"statusWarning",statusCritical:"statusCritical",statusActive:"statusActive",textDefault:"textDefault",textHelp:"textHelp",textInactive:"textInactive",borderNeutral:"borderNeutral",contentBackground1:"contentBackground1",contentBackground2:"contentBackground2",contentBackground3:"contentBackground3",contentBackground4:"contentBackground4",contentBackground5:"contentBackground5",linkDefault:"linkDefault",linkHover:"linkHover"}},5317:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0})},4266: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(9483),t)},9483:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.OpenFinDarkTheme=t.OpenFinLightTheme=void 0;const r=n(5459),o=n(3471),i=n(6714),a={[r.Palette.brandPrimary]:o.Color.openFin,[r.Palette.statusSuccess]:o.Color.functional1,[r.Palette.statusWarning]:o.Color.functional10,[r.Palette.statusCritical]:o.Color.functional7,[r.Palette.statusActive]:o.Color.functional3,[r.Palette.borderNeutral]:o.Color.silverGray,[r.Palette.contentBackground1]:o.Color.openFin,[r.Palette.contentBackground2]:"#000000",[r.Palette.contentBackground3]:"#000000",[r.Palette.contentBackground4]:"#000000",[r.Palette.contentBackground5]:"#000000",[r.Palette.linkDefault]:o.Color.functional4,[r.Palette.linkHover]:o.Color.functional5};t.OpenFinLightTheme=(0,i.createTheme)(Object.assign(Object.assign({},a),{[r.Palette.background1]:o.Color.white,[r.Palette.background2]:o.Color.lightGray1,[r.Palette.background3]:o.Color.lightGray2,[r.Palette.background4]:o.Color.lightGray3,[r.Palette.background5]:o.Color.lightGray3,[r.Palette.background6]:o.Color.lightGray5,[r.Palette.brandSecondary]:o.Color.lightGray4,[r.Palette.inputBackground]:o.Color.lightGray3,[r.Palette.inputColor]:o.Color.darkGray5,[r.Palette.inputPlaceholder]:o.Color.darkGray2,[r.Palette.inputDisabled]:o.Color.neutralGray,[r.Palette.inputFocused]:o.Color.lightGray5,[r.Palette.inputBorder]:o.Color.neutralGray,[r.Palette.textDefault]:o.Color.darkGray5,[r.Palette.textHelp]:o.Color.neutralGray,[r.Palette.textInactive]:o.Color.neutralGray})),t.OpenFinDarkTheme=(0,i.createTheme)(Object.assign(Object.assign({},a),{[r.Palette.background1]:o.Color.darkGray6,[r.Palette.background2]:o.Color.darkGray5,[r.Palette.background3]:o.Color.darkGray4,[r.Palette.background4]:o.Color.darkGray3,[r.Palette.background5]:o.Color.darkGray2,[r.Palette.background6]:o.Color.darkGray1,[r.Palette.brandSecondary]:o.Color.darkGray2,[r.Palette.inputBackground]:o.Color.darkGray1,[r.Palette.inputColor]:o.Color.white,[r.Palette.inputPlaceholder]:o.Color.lightGray5,[r.Palette.inputDisabled]:o.Color.neutralGray,[r.Palette.inputFocused]:o.Color.lightGray5,[r.Palette.inputBorder]:o.Color.neutralGray,[r.Palette.textDefault]:o.Color.white,[r.Palette.textHelp]:o.Color.lightGray5,[r.Palette.textInactive]:o.Color.neutralGray}))},420:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ThemeProvider=void 0;const r=n(5893),o=n(7518),i=n(3190),a=n(7088),l=n(1069),c=n(6218);t.ThemeProvider=({children:e,themes:t,scheme:n=i.ColorScheme.system,fonts:u=c.Fonts})=>{const s=(0,a.useTheme)({themes:t,scheme:n});return(0,r.jsx)(o.ThemeProvider,Object.assign({theme:s},{children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.GlobalStyles,{fonts:u}),e]})}))}},3877: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(1069),t),o(n(1310),t),o(n(9507),t)},9758: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.ContactStatusIcon=void 0;const o=n(5893),i=r(n(7518)),a=n(1333),l={available:(0,o.jsx)(a.CheckSVG,{}),away:(0,o.jsx)(a.BusySVG,{}),"do-not-disturb":(0,o.jsx)(a.DoNotDisturbSVG,{}),offline:(0,o.jsx)(a.OfflineSVG,{}),busy:null};t.ContactStatusIcon=({onlineStatus:e})=>e?(0,o.jsx)(c,Object.assign({onlineStatus:e},{children:l[e]||null})):null;const c=i.default.div`
   border: 1.6px solid ${({theme:e})=>e.palette.background1};
 
   background: ${({onlineStatus:e})=>"busy"===e?"#C21313":"white"};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.27.0-alpha.1728499203",
+  "version": "0.27.0-alpha.1731000443",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -9,6 +9,9 @@
   "files": [
     "dist/**/*"
   ],
+  "exports": {
+    "./fonts/*": "./dist/assets/fonts/*"
+  },
   "license": "SEE LICENSE IN LICENSE.MD",
   "scripts": {
     "start": "npm run storybook",