@hashicorp/design-system-components/dist/components/hds/advanced-table/th-context-menu.js

Helios Design System Components

import Component from '@glimmer/component';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { scheduleOnce } from '@ember/runloop';
import { modifier } from 'ember-modifier';
import { fn, concat } from '@ember/helper';
import { eq, gt } from 'ember-truth-helpers';
import { on } from '@ember/modifier';
import HdsDropdown from '../dropdown/index.js';
import HdsTHelper from '../../../helpers/hds-t.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
class HdsAdvancedTableThContextMenu extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  static {
    g(this.prototype, "_toggleElement", [tracked], function () {
      return null;
    });
  }
  #_toggleElement = (i(this, "_toggleElement"), void 0);
  get _resizeOptions() {
    const {
      isLastColumn
    } = this.args;
    const translatedResetWidthLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.reset-width', {
      default: 'Reset column width'
    });
    let resizeOptions = [{
      key: 'reset-column-width',
      label: translatedResetWidthLabel,
      icon: 'rotate-ccw',
      action: this._resetColumnWidth.bind(this)
    }];
    if (!isLastColumn) {
      const translatedResizeLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.resize', {
        default: 'Resize column'
      });
      resizeOptions = [{
        key: 'resize-column',
        label: translatedResizeLabel,
        icon: 'resize-column',
        action: this._resizeColumn.bind(this)
      }, ...resizeOptions];
    }
    return resizeOptions;
  }
  get _reorderOptions() {
    const {
      isFirstNonStickyColumn,
      isLastColumn
    } = this.args;
    const translatedMoveColumnLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.move-column', {
      default: 'Move column'
    });
    let reorderOptions = [{
      key: 'reorder-column',
      label: translatedMoveColumnLabel,
      icon: 'move-horizontal',
      action: () => this._moveColumn()
    }];
    if (!isFirstNonStickyColumn) {
      const translatedMoveColumnToStartLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.move-column-to-start', {
        default: 'Move column to start'
      });
      reorderOptions = [...reorderOptions, {
        key: 'move-column-to-start',
        label: translatedMoveColumnToStartLabel,
        icon: 'start',
        action: close => this._moveColumnToPosition('start', close)
      }];
    }
    if (!isLastColumn) {
      const translatedMoveColumnToEndLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.move-column-to-end', {
        default: 'Move column to end'
      });
      reorderOptions = [...reorderOptions, {
        key: 'move-column-to-end',
        label: translatedMoveColumnToEndLabel,
        icon: 'end',
        action: close => this._moveColumnToPosition('end', close)
      }];
    }
    return reorderOptions;
  }
  get _stickyColumnOptions() {
    const {
      isStickyColumn
    } = this.args;
    const translatedPinLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.pin', {
      default: 'Pin column'
    });
    const translatedUnpinLabel = this.hdsIntl.t('hds.advanced-table.th-context-menu.unpin', {
      default: 'Unpin column'
    });
    return [{
      key: 'pin-first-column',
      label: isStickyColumn ? translatedUnpinLabel : translatedPinLabel,
      icon: isStickyColumn ? 'pin-off' : 'pin',
      action: this._pinFirstColumn.bind(this)
    }];
  }
  get _options() {
    const {
      hasReorderableColumns,
      hasResizableColumns,
      isFirstColumn,
      isStickyColumn
    } = this.args;
    let allGroups = [];
    if (hasResizableColumns) {
      allGroups = [...allGroups, this._resizeOptions];
    }
    if (hasReorderableColumns && isStickyColumn !== true) {
      allGroups = [...allGroups, this._reorderOptions];
    }
    if (isFirstColumn && isStickyColumn !== undefined) {
      allGroups = [...allGroups, this._stickyColumnOptions];
    }
    return allGroups.reduce((options, group, index) => {
      // Add a separator before each group except the first
      if (index > 0) {
        return [...options, {
          key: 'separator'
        }, ...group];
      }
      return [...options, ...group];
    }, []);
  }
  _registerDropdownToggleElement = modifier(element => {
    this._toggleElement = element;
  });
  _resizeColumn() {
    this.args.resizeHandleElement?.focus();
  }
  _resetColumnWidth(dropdownCloseCallback) {
    const {
      column,
      onColumnResize,
      onRestoreColumnWidth
    } = this.args;
    if (typeof onRestoreColumnWidth === 'function' && column.key !== undefined) {
      onRestoreColumnWidth(column.key);
      if (typeof onColumnResize === 'function') {
        onColumnResize(column.key, column.width);
      }
      dropdownCloseCallback();
    }
  }
  _moveColumn() {
    const {
      onFocusReorderHandle
    } = this.args;
    if (typeof onFocusReorderHandle === 'function') {
      // eslint-disable-next-line ember/no-runloop
      scheduleOnce('afterRender', this, onFocusReorderHandle);
    }
  }
  _moveColumnToPosition(position, dropdownCloseCallback) {
    const {
      column,
      onMoveColumnToTerminalPosition
    } = this.args;
    onMoveColumnToTerminalPosition?.(column.key, position);
    requestAnimationFrame(() => {
      dropdownCloseCallback?.();
      this._toggleElement?.focus();
    });
  }
  _pinFirstColumn(dropdownCloseCallback) {
    const {
      onPinFirstColumn
    } = this.args;
    if (typeof onPinFirstColumn === 'function') {
      onPinFirstColumn();
    }
    dropdownCloseCallback();
  }
  static {
    setComponentTemplate(precompileTemplate("{{#if (gt this._options.length 0)}}\n  <HdsDropdown class=\"hds-advanced-table__th-context-menu\" @enableCollisionDetection={{true}} ...attributes as |D|>\n    <D.ToggleIcon @icon=\"more-vertical\" @text={{hdsT \"hds.components.advanced-table.th-context-menu.actions\" columnLabel=@column.label default=(concat \"Additional actions for \" @column.label)}} @hasChevron={{false}} @size=\"small\" {{this._registerDropdownToggleElement}} />\n\n    {{#each this._options as |option|}}\n      {{#if (eq option.key \"separator\")}}\n        <D.Separator />\n      {{else if option.action}}\n        <D.Interactive @icon={{option.icon}} data-test-context-option-key={{option.key}} {{on \"click\" (fn option.action D.close)}}>\n          {{option.label}}\n        </D.Interactive>\n      {{/if}}\n    {{/each}}\n  </HdsDropdown>\n{{/if}}", {
      strictMode: true,
      scope: () => ({
        gt,
        HdsDropdown,
        hdsT: HdsTHelper,
        concat,
        eq,
        on,
        fn
      })
    }), this);
  }
}

export { HdsAdvancedTableThContextMenu as default };
//# sourceMappingURL=th-context-menu.js.map