Zamoore/hds 4843/advanced table composite integration

packages/components/package.json

@@ -141,11 +141,11 @@
       "./components/hds/accordion.js": "./dist/_app_/components/hds/accordion.js",
       "./components/hds/accordion/item/button.js": "./dist/_app_/components/hds/accordion/item/button.js",
       "./components/hds/accordion/item.js": "./dist/_app_/components/hds/accordion/item.js",
-      "./components/hds/advanced-table/expandable-tr-group.js": "./dist/_app_/components/hds/advanced-table/expandable-tr-group.js",
+      "./components/hds/advanced-table/body.js": "./dist/_app_/components/hds/advanced-table/body.js",
+      "./components/hds/advanced-table/column-manager.js": "./dist/_app_/components/hds/advanced-table/column-manager.js",
+      "./components/hds/advanced-table/column-manager/order.js": "./dist/_app_/components/hds/advanced-table/column-manager/order.js",
+      "./components/hds/advanced-table/column-manager/width.js": "./dist/_app_/components/hds/advanced-table/column-manager/width.js",
       "./components/hds/advanced-table.js": "./dist/_app_/components/hds/advanced-table.js",
-      "./components/hds/advanced-table/models/column.js": "./dist/_app_/components/hds/advanced-table/models/column.js",
-      "./components/hds/advanced-table/models/row.js": "./dist/_app_/components/hds/advanced-table/models/row.js",
-      "./components/hds/advanced-table/models/table.js": "./dist/_app_/components/hds/advanced-table/models/table.js",
       "./components/hds/advanced-table/td.js": "./dist/_app_/components/hds/advanced-table/td.js",
       "./components/hds/advanced-table/th-button-expand.js": "./dist/_app_/components/hds/advanced-table/th-button-expand.js",
       "./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
@@ -155,7 +155,6 @@
       "./components/hds/advanced-table/th-reorder-handle.js": "./dist/_app_/components/hds/advanced-table/th-reorder-handle.js",
       "./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",
       "./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
-      "./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
       "./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
       "./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
       "./components/hds/advanced-table/utils.js": "./dist/_app_/components/hds/advanced-table/utils.js",
@@ -208,6 +207,8 @@
       "./components/hds/code-editor/generic.js": "./dist/_app_/components/hds/code-editor/generic.js",
       "./components/hds/code-editor.js": "./dist/_app_/components/hds/code-editor.js",
       "./components/hds/code-editor/title.js": "./dist/_app_/components/hds/code-editor/title.js",
+      "./components/hds/composite.js": "./dist/_app_/components/hds/composite.js",
+      "./components/hds/composite/navigation.js": "./dist/_app_/components/hds/composite/navigation.js",
       "./components/hds/copy/button.js": "./dist/_app_/components/hds/copy/button.js",
       "./components/hds/copy/snippet.js": "./dist/_app_/components/hds/copy/snippet.js",
       "./components/hds/dialog-primitive/body.js": "./dist/_app_/components/hds/dialog-primitive/body.js",
@@ -371,7 +372,6 @@
       "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
       "./modifiers/hds-advanced-table-cell.js": "./dist/_app_/modifiers/hds-advanced-table-cell.js",
       "./modifiers/hds-advanced-table-cell/dom-management.js": "./dist/_app_/modifiers/hds-advanced-table-cell/dom-management.js",
-      "./modifiers/hds-advanced-table-cell/keyboard-navigation.js": "./dist/_app_/modifiers/hds-advanced-table-cell/keyboard-navigation.js",
       "./modifiers/hds-anchored-position.js": "./dist/_app_/modifiers/hds-anchored-position.js",
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",
       "./modifiers/hds-code-editor.js": "./dist/_app_/modifiers/hds-code-editor.js",
@@ -383,6 +383,7 @@
       "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
+      "./modifiers/hds-scroll-into-view-on-focus.js": "./dist/_app_/modifiers/hds-scroll-into-view-on-focus.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"

packages/components/src/components.ts

@@ -21,10 +21,8 @@ export { default as HdsAdvancedTableTh } from './components/hds/advanced-table/t
 export { default as HdsAdvancedTableThButtonSort } from './components/hds/advanced-table/th-button-sort.ts';
 export { default as HdsAdvancedTableThButtonTooltip } from './components/hds/advanced-table/th-button-tooltip.ts';
 export { default as HdsAdvancedTableThSelectable } from './components/hds/advanced-table/th-selectable.ts';
-export { default as HdsAdvancedTableThSort } from './components/hds/advanced-table/th-sort.ts';
 export { default as HdsAdvancedTableTr } from './components/hds/advanced-table/tr.ts';
 export { default as HdsAdvancedTableThButtonExpand } from './components/hds/advanced-table/th-button-expand.ts';
-export { default as HdsAdvancedTableExpandableTrGroup } from './components/hds/advanced-table/expandable-tr-group.ts';
 export * from './components/hds/advanced-table/types.ts';
 
 // Alert
@@ -103,6 +101,10 @@ export { default as HdsCodeEditorDescription } from './components/hds/code-edito
 export { default as HdsCodeEditorTitle } from './components/hds/code-editor/title.gts';
 export { default as HdsCodeEditorFullScreenButton } from './components/hds/code-editor/full-screen-button.gts';
 
+// Composite
+export { default as HdsComposite } from './components/hds/composite/index.gts';
+export * from './components/hds/composite/types.ts';
+
 // CopyButton
 export { default as HdsCopyButton } from './components/hds/copy/button/index.gts';
 export * from './components/hds/copy/button/types.ts';

packages/components/src/components/hds/advanced-table/body.gts

@@ -0,0 +1,84 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { hash } from '@ember/helper';
+
+type HdsAdvancedTableRowWrapper<T> = {
+  id: string;
+  source: T;
+  depth: number;
+  isExpanded: boolean;
+  isVisible: boolean;
+  hasChildren: boolean;
+};
+
+export interface HdsAdvancedTableBodySignature<T> {
+  Args: {
+    childrenKey: string;
+    expandedRowIds: Set<string>;
+    sortedModel: T[];
+  };
+  Blocks: {
+    default: [
+      {
+        lastVisibleRowId: string | undefined;
+        rows: HdsAdvancedTableRowWrapper<T>[];
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsAdvancedTableBody<
+  T extends Record<string, unknown>,
+> extends Component<HdsAdvancedTableBodySignature<T>> {
+  @cached
+  get rows(): HdsAdvancedTableRowWrapper<T>[] {
+    const { sortedModel, childrenKey, expandedRowIds } = this.args;
+    const rows: HdsAdvancedTableRowWrapper<T>[] = [];
+
+    const traverse = (
+      items: T[],
+      depth: number,
+      ancestorsExpanded: boolean
+    ) => {
+      for (const item of items) {
+        const id = guidFor(item);
+        const isExpanded = expandedRowIds.has(id);
+        const children = item[childrenKey] as T[] | undefined;
+        const hasChildren = Array.isArray(children) && children.length > 0;
+        const isVisible = depth === 0 || ancestorsExpanded;
+
+        rows.push({
+          id,
+          source: item,
+          depth,
+          isExpanded,
+          isVisible,
+          hasChildren,
+        });
+
+        if (hasChildren) {
+          traverse(children, depth + 1, isVisible && isExpanded);
+        }
+      }
+    };
+
+    traverse(sortedModel, 0, false);
+
+    return rows;
+  }
+
+  get lastVisibleRowId(): string | undefined {
+    const visibleRows = this.rows.filter((row) => row.isVisible);
+    const lastVisibleRow = visibleRows[visibleRows.length - 1];
+
+    return lastVisibleRow?.id;
+  }
+
+  <template>
+    <div class="hds-advanced-table__tbody" role="rowgroup" ...attributes>
+      {{yield (hash lastVisibleRowId=this.lastVisibleRowId rows=this.rows)}}
+    </div>
+  </template>
+}

packages/components/src/components/hds/advanced-table/column-manager/index.gts

@@ -0,0 +1,196 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { cached } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+import { TrackedMap } from 'tracked-built-ins';
+import { hash } from '@ember/helper';
+
+import HdsAdvancedTableColumnManagerWidth from './width.gts';
+import HdsAdvancedTableColumnManagerOrder from './order.gts';
+
+import type { ModifierLike } from '@glint/template';
+import type { HdsAdvancedTableSyncWidthValuesSignature } from './width.gts';
+import type { HdsAdvancedTableSyncColumnOrderSignature } from './order.gts';
+import type {
+  HdsAdvancedTableColumn,
+  HdsAdvancedTableColumnReorderSide,
+  HdsAdvancedTableNormalizedColumn,
+} from '../types.ts';
+import type { HdsAdvancedTableSignature } from '../index.ts';
+
+export interface HdsAdvancedTableSyncThElementsSignature {
+  Element: HTMLDivElement;
+  Args: {
+    Positional: [HdsAdvancedTableColumn['key']];
+  };
+}
+
+export interface HdsAdvancedTableColumnManagerSignature {
+  Args: {
+    columns: HdsAdvancedTableColumn[];
+    columnOrder: HdsAdvancedTableSignature['Args']['columnOrder'];
+    hasReorderableColumns?: HdsAdvancedTableSignature['Args']['hasReorderableColumns'];
+    hasStickyFirstColumn?: HdsAdvancedTableSignature['Args']['hasStickyFirstColumn'];
+    isSelectable?: HdsAdvancedTableSignature['Args']['isSelectable'];
+    onColumnReorder: HdsAdvancedTableSignature['Args']['onColumnReorder'];
+  };
+  Blocks: {
+    default: [
+      {
+        columns: HdsAdvancedTableNormalizedColumn[];
+        columnOrder: HdsAdvancedTableSignature['Args']['columnOrder'];
+        draggedColumnKey: HdsAdvancedTableNormalizedColumn['key'] | null;
+        firstColumnKey: HdsAdvancedTableNormalizedColumn['key'] | undefined;
+        gridTemplateColumns: string;
+        lastColumnKey: HdsAdvancedTableNormalizedColumn['key'] | undefined;
+        orderedColumns: HdsAdvancedTableNormalizedColumn[];
+        reorderHoveredColumnKey: HdsAdvancedTableNormalizedColumn['key'] | null;
+        syncColumnOrder: ModifierLike<HdsAdvancedTableSyncColumnOrderSignature>;
+        syncThElements: ModifierLike<HdsAdvancedTableSyncThElementsSignature>;
+        syncWidthValues: ModifierLike<HdsAdvancedTableSyncWidthValuesSignature>;
+        applyTransientWidth: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key']
+        ) => void;
+        getAppliedWidth: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key']
+        ) => HdsAdvancedTableNormalizedColumn['width'];
+        getColumnByKey: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key']
+        ) => HdsAdvancedTableNormalizedColumn | undefined;
+        getSiblingColumnKeys: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key']
+        ) => {
+          previous?: HdsAdvancedTableNormalizedColumn['key'];
+          next?: HdsAdvancedTableNormalizedColumn['key'];
+        };
+        moveColumnToDropTarget: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'],
+          side: HdsAdvancedTableColumnReorderSide
+        ) => void;
+        moveColumnToTarget: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'],
+          targetColumnKey: HdsAdvancedTableNormalizedColumn['key'],
+          side: HdsAdvancedTableColumnReorderSide
+        ) => void;
+        moveColumnToTerminalPosition: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'],
+          position: 'start' | 'end'
+        ) => void;
+        restoreColumnWidth: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key']
+        ) => void;
+        setDraggedColumnKey: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'] | null
+        ) => void;
+        setReorderHoveredColumnKey: (
+          key: HdsAdvancedTableNormalizedColumn['key'] | null
+        ) => void;
+        setTransientColumnWidths: (options: { roundValues?: boolean }) => void;
+        setTransientColumnWidth: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'],
+          width: `${number}px`,
+          clamped?: boolean
+        ) => void;
+        resetTransientColumnWidths: () => void;
+        stepColumn: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'],
+          step: number
+        ) => void;
+        updateResizeDebt: (
+          columnKey: HdsAdvancedTableNormalizedColumn['key'],
+          delta: number
+        ) => void;
+      },
+    ];
+  };
+}
+
+export default class HdsAdvancedTableColumnManager extends Component<HdsAdvancedTableColumnManagerSignature> {
+  thElements = new TrackedMap<string, HTMLDivElement>();
+
+  @cached
+  get normalizedColumns(): HdsAdvancedTableNormalizedColumn[] {
+    return this.args.columns.map((column) => {
+      return column.key !== undefined
+        ? (column as HdsAdvancedTableNormalizedColumn)
+        : { ...column, key: guidFor(column) };
+    });
+  }
+
+  getColumnByKey = (
+    key: HdsAdvancedTableColumn['key']
+  ): HdsAdvancedTableNormalizedColumn | undefined => {
+    if (key === undefined) {
+      return;
+    }
+
+    return this.normalizedColumns.find((column) => column.key === key);
+  };
+
+  syncThElements = modifier<HdsAdvancedTableSyncThElementsSignature>(
+    (element, [key]) => {
+      if (key !== undefined) {
+        this.thElements.set(key, element);
+      }
+    }
+  );
+
+  <template>
+    <HdsAdvancedTableColumnManagerOrder
+      @columns={{this.normalizedColumns}}
+      @columnOrder={{@columnOrder}}
+      @hasReorderableColumns={{@hasReorderableColumns}}
+      @hasStickyFirstColumn={{@hasStickyFirstColumn}}
+      @onColumnReorder={{@onColumnReorder}}
+      @getColumnByKey={{this.getColumnByKey}}
+      @thElements={{this.thElements}}
+      as |Order|
+    >
+      <HdsAdvancedTableColumnManagerWidth
+        @columns={{this.normalizedColumns}}
+        @orderedColumns={{Order.orderedColumns}}
+        @columnOrder={{Order.columnOrder}}
+        @isSelectable={{@isSelectable}}
+        @getColumnByKey={{this.getColumnByKey}}
+        @thElements={{this.thElements}}
+        as |Width|
+      >
+        {{yield
+          (hash
+            columns=this.normalizedColumns
+            columnOrder=Order.columnOrder
+            draggedColumnKey=Order.draggedColumnKey
+            firstColumnKey=Order.firstColumnKey
+            gridTemplateColumns=Width.gridTemplateColumns
+            lastColumnKey=Order.lastColumnKey
+            orderedColumns=Order.orderedColumns
+            syncColumnOrder=Order.syncColumnOrder
+            syncThElements=this.syncThElements
+            syncWidthValues=Width.syncWidthValues
+            applyTransientWidth=Width.applyTransientWidth
+            getAppliedWidth=Width.getAppliedWidth
+            getColumnByKey=this.getColumnByKey
+            getSiblingColumnKeys=Width.getSiblingColumnKeys
+            reorderHoveredColumnKey=Order.reorderHoveredColumnKey
+            restoreColumnWidth=Width.restoreColumnWidth
+            moveColumnToDropTarget=Order.moveColumnToDropTarget
+            moveColumnToTarget=Order.moveColumnToTarget
+            moveColumnToTerminalPosition=Order.moveColumnToTerminalPosition
+            setTransientColumnWidths=Width.setTransientColumnWidths
+            setTransientColumnWidth=Width.setTransientColumnWidth
+            resetTransientColumnWidths=Width.resetTransientColumnWidths
+            stepColumn=Order.stepColumn
+            setDraggedColumnKey=Order.setDraggedColumnKey
+            setReorderHoveredColumnKey=Order.setReorderHoveredColumnKey
+            updateResizeDebt=Width.updateResizeDebt
+          )
+        }}
+      </HdsAdvancedTableColumnManagerWidth>
+    </HdsAdvancedTableColumnManagerOrder>
+  </template>
+}