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

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

@@ -15,6 +15,7 @@ export declare class WorkHubItem<Args extends any = void> extends Logger {
     setModulesToAwait: (modules: ModuleFE_BaseDB<any>[]) => this;
     setCustomMenuActionsResolver: (resolver: (tab: WorkHubTab) => WorkHubItem_MenuSection[]) => this;
     openTab: (id: string, label: string, args: Args) => void;
+    closeTab: (tabId: string) => void;
     openTabMenu: (e: MouseEvent<HTMLDivElement>, tab: WorkHubTab) => void;
     updateArgs: (tabId: string, args: Partial<Args>) => void;
 }

package/_core/work-hub-item.js

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/work-hub-frontend",
-  "version": "0.400.7",
+  "version": "0.400.8",
   "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.8",
+    "@nu-art/ts-common": "0.400.8",
+    "@nu-art/ts-styles": "0.400.8",
+    "@nu-art/thunderstorm-shared": "0.400.8",
+    "@nu-art/thunderstorm-frontend": "0.400.8",
     "react": "^18.0.0"
   },
   "devDependencies": {