@openfin/ui-library 0.30.17 → 0.30.18-alpha.1752698200
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/dist/components/controls/Menus/ContentMenu/ContentMenu.d.ts +8 -1
- package/dist/components/controls/Menus/ContentMenu/ContentMenuColumn/ContentMenuColumn.d.ts +1 -0
- package/dist/components/controls/Menus/ContentMenu/ContentMenuItem/ContentMenuItem.d.ts +4 -0
- package/dist/index.js +3 -3
- package/package.json +1 -1
|
@@ -10,7 +10,10 @@ export type ContentMenuEntry = {
|
|
|
10
10
|
} | {
|
|
11
11
|
type: 'item';
|
|
12
12
|
id: string;
|
|
13
|
-
icon: string
|
|
13
|
+
icon: string | {
|
|
14
|
+
dark: string;
|
|
15
|
+
light: string;
|
|
16
|
+
};
|
|
14
17
|
label: string;
|
|
15
18
|
itemData: any;
|
|
16
19
|
});
|
|
@@ -35,6 +38,10 @@ export interface ContentMenuProps {
|
|
|
35
38
|
* Disable bookmark icon and functionality for all content menu items.
|
|
36
39
|
*/
|
|
37
40
|
disableBookmarking?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Selected scheme to determine which variant of app icons to show.
|
|
43
|
+
*/
|
|
44
|
+
selectedScheme?: 'dark' | 'light';
|
|
38
45
|
}
|
|
39
46
|
type SearchNode = {
|
|
40
47
|
children?: SearchNode[];
|
|
@@ -12,5 +12,6 @@ export interface ContentMenuColumnProps {
|
|
|
12
12
|
handleBookmarkItem: (entry: ContentMenuEntry) => void;
|
|
13
13
|
toggleTooltip: (label?: string, element?: HTMLDivElement) => void;
|
|
14
14
|
disableBookmarking?: boolean;
|
|
15
|
+
selectedScheme?: 'dark' | 'light';
|
|
15
16
|
}
|
|
16
17
|
export declare const ContentMenuColumn: React.FC<PropsWithChildren<ContentMenuColumnProps>>;
|
|
@@ -24,6 +24,10 @@ export interface ContentMenuItemProps extends React.HTMLAttributes<HTMLDivElemen
|
|
|
24
24
|
*/
|
|
25
25
|
handleBookmark?: (entry: ContentMenuEntry) => void;
|
|
26
26
|
disableBookmarking?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Selected scheme to determine which variant of app icons to show.
|
|
29
|
+
*/
|
|
30
|
+
selectedScheme?: 'dark' | 'light';
|
|
27
31
|
}
|
|
28
32
|
export declare const ContentMenuItem: React.FC<ContentMenuItemProps>;
|
|
29
33
|
interface ContentMenuItemContainerProps {
|
package/dist/index.js
CHANGED
|
@@ -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
|
|
|
245
245
|
opacity: unset;
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
-
`},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[
|
|
248
|
+
`},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)`
|
|
249
249
|
height: 100%;
|
|
250
250
|
width: 100%;
|
|
251
251
|
|
|
@@ -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
|
|
|
254
254
|
|
|
255
255
|
overflow-x: auto;
|
|
256
256
|
overflow-y: hidden;
|
|
257
|
-
`},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
|
|
257
|
+
`},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"})`
|
|
258
258
|
height: 100%;
|
|
259
259
|
width: 241px;
|
|
260
260
|
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
|
|
|
273
273
|
align-items: center;
|
|
274
274
|
|
|
275
275
|
user-select: none;
|
|
276
|
-
`},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,
|
|
276
|
+
`},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)`
|
|
277
277
|
padding-right: ${({theme:e})=>e.px.large};
|
|
278
278
|
`,m=(0,c.default)(b.Box)`
|
|
279
279
|
margin-left: auto;
|