@hashicorp/design-system-components/dist/modifiers/hds-advanced-table-cell.js

Helios Design System Components

import Modifier from 'ember-modifier';
import { updateTabbableChildren } from './hds-advanced-table-cell/dom-management.js';
import { registerDestructor } from '@ember/destroyable';
import { focusable } from 'tabbable';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

class HdsAdvancedTableCellModifier extends Modifier {
  // have a copy of shouldTrapFocus internally so the correct value is used when update tabbable children
  _shouldTrapFocus = false;
  _didSetup = false;
  _element = undefined;
  _observer = undefined;
  _keydownHandler;
  constructor(owner, args) {
    super(owner, args);
    registerDestructor(this, () => {
      this._observer?.disconnect();
      this._element?.removeEventListener('keydown', this._keydownHandler);
      this._element = undefined;
    });
  }
  modify(element, positional, named) {
    this._shouldTrapFocus = named.shouldTrapFocus;
    if (!this._didSetup) {
      this.#setupObserver(element, positional, named);
      if (typeof named.setCellElement === 'function') {
        named.setCellElement(element);
      }
      this._didSetup = true;
      this._element = element;
    }
  }
  #setupObserver(element, _positional, named) {
    const {
      handleEnableFocusTrap
    } = named;
    updateTabbableChildren(element);
    this._keydownHandler = event => {
      if (event.key === 'Enter') {
        const cellFocusableChildren = focusable(element);
        if (cellFocusableChildren.length > 0) {
          for (let i = 0; i < cellFocusableChildren.length; i++) {
            const child = cellFocusableChildren[i];
            if (child?.hasAttribute('data-advanced-table-child-focusable')) {
              child.setAttribute('tabindex', '0');
            }
          }
          element.setAttribute('tabindex', '-1');
          handleEnableFocusTrap();
        }
      }
    };
    element.addEventListener('keydown', this._keydownHandler);
    this._observer = new MutationObserver(() => {
      updateTabbableChildren(element, this._shouldTrapFocus);
    });
    this._observer.observe(element, {
      childList: true,
      subtree: true
    });
  }
}

export { HdsAdvancedTableCellModifier as default };
//# sourceMappingURL=hds-advanced-table-cell.js.map