@hashicorp/design-system-components 4.24.0-rc-20250924193913 → 4.24.0-rc-20250930153835

package/declarations/components/hds/flyout/index.d.ts

@@ -37,7 +37,6 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     _element: HTMLDialogElement;
     private _body;
     private _bodyInitialOverflowValue;
-    private _clickHandler;
     /**
      * Sets the size of the flyout
      * Accepted values: medium, large
@@ -58,7 +57,7 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
      */
     get classNames(): string;
     registerOnCloseCallback(event: Event): void;
-    private _registerDialog;
+    didInsert(element: HTMLDialogElement): void;
     willDestroyNode(): void;
     open(): void;
     onDismiss(): Promise<void>;

package/declarations/components/hds/modal/index.d.ts

@@ -38,14 +38,14 @@ export default class HdsModal extends Component<HdsModalSignature> {
     private _element;
     private _body;
     private _bodyInitialOverflowValue;
-    private _clickHandler;
     get isDismissDisabled(): boolean;
     get size(): HdsModalSizes;
     get color(): HdsModalColors;
     get id(): string;
     get classNames(): string;
     registerOnCloseCallback(event: Event): void;
-    private _registerDialog;
+    didInsert(element: HTMLDialogElement): void;
+    willDestroyNode(): void;
     open(): void;
     onDismiss(): Promise<void>;
 }

package/dist/components/hds/flyout/index.js

@@ -4,7 +4,6 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '../../../utils/hds-get-element-id.js';
 import { buildWaiter } from '@ember/test-waiters';
-import { modifier } from 'ember-modifier';
 import { HdsFlyoutSizesValues } from './types.js';
 import '../dialog-primitive/body.js';
 import '../dialog-primitive/description.js';
@@ -14,7 +13,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::DialogPrimitive::Wrapper\n  class={{this.classNames}}\n  ...attributes\n  aria-labelledby={{this.id}}\n  {{this._registerDialog}}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss)}}\n>\n  <:header>\n    {{yield\n      (hash\n        Header=(component\n          \"hds/dialog-primitive/header\"\n          id=this.id\n          onDismiss=this.onDismiss\n          contextualClassPrefix=\"hds-flyout\"\n          titleTag=\"h1\"\n        )\n        Description=(component \"hds/dialog-primitive/description\" contextualClass=\"hds-flyout__description\")\n      )\n    }}\n  </:header>\n  <:body>\n    {{yield (hash Body=(component \"hds/dialog-primitive/body\" contextualClass=\"hds-flyout__body\"))}}\n  </:body>\n  <:footer>\n    {{yield\n      (hash\n        Footer=(component \"hds/dialog-primitive/footer\" onDismiss=this.onDismiss contextualClass=\"hds-flyout__footer\")\n      )\n    }}\n  </:footer>\n</Hds::DialogPrimitive::Wrapper>\n\n{{#if this._isOpen}}\n  <Hds::DialogPrimitive::Overlay @contextualClass=\"hds-flyout__overlay\" />\n{{/if}}");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::DialogPrimitive::Wrapper\n  class={{this.classNames}}\n  ...attributes\n  aria-labelledby={{this.id}}\n  {{did-insert this.didInsert}}\n  {{will-destroy this.willDestroyNode}}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}\n>\n  <:header>\n    {{yield\n      (hash\n        Header=(component\n          \"hds/dialog-primitive/header\"\n          id=this.id\n          onDismiss=this.onDismiss\n          contextualClassPrefix=\"hds-flyout\"\n          titleTag=\"h1\"\n        )\n        Description=(component \"hds/dialog-primitive/description\" contextualClass=\"hds-flyout__description\")\n      )\n    }}\n  </:header>\n  <:body>\n    {{yield (hash Body=(component \"hds/dialog-primitive/body\" contextualClass=\"hds-flyout__body\"))}}\n  </:body>\n  <:footer>\n    {{yield\n      (hash\n        Footer=(component \"hds/dialog-primitive/footer\" onDismiss=this.onDismiss contextualClass=\"hds-flyout__footer\")\n      )\n    }}\n  </:footer>\n</Hds::DialogPrimitive::Wrapper>\n\n{{#if this._isOpen}}\n  <Hds::DialogPrimitive::Overlay @contextualClass=\"hds-flyout__overlay\" />\n{{/if}}");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -37,7 +36,6 @@ class HdsFlyout extends Component {
   _element;
   _body;
   _bodyInitialOverflowValue = '';
-  _clickHandler;
 
   /**
    * Sets the size of the flyout
@@ -83,7 +81,7 @@ class HdsFlyout extends Component {
   static {
     n(this.prototype, "registerOnCloseCallback", [action]);
   }
-  _registerDialog = modifier(element => {
+  didInsert(element) {
     // Store references of `<dialog>` and `<body>` elements
     this._element = element;
     this._body = document.body;
@@ -100,27 +98,10 @@ class HdsFlyout extends Component {
     if (!this._element.open) {
       this.open();
     }
-    this._clickHandler = event => {
-      // check if the click is outside the flyout and the flyout is open
-      if (!this._element.contains(event.target) && this._isOpen) {
-        void this.onDismiss();
-      }
-    };
-    document.addEventListener('click', this._clickHandler, {
-      capture: true,
-      passive: false
-    });
-    return () => {
-      // if the <dialog> is removed from the dom while open we emulate the close event
-      if (this._element && this._isOpen) {
-        this._element.dispatchEvent(new Event('close'));
-        this._element.removeEventListener('close',
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.registerOnCloseCallback, true);
-      }
-      document.removeEventListener('click', this._clickHandler, true);
-    };
-  });
+  }
+  static {
+    n(this.prototype, "didInsert", [action]);
+  }
   willDestroyNode() {
     if (this._element) {
       this._element.removeEventListener('close',

package/dist/components/hds/flyout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/flyout/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport type { WithBoundArgs } from '@glint/template';\nimport { modifier } from 'ember-modifier';\n\nimport type { HdsFlyoutSizes } from './types.ts';\n\nimport { HdsFlyoutSizesValues } from './types.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:flyout');\n\nexport const DEFAULT_SIZE = HdsFlyoutSizesValues.Medium;\nexport const DEFAULT_HAS_OVERLAY = true;\nexport const SIZES: HdsFlyoutSizes[] = Object.values(HdsFlyoutSizesValues);\n\nexport interface HdsFlyoutSignature {\n  Args: {\n    size?: HdsFlyoutSizes;\n    returnFocusTo?: string;\n    onOpen?: () => void;\n    onClose?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Header?: WithBoundArgs<\n          typeof HdsDialogPrimitiveHeaderComponent,\n          'id' | 'onDismiss' | 'contextualClassPrefix'\n        >;\n        Description?: WithBoundArgs<\n          typeof HdsDialogPrimitiveDescriptionComponent,\n          'contextualClass'\n        >;\n        Body?: WithBoundArgs<\n          typeof HdsDialogPrimitiveBodyComponent,\n          'contextualClass'\n        >;\n        Footer?: WithBoundArgs<\n          typeof HdsDialogPrimitiveFooterComponent,\n          'onDismiss' | 'contextualClass'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDialogElement;\n}\n\nexport default class HdsFlyout extends Component<HdsFlyoutSignature> {\n  @tracked private _isOpen = false;\n  // TODO: make this property private; currently blocked by our consumers relying on it despite not being part of the public API: https://github.com/hashicorp/cloud-ui/blob/main/engines/waypoint/addon/components/preview-pane.ts#L15\n  // private _element!: HTMLDialogElement;\n  _element!: HTMLDialogElement;\n  private _body!: HTMLElement;\n  private _bodyInitialOverflowValue = '';\n  private _clickHandler!: (event: MouseEvent) => void;\n\n  /**\n   * Sets the size of the flyout\n   * Accepted values: medium, large\n   *\n   * @param size\n   * @type {string}\n   * @default 'medium'\n   */\n  get size(): HdsFlyoutSizes {\n    const { size = DEFAULT_SIZE } = this.args;\n\n    assert(\n      `@size for \"Hds::Flyout\" must be one of the following: ${SIZES.join(\n        ', '\n      )}; received: ${size}`,\n      SIZES.includes(size)\n    );\n\n    return size;\n  }\n\n  /**\n   * Calculates the unique ID to assign to the title\n   */\n  get id(): string {\n    return getElementId(this);\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-flyout'];\n\n    // add a class based on the @size argument\n    classes.push(`hds-flyout--size-${this.size}`);\n\n    return classes.join(' ');\n  }\n\n  @action registerOnCloseCallback(event: Event) {\n    if (this.args.onClose && typeof this.args.onClose === 'function') {\n      this.args.onClose(event);\n    }\n\n    this._isOpen = false;\n  }\n\n  private _registerDialog = modifier((element: HTMLDialogElement) => {\n    // Store references of `<dialog>` and `<body>` elements\n    this._element = element;\n    this._body = document.body;\n\n    if (this._body) {\n      // Store the initial `overflow` value of `<body>` so we can reset to it\n      this._bodyInitialOverflowValue =\n        this._body.style.getPropertyValue('overflow');\n    }\n\n    // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n    // If the flyout dialog is not already open\n    if (!this._element.open) {\n      this.open();\n    }\n\n    this._clickHandler = (event: MouseEvent) => {\n      // check if the click is outside the flyout and the flyout is open\n      if (!this._element.contains(event.target as Node) && this._isOpen) {\n        void this.onDismiss();\n      }\n    };\n\n    document.addEventListener('click', this._clickHandler, {\n      capture: true,\n      passive: false,\n    });\n\n    return () => {\n      // if the <dialog> is removed from the dom while open we emulate the close event\n      if (this._element && this._isOpen) {\n        this._element.dispatchEvent(new Event('close'));\n\n        this._element.removeEventListener(\n          'close',\n          // eslint-disable-next-line @typescript-eslint/unbound-method\n          this.registerOnCloseCallback,\n          true\n        );\n      }\n\n      document.removeEventListener('click', this._clickHandler, true);\n    };\n  });\n\n  @action\n  willDestroyNode(): void {\n    if (this._element) {\n      this._element.removeEventListener(\n        'close',\n        // eslint-disable-next-line @typescript-eslint/unbound-method\n        this.registerOnCloseCallback,\n        true\n      );\n    }\n  }\n\n  @action\n  open(): void {\n    // Make flyout dialog visible using the native `showModal` method\n    this._element.showModal();\n    this._isOpen = true;\n\n    // Prevent page from scrolling when the dialog is open\n    if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n    // Call \"onOpen\" callback function\n    if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n      this.args.onOpen();\n    }\n  }\n\n  @action\n  // eslint-disable-next-line @typescript-eslint/require-await\n  async onDismiss(): Promise<void> {\n    // allow ember test helpers to be aware of when the `close` event fires\n    // when using `click` or other helpers from '@ember/test-helpers'\n    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)\n    if (this._element.open) {\n      const token = waiter.beginAsync();\n      const listener = () => {\n        waiter.endAsync(token);\n        this._element.removeEventListener('close', listener);\n      };\n      this._element.addEventListener('close', listener);\n    }\n\n    // Make flyout dialog invisible using the native `close` method\n    this._element.close();\n\n    // Reset page `overflow` property\n    if (this._body) {\n      this._body.style.removeProperty('overflow');\n      if (this._bodyInitialOverflowValue === '') {\n        if (this._body.style.length === 0) {\n          this._body.removeAttribute('style');\n        }\n      } else {\n        this._body.style.setProperty(\n          'overflow',\n          this._bodyInitialOverflowValue\n        );\n      }\n    }\n\n    // Return focus to a specific element (if provided)\n    if (this.args.returnFocusTo) {\n      const initiator = document.getElementById(this.args.returnFocusTo);\n      if (initiator) {\n        initiator.focus();\n      }\n    }\n  }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsFlyoutSizesValues","Medium","DEFAULT_HAS_OVERLAY","SIZES","Object","values","HdsFlyout","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","_clickHandler","size","args","assert","join","includes","id","getElementId","classNames","classes","push","registerOnCloseCallback","event","onClose","_isOpen","n","action","_registerDialog","modifier","element","document","body","style","getPropertyValue","addEventListener","open","contains","target","onDismiss","capture","passive","dispatchEvent","Event","removeEventListener","willDestroyNode","showModal","setProperty","onOpen","token","beginAsync","listener","endAsync","close","removeProperty","length","removeAttribute","returnFocusTo","initiator","getElementById","focus","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/flyout/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport type { HdsFlyoutSizes } from './types.ts';\n\nimport { HdsFlyoutSizesValues } from './types.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:flyout');\n\nexport const DEFAULT_SIZE = HdsFlyoutSizesValues.Medium;\nexport const DEFAULT_HAS_OVERLAY = true;\nexport const SIZES: HdsFlyoutSizes[] = Object.values(HdsFlyoutSizesValues);\n\nexport interface HdsFlyoutSignature {\n  Args: {\n    size?: HdsFlyoutSizes;\n    returnFocusTo?: string;\n    onOpen?: () => void;\n    onClose?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Header?: WithBoundArgs<\n          typeof HdsDialogPrimitiveHeaderComponent,\n          'id' | 'onDismiss' | 'contextualClassPrefix'\n        >;\n        Description?: WithBoundArgs<\n          typeof HdsDialogPrimitiveDescriptionComponent,\n          'contextualClass'\n        >;\n        Body?: WithBoundArgs<\n          typeof HdsDialogPrimitiveBodyComponent,\n          'contextualClass'\n        >;\n        Footer?: WithBoundArgs<\n          typeof HdsDialogPrimitiveFooterComponent,\n          'onDismiss' | 'contextualClass'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDialogElement;\n}\n\nexport default class HdsFlyout extends Component<HdsFlyoutSignature> {\n  @tracked private _isOpen = false;\n  // TODO: make this property private; currently blocked by our consumers relying on it despite not being part of the public API: https://github.com/hashicorp/cloud-ui/blob/main/engines/waypoint/addon/components/preview-pane.ts#L15\n  // private _element!: HTMLDialogElement;\n  _element!: HTMLDialogElement;\n  private _body!: HTMLElement;\n  private _bodyInitialOverflowValue = '';\n\n  /**\n   * Sets the size of the flyout\n   * Accepted values: medium, large\n   *\n   * @param size\n   * @type {string}\n   * @default 'medium'\n   */\n  get size(): HdsFlyoutSizes {\n    const { size = DEFAULT_SIZE } = this.args;\n\n    assert(\n      `@size for \"Hds::Flyout\" must be one of the following: ${SIZES.join(\n        ', '\n      )}; received: ${size}`,\n      SIZES.includes(size)\n    );\n\n    return size;\n  }\n\n  /**\n   * Calculates the unique ID to assign to the title\n   */\n  get id(): string {\n    return getElementId(this);\n  }\n\n  /**\n   * Get the class names to apply to the component.\n   * @method classNames\n   * @return {string} The \"class\" attribute to apply to the component.\n   */\n  get classNames(): string {\n    const classes = ['hds-flyout'];\n\n    // add a class based on the @size argument\n    classes.push(`hds-flyout--size-${this.size}`);\n\n    return classes.join(' ');\n  }\n\n  @action registerOnCloseCallback(event: Event) {\n    if (this.args.onClose && typeof this.args.onClose === 'function') {\n      this.args.onClose(event);\n    }\n\n    this._isOpen = false;\n  }\n\n  @action\n  didInsert(element: HTMLDialogElement): void {\n    // Store references of `<dialog>` and `<body>` elements\n    this._element = element;\n    this._body = document.body;\n\n    if (this._body) {\n      // Store the initial `overflow` value of `<body>` so we can reset to it\n      this._bodyInitialOverflowValue =\n        this._body.style.getPropertyValue('overflow');\n    }\n\n    // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n    // If the flyout dialog is not already open\n    if (!this._element.open) {\n      this.open();\n    }\n  }\n\n  @action\n  willDestroyNode(): void {\n    if (this._element) {\n      this._element.removeEventListener(\n        'close',\n        // eslint-disable-next-line @typescript-eslint/unbound-method\n        this.registerOnCloseCallback,\n        true\n      );\n    }\n  }\n\n  @action\n  open(): void {\n    // Make flyout dialog visible using the native `showModal` method\n    this._element.showModal();\n    this._isOpen = true;\n\n    // Prevent page from scrolling when the dialog is open\n    if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n    // Call \"onOpen\" callback function\n    if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n      this.args.onOpen();\n    }\n  }\n\n  @action\n  // eslint-disable-next-line @typescript-eslint/require-await\n  async onDismiss(): Promise<void> {\n    // allow ember test helpers to be aware of when the `close` event fires\n    // when using `click` or other helpers from '@ember/test-helpers'\n    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)\n    if (this._element.open) {\n      const token = waiter.beginAsync();\n      const listener = () => {\n        waiter.endAsync(token);\n        this._element.removeEventListener('close', listener);\n      };\n      this._element.addEventListener('close', listener);\n    }\n\n    // Make flyout dialog invisible using the native `close` method\n    this._element.close();\n\n    // Reset page `overflow` property\n    if (this._body) {\n      this._body.style.removeProperty('overflow');\n      if (this._bodyInitialOverflowValue === '') {\n        if (this._body.style.length === 0) {\n          this._body.removeAttribute('style');\n        }\n      } else {\n        this._body.style.setProperty(\n          'overflow',\n          this._bodyInitialOverflowValue\n        );\n      }\n    }\n\n    // Return focus to a specific element (if provided)\n    if (this.args.returnFocusTo) {\n      const initiator = document.getElementById(this.args.returnFocusTo);\n      if (initiator) {\n        initiator.focus();\n      }\n    }\n  }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsFlyoutSizesValues","Medium","DEFAULT_HAS_OVERLAY","SIZES","Object","values","HdsFlyout","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","size","args","assert","join","includes","id","getElementId","classNames","classes","push","registerOnCloseCallback","event","onClose","_isOpen","n","action","didInsert","element","document","body","style","getPropertyValue","addEventListener","open","willDestroyNode","removeEventListener","showModal","setProperty","onOpen","onDismiss","token","beginAsync","listener","endAsync","close","removeProperty","length","removeAttribute","returnFocusTo","initiator","getElementById","focus","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/modal/index.js

@@ -4,7 +4,6 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '../../../utils/hds-get-element-id.js';
 import { buildWaiter } from '@ember/test-waiters';
-import { modifier } from 'ember-modifier';
 import '../dialog-primitive/header.js';
 import '../dialog-primitive/body.js';
 import '../dialog-primitive/footer.js';
@@ -13,7 +12,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::DialogPrimitive::Wrapper\n  class={{this.classNames}}\n  ...attributes\n  aria-labelledby={{this.id}}\n  {{this._registerDialog}}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss)}}\n>\n  <:header>\n    {{yield\n      (hash\n        Header=(component\n          \"hds/dialog-primitive/header\"\n          id=this.id\n          onDismiss=this.onDismiss\n          contextualClassPrefix=\"hds-modal\"\n          titleTag=\"h1\"\n        )\n      )\n    }}\n  </:header>\n  <:body>\n    {{yield (hash Body=(component \"hds/dialog-primitive/body\" contextualClass=\"hds-modal__body\"))}}\n  </:body>\n  <:footer>\n    {{yield\n      (hash\n        Footer=(component \"hds/dialog-primitive/footer\" onDismiss=this.onDismiss contextualClass=\"hds-modal__footer\")\n      )\n    }}\n  </:footer>\n</Hds::DialogPrimitive::Wrapper>\n\n{{#if this._isOpen}}\n  <Hds::DialogPrimitive::Overlay @contextualClass=\"hds-modal__overlay\" />\n{{/if}}");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::DialogPrimitive::Wrapper\n  class={{this.classNames}}\n  ...attributes\n  aria-labelledby={{this.id}}\n  {{did-insert this.didInsert}}\n  {{will-destroy this.willDestroyNode}}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}\n>\n  <:header>\n    {{yield\n      (hash\n        Header=(component\n          \"hds/dialog-primitive/header\"\n          id=this.id\n          onDismiss=this.onDismiss\n          contextualClassPrefix=\"hds-modal\"\n          titleTag=\"h1\"\n        )\n      )\n    }}\n  </:header>\n  <:body>\n    {{yield (hash Body=(component \"hds/dialog-primitive/body\" contextualClass=\"hds-modal__body\"))}}\n  </:body>\n  <:footer>\n    {{yield\n      (hash\n        Footer=(component \"hds/dialog-primitive/footer\" onDismiss=this.onDismiss contextualClass=\"hds-modal__footer\")\n      )\n    }}\n  </:footer>\n</Hds::DialogPrimitive::Wrapper>\n\n{{#if this._isOpen}}\n  <Hds::DialogPrimitive::Overlay @contextualClass=\"hds-modal__overlay\" />\n{{/if}}");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -35,7 +34,6 @@ class HdsModal extends Component {
   _element;
   _body;
   _bodyInitialOverflowValue = '';
-  _clickHandler;
   get isDismissDisabled() {
     return this.args.isDismissDisabled ?? false;
   }
@@ -82,32 +80,12 @@ class HdsModal extends Component {
       }
     } else {
       this._isOpen = false;
-
-      // Reset page `overflow` property
-      if (this._body) {
-        this._body.style.removeProperty('overflow');
-        if (this._bodyInitialOverflowValue === '') {
-          if (this._body.style.length === 0) {
-            this._body.removeAttribute('style');
-          }
-        } else {
-          this._body.style.setProperty('overflow', this._bodyInitialOverflowValue);
-        }
-      }
-
-      // Return focus to a specific element (if provided)
-      if (this.args.returnFocusTo) {
-        const initiator = document.getElementById(this.args.returnFocusTo);
-        if (initiator) {
-          initiator.focus();
-        }
-      }
     }
   }
   static {
     n(this.prototype, "registerOnCloseCallback", [action]);
   }
-  _registerDialog = modifier(element => {
+  didInsert(element) {
     // Store references of `<dialog>` and `<body>` elements
     this._element = element;
     this._body = document.body;
@@ -124,29 +102,20 @@ class HdsModal extends Component {
     if (!this._element.open) {
       this.open();
     }
-    this._clickHandler = event => {
-      // check if the click is outside the modal and the modal is open
-      if (!this._element.contains(event.target) && this._isOpen) {
-        if (!this.isDismissDisabled) {
-          void this.onDismiss();
-        }
-      }
-    };
-    document.addEventListener('click', this._clickHandler, {
-      capture: true,
-      passive: false
-    });
-    return () => {
-      // if the <dialog> is removed from the dom while open we emulate the close event
-      if (this._element && this._isOpen) {
-        this._element.dispatchEvent(new Event('close'));
-        this._element.removeEventListener('close',
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.registerOnCloseCallback, true);
-      }
-      document.removeEventListener('click', this._clickHandler, true);
-    };
-  });
+  }
+  static {
+    n(this.prototype, "didInsert", [action]);
+  }
+  willDestroyNode() {
+    if (this._element) {
+      this._element.removeEventListener('close',
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      this.registerOnCloseCallback, true);
+    }
+  }
+  static {
+    n(this.prototype, "willDestroyNode", [action]);
+  }
   open() {
     // Make modal dialog visible using the native `showModal` method
     this._element.showModal();
@@ -166,6 +135,7 @@ class HdsModal extends Component {
   async onDismiss() {
     // allow ember test helpers to be aware of when the `close` event fires
     // when using `click` or other helpers from '@ember/test-helpers'
+    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
     if (this._element.open) {
       const token = waiter.beginAsync();
       const listener = () => {
@@ -177,6 +147,26 @@ class HdsModal extends Component {
 
     // Make modal dialog invisible using the native `close` method
     this._element.close();
+
+    // Reset page `overflow` property
+    if (this._body) {
+      this._body.style.removeProperty('overflow');
+      if (this._bodyInitialOverflowValue === '') {
+        if (this._body.style.length === 0) {
+          this._body.removeAttribute('style');
+        }
+      } else {
+        this._body.style.setProperty('overflow', this._bodyInitialOverflowValue);
+      }
+    }
+
+    // Return focus to a specific element (if provided)
+    if (this.args.returnFocusTo) {
+      const initiator = document.getElementById(this.args.returnFocusTo);
+      if (initiator) {
+        initiator.focus();
+      }
+    }
   }
   static {
     n(this.prototype, "onDismiss", [action]);

package/dist/components/hds/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/hds/modal/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\n\nimport type { WithBoundArgs } from '@glint/template';\nimport type { HdsModalSizes, HdsModalColors } from './types.ts';\n\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport { HdsModalSizeValues, HdsModalColorValues } from './types.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:modal');\n\nexport const DEFAULT_SIZE = HdsModalSizeValues.Medium;\nexport const DEFAULT_COLOR = HdsModalColorValues.Neutral;\n\nexport const SIZES: HdsModalSizes[] = Object.values(HdsModalSizeValues);\nexport const COLORS: HdsModalColors[] = Object.values(HdsModalColorValues);\n\nexport interface HdsModalSignature {\n  Args: {\n    isDismissDisabled?: boolean;\n    size?: HdsModalSizes;\n    color?: HdsModalColors;\n    returnFocusTo?: string;\n    onOpen?: () => void;\n    onClose?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Header?: WithBoundArgs<\n          typeof HdsDialogPrimitiveHeaderComponent,\n          'id' | 'onDismiss' | 'contextualClassPrefix'\n        >;\n        Body?: WithBoundArgs<\n          typeof HdsDialogPrimitiveBodyComponent,\n          'contextualClass'\n        >;\n        Footer?: WithBoundArgs<\n          typeof HdsDialogPrimitiveFooterComponent,\n          'onDismiss' | 'contextualClass'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDialogElement;\n}\n\nexport default class HdsModal extends Component<HdsModalSignature> {\n  @tracked private _isOpen = false;\n  private _element!: HTMLDialogElement;\n  private _body!: HTMLElement;\n  private _bodyInitialOverflowValue = '';\n  private _clickHandler!: (event: MouseEvent) => void;\n\n  get isDismissDisabled(): boolean {\n    return this.args.isDismissDisabled ?? false;\n  }\n\n  get size(): HdsModalSizes {\n    const { size = DEFAULT_SIZE } = this.args;\n\n    assert(\n      `@size for \"Hds::Modal\" must be one of the following: ${SIZES.join(\n        ', '\n      )}; received: ${size}`,\n      SIZES.includes(size)\n    );\n\n    return size;\n  }\n\n  get color(): HdsModalColors {\n    const { color = DEFAULT_COLOR } = this.args;\n\n    assert(\n      `@color for \"Hds::Modal\" must be one of the following: ${COLORS.join(\n        ', '\n      )}; received: ${color}`,\n      COLORS.includes(color)\n    );\n\n    return color;\n  }\n\n  get id(): string {\n    return getElementId(this);\n  }\n\n  get classNames(): string {\n    const classes = ['hds-modal'];\n\n    // add a class based on the @size argument\n    classes.push(`hds-modal--size-${this.size}`);\n\n    // add a class based on the @color argument\n    classes.push(`hds-modal--color-${this.color}`);\n\n    return classes.join(' ');\n  }\n\n  @action registerOnCloseCallback(event: Event): void {\n    if (\n      !this.isDismissDisabled &&\n      this.args.onClose &&\n      typeof this.args.onClose === 'function'\n    ) {\n      this.args.onClose(event);\n    }\n\n    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed\n    if (this.isDismissDisabled) {\n      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail\n      // so we add this safeguard condition that checks for the `<dialog>` to have a parent\n      if (this._element.parentElement) {\n        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function\n        // preserving the state of the modal dialog\n        this._element.showModal();\n      }\n    } else {\n      this._isOpen = false;\n\n      // Reset page `overflow` property\n      if (this._body) {\n        this._body.style.removeProperty('overflow');\n        if (this._bodyInitialOverflowValue === '') {\n          if (this._body.style.length === 0) {\n            this._body.removeAttribute('style');\n          }\n        } else {\n          this._body.style.setProperty(\n            'overflow',\n            this._bodyInitialOverflowValue\n          );\n        }\n      }\n\n      // Return focus to a specific element (if provided)\n      if (this.args.returnFocusTo) {\n        const initiator = document.getElementById(this.args.returnFocusTo);\n        if (initiator) {\n          initiator.focus();\n        }\n      }\n    }\n  }\n\n  private _registerDialog = modifier((element: HTMLDialogElement) => {\n    // Store references of `<dialog>` and `<body>` elements\n    this._element = element;\n    this._body = document.body;\n\n    if (this._body) {\n      // Store the initial `overflow` value of `<body>` so we can reset to it\n      this._bodyInitialOverflowValue =\n        this._body.style.getPropertyValue('overflow');\n    }\n\n    // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n    // If the modal dialog is not already open\n    if (!this._element.open) {\n      this.open();\n    }\n\n    this._clickHandler = (event: MouseEvent) => {\n      // check if the click is outside the modal and the modal is open\n      if (!this._element.contains(event.target as Node) && this._isOpen) {\n        if (!this.isDismissDisabled) {\n          void this.onDismiss();\n        }\n      }\n    };\n\n    document.addEventListener('click', this._clickHandler, {\n      capture: true,\n      passive: false,\n    });\n\n    return () => {\n      // if the <dialog> is removed from the dom while open we emulate the close event\n      if (this._element && this._isOpen) {\n        this._element.dispatchEvent(new Event('close'));\n\n        this._element.removeEventListener(\n          'close',\n          // eslint-disable-next-line @typescript-eslint/unbound-method\n          this.registerOnCloseCallback,\n          true\n        );\n      }\n\n      document.removeEventListener('click', this._clickHandler, true);\n    };\n  });\n\n  @action\n  open(): void {\n    // Make modal dialog visible using the native `showModal` method\n    this._element.showModal();\n    this._isOpen = true;\n\n    // Prevent page from scrolling when the dialog is open\n    if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n    // Call \"onOpen\" callback function\n    if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n      this.args.onOpen();\n    }\n  }\n\n  @action\n  // eslint-disable-next-line @typescript-eslint/require-await\n  async onDismiss(): Promise<void> {\n    // allow ember test helpers to be aware of when the `close` event fires\n    // when using `click` or other helpers from '@ember/test-helpers'\n    if (this._element.open) {\n      const token = waiter.beginAsync();\n      const listener = () => {\n        waiter.endAsync(token);\n        this._element.removeEventListener('close', listener);\n      };\n      this._element.addEventListener('close', listener);\n    }\n\n    // Make modal dialog invisible using the native `close` method\n    this._element.close();\n  }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsModalSizeValues","Medium","DEFAULT_COLOR","HdsModalColorValues","Neutral","SIZES","Object","values","COLORS","HdsModal","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","_clickHandler","isDismissDisabled","args","size","assert","join","includes","color","id","getElementId","classNames","classes","push","registerOnCloseCallback","event","onClose","parentElement","showModal","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","n","action","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","open","contains","target","onDismiss","capture","passive","dispatchEvent","Event","removeEventListener","onOpen","token","beginAsync","listener","endAsync","close","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/modal/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\n\nimport type { WithBoundArgs } from '@glint/template';\nimport type { HdsModalSizes, HdsModalColors } from './types.ts';\n\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport { HdsModalSizeValues, HdsModalColorValues } from './types.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:modal');\n\nexport const DEFAULT_SIZE = HdsModalSizeValues.Medium;\nexport const DEFAULT_COLOR = HdsModalColorValues.Neutral;\n\nexport const SIZES: HdsModalSizes[] = Object.values(HdsModalSizeValues);\nexport const COLORS: HdsModalColors[] = Object.values(HdsModalColorValues);\n\nexport interface HdsModalSignature {\n  Args: {\n    isDismissDisabled?: boolean;\n    size?: HdsModalSizes;\n    color?: HdsModalColors;\n    returnFocusTo?: string;\n    onOpen?: () => void;\n    onClose?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Header?: WithBoundArgs<\n          typeof HdsDialogPrimitiveHeaderComponent,\n          'id' | 'onDismiss' | 'contextualClassPrefix'\n        >;\n        Body?: WithBoundArgs<\n          typeof HdsDialogPrimitiveBodyComponent,\n          'contextualClass'\n        >;\n        Footer?: WithBoundArgs<\n          typeof HdsDialogPrimitiveFooterComponent,\n          'onDismiss' | 'contextualClass'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDialogElement;\n}\n\nexport default class HdsModal extends Component<HdsModalSignature> {\n  @tracked private _isOpen = false;\n  private _element!: HTMLDialogElement;\n  private _body!: HTMLElement;\n  private _bodyInitialOverflowValue = '';\n\n  get isDismissDisabled(): boolean {\n    return this.args.isDismissDisabled ?? false;\n  }\n\n  get size(): HdsModalSizes {\n    const { size = DEFAULT_SIZE } = this.args;\n\n    assert(\n      `@size for \"Hds::Modal\" must be one of the following: ${SIZES.join(\n        ', '\n      )}; received: ${size}`,\n      SIZES.includes(size)\n    );\n\n    return size;\n  }\n\n  get color(): HdsModalColors {\n    const { color = DEFAULT_COLOR } = this.args;\n\n    assert(\n      `@color for \"Hds::Modal\" must be one of the following: ${COLORS.join(\n        ', '\n      )}; received: ${color}`,\n      COLORS.includes(color)\n    );\n\n    return color;\n  }\n\n  get id(): string {\n    return getElementId(this);\n  }\n\n  get classNames(): string {\n    const classes = ['hds-modal'];\n\n    // add a class based on the @size argument\n    classes.push(`hds-modal--size-${this.size}`);\n\n    // add a class based on the @color argument\n    classes.push(`hds-modal--color-${this.color}`);\n\n    return classes.join(' ');\n  }\n\n  @action registerOnCloseCallback(event: Event): void {\n    if (\n      !this.isDismissDisabled &&\n      this.args.onClose &&\n      typeof this.args.onClose === 'function'\n    ) {\n      this.args.onClose(event);\n    }\n\n    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed\n    if (this.isDismissDisabled) {\n      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail\n      // so we add this safeguard condition that checks for the `<dialog>` to have a parent\n      if (this._element.parentElement) {\n        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function\n        // preserving the state of the modal dialog\n        this._element.showModal();\n      }\n    } else {\n      this._isOpen = false;\n    }\n  }\n\n  @action\n  didInsert(element: HTMLDialogElement): void {\n    // Store references of `<dialog>` and `<body>` elements\n    this._element = element;\n    this._body = document.body;\n\n    if (this._body) {\n      // Store the initial `overflow` value of `<body>` so we can reset to it\n      this._bodyInitialOverflowValue =\n        this._body.style.getPropertyValue('overflow');\n    }\n\n    // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n    // If the modal dialog is not already open\n    if (!this._element.open) {\n      this.open();\n    }\n  }\n\n  @action\n  willDestroyNode(): void {\n    if (this._element) {\n      this._element.removeEventListener(\n        'close',\n        // eslint-disable-next-line @typescript-eslint/unbound-method\n        this.registerOnCloseCallback,\n        true\n      );\n    }\n  }\n\n  @action\n  open(): void {\n    // Make modal dialog visible using the native `showModal` method\n    this._element.showModal();\n    this._isOpen = true;\n\n    // Prevent page from scrolling when the dialog is open\n    if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n    // Call \"onOpen\" callback function\n    if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n      this.args.onOpen();\n    }\n  }\n\n  @action\n  // eslint-disable-next-line @typescript-eslint/require-await\n  async onDismiss(): Promise<void> {\n    // allow ember test helpers to be aware of when the `close` event fires\n    // when using `click` or other helpers from '@ember/test-helpers'\n    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)\n    if (this._element.open) {\n      const token = waiter.beginAsync();\n      const listener = () => {\n        waiter.endAsync(token);\n        this._element.removeEventListener('close', listener);\n      };\n      this._element.addEventListener('close', listener);\n    }\n\n    // Make modal dialog invisible using the native `close` method\n    this._element.close();\n\n    // Reset page `overflow` property\n    if (this._body) {\n      this._body.style.removeProperty('overflow');\n      if (this._bodyInitialOverflowValue === '') {\n        if (this._body.style.length === 0) {\n          this._body.removeAttribute('style');\n        }\n      } else {\n        this._body.style.setProperty(\n          'overflow',\n          this._bodyInitialOverflowValue\n        );\n      }\n    }\n\n    // Return focus to a specific element (if provided)\n    if (this.args.returnFocusTo) {\n      const initiator = document.getElementById(this.args.returnFocusTo);\n      if (initiator) {\n        initiator.focus();\n      }\n    }\n  }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsModalSizeValues","Medium","DEFAULT_COLOR","HdsModalColorValues","Neutral","SIZES","Object","values","COLORS","HdsModal","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","isDismissDisabled","args","size","assert","join","includes","color","id","getElementId","classNames","classes","push","registerOnCloseCallback","event","onClose","parentElement","showModal","_isOpen","n","action","didInsert","element","document","body","style","getPropertyValue","addEventListener","open","willDestroyNode","removeEventListener","setProperty","onOpen","onDismiss","token","beginAsync","listener","endAsync","close","removeProperty","length","removeAttribute","returnFocusTo","initiator","getElementById","focus","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.24.0-rc-20250924193913",
+  "version": "4.24.0-rc-20250930153835",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,7 +35,7 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/util": "^1.13.4",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "3.0.0-rc-20250924193913",
+    "@hashicorp/design-system-tokens": "3.0.0-rc-20250930153835",
     "@hashicorp/flight-icons": "^3.13.0",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",