@nu-art/work-hub-frontend 0.400.7 → 0.400.13

package/_core/work-hub-item.d.ts

@@ -3,18 +3,22 @@ import { MouseEvent, ReactNode } from 'react';
 import { ModuleFE_BaseDB } from '@nu-art/thunderstorm-frontend';
 import { WorkHubTab } from '@nu-art/work-hub-shared';
 import { WorkHubItem_MenuSection } from '../_ui/Component_WorkHubActionMenu/types.js';
+type MenuResolver = (tab: WorkHubTab) => (Promise<WorkHubItem_MenuSection[]> | WorkHubItem_MenuSection[]);
+type WorkHubItemRenderer<Args extends any = void> = (workHubItem: WorkHubItem<Args>, tabId: string, args: Args) => ReactNode;
 export declare class WorkHubItem<Args extends any = void> extends Logger {
     readonly key: string;
     modulesToAwait: ModuleFE_BaseDB<any>[] | undefined;
-    renderer: (workHubItem: WorkHubItem<Args>, args: Args) => ReactNode;
+    renderer: WorkHubItemRenderer<Args>;
     private tabTag;
     private customMenuActionsResolver;
     constructor(key: string);
-    setRenderer: (renderer: (workHubItem: WorkHubItem<Args>, args: Args) => ReactNode) => this;
+    setRenderer: (renderer: WorkHubItemRenderer<Args>) => this;
     setTag: (tag: string) => this;
     setModulesToAwait: (modules: ModuleFE_BaseDB<any>[]) => this;
-    setCustomMenuActionsResolver: (resolver: (tab: WorkHubTab) => WorkHubItem_MenuSection[]) => this;
+    setCustomMenuActionsResolver: (resolver: MenuResolver) => this;
     openTab: (id: string, label: string, args: Args) => void;
-    openTabMenu: (e: MouseEvent<HTMLDivElement>, tab: WorkHubTab) => void;
+    closeTab: (tabId: string) => void;
+    openTabMenu: (e: MouseEvent<HTMLDivElement>, tab: WorkHubTab) => Promise<void>;
     updateArgs: (tabId: string, args: Partial<Args>) => void;
 }
+export {};

package/_core/work-hub-item.js

@@ -41,8 +41,11 @@ export class WorkHubItem extends Logger {
             renderArgs: args,
         });
     };
-    openTabMenu = (e, tab) => {
-        const customSections = this.customMenuActionsResolver(tab);
+    closeTab = (tabId) => {
+        ModuleFE_WorkHub.tabs.remove(tabId);
+    };
+    openTabMenu = async (e, tab) => {
+        const customSections = await this.customMenuActionsResolver(tab);
         Component_WorkHubActionMenu.show(e, {
             tabId: tab.id,
             customSections

package/_module/ModuleFE_WorkHub/ModuleFE_WorkHub.d.ts

@@ -8,12 +8,14 @@ declare class ModuleFE_WorkHub_Class extends Module {
     private readonly _workHubItemMap;
     private readonly storage_tabs;
     private readonly storage_tabStack;
+    private postTabAdditionCallback;
     private tabStack;
     tabs: ModuleFE_WorkHub_TabActions;
     workHubItem: {
         register: (item: WorkHubItem<any>) => void;
         getByKey: (key: string) => WorkHubItem<any>;
     };
+    setPostTabAdditionCallback: (callback: VoidFunction) => VoidFunction;
 }
 export declare const ModuleFE_WorkHub: ModuleFE_WorkHub_Class;
 export {};

package/_module/ModuleFE_WorkHub/ModuleFE_WorkHub.js

@@ -14,16 +14,17 @@ class ModuleFE_WorkHub_Class extends Module {
     _workHubItemMap;
     storage_tabs = new StorageKey('work-hub__tabs');
     storage_tabStack = new StorageKey('work-hub__tab-stack');
+    postTabAdditionCallback = undefined;
     //######################### Internal Methods #########################
     tabStack = {
         push: (tabId) => {
             this.tabStack.pop(tabId);
             this._tabStack.push(tabId);
-            this.storage_tabStack.set(this._tabStack);
+            this.storage_tabStack.set([...this._tabStack]);
         },
         pop: (tabId) => {
             removeItemFromArray(this._tabStack, tabId);
-            this.storage_tabStack.set(this._tabStack);
+            this.storage_tabStack.set([...this._tabStack]);
         },
     };
     //######################### Public Methods #########################
@@ -45,6 +46,7 @@ class ModuleFE_WorkHub_Class extends Module {
                 if (setAsSelected)
                     this.tabStack.push(tab.id);
                 dispatch_OnWorkHubTabsUpdated.dispatchUI();
+                this.postTabAdditionCallback?.();
             }
         },
         remove: (tabId) => {
@@ -81,5 +83,6 @@ class ModuleFE_WorkHub_Class extends Module {
             return this._workHubItemMap[key];
         }
     };
+    setPostTabAdditionCallback = (callback) => this.postTabAdditionCallback = callback;
 }
 export const ModuleFE_WorkHub = new ModuleFE_WorkHub_Class();

package/_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.d.ts

@@ -14,5 +14,7 @@ export declare class Component_WorkHubActionMenu extends ComponentSync<Props> {
     render(): import("react/jsx-runtime").JSX.Element[];
     private render_Section;
     private render_Action;
+    private render_ActionButton;
+    private render_ActionWithInner;
 }
 export {};

package/_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, ComponentSync, LL_V_L, ModuleFE_MouseInteractivity, mouseInteractivity_PopUp } from '@nu-art/thunderstorm-frontend';
+import { _className, Button, ComponentSync, LL_H_C, LL_V_L, ModuleFE_MouseInteractivity, mouseInteractivity_PopUp } from '@nu-art/thunderstorm-frontend';
 import { ModuleFE_WorkHub } from '../../_module/index.js';
 import './Component_WorkHubActionMenu.scss';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { generateHex } from '@nu-art/ts-common';
 export class Component_WorkHubActionMenu extends ComponentSync {
     // ######################## Static ########################
     static show = (e, props) => {
@@ -39,9 +41,22 @@ export class Component_WorkHubActionMenu extends ComponentSync {
         return _jsxs(LL_V_L, { className: 'action-menu__section', children: [!!section.label?.length && _jsx("div", { className: 'action-menu__section-label', children: section.label }), section.actions.map(this.render_Action)] }, index);
     };
     render_Action = (action, index) => {
+        if (action.action)
+            return this.render_ActionButton(action, index);
+        return this.render_ActionWithInner(action, index);
+    };
+    render_ActionButton = (action, index) => {
         return _jsx(Button, { variant: 'work-hub-menu-action', disabled: action.disabled, onClick: async () => {
                 await action.action();
                 this.closeMenu();
             }, children: action.label }, index);
     };
+    render_ActionWithInner = (action, index) => {
+        const hasInner = !!action.innerActions?.length;
+        const renderInner = hasInner && !action.disabled;
+        const anchorId = generateHex(4);
+        const style = { '--anchor-id': anchorId };
+        const className = _className('work-hub-menu-action-with-inner', action.disabled && 'disabled');
+        return _jsxs("div", { className: className, style: style, children: [_jsxs(LL_H_C, { className: 'work-hub-menu-action', children: [_jsx("div", { className: 'work-hub-menu-action__label', children: action.label }), hasInner && _jsx(TS_Icons.treeCollapse.component, {})] }), renderInner && _jsx(LL_V_L, { className: 'work-hub-menu-action__inner-actions', children: action.innerActions?.map(this.render_Action) })] }, index);
+    };
 }

package/_ui/Component_WorkHubActionMenu/Component_WorkHubActionMenu.scss

@@ -6,7 +6,6 @@
   box-shadow: 0 0 15px 0 #BAB8E6;
   padding: 4px;
   border-radius: 10px;
-  overflow: hidden;
 
   .ts-button[data-variant='work-hub-menu-action'] {
     --ts-button--content-color: #{S.black(1)};
@@ -37,13 +36,88 @@
     }
   }
 
+  .work-hub-menu-action-with-inner {
+    height: 24px;
+    width: 100%;
+    position: relative;
+
+    & > .work-hub-menu-action {
+      justify-content: space-between;
+      height: 100%;
+      width: 100%;
+      gap: 8px;
+      padding-left: 6px;
+      border-radius: 6px;
+      transition: background 300ms ease-out;
+
+      .work-hub-menu-action__label {
+        color: S.black(1);
+        font: {
+          size: 14px;
+          weight: 500;
+        }
+      }
+
+      .icon--wrapper {
+        @include S.color-svg(S.black(1));
+      }
+    }
+
+    & > .work-hub-menu-action__inner-actions {
+      width: 300px;
+      position: absolute;
+      top: -4px;
+      right: calc(-100% - 10px);
+      border: 1px solid #333;
+      box-shadow: 0 0 15px 0 #BAB8E6;
+      background: #fff;
+      padding: 4px;
+      gap: 4px;
+      border-radius: 6px;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &:hover {
+      & > .work-hub-menu-action {
+        background: S.dark-blue(6);
+      }
+
+      & > .work-hub-menu-action__inner-actions {
+        opacity: 1;
+        pointer-events: unset;
+      }
+    }
+
+    &.disabled {
+      & > .work-hub-menu-action {
+        background: transparent;
+
+        .work-hub-menu-action__label {
+          color: S.black(5);
+        }
+
+        .icon--wrapper {
+          @include S.color-svg(S.black(5));
+        }
+      }
+    }
+  }
+
   .action-menu__section {
     width: 100%;
     padding: 4px 0;
     gap: 4px;
 
     .action-menu__section-label {
-
+      color: S.black(1);
+      height: 24px;
+      padding: 0 6px;
+      line-height: 24px;
+      font: {
+        size: 12px;
+        weight: 800;
+      }
     }
 
     &:not(:last-child) {

package/_ui/Component_WorkHubActionMenu/types.d.ts

@@ -1,7 +1,8 @@
 export type WorkHubItem_MenuAction = {
     label: string;
-    action: () => (Promise<void> | void);
+    action?: () => (Promise<void> | void);
     disabled?: boolean;
+    innerActions?: WorkHubItem_MenuAction[];
 };
 export type WorkHubItem_MenuSection = {
     label?: string;

package/_ui/Component_WorkHub_TabContent/Component_WorkHub_TabContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef, useEffect } from 'react';
 import { ModuleFE_WorkHub } from '../../_module/index.js';
 import './Component_WorkHub_TabContent.scss';
-import { AwaitModules } from '@nu-art/thunderstorm-frontend';
+import { AwaitModules, TS_ErrorBoundary } from '@nu-art/thunderstorm-frontend';
 export const Component_WorkHub_TabContent = (props) => {
     const item = ModuleFE_WorkHub.workHubItem.getByKey(props.tab.itemKey);
     const ref = createRef();
@@ -10,6 +10,6 @@ export const Component_WorkHub_TabContent = (props) => {
         ref.current?.focus();
     });
     if (item.modulesToAwait?.length)
-        return _jsx("div", { className: 'c__work-hub-tab-content', ref: ref, tabIndex: 0, children: _jsx(AwaitModules, { modules: item.modulesToAwait, children: item.renderer(item, props.tab.renderArgs) }) });
-    return _jsx("div", { className: 'c__work-hub-tab-content', ref: ref, tabIndex: 0, children: item.renderer(item, props.tab.renderArgs) });
+        return _jsx("div", { className: 'c__work-hub-tab-content', ref: ref, tabIndex: 0, children: _jsx(AwaitModules, { modules: item.modulesToAwait, children: _jsx(TS_ErrorBoundary, { children: item.renderer(item, props.tab.id, props.tab.renderArgs) }) }) });
+    return _jsx("div", { className: 'c__work-hub-tab-content', ref: ref, tabIndex: 0, children: _jsx(TS_ErrorBoundary, { children: item.renderer(item, props.tab.id, props.tab.renderArgs) }) });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/work-hub-frontend",
-  "version": "0.400.7",
+  "version": "0.400.13",
   "description": "TS WorkHub Frontend",
   "keywords": [
     "TacB0sS",
@@ -21,11 +21,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@nu-art/work-hub-shared": "0.400.7",
-    "@nu-art/ts-common": "0.400.7",
-    "@nu-art/ts-styles": "0.400.7",
-    "@nu-art/thunderstorm-shared": "0.400.7",
-    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/work-hub-shared": "0.400.13",
+    "@nu-art/ts-common": "0.400.13",
+    "@nu-art/ts-styles": "0.400.13",
+    "@nu-art/thunderstorm-shared": "0.400.13",
+    "@nu-art/thunderstorm-frontend": "0.400.13",
     "react": "^18.0.0"
   },
   "devDependencies": {
@@ -43,6 +43,10 @@
     "./ui": {
       "types": "./_ui/index.d.ts",
       "import": "./_ui/index.js"
+    },
+    "./modules": {
+      "types": "./_module/ModuleFE_WorkHub/ModuleFE_WorkHub.d.ts",
+      "import": "./_module/ModuleFE_WorkHub/ModuleFE_WorkHub.js"
     }
   }
 }