@openfin/ui-library 0.30.17 → 0.30.18

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

@@ -10,7 +10,10 @@ export type ContentMenuEntry = {
 } | {
     type: 'item';
     id: string;
-    icon: string;
+    icon: string | {
+        dark: string;
+        light: string;
+    };
     label: string;
     itemData: any;
 });
@@ -35,6 +38,10 @@ export interface ContentMenuProps {
      * Disable bookmark icon and functionality for all content menu items.
      */
     disableBookmarking?: boolean;
+    /**
+     * Selected scheme to determine which variant of app icons to show.
+     */
+    selectedScheme?: 'dark' | 'light';
 }
 type SearchNode = {
     children?: SearchNode[];

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

@@ -12,5 +12,6 @@ export interface ContentMenuColumnProps {
     handleBookmarkItem: (entry: ContentMenuEntry) => void;
     toggleTooltip: (label?: string, element?: HTMLDivElement) => void;
     disableBookmarking?: boolean;
+    selectedScheme?: 'dark' | 'light';
 }
 export declare const ContentMenuColumn: React.FC<PropsWithChildren<ContentMenuColumnProps>>;

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

@@ -24,6 +24,10 @@ export interface ContentMenuItemProps extends React.HTMLAttributes<HTMLDivElemen
      */
     handleBookmark?: (entry: ContentMenuEntry) => void;
     disableBookmarking?: boolean;
+    /**
+     * Selected scheme to determine which variant of app icons to show.
+     */
+    selectedScheme?: 'dark' | 'light';
 }
 export declare const ContentMenuItem: React.FC<ContentMenuItemProps>;
 interface ContentMenuItemContainerProps {

package/dist/index.js

@@ -245,7 +245,7 @@ var e={1193:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});var r=n(1601),o=n.n(r),a=n(6
       opacity: unset;
     }
   }
-`},5825: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(4947),t),o(n(6588),t)},6368: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(4848),a=n(2015),i=n(1255),l=r(n(2770)),s=n(2094),c=n(467),u=r(n(5823));t.findPathToItemWithId=(e,n,r)=>{if(e.id===r)return n;if(e.children)for(let o=0;o<e.children.length;++o){const a=e.children[o];n.push(a.id);const i=(0,t.findPathToItemWithId)(a,n,r);if(i)return i;n.pop()}},t.ContentMenu=({structure:e,handleClickItem:n,handleBookmarkItem:r,targetId:l,disableBookmarking:s})=>{const[f,p]=(0,a.useState)([]),[h,b]=(0,a.useState)(),g=(0,a.useRef)(null),[m,v]=(0,a.useState)({}),x=(0,a.useCallback)((()=>{g.current&&g.current.scrollTo({left:g.current.scrollWidth,behavior:"smooth"})}),[]),y=(0,a.useCallback)(((e,t)=>{v(e&&t?{label:e,element:t}:{})}),[]);(0,a.useEffect)((()=>{if(l){const n=(0,t.findPathToItemWithId)({id:"",children:e},[],l);if(n)return p(n),void b(`content-menu-item-${l}`)}b(void 0)}),[l]),(0,a.useEffect)((()=>{x()}),[f]);const[C,O]=(0,a.useState)(null);return(0,a.useEffect)((()=>{var t,n;O(null!==(n=null===(t=null==e?void 0:e[0])||void 0===t?void 0:t.id)&&void 0!==n?n:null)}),e),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(u.default,{label:m.label,element:m.element}),(0,o.jsx)(d,{ref:g,role:"tree",onScroll:()=>y(),children:(0,o.jsx)(c.ContentMenuContext.Provider,{value:{focusedContentItemId:C,setFocusedContentItemId:e=>O(e)},children:(0,o.jsx)(i.ContentMenuColumn,{entries:e,depth:0,path:f,targetItemId:h,setCurrentlySelectedPath:p,handleClickItem:n,handleBookmarkItem:r,parentEntry:null,toggleTooltip:y,disableBookmarking:s})})})]})};const d=(0,l.default)(s.Box)`
+`},5825: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(4947),t),o(n(6588),t)},6368: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(4848),a=n(2015),i=n(1255),l=r(n(2770)),s=n(2094),c=n(467),u=r(n(5823));t.findPathToItemWithId=(e,n,r)=>{if(e.id===r)return n;if(e.children)for(let o=0;o<e.children.length;++o){const a=e.children[o];n.push(a.id);const i=(0,t.findPathToItemWithId)(a,n,r);if(i)return i;n.pop()}},t.ContentMenu=({structure:e,handleClickItem:n,handleBookmarkItem:r,targetId:l,disableBookmarking:s,selectedScheme:f})=>{const[p,h]=(0,a.useState)([]),[b,g]=(0,a.useState)(),m=(0,a.useRef)(null),[v,x]=(0,a.useState)({}),y=(0,a.useCallback)((()=>{m.current&&m.current.scrollTo({left:m.current.scrollWidth,behavior:"smooth"})}),[]),C=(0,a.useCallback)(((e,t)=>{x(e&&t?{label:e,element:t}:{})}),[]);(0,a.useEffect)((()=>{if(l){const n=(0,t.findPathToItemWithId)({id:"",children:e},[],l);if(n)return h(n),void g(`content-menu-item-${l}`)}g(void 0)}),[l]),(0,a.useEffect)((()=>{y()}),[p]);const[O,_]=(0,a.useState)(null);return(0,a.useEffect)((()=>{var t,n;_(null!==(n=null===(t=null==e?void 0:e[0])||void 0===t?void 0:t.id)&&void 0!==n?n:null)}),e),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(u.default,{label:v.label,element:v.element}),(0,o.jsx)(d,{ref:m,role:"tree",onScroll:()=>C(),children:(0,o.jsx)(c.ContentMenuContext.Provider,{value:{focusedContentItemId:O,setFocusedContentItemId:e=>_(e)},children:(0,o.jsx)(i.ContentMenuColumn,{entries:e,depth:0,path:p,targetItemId:b,setCurrentlySelectedPath:h,handleClickItem:n,handleBookmarkItem:r,parentEntry:null,toggleTooltip:C,disableBookmarking:s,selectedScheme:f})})})]})};const d=(0,l.default)(s.Box)`
   height: 100%;
   width: 100%;
 
@@ -254,7 +254,7 @@ var e={1193:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});var r=n(1601),o=n.n(r),a=n(6
 
   overflow-x: auto;
   overflow-y: hidden;
-`},1255: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(4848),a=r(n(2770)),i=n(6418),l=n(2015),s=n(8307),c=n(467);t.ContentMenuColumn=({entries:e,depth:n,path:r,targetItemId:a,setCurrentlySelectedPath:i,handleClickItem:f,handleBookmarkItem:p,parentEntry:h,toggleTooltip:b,disableBookmarking:g})=>{const m=(0,l.useRef)(null),v=r[n],x=v?e.find((e=>e.id===v)):void 0,{setFocusedContentItemId:y}=(0,l.useContext)(c.ContentMenuContext);(0,l.useEffect)((()=>{if(a&&x){const e=document.getElementById(`content-menu-item-${x.id}`);if(e&&m.current){const t=e.getBoundingClientRect().top-m.current.children[0].getBoundingClientRect().top;m.current.scrollTo({top:t,behavior:"smooth"})}}}),[a]);const C=(0,l.useCallback)((e=>{i((t=>e.id?(t[n]=e.id,t.slice(0,n+1)):t.slice(0,n))),e.children.length&&y(e.children[0].id)}),[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(u,{ref:m,role:"group",children:e.length>0?(0,o.jsx)("div",{children:e.map((t=>(0,o.jsx)(s.ContentMenuItem,{entry:t,role:"treeitem","aria-level":n+1,active:"folder"===t.type&&t.id===v,"aria-expanded":"folder"===t.type?!(!x||x.id!==t.id):void 0,handleClick:(e,t)=>{"folder"===e.type?C(e):f(e,t)},handleBookmark:p,onKeyDown:n=>((t,n)=>{const r=e.indexOf(n);switch(t.key){case"ArrowUp":{t.preventDefault();const n=e[r-1];n&&y(n.id);break}case"ArrowDown":{t.preventDefault();const n=e[r+1];n&&y(n.id);break}case"ArrowLeft":h&&(t.preventDefault(),y(h.id));break;case"Enter":case" ":case"ArrowRight":if(t.currentTarget!==t.target)return;if(t.preventDefault(),"folder"===n.type)C(n),n.children.length&&y(n.children[0].id);else if("ArrowRight"!==t.key){const e={ctrlKey:t.ctrlKey,metaKey:t.metaKey,shiftKey:t.shiftKey};f(n,e)}}})(n,t),toggleTooltip:b,disableBookmarking:g},t.id)))}):(0,o.jsx)(d,{children:"No content available."})}),x&&"folder"===x.type&&(0,o.jsx)(t.ContentMenuColumn,{entries:x.children,depth:n+1,path:r,targetItemId:a,setCurrentlySelectedPath:i,handleClickItem:f,handleBookmarkItem:p,parentEntry:x,toggleTooltip:b,disableBookmarking:g})]})};const u=(0,a.default)(i.MenuFrame).attrs({className:"content-menu-column-frame"})`
+`},1255: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(4848),a=r(n(2770)),i=n(6418),l=n(2015),s=n(8307),c=n(467);t.ContentMenuColumn=({entries:e,depth:n,path:r,targetItemId:a,setCurrentlySelectedPath:i,handleClickItem:f,handleBookmarkItem:p,parentEntry:h,toggleTooltip:b,disableBookmarking:g,selectedScheme:m})=>{const v=(0,l.useRef)(null),x=r[n],y=x?e.find((e=>e.id===x)):void 0,{setFocusedContentItemId:C}=(0,l.useContext)(c.ContentMenuContext);(0,l.useEffect)((()=>{if(a&&y){const e=document.getElementById(`content-menu-item-${y.id}`);if(e&&v.current){const t=e.getBoundingClientRect().top-v.current.children[0].getBoundingClientRect().top;v.current.scrollTo({top:t,behavior:"smooth"})}}}),[a]);const O=(0,l.useCallback)((e=>{i((t=>e.id?(t[n]=e.id,t.slice(0,n+1)):t.slice(0,n))),e.children.length&&C(e.children[0].id)}),[]);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(u,{ref:v,role:"group",children:e.length>0?(0,o.jsx)("div",{children:e.map((t=>(0,o.jsx)(s.ContentMenuItem,{entry:t,role:"treeitem","aria-level":n+1,active:"folder"===t.type&&t.id===x,"aria-expanded":"folder"===t.type?!(!y||y.id!==t.id):void 0,handleClick:(e,t)=>{"folder"===e.type?O(e):f(e,t)},handleBookmark:p,onKeyDown:n=>((t,n)=>{const r=e.indexOf(n);switch(t.key){case"ArrowUp":{t.preventDefault();const n=e[r-1];n&&C(n.id);break}case"ArrowDown":{t.preventDefault();const n=e[r+1];n&&C(n.id);break}case"ArrowLeft":h&&(t.preventDefault(),C(h.id));break;case"Enter":case" ":case"ArrowRight":if(t.currentTarget!==t.target)return;if(t.preventDefault(),"folder"===n.type)O(n),n.children.length&&C(n.children[0].id);else if("ArrowRight"!==t.key){const e={ctrlKey:t.ctrlKey,metaKey:t.metaKey,shiftKey:t.shiftKey};f(n,e)}}})(n,t),toggleTooltip:b,disableBookmarking:g,selectedScheme:m},t.id)))}):(0,o.jsx)(d,{children:"No content available."})}),y&&"folder"===y.type&&(0,o.jsx)(t.ContentMenuColumn,{entries:y.children,depth:n+1,path:r,targetItemId:a,setCurrentlySelectedPath:i,handleClickItem:f,handleBookmarkItem:p,parentEntry:y,toggleTooltip:b,disableBookmarking:g,selectedScheme:m})]})};const u=(0,a.default)(i.MenuFrame).attrs({className:"content-menu-column-frame"})`
   height: 100%;
   width: 241px;
   padding: ${({theme:e})=>e.px.xsmall};
@@ -273,7 +273,7 @@ var e={1193:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});var r=n(1601),o=n.n(r),a=n(6
   align-items: center;
 
   user-select: none;
-`},467: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.ContentMenuContext=void 0;const o=r(n(2015));t.ContentMenuContext=o.default.createContext({focusedContentItemId:null,setFocusedContentItemId:()=>{}})},8307:function(e,t,n){var r,o=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]}),a=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||(r=function(e){return r=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},r(e)},function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=r(e),i=0;i<n.length;i++)"default"!==n[i]&&o(t,e,n[i]);return a(t,e),t}),l=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.ContentMenuItemContainer=t.ContentMenuItem=void 0;const s=n(4848),c=i(n(2770)),u=n(6418),d=n(5917),f=n(2015),p=n(5699),h=n(467),b=n(2094);t.ContentMenuItem=e=>{var n,{entry:r,active:o,handleClick:a,handleBookmark:i,toggleTooltip:c,disableBookmarking:b}=e,x=l(e,["entry","active","handleClick","handleBookmark","toggleTooltip","disableBookmarking"]);const{label:y,type:C}=r,O=(0,f.useRef)(null),{focusedContentItemId:_}=(0,f.useContext)(h.ContentMenuContext),w=(0,f.useCallback)((()=>{"item"===r.type&&"desktop"===r.itemData.appType&&O.current&&c("Launch Desktop App",O.current)}),[r]);return(0,f.useEffect)((()=>{var e;r.id===_&&(null===(e=O.current)||void 0===e||e.focus())}),[_]),(0,s.jsxs)(t.ContentMenuItemContainer,Object.assign({id:`content-menu-item-${r.id}`,onClick:e=>a(r,e),onMouseEnter:w,onMouseLeave:()=>c(),active:o,tabIndex:_===r.id?0:-1,ref:O,"aria-label":r.label},x,{children:["item"===C&&(0,s.jsx)(p.IconWithFallback,{iconUrl:r.icon}),(0,s.jsx)(g,{size:"base",weight:"normal",children:y}),(0,s.jsxs)(m,{children:[!b&&(0,s.jsx)(v,{bookmarked:r.bookmarked,role:"button",onKeyDown:e=>{"Enter"!==e.key&&"Space"!==e.key||(null==e||e.stopPropagation(),i&&i(r))},onClick:e=>{var t;null==e||e.stopPropagation(),i&&i(r),null===(t=O.current)||void 0===t||t.focus()},"data-testid":`content-menu-item-${r.id}-bookmark-icon`,tabIndex:_===r.id?0:-1,"aria-label":r.bookmarked?`Remove ${r.label} from favorites`:`Add ${r.label} to favorites`,children:r.bookmarked?(0,s.jsx)(d.Icon,{icon:"StarFilledIcon"}):(0,s.jsx)(d.Icon,{icon:"StarIcon"})}),"item"===r.type&&"desktop"===(null===(n=r.itemData)||void 0===n?void 0:n.appType)&&(0,s.jsx)(u.MenuItemRightIcon,{icon:"ArrowTopRightIcon"}),"folder"===C&&(0,s.jsx)(u.MenuItemRightIcon,{icon:"ChevronRightIcon","data-testid":`content-menu-item-${r.id}-chevron-icon`})]})]}))};const g=(0,c.default)(u.MenuItemText)`
+`},467: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.ContentMenuContext=void 0;const o=r(n(2015));t.ContentMenuContext=o.default.createContext({focusedContentItemId:null,setFocusedContentItemId:()=>{}})},8307:function(e,t,n){var r,o=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]}),a=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||(r=function(e){return r=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},r(e)},function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=r(e),i=0;i<n.length;i++)"default"!==n[i]&&o(t,e,n[i]);return a(t,e),t}),l=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.ContentMenuItemContainer=t.ContentMenuItem=void 0;const s=n(4848),c=i(n(2770)),u=n(6418),d=n(5917),f=n(2015),p=n(5699),h=n(467),b=n(2094);t.ContentMenuItem=e=>{var n,{entry:r,active:o,handleClick:a,handleBookmark:i,toggleTooltip:c,disableBookmarking:b,selectedScheme:x}=e,y=l(e,["entry","active","handleClick","handleBookmark","toggleTooltip","disableBookmarking","selectedScheme"]);const{label:C,type:O}=r,_=(0,f.useRef)(null),{focusedContentItemId:w}=(0,f.useContext)(h.ContentMenuContext),j=(0,f.useCallback)((()=>{"item"===r.type&&"desktop"===r.itemData.appType&&_.current&&c("Launch Desktop App",_.current)}),[r]);(0,f.useEffect)((()=>{var e;r.id===w&&(null===(e=_.current)||void 0===e||e.focus())}),[w]);const k="item"===r.type?"string"==typeof r.icon?r.icon:r.icon[null!=x?x:"light"]:void 0;return(0,s.jsxs)(t.ContentMenuItemContainer,Object.assign({id:`content-menu-item-${r.id}`,onClick:e=>a(r,e),onMouseEnter:j,onMouseLeave:()=>c(),active:o,tabIndex:w===r.id?0:-1,ref:_,"aria-label":r.label},y,{children:["item"===O&&(0,s.jsx)(p.IconWithFallback,{iconUrl:k}),(0,s.jsx)(g,{size:"base",weight:"normal",children:C}),(0,s.jsxs)(m,{children:[!b&&(0,s.jsx)(v,{bookmarked:r.bookmarked,role:"button",onKeyDown:e=>{"Enter"!==e.key&&"Space"!==e.key||(null==e||e.stopPropagation(),i&&i(r))},onClick:e=>{var t;null==e||e.stopPropagation(),i&&i(r),null===(t=_.current)||void 0===t||t.focus()},"data-testid":`content-menu-item-${r.id}-bookmark-icon`,tabIndex:w===r.id?0:-1,"aria-label":r.bookmarked?`Remove ${r.label} from favorites`:`Add ${r.label} to favorites`,children:r.bookmarked?(0,s.jsx)(d.Icon,{icon:"StarFilledIcon"}):(0,s.jsx)(d.Icon,{icon:"StarIcon"})}),"item"===r.type&&"desktop"===(null===(n=r.itemData)||void 0===n?void 0:n.appType)&&(0,s.jsx)(u.MenuItemRightIcon,{icon:"ArrowTopRightIcon"}),"folder"===O&&(0,s.jsx)(u.MenuItemRightIcon,{icon:"ChevronRightIcon","data-testid":`content-menu-item-${r.id}-chevron-icon`})]})]}))};const g=(0,c.default)(u.MenuItemText)`
   padding-right: ${({theme:e})=>e.px.large};
 `,m=(0,c.default)(b.Box)`
   margin-left: auto;

package/package.json

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