npm - @hashicorp/design-system-components - Versions diffs - 6.2.0-rc-20260501023914 → 6.2.0 - Mend

@hashicorp/design-system-components 6.2.0-rc-20260501023914 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/dist/components/hds/app-side-nav/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/hds/app-side-nav/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { registerDestructor } from '@ember/destroyable';\nimport { modifier } from 'ember-modifier';\nimport { on } from '@ember/modifier';\nimport { fn } from '@ember/helper';\nimport { focusTrap } from 'ember-focus-trap';\n\nimport type Owner from '@ember/owner';\n\nimport { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts';\nimport hdsT from '../../../helpers/hds-t.ts';\nimport HdsAppSideNavToggleButton from './toggle-button.gts';\n\nexport interface HdsAppSideNavSignature {\n Args: {\n isResponsive?: boolean;\n isCollapsible?: boolean;\n isMinimized?: boolean;\n breakpoint?: string;\n onToggleMinimizedStatus?: (arg: boolean) => void;\n onDesktopViewportChange?: (arg: boolean) => void;\n };\n Blocks: {\n default?: [];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {\n @tracked private _isMinimized;\n @tracked private _isAnimating = false;\n @tracked private _isDesktop = true;\n\n private _body!: HTMLElement;\n private _bodyInitialOverflowValue = '';\n private _desktopMQ: MediaQueryList;\n private _navWrapperBody!: HTMLElement;\n\n // we use the `lg` breakpoint for `desktop` viewports, but consumers can override its value\n private _desktopMQVal = this.args.breakpoint ?? hdsBreakpoints['lg'].px;\n\n constructor(owner: Owner, args: HdsAppSideNavSignature['Args']) {\n super(owner, args);\n this._isMinimized = this.args.isMinimized ?? false; // sets the default state on 'desktop' viewports\n this._desktopMQ = window.matchMedia(`(min-width:${this._desktopMQVal})`);\n this.addEventListeners();\n registerDestructor(this, (): void => {\n this.removeEventListeners();\n });\n }\n\n private _setUpBodyElement = modifier((): void => {\n this._body = document.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 private _setUpNavWrapperBody = modifier((element: HTMLElement) => {\n this._navWrapperBody = element;\n });\n\n addEventListeners(): void {\n document.addEventListener('keydown', this.escapePress, true);\n this._desktopMQ.addEventListener(\n 'change',\n\n this.updateDesktopVariable,\n true\n );\n // if not instantiated as minimized via arguments\n if (!this.args.isMinimized) {\n // set initial state based on viewport using a \"synthetic\" event\n const syntheticEvent = new MediaQueryListEvent('change', {\n matches: this._desktopMQ.matches,\n media: this._desktopMQ.media,\n });\n this.updateDesktopVariable(syntheticEvent);\n }\n }\n\n removeEventListeners(): void {\n document.removeEventListener('keydown', this.escapePress, true);\n this._desktopMQ.removeEventListener(\n 'change',\n\n this.updateDesktopVariable,\n true\n );\n }\n\n // controls if the component reacts to viewport changes\n get isResponsive(): boolean {\n return this.args.isResponsive ?? true;\n }\n\n // controls if users can collapse the appsidenav on 'desktop' viewports\n get isCollapsible(): boolean {\n return this.args.isCollapsible ?? false;\n }\n\n get isMobileCollapsible(): boolean {\n return this.isResponsive && !this._isDesktop;\n }\n\n // traps focus if isResponsive is enabled and it's in mobile view with side nav expanded (overlaying content)\n get shouldTrapFocus(): boolean {\n return this.isResponsive && !this._isDesktop && !this._isMinimized;\n }\n\n get showToggleButton(): boolean {\n return (this.isResponsive && !this._isDesktop) \|\| this.isCollapsible;\n }\n\n get classNames(): string {\n const classes = [`hds-app-side-nav`];\n\n // add specific class names for the different possible states\n if (this.isResponsive) {\n classes.push('hds-app-side-nav--is-responsive');\n }\n if (!this._isDesktop && this.isResponsive) {\n classes.push('hds-app-side-nav--is-mobile');\n } else {\n classes.push('hds-app-side-nav--is-desktop');\n }\n if (this._isMinimized && this.isResponsive) {\n classes.push('hds-app-side-nav--is-minimized');\n } else {\n classes.push('hds-app-side-nav--is-not-minimized');\n }\n if (this._isAnimating) {\n classes.push('hds-app-side-nav--is-animating');\n }\n\n return classes.join(' ');\n }\n\n synchronizeInert = (): void => {\n if (this._isMinimized) {\n this._navWrapperBody?.setAttribute('inert', '');\n } else {\n this._navWrapperBody?.removeAttribute('inert');\n }\n };\n\n lockBodyScroll = (): void => {\n if (this._body) {\n // Prevent page from scrolling when the dialog is open\n this._body.style.setProperty('overflow', 'hidden');\n }\n };\n\n unlockBodyScroll = (): void => {\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\n escapePress = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && !this._isMinimized && !this._isDesktop) {\n this._isMinimized = true;\n this.synchronizeInert();\n this.unlockBodyScroll();\n }\n };\n\n toggleMinimizedStatus = (): void => {\n this._isMinimized = !this._isMinimized;\n this.synchronizeInert();\n\n const { onToggleMinimizedStatus } = this.args;\n\n if (typeof onToggleMinimizedStatus === 'function') {\n onToggleMinimizedStatus(this._isMinimized);\n }\n\n if (!this._isDesktop) {\n if (this._isMinimized) {\n this.unlockBodyScroll();\n } else {\n this.lockBodyScroll();\n }\n }\n };\n\n setTransition = (phase: string, event: TransitionEvent): void => {\n // we only want to respond to `width` animation/transitions\n if (event.propertyName !== 'width') {\n return;\n }\n if (phase === 'start') {\n this._isAnimating = true;\n } else {\n this._isAnimating = false;\n }\n };\n\n updateDesktopVariable = (event: MediaQueryListEvent): void => {\n this._isDesktop = event.matches;\n\n // automatically minimize on narrow viewports (when not in desktop mode)\n this._isMinimized = !this._isDesktop;\n\n this.synchronizeInert();\n\n if (this._isDesktop) {\n // make sure scrolling is enabled if the user resizes the window from mobile to desktop\n this.unlockBodyScroll();\n }\n\n const { onDesktopViewportChange } = this.args;\n\n if (typeof onDesktopViewportChange === 'function') {\n onDesktopViewportChange(this._isDesktop);\n }\n };\n\n <template>\n {{! IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}\n <div\n class={{this.classNames}}\n ...attributes\n role={{if this.isMobileCollapsible \"dialog\"}}\n aria-labelledby={{if this.isMobileCollapsible \"hds-app-side-nav-header\"}}\n aria-modal={{if this.isMobileCollapsible \"true\"}}\n {{on \"transitionstart\" (fn this.setTransition \"start\")}}\n {{on \"transitionend\" (fn this.setTransition \"end\")}}\n {{focusTrap isActive=this.shouldTrapFocus}}\n {{this._setUpBodyElement}}\n >\n <h2 class=\"sr-only\" id=\"hds-app-side-nav-header\">\n {{hdsT\n \"hds.components.app-side-nav.screen-reader-label\"\n default=\"Application local navigation\"\n }}\n </h2>\n\n <div class=\"hds-app-side-nav__wrapper\">\n {{#if this.showToggleButton}}\n {{! template-lint-disable no-invalid-interactive}}\n <div\n class=\"hds-app-side-nav__overlay\"\n {{on \"click\" this.toggleMinimizedStatus}}\n />\n {{! template-lint-enable no-invalid-interactive}}\n <HdsAppSideNavToggleButton\n aria-labelledby=\"hds-app-side-nav-header\"\n aria-expanded={{if this._isMinimized \"false\" \"true\"}}\n @icon={{if this._isMinimized \"chevrons-right\" \"chevrons-left\"}}\n {{on \"click\" this.toggleMinimizedStatus}}\n />\n {{/if}}\n\n <div\n class=\"hds-app-side-nav__wrapper-body\"\n {{this._setUpNavWrapperBody}}\n >\n {{~yield~}}\n </div>\n </div>\n </div>\n </template>\n}\n"],"names":["HdsAppSideNav","Component","g","prototype","tracked","i","_body","_bodyInitialOverflowValue","_desktopMQ","_navWrapperBody","_desktopMQVal","args","breakpoint","hdsBreakpoints","px","constructor","owner","_isMinimized","isMinimized","window","matchMedia","addEventListeners","registerDestructor","removeEventListeners","_setUpBodyElement","modifier","document","body","style","getPropertyValue","_setUpNavWrapperBody","element","addEventListener","escapePress","updateDesktopVariable","syntheticEvent","MediaQueryListEvent","matches","media","removeEventListener","isResponsive","isCollapsible","isMobileCollapsible","_isDesktop","shouldTrapFocus","showToggleButton","classNames","classes","push","_isAnimating","join","synchronizeInert","setAttribute","removeAttribute","lockBodyScroll","setProperty","unlockBodyScroll","removeProperty","length","event","key","toggleMinimizedStatus","onToggleMinimizedStatus","setTransition","phase","propertyName","onDesktopViewportChange","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","focusTrap","hdsT","HdsAppSideNavToggleButton"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/hds/app-side-nav/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { registerDestructor } from '@ember/destroyable';\nimport { modifier } from 'ember-modifier';\nimport { on } from '@ember/modifier';\nimport { fn } from '@ember/helper';\n// @ts-expect-error: missing types https://github.com/josemarluedke/ember-focus-trap/issues/86\nimport focusTrap from 'ember-focus-trap/modifiers/focus-trap';\n\nimport type Owner from '@ember/owner';\n\nimport { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts';\nimport hdsT from '../../../helpers/hds-t.ts';\nimport HdsAppSideNavToggleButton from './toggle-button.gts';\n\nexport interface HdsAppSideNavSignature {\n Args: {\n isResponsive?: boolean;\n isCollapsible?: boolean;\n isMinimized?: boolean;\n breakpoint?: string;\n onToggleMinimizedStatus?: (arg: boolean) => void;\n onDesktopViewportChange?: (arg: boolean) => void;\n };\n Blocks: {\n default?: [];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {\n @tracked private _isMinimized;\n @tracked private _isAnimating = false;\n @tracked private _isDesktop = true;\n\n private _body!: HTMLElement;\n private _bodyInitialOverflowValue = '';\n private _desktopMQ: MediaQueryList;\n private _navWrapperBody!: HTMLElement;\n\n // we use the `lg` breakpoint for `desktop` viewports, but consumers can override its value\n private _desktopMQVal = this.args.breakpoint ?? hdsBreakpoints['lg'].px;\n\n constructor(owner: Owner, args: HdsAppSideNavSignature['Args']) {\n super(owner, args);\n this._isMinimized = this.args.isMinimized ?? false; // sets the default state on 'desktop' viewports\n this._desktopMQ = window.matchMedia(`(min-width:${this._desktopMQVal})`);\n this.addEventListeners();\n registerDestructor(this, (): void => {\n this.removeEventListeners();\n });\n }\n\n private _setUpBodyElement = modifier((): void => {\n this._body = document.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 private _setUpNavWrapperBody = modifier((element: HTMLElement) => {\n this._navWrapperBody = element;\n });\n\n addEventListeners(): void {\n document.addEventListener('keydown', this.escapePress, true);\n this._desktopMQ.addEventListener(\n 'change',\n\n this.updateDesktopVariable,\n true\n );\n // if not instantiated as minimized via arguments\n if (!this.args.isMinimized) {\n // set initial state based on viewport using a \"synthetic\" event\n const syntheticEvent = new MediaQueryListEvent('change', {\n matches: this._desktopMQ.matches,\n media: this._desktopMQ.media,\n });\n this.updateDesktopVariable(syntheticEvent);\n }\n }\n\n removeEventListeners(): void {\n document.removeEventListener('keydown', this.escapePress, true);\n this._desktopMQ.removeEventListener(\n 'change',\n\n this.updateDesktopVariable,\n true\n );\n }\n\n // controls if the component reacts to viewport changes\n get isResponsive(): boolean {\n return this.args.isResponsive ?? true;\n }\n\n // controls if users can collapse the appsidenav on 'desktop' viewports\n get isCollapsible(): boolean {\n return this.args.isCollapsible ?? false;\n }\n\n get isMobileCollapsible(): boolean {\n return this.isResponsive && !this._isDesktop;\n }\n\n // traps focus if isResponsive is enabled and it's in mobile view with side nav expanded (overlaying content)\n get shouldTrapFocus(): boolean {\n return this.isResponsive && !this._isDesktop && !this._isMinimized;\n }\n\n get showToggleButton(): boolean {\n return (this.isResponsive && !this._isDesktop) \|\| this.isCollapsible;\n }\n\n get classNames(): string {\n const classes = [`hds-app-side-nav`];\n\n // add specific class names for the different possible states\n if (this.isResponsive) {\n classes.push('hds-app-side-nav--is-responsive');\n }\n if (!this._isDesktop && this.isResponsive) {\n classes.push('hds-app-side-nav--is-mobile');\n } else {\n classes.push('hds-app-side-nav--is-desktop');\n }\n if (this._isMinimized && this.isResponsive) {\n classes.push('hds-app-side-nav--is-minimized');\n } else {\n classes.push('hds-app-side-nav--is-not-minimized');\n }\n if (this._isAnimating) {\n classes.push('hds-app-side-nav--is-animating');\n }\n\n return classes.join(' ');\n }\n\n synchronizeInert = (): void => {\n if (this._isMinimized) {\n this._navWrapperBody?.setAttribute('inert', '');\n } else {\n this._navWrapperBody?.removeAttribute('inert');\n }\n };\n\n lockBodyScroll = (): void => {\n if (this._body) {\n // Prevent page from scrolling when the dialog is open\n this._body.style.setProperty('overflow', 'hidden');\n }\n };\n\n unlockBodyScroll = (): void => {\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\n escapePress = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && !this._isMinimized && !this._isDesktop) {\n this._isMinimized = true;\n this.synchronizeInert();\n this.unlockBodyScroll();\n }\n };\n\n toggleMinimizedStatus = (): void => {\n this._isMinimized = !this._isMinimized;\n this.synchronizeInert();\n\n const { onToggleMinimizedStatus } = this.args;\n\n if (typeof onToggleMinimizedStatus === 'function') {\n onToggleMinimizedStatus(this._isMinimized);\n }\n\n if (!this._isDesktop) {\n if (this._isMinimized) {\n this.unlockBodyScroll();\n } else {\n this.lockBodyScroll();\n }\n }\n };\n\n setTransition = (phase: string, event: TransitionEvent): void => {\n // we only want to respond to `width` animation/transitions\n if (event.propertyName !== 'width') {\n return;\n }\n if (phase === 'start') {\n this._isAnimating = true;\n } else {\n this._isAnimating = false;\n }\n };\n\n updateDesktopVariable = (event: MediaQueryListEvent): void => {\n this._isDesktop = event.matches;\n\n // automatically minimize on narrow viewports (when not in desktop mode)\n this._isMinimized = !this._isDesktop;\n\n this.synchronizeInert();\n\n if (this._isDesktop) {\n // make sure scrolling is enabled if the user resizes the window from mobile to desktop\n this.unlockBodyScroll();\n }\n\n const { onDesktopViewportChange } = this.args;\n\n if (typeof onDesktopViewportChange === 'function') {\n onDesktopViewportChange(this._isDesktop);\n }\n };\n\n <template>\n {{! IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}\n <div\n class={{this.classNames}}\n ...attributes\n role={{if this.isMobileCollapsible \"dialog\"}}\n aria-labelledby={{if this.isMobileCollapsible \"hds-app-side-nav-header\"}}\n aria-modal={{if this.isMobileCollapsible \"true\"}}\n {{on \"transitionstart\" (fn this.setTransition \"start\")}}\n {{on \"transitionend\" (fn this.setTransition \"end\")}}\n {{focusTrap isActive=this.shouldTrapFocus}}\n {{this._setUpBodyElement}}\n >\n <h2 class=\"sr-only\" id=\"hds-app-side-nav-header\">\n {{hdsT\n \"hds.components.app-side-nav.screen-reader-label\"\n default=\"Application local navigation\"\n }}\n </h2>\n\n <div class=\"hds-app-side-nav__wrapper\">\n {{#if this.showToggleButton}}\n {{! template-lint-disable no-invalid-interactive}}\n <div\n class=\"hds-app-side-nav__overlay\"\n {{on \"click\" this.toggleMinimizedStatus}}\n />\n {{! template-lint-enable no-invalid-interactive}}\n <HdsAppSideNavToggleButton\n aria-labelledby=\"hds-app-side-nav-header\"\n aria-expanded={{if this._isMinimized \"false\" \"true\"}}\n @icon={{if this._isMinimized \"chevrons-right\" \"chevrons-left\"}}\n {{on \"click\" this.toggleMinimizedStatus}}\n />\n {{/if}}\n\n <div\n class=\"hds-app-side-nav__wrapper-body\"\n {{this._setUpNavWrapperBody}}\n >\n {{~yield~}}\n </div>\n </div>\n </div>\n </template>\n}\n"],"names":["HdsAppSideNav","Component","g","prototype","tracked","i","_body","_bodyInitialOverflowValue","_desktopMQ","_navWrapperBody","_desktopMQVal","args","breakpoint","hdsBreakpoints","px","constructor","owner","_isMinimized","isMinimized","window","matchMedia","addEventListeners","registerDestructor","removeEventListeners","_setUpBodyElement","modifier","document","body","style","getPropertyValue","_setUpNavWrapperBody","element","addEventListener","escapePress","updateDesktopVariable","syntheticEvent","MediaQueryListEvent","matches","media","removeEventListener","isResponsive","isCollapsible","isMobileCollapsible","_isDesktop","shouldTrapFocus","showToggleButton","classNames","classes","push","_isAnimating","join","synchronizeInert","setAttribute","removeAttribute","lockBodyScroll","setProperty","unlockBodyScroll","removeProperty","length","event","key","toggleMinimizedStatus","onToggleMinimizedStatus","setTransition","phase","propertyName","onDesktopViewportChange","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","focusTrap","hdsT","HdsAppSideNavToggleButton"],"mappings":"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"}

package/dist/components/hds/code-editor/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { hash } from '@ember/helper';
 import { modifier } from 'ember-modifier';
 import { or } from 'ember-truth-helpers';
 import { tracked } from '@glimmer/tracking';
-import { focusTrap } from 'ember-focus-trap';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
 import HdsCodeEditorModifier from '../../../modifiers/hds-code-editor.js';
 import HdsCodeEditorDescription from './description.js';
 import HdsCodeEditorFullScreenButton from './full-screen-button.js';

package/dist/components/hds/code-editor/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/hds/code-editor/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { hash } from '@ember/helper';\nimport { modifier } from 'ember-modifier';\nimport { or } from 'ember-truth-helpers';\nimport { tracked } from '@glimmer/tracking';\nimport { focusTrap } from 'ember-focus-trap';\n\nimport type { EditorView } from '@codemirror/view';\nimport type { WithBoundArgs } from '@glint/template';\nimport type Owner from '@ember/owner';\n\nimport hdsCodeEditorModifier from '../../../modifiers/hds-code-editor.ts';\nimport HdsCodeEditorDescription from './description.gts';\nimport HdsCodeEditorFullScreenButton from './full-screen-button.gts';\nimport HdsCodeEditorGeneric from './generic.gts';\nimport HdsCodeEditorTitle from './title.gts';\nimport HdsCopyButton from '../copy/button/index.gts';\nimport HdsIcon from '../icon/index.gts';\nimport hdsT from '../../../helpers/hds-t.ts';\n\nimport type { HdsCodeEditorDescriptionSignature } from './description.gts';\nimport type { HdsCodeEditorSignature as HdsCodeEditorModifierSignature } from '../../../modifiers/hds-code-editor.ts';\nimport type { HdsCodeEditorTitleSignature } from './title.gts';\nimport type { HdsCopyButtonSignature } from '../copy/button/index.gts';\n\nexport interface HdsCodeEditorSignature {\n Args: {\n hasCopyButton?: boolean;\n hasFullScreenButton?: boolean;\n isStandalone?: boolean;\n copyButtonText?: HdsCopyButtonSignature['Args']['text'];\n } & HdsCodeEditorModifierSignature['Args']['Named'];\n Blocks: {\n default: [\n {\n Title?: WithBoundArgs<\n typeof HdsCodeEditorTitle,\n 'onInsert' \| 'editorId'\n >;\n Description?: WithBoundArgs<\n typeof HdsCodeEditorDescription,\n 'onInsert' \| 'editorId'\n >;\n Generic?: typeof HdsCodeEditorGeneric;\n },\n ];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {\n @tracked private _isFullScreen = false;\n @tracked private _isSetupComplete = false;\n @tracked private _value;\n @tracked private _titleId: string \| undefined;\n @tracked private _descriptionId: string \| undefined;\n\n private _id = guidFor(this);\n\n private _handleEscape = modifier(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' \|\| !this._isFullScreen) {\n return;\n }\n\n this.toggleFullScreen();\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n });\n\n constructor(owner: Owner, args: HdsCodeEditorSignature['Args']) {\n super(owner, args);\n\n if (args.value) {\n this._value = args.value;\n }\n }\n\n get ariaLabelledBy(): string \| undefined {\n if (this.args.ariaLabel !== undefined) {\n return;\n }\n\n return this.args.ariaLabelledBy ?? this._titleId;\n }\n\n get ariaDescribedBy(): string \| undefined {\n return this.args.ariaDescribedBy ?? this._descriptionId;\n }\n\n get hasActions(): boolean {\n return (this.args.hasCopyButton \|\| this.args.hasFullScreenButton) ?? false;\n }\n\n get isStandalone(): boolean {\n return this.args.isStandalone ?? true;\n }\n\n get classNames(): string {\n // Currently there is only one theme so the class name is hard-coded.\n // In the future, additional themes such as a \"light\" theme could be added.\n const classes = ['hds-code-editor', 'hds-code-editor--theme-dark'];\n\n if (this._isFullScreen) {\n classes.push('hds-code-editor--is-full-screen');\n }\n\n if (this.isStandalone) {\n classes.push('hds-code-editor--is-standalone');\n }\n\n return classes.join(' ');\n }\n\n get copyButtonText(): HdsCopyButtonSignature['Args']['text'] {\n return this.args.copyButtonText ? this.args.copyButtonText : 'Copy';\n }\n\n registerTitleElement = (\n element: HdsCodeEditorTitleSignature['Element']\n ): void => {\n this._titleId = element.id;\n };\n\n registerDescriptionElement = (\n element: HdsCodeEditorDescriptionSignature['Element']\n ): void => {\n this._descriptionId = element.id;\n };\n\n toggleFullScreen = (): void => {\n this._isFullScreen = !this._isFullScreen;\n };\n\n onInput = (newValue: string, editorView: EditorView): void => {\n this._value = newValue;\n this.args.onInput?.(newValue, editorView);\n };\n\n onKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && this._isFullScreen) {\n this.toggleFullScreen();\n }\n };\n\n onSetup = (editorView: EditorView): void => {\n this._isSetupComplete = true;\n this.args.onSetup?.(editorView);\n };\n\n <template>\n <div\n id={{this._id}}\n class={{this.classNames}}\n {{focusTrap isActive=this._isFullScreen}}\n {{this._handleEscape}}\n ...attributes\n >\n {{! header }}\n {{#if (or this.hasActions (has-block))}}\n <div class=\"hds-code-editor__header\">\n <div class=\"hds-code-editor__header-content\">\n {{yield\n (hash\n Title=(component\n HdsCodeEditorTitle\n editorId=this._id\n onInsert=this.registerTitleElement\n )\n Description=(component\n HdsCodeEditorDescription\n editorId=this._id\n onInsert=this.registerDescriptionElement\n )\n Generic=HdsCodeEditorGeneric\n )\n }}\n </div>\n\n {{#if this.hasActions}}\n <div class=\"hds-code-editor__header-actions\">\n {{#if @hasCopyButton}}\n <HdsCopyButton\n class=\"hds-code-editor__button hds-code-editor__copy-button\"\n @isIconOnly={{true}}\n @size=\"small\"\n @text={{this.copyButtonText}}\n @textToCopy={{this._value}}\n />\n {{/if}}\n {{#if @hasFullScreenButton}}\n <HdsCodeEditorFullScreenButton\n @isFullScreen={{this._isFullScreen}}\n @onToggleFullScreen={{this.toggleFullScreen}}\n />\n {{/if}}\n </div>\n {{/if}}\n </div>\n {{/if}}\n\n {{! editor }}\n <div\n class=\"hds-code-editor__editor\"\n {{hdsCodeEditorModifier\n ariaDescribedBy=this.ariaDescribedBy\n ariaLabel=@ariaLabel\n ariaLabelledBy=this.ariaLabelledBy\n customExtensions=@customExtensions\n cspNonce=@cspNonce\n extraKeys=@extraKeys\n hasLineWrapping=@hasLineWrapping\n isLintingEnabled=@isLintingEnabled\n language=@language\n value=@value\n onBlur=@onBlur\n onInput=this.onInput\n onSetup=this.onSetup\n onLint=@onLint\n }}\n />\n\n {{! loader }}\n {{#unless this._isSetupComplete}}\n <div class=\"hds-code-editor__loader\" aria-live=\"polite\" role=\"status\">\n <HdsIcon @name=\"loading\" @size=\"24\" />\n <span class=\"sr-only\">{{hdsT\n \"hds.components.common.loading\"\n default=\"Loading\"\n }}</span>\n </div>\n {{/unless}}\n </div>\n </template>\n}\n"],"names":["HdsCodeEditor","Component","g","prototype","tracked","i","_id","guidFor","_handleEscape","modifier","handleKeyDown","event","key","_isFullScreen","toggleFullScreen","document","addEventListener","removeEventListener","constructor","owner","args","value","_value","ariaLabelledBy","ariaLabel","undefined","_titleId","ariaDescribedBy","_descriptionId","hasActions","hasCopyButton","hasFullScreenButton","isStandalone","classNames","classes","push","join","copyButtonText","registerTitleElement","element","id","registerDescriptionElement","onInput","newValue","editorView","onKeyDown","onSetup","_isSetupComplete","setComponentTemplate","precompileTemplate","strictMode","scope","focusTrap","or","hash","HdsCodeEditorTitle","HdsCodeEditorDescription","HdsCodeEditorGeneric","HdsCopyButton","HdsCodeEditorFullScreenButton","hdsCodeEditorModifier","HdsIcon","hdsT"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/hds/code-editor/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { hash } from '@ember/helper';\nimport { modifier } from 'ember-modifier';\nimport { or } from 'ember-truth-helpers';\nimport { tracked } from '@glimmer/tracking';\n// @ts-expect-error: missing types https://github.com/josemarluedke/ember-focus-trap/issues/86\nimport focusTrap from 'ember-focus-trap/modifiers/focus-trap';\n\nimport type { EditorView } from '@codemirror/view';\nimport type { WithBoundArgs } from '@glint/template';\nimport type Owner from '@ember/owner';\n\nimport hdsCodeEditorModifier from '../../../modifiers/hds-code-editor.ts';\nimport HdsCodeEditorDescription from './description.gts';\nimport HdsCodeEditorFullScreenButton from './full-screen-button.gts';\nimport HdsCodeEditorGeneric from './generic.gts';\nimport HdsCodeEditorTitle from './title.gts';\nimport HdsCopyButton from '../copy/button/index.gts';\nimport HdsIcon from '../icon/index.gts';\nimport hdsT from '../../../helpers/hds-t.ts';\n\nimport type { HdsCodeEditorDescriptionSignature } from './description.gts';\nimport type { HdsCodeEditorSignature as HdsCodeEditorModifierSignature } from '../../../modifiers/hds-code-editor.ts';\nimport type { HdsCodeEditorTitleSignature } from './title.gts';\nimport type { HdsCopyButtonSignature } from '../copy/button/index.gts';\n\nexport interface HdsCodeEditorSignature {\n Args: {\n hasCopyButton?: boolean;\n hasFullScreenButton?: boolean;\n isStandalone?: boolean;\n copyButtonText?: HdsCopyButtonSignature['Args']['text'];\n } & HdsCodeEditorModifierSignature['Args']['Named'];\n Blocks: {\n default: [\n {\n Title?: WithBoundArgs<\n typeof HdsCodeEditorTitle,\n 'onInsert' \| 'editorId'\n >;\n Description?: WithBoundArgs<\n typeof HdsCodeEditorDescription,\n 'onInsert' \| 'editorId'\n >;\n Generic?: typeof HdsCodeEditorGeneric;\n },\n ];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {\n @tracked private _isFullScreen = false;\n @tracked private _isSetupComplete = false;\n @tracked private _value;\n @tracked private _titleId: string \| undefined;\n @tracked private _descriptionId: string \| undefined;\n\n private _id = guidFor(this);\n\n private _handleEscape = modifier(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' \|\| !this._isFullScreen) {\n return;\n }\n\n this.toggleFullScreen();\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n });\n\n constructor(owner: Owner, args: HdsCodeEditorSignature['Args']) {\n super(owner, args);\n\n if (args.value) {\n this._value = args.value;\n }\n }\n\n get ariaLabelledBy(): string \| undefined {\n if (this.args.ariaLabel !== undefined) {\n return;\n }\n\n return this.args.ariaLabelledBy ?? this._titleId;\n }\n\n get ariaDescribedBy(): string \| undefined {\n return this.args.ariaDescribedBy ?? this._descriptionId;\n }\n\n get hasActions(): boolean {\n return (this.args.hasCopyButton \|\| this.args.hasFullScreenButton) ?? false;\n }\n\n get isStandalone(): boolean {\n return this.args.isStandalone ?? true;\n }\n\n get classNames(): string {\n // Currently there is only one theme so the class name is hard-coded.\n // In the future, additional themes such as a \"light\" theme could be added.\n const classes = ['hds-code-editor', 'hds-code-editor--theme-dark'];\n\n if (this._isFullScreen) {\n classes.push('hds-code-editor--is-full-screen');\n }\n\n if (this.isStandalone) {\n classes.push('hds-code-editor--is-standalone');\n }\n\n return classes.join(' ');\n }\n\n get copyButtonText(): HdsCopyButtonSignature['Args']['text'] {\n return this.args.copyButtonText ? this.args.copyButtonText : 'Copy';\n }\n\n registerTitleElement = (\n element: HdsCodeEditorTitleSignature['Element']\n ): void => {\n this._titleId = element.id;\n };\n\n registerDescriptionElement = (\n element: HdsCodeEditorDescriptionSignature['Element']\n ): void => {\n this._descriptionId = element.id;\n };\n\n toggleFullScreen = (): void => {\n this._isFullScreen = !this._isFullScreen;\n };\n\n onInput = (newValue: string, editorView: EditorView): void => {\n this._value = newValue;\n this.args.onInput?.(newValue, editorView);\n };\n\n onKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && this._isFullScreen) {\n this.toggleFullScreen();\n }\n };\n\n onSetup = (editorView: EditorView): void => {\n this._isSetupComplete = true;\n this.args.onSetup?.(editorView);\n };\n\n <template>\n <div\n id={{this._id}}\n class={{this.classNames}}\n {{focusTrap isActive=this._isFullScreen}}\n {{this._handleEscape}}\n ...attributes\n >\n {{! header }}\n {{#if (or this.hasActions (has-block))}}\n <div class=\"hds-code-editor__header\">\n <div class=\"hds-code-editor__header-content\">\n {{yield\n (hash\n Title=(component\n HdsCodeEditorTitle\n editorId=this._id\n onInsert=this.registerTitleElement\n )\n Description=(component\n HdsCodeEditorDescription\n editorId=this._id\n onInsert=this.registerDescriptionElement\n )\n Generic=HdsCodeEditorGeneric\n )\n }}\n </div>\n\n {{#if this.hasActions}}\n <div class=\"hds-code-editor__header-actions\">\n {{#if @hasCopyButton}}\n <HdsCopyButton\n class=\"hds-code-editor__button hds-code-editor__copy-button\"\n @isIconOnly={{true}}\n @size=\"small\"\n @text={{this.copyButtonText}}\n @textToCopy={{this._value}}\n />\n {{/if}}\n {{#if @hasFullScreenButton}}\n <HdsCodeEditorFullScreenButton\n @isFullScreen={{this._isFullScreen}}\n @onToggleFullScreen={{this.toggleFullScreen}}\n />\n {{/if}}\n </div>\n {{/if}}\n </div>\n {{/if}}\n\n {{! editor }}\n <div\n class=\"hds-code-editor__editor\"\n {{hdsCodeEditorModifier\n ariaDescribedBy=this.ariaDescribedBy\n ariaLabel=@ariaLabel\n ariaLabelledBy=this.ariaLabelledBy\n customExtensions=@customExtensions\n cspNonce=@cspNonce\n extraKeys=@extraKeys\n hasLineWrapping=@hasLineWrapping\n isLintingEnabled=@isLintingEnabled\n language=@language\n value=@value\n onBlur=@onBlur\n onInput=this.onInput\n onSetup=this.onSetup\n onLint=@onLint\n }}\n />\n\n {{! loader }}\n {{#unless this._isSetupComplete}}\n <div class=\"hds-code-editor__loader\" aria-live=\"polite\" role=\"status\">\n <HdsIcon @name=\"loading\" @size=\"24\" />\n <span class=\"sr-only\">{{hdsT\n \"hds.components.common.loading\"\n default=\"Loading\"\n }}</span>\n </div>\n {{/unless}}\n </div>\n </template>\n}\n"],"names":["HdsCodeEditor","Component","g","prototype","tracked","i","_id","guidFor","_handleEscape","modifier","handleKeyDown","event","key","_isFullScreen","toggleFullScreen","document","addEventListener","removeEventListener","constructor","owner","args","value","_value","ariaLabelledBy","ariaLabel","undefined","_titleId","ariaDescribedBy","_descriptionId","hasActions","hasCopyButton","hasFullScreenButton","isStandalone","classNames","classes","push","join","copyButtonText","registerTitleElement","element","id","registerDescriptionElement","onInput","newValue","editorView","onKeyDown","onSetup","_isSetupComplete","setComponentTemplate","precompileTemplate","strictMode","scope","focusTrap","or","hash","HdsCodeEditorTitle","HdsCodeEditorDescription","HdsCodeEditorGeneric","HdsCopyButton","HdsCodeEditorFullScreenButton","hdsCodeEditorModifier","HdsIcon","hdsT"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { assert } from '@ember/debug';
 import { buildWaiter } from '@ember/test-waiters';
 import { modifier } from 'ember-modifier';
 import { hash } from '@ember/helper';
-import { focusTrap } from 'ember-focus-trap';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
 import { HdsFlyoutSizesValues } from './types.js';
 import HdsDialogPrimitiveBody from '../dialog-primitive/body.js';
 import HdsDialogPrimitiveDescription from '../dialog-primitive/description.js';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/hds/flyout/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\nimport { hash } from '@ember/helper';\nimport { focusTrap } from 'ember-focus-trap';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport { HdsFlyoutSizesValues } from './types.ts';\nimport HdsDialogPrimitiveBody from '../dialog-primitive/body.gts';\nimport HdsDialogPrimitiveDescription from '../dialog-primitive/description.gts';\nimport HdsDialogPrimitiveFooter from '../dialog-primitive/footer.gts';\nimport HdsDialogPrimitiveHeader from '../dialog-primitive/header.gts';\nimport HdsDialogPrimitiveOverlay from '../dialog-primitive/overlay.gts';\nimport HdsDialogPrimitiveWrapper from '../dialog-primitive/wrapper.gts';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\n\nimport type { HdsFlyoutSizes } from './types.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 HdsDialogPrimitiveHeader,\n 'id' \| 'onDismiss' \| 'contextualClassPrefix'\n >;\n Description?: WithBoundArgs<\n typeof HdsDialogPrimitiveDescription,\n 'contextualClass'\n >;\n Body?: WithBoundArgs<typeof HdsDialogPrimitiveBody, 'contextualClass'>;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooter,\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 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 get id(): string {\n return getElementId(this);\n }\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 private _performCloseCleanup() {\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 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\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 return () => {\n // if the <dialog> is removed from the dom while open we emulate the close event\n if (this._isOpen) {\n this._performCloseCleanup();\n }\n\n this._element?.removeEventListener(\n 'close',\n\n this.registerOnCloseCallback,\n true\n );\n };\n });\n\n registerOnCloseCallback = (event: Event) => {\n if (this.args.onClose && typeof this.args.onClose === 'function') {\n this.args.onClose(event);\n }\n\n this._performCloseCleanup();\n };\n\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 onDismiss = (): 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 flyout dialog invisible using the native `close` method\n this._element.close();\n };\n\n <template>\n <HdsDialogPrimitiveWrapper\n class={{this.classNames}}\n ...attributes\n aria-labelledby={{this.id}}\n {{this._registerDialog}}\n {{focusTrap\n isActive=this._isOpen\n focusTrapOptions=(hash\n onDeactivate=this.onDismiss clickOutsideDeactivates=true\n )\n }}\n >\n <:header>\n {{yield\n (hash\n Header=(component\n HdsDialogPrimitiveHeader\n id=this.id\n onDismiss=this.onDismiss\n contextualClassPrefix=\"hds-flyout\"\n titleTag=\"h1\"\n )\n Description=(component\n HdsDialogPrimitiveDescription\n contextualClass=\"hds-flyout__description\"\n )\n )\n }}\n </:header>\n <:body>\n {{yield\n (hash\n Body=(component\n HdsDialogPrimitiveBody contextualClass=\"hds-flyout__body\"\n )\n )\n }}\n </:body>\n <:footer>\n {{yield\n (hash\n Footer=(component\n HdsDialogPrimitiveFooter\n onDismiss=this.onDismiss\n contextualClass=\"hds-flyout__footer\"\n )\n )\n }}\n </:footer>\n </HdsDialogPrimitiveWrapper>\n\n {{#if this._isOpen}}\n <HdsDialogPrimitiveOverlay @contextualClass=\"hds-flyout__overlay\" />\n {{/if}}\n </template>\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsFlyoutSizesValues","Medium","DEFAULT_HAS_OVERLAY","SIZES","Object","values","HdsFlyout","Component","g","prototype","tracked","i","_element","_body","_bodyInitialOverflowValue","size","args","assert","join","includes","id","getElementId","classNames","classes","push","_performCloseCleanup","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","registerOnCloseCallback","open","removeEventListener","event","onClose","showModal","onOpen","onDismiss","token","beginAsync","listener","endAsync","close","setComponentTemplate","precompileTemplate","strictMode","scope","HdsDialogPrimitiveWrapper","focusTrap","hash","HdsDialogPrimitiveHeader","HdsDialogPrimitiveDescription","HdsDialogPrimitiveBody","HdsDialogPrimitiveFooter","HdsDialogPrimitiveOverlay"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/hds/flyout/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\nimport { hash } from '@ember/helper';\n// @ts-expect-error: missing types https://github.com/josemarluedke/ember-focus-trap/issues/86\nimport focusTrap from 'ember-focus-trap/modifiers/focus-trap';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport { HdsFlyoutSizesValues } from './types.ts';\nimport HdsDialogPrimitiveBody from '../dialog-primitive/body.gts';\nimport HdsDialogPrimitiveDescription from '../dialog-primitive/description.gts';\nimport HdsDialogPrimitiveFooter from '../dialog-primitive/footer.gts';\nimport HdsDialogPrimitiveHeader from '../dialog-primitive/header.gts';\nimport HdsDialogPrimitiveOverlay from '../dialog-primitive/overlay.gts';\nimport HdsDialogPrimitiveWrapper from '../dialog-primitive/wrapper.gts';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\n\nimport type { HdsFlyoutSizes } from './types.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 HdsDialogPrimitiveHeader,\n 'id' \| 'onDismiss' \| 'contextualClassPrefix'\n >;\n Description?: WithBoundArgs<\n typeof HdsDialogPrimitiveDescription,\n 'contextualClass'\n >;\n Body?: WithBoundArgs<typeof HdsDialogPrimitiveBody, 'contextualClass'>;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooter,\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 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 get id(): string {\n return getElementId(this);\n }\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 private _performCloseCleanup() {\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 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\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 return () => {\n // if the <dialog> is removed from the dom while open we emulate the close event\n if (this._isOpen) {\n this._performCloseCleanup();\n }\n\n this._element?.removeEventListener(\n 'close',\n\n this.registerOnCloseCallback,\n true\n );\n };\n });\n\n registerOnCloseCallback = (event: Event) => {\n if (this.args.onClose && typeof this.args.onClose === 'function') {\n this.args.onClose(event);\n }\n\n this._performCloseCleanup();\n };\n\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 onDismiss = (): 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 flyout dialog invisible using the native `close` method\n this._element.close();\n };\n\n <template>\n <HdsDialogPrimitiveWrapper\n class={{this.classNames}}\n ...attributes\n aria-labelledby={{this.id}}\n {{this._registerDialog}}\n {{focusTrap\n isActive=this._isOpen\n focusTrapOptions=(hash\n onDeactivate=this.onDismiss clickOutsideDeactivates=true\n )\n }}\n >\n <:header>\n {{yield\n (hash\n Header=(component\n HdsDialogPrimitiveHeader\n id=this.id\n onDismiss=this.onDismiss\n contextualClassPrefix=\"hds-flyout\"\n titleTag=\"h1\"\n )\n Description=(component\n HdsDialogPrimitiveDescription\n contextualClass=\"hds-flyout__description\"\n )\n )\n }}\n </:header>\n <:body>\n {{yield\n (hash\n Body=(component\n HdsDialogPrimitiveBody contextualClass=\"hds-flyout__body\"\n )\n )\n }}\n </:body>\n <:footer>\n {{yield\n (hash\n Footer=(component\n HdsDialogPrimitiveFooter\n onDismiss=this.onDismiss\n contextualClass=\"hds-flyout__footer\"\n )\n )\n }}\n </:footer>\n </HdsDialogPrimitiveWrapper>\n\n {{#if this._isOpen}}\n <HdsDialogPrimitiveOverlay @contextualClass=\"hds-flyout__overlay\" />\n {{/if}}\n </template>\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsFlyoutSizesValues","Medium","DEFAULT_HAS_OVERLAY","SIZES","Object","values","HdsFlyout","Component","g","prototype","tracked","i","_element","_body","_bodyInitialOverflowValue","size","args","assert","join","includes","id","getElementId","classNames","classes","push","_performCloseCleanup","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","registerOnCloseCallback","open","removeEventListener","event","onClose","showModal","onOpen","onDismiss","token","beginAsync","listener","endAsync","close","setComponentTemplate","precompileTemplate","strictMode","scope","HdsDialogPrimitiveWrapper","focusTrap","hash","HdsDialogPrimitiveHeader","HdsDialogPrimitiveDescription","HdsDialogPrimitiveBody","HdsDialogPrimitiveFooter","HdsDialogPrimitiveOverlay"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { assert } from '@ember/debug';
 import { buildWaiter } from '@ember/test-waiters';
 import { modifier } from 'ember-modifier';
 import { hash } from '@ember/helper';
-import { focusTrap } from 'ember-focus-trap';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
 import HdsDialogPrimitiveHeader from '../dialog-primitive/header.js';
 import HdsDialogPrimitiveBody from '../dialog-primitive/body.js';
 import HdsDialogPrimitiveFooter from '../dialog-primitive/footer.js';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/hds/modal/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\nimport { hash } from '@ember/helper';\nimport { focusTrap } from 'ember-focus-trap';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport HdsDialogPrimitiveHeader from '../dialog-primitive/header.gts';\nimport HdsDialogPrimitiveBody from '../dialog-primitive/body.gts';\nimport HdsDialogPrimitiveFooter from '../dialog-primitive/footer.gts';\nimport HdsDialogPrimitiveWrapper from '../dialog-primitive/wrapper.gts';\nimport HdsDialogPrimitiveOverlay from '../dialog-primitive/overlay.gts';\nimport { HdsModalSizeValues, HdsModalColorValues } from './types.ts';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\n\nimport type { HdsModalSizes, HdsModalColors } 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 HdsDialogPrimitiveHeader,\n 'id' \| 'onDismiss' \| 'contextualClassPrefix'\n >;\n Body?: WithBoundArgs<typeof HdsDialogPrimitiveBody, 'contextualClass'>;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooter,\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 _clickOutsideToDismissHandler!: (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 private _performCloseCleanup(): void {\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 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._performCloseCleanup();\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\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 // Note: because the Modal has the `@isDismissedDisabled` argument, we need to add our own click outside to dismiss logic. This is because `ember-focus-trap` treats the `focusTrapOptions` as static, so we can't update it dynamically if `@isDismissDisabled` changes.\n this._clickOutsideToDismissHandler = (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 // here we use `void` because `onDismiss` is an async function, but in reality we don't need to handle the result or wait for its completion\n void this.onDismiss();\n }\n }\n };\n\n document.addEventListener('click', this._clickOutsideToDismissHandler, {\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._isOpen) {\n this._performCloseCleanup();\n }\n\n this._element?.removeEventListener(\n 'close',\n\n this.registerOnCloseCallback,\n true\n );\n\n document.removeEventListener(\n 'click',\n this._clickOutsideToDismissHandler,\n true\n );\n };\n });\n\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 // eslint-disable-next-line @typescript-eslint/require-await\n onDismiss = async (): 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 <template>\n <HdsDialogPrimitiveWrapper\n class={{this.classNames}}\n ...attributes\n aria-labelledby={{this.id}}\n {{this._registerDialog}}\n {{focusTrap\n isActive=this._isOpen\n focusTrapOptions=(hash onDeactivate=this.onDismiss)\n }}\n >\n <:header>\n {{yield\n (hash\n Header=(component\n HdsDialogPrimitiveHeader\n id=this.id\n onDismiss=this.onDismiss\n contextualClassPrefix=\"hds-modal\"\n titleTag=\"h1\"\n )\n )\n }}\n </:header>\n <:body>\n {{yield\n (hash\n Body=(component\n HdsDialogPrimitiveBody contextualClass=\"hds-modal__body\"\n )\n )\n }}\n </:body>\n <:footer>\n {{yield\n (hash\n Footer=(component\n HdsDialogPrimitiveFooter\n onDismiss=this.onDismiss\n contextualClass=\"hds-modal__footer\"\n )\n )\n }}\n </:footer>\n </HdsDialogPrimitiveWrapper>\n\n {{#if this._isOpen}}\n <HdsDialogPrimitiveOverlay @contextualClass=\"hds-modal__overlay\" />\n {{/if}}\n </template>\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsModalSizeValues","Medium","DEFAULT_COLOR","HdsModalColorValues","Neutral","SIZES","Object","values","COLORS","HdsModal","Component","g","prototype","tracked","i","_element","_body","_bodyInitialOverflowValue","_clickOutsideToDismissHandler","isDismissDisabled","args","size","assert","join","includes","color","id","getElementId","classNames","classes","push","_performCloseCleanup","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","registerOnCloseCallback","event","onClose","parentElement","showModal","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","open","contains","target","onDismiss","capture","passive","removeEventListener","onOpen","token","beginAsync","listener","endAsync","close","setComponentTemplate","precompileTemplate","strictMode","scope","HdsDialogPrimitiveWrapper","focusTrap","hash","HdsDialogPrimitiveHeader","HdsDialogPrimitiveBody","HdsDialogPrimitiveFooter","HdsDialogPrimitiveOverlay"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/hds/modal/index.gts"],"sourcesContent":["/*\n Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\nimport { hash } from '@ember/helper';\n// @ts-expect-error: missing types https://github.com/josemarluedke/ember-focus-trap/issues/86\nimport focusTrap from 'ember-focus-trap/modifiers/focus-trap';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport HdsDialogPrimitiveHeader from '../dialog-primitive/header.gts';\nimport HdsDialogPrimitiveBody from '../dialog-primitive/body.gts';\nimport HdsDialogPrimitiveFooter from '../dialog-primitive/footer.gts';\nimport HdsDialogPrimitiveWrapper from '../dialog-primitive/wrapper.gts';\nimport HdsDialogPrimitiveOverlay from '../dialog-primitive/overlay.gts';\nimport { HdsModalSizeValues, HdsModalColorValues } from './types.ts';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\n\nimport type { HdsModalSizes, HdsModalColors } 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 HdsDialogPrimitiveHeader,\n 'id' \| 'onDismiss' \| 'contextualClassPrefix'\n >;\n Body?: WithBoundArgs<typeof HdsDialogPrimitiveBody, 'contextualClass'>;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooter,\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 _clickOutsideToDismissHandler!: (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 private _performCloseCleanup(): void {\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 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._performCloseCleanup();\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\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 // Note: because the Modal has the `@isDismissedDisabled` argument, we need to add our own click outside to dismiss logic. This is because `ember-focus-trap` treats the `focusTrapOptions` as static, so we can't update it dynamically if `@isDismissDisabled` changes.\n this._clickOutsideToDismissHandler = (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 // here we use `void` because `onDismiss` is an async function, but in reality we don't need to handle the result or wait for its completion\n void this.onDismiss();\n }\n }\n };\n\n document.addEventListener('click', this._clickOutsideToDismissHandler, {\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._isOpen) {\n this._performCloseCleanup();\n }\n\n this._element?.removeEventListener(\n 'close',\n\n this.registerOnCloseCallback,\n true\n );\n\n document.removeEventListener(\n 'click',\n this._clickOutsideToDismissHandler,\n true\n );\n };\n });\n\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 // eslint-disable-next-line @typescript-eslint/require-await\n onDismiss = async (): 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 <template>\n <HdsDialogPrimitiveWrapper\n class={{this.classNames}}\n ...attributes\n aria-labelledby={{this.id}}\n {{this._registerDialog}}\n {{focusTrap\n isActive=this._isOpen\n focusTrapOptions=(hash onDeactivate=this.onDismiss)\n }}\n >\n <:header>\n {{yield\n (hash\n Header=(component\n HdsDialogPrimitiveHeader\n id=this.id\n onDismiss=this.onDismiss\n contextualClassPrefix=\"hds-modal\"\n titleTag=\"h1\"\n )\n )\n }}\n </:header>\n <:body>\n {{yield\n (hash\n Body=(component\n HdsDialogPrimitiveBody contextualClass=\"hds-modal__body\"\n )\n )\n }}\n </:body>\n <:footer>\n {{yield\n (hash\n Footer=(component\n HdsDialogPrimitiveFooter\n onDismiss=this.onDismiss\n contextualClass=\"hds-modal__footer\"\n )\n )\n }}\n </:footer>\n </HdsDialogPrimitiveWrapper>\n\n {{#if this._isOpen}}\n <HdsDialogPrimitiveOverlay @contextualClass=\"hds-modal__overlay\" />\n {{/if}}\n </template>\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsModalSizeValues","Medium","DEFAULT_COLOR","HdsModalColorValues","Neutral","SIZES","Object","values","COLORS","HdsModal","Component","g","prototype","tracked","i","_element","_body","_bodyInitialOverflowValue","_clickOutsideToDismissHandler","isDismissDisabled","args","size","assert","join","includes","color","id","getElementId","classNames","classes","push","_performCloseCleanup","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","registerOnCloseCallback","event","onClose","parentElement","showModal","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","open","contains","target","onDismiss","capture","passive","removeEventListener","onOpen","token","beginAsync","listener","endAsync","close","setComponentTemplate","precompileTemplate","strictMode","scope","HdsDialogPrimitiveWrapper","focusTrap","hash","HdsDialogPrimitiveHeader","HdsDialogPrimitiveBody","HdsDialogPrimitiveFooter","HdsDialogPrimitiveOverlay"],"mappings":"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"}

package/dist/components.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export { default as HdsAccordion } from './components/hds/accordion/index.js';
 export { default as HdsAccordionItem } from './components/hds/accordion/item/index.js';
 export { HdsAccordionForceStateValues, HdsAccordionItemTitleTagValues, HdsAccordionSizeValues, HdsAccordionTypeValues } from './components/hds/accordion/types.js';
-export { H as HdsAdvancedTable, a as HdsAdvancedTableTh, b as HdsAdvancedTableThSelectable, c as HdsAdvancedTableTr } from './index-BI5s7rxr.js';
+export { H as HdsAdvancedTable, a as HdsAdvancedTableTh, b as HdsAdvancedTableThSelectable, c as HdsAdvancedTableTr } from './index-B9OqWZ9U.js';
 export { default as HdsAdvancedTableTd } from './components/hds/advanced-table/td.js';
 export { default as HdsAdvancedTableThButtonSort } from './components/hds/advanced-table/th-button-sort.js';
 export { default as HdsAdvancedTableThButtonTooltip } from './components/hds/advanced-table/th-button-tooltip.js';

package/dist/{index-BI5s7rxr.js → index-B9OqWZ9U.js} RENAMED Viewed

@@ -20,7 +20,7 @@ import { scheduleOnce } from '@ember/runloop';
 import { focusable } from 'tabbable';
 import hdsScrollIntoViewOnFocus from './modifiers/hds-scroll-into-view-on-focus.js';
 import HdsAdvancedTableCellModifier from './modifiers/hds-advanced-table-cell.js';
-import { focusTrap } from 'ember-focus-trap';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
 import HdsLayoutFlex from './components/hds/layout/flex/index.js';
 import HdsAdvancedTableThButtonExpand from './components/hds/advanced-table/th-button-expand.js';
 import HdsAdvancedTableThButtonSort from './components/hds/advanced-table/th-button-sort.js';
@@ -545,6 +545,13 @@ class HdsAdvancedTableTh extends Component {
     } = this.args;
     return firstColumnKey !== undefined && column !== undefined && firstColumnKey === column.key;
   }
+  get isFirstNonStickyColumn() {
+    const {
+      column,
+      firstNonStickyColumnKey
+    } = this.args;
+    return firstNonStickyColumnKey !== undefined && column !== undefined && firstNonStickyColumnKey === column.key;
+  }
   get isLastColumn() {
     const {
       column,
@@ -773,7 +780,7 @@ class HdsAdvancedTableTh extends Component {
     };
   });
   static {
-    setComponentTemplate(precompileTemplate("<div class={{this.classNames}} role={{this.role}} aria-sort={{this.ariaSort}} aria-rowspan={{@rowspan}} aria-colspan={{@colspan}} aria-describedby={{@parentId}} {{style grid-row=this.rowspan grid-column=this.colspan padding-left=this.paddingLeft}} {{hdsAdvancedTableCell handleEnableFocusTrap=this.enableFocusTrap shouldTrapFocus=this._shouldTrapFocus setCellElement=this.setElement}} {{focusTrap isActive=this._shouldTrapFocus focusTrapOptions=(hash onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true)}} {{@compositeItem disabled=@isCompositeItemDisabled}} {{hdsScrollIntoViewOnFocus options=(hash block=\"center\" inline=\"center\")}} ...attributes>\n  <HdsLayoutFlex @justify=\"space-between\" @align=\"center\" @gap=\"8\">\n    {{#if @column.isVisuallyHidden}}\n      <span class=\"sr-only\">{{yield}}</span>\n    {{else}}\n      {{#if (and @isExpandable (not this.isSortable))}}\n        <HdsAdvancedTableThButtonExpand @labelId={{this._labelId}} @onToggle={{@onClickToggle}} @isExpanded={{@isExpanded}} @isExpandAll={{@hasExpandAllButton}} {{this._manageExpandButton}} />\n      {{/if}}\n      <div class=\"hds-advanced-table__th-content\">\n        <span id={{this._labelId}} class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\">\n          {{yield}}\n        </span>\n        {{#if @tooltip}}\n          <HdsAdvancedTableThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n        {{/if}}\n      </div>\n      {{#if this.isSortable}}\n        <HdsAdvancedTableThButtonSort @sortOrder={{@sortOrder}} @onClick={{@onClickSort}} @labelId={{this._labelId}} />\n      {{/if}}\n      {{#if @column}}\n        <HdsAdvancedTableThContextMenu @column={{@column}} @hasReorderableColumns={{@hasReorderableColumns}} @hasResizableColumns={{@hasResizableColumns}} @isFirstColumn={{this.isFirstColumn}} @isLastColumn={{this.isLastColumn}} @isStickyColumn={{@isStickyColumn}} @reorderHandleElement={{this._reorderHandleElement}} @resizeHandleElement={{this._resizeHandleElement}} @onColumnResize={{@onColumnResize}} @onFocusReorderHandle={{this.focusReorderHandle}} @onMoveColumnToTerminalPosition={{@onMoveColumnToTerminalPosition}} @onPinFirstColumn={{@onPinFirstColumn}} @onRestoreColumnWidth={{@onRestoreColumnWidth}} />\n        {{#if (and @hasReorderableColumns (not @isStickyColumn))}}\n          <HdsAdvancedTableThReorderHandle @column={{@column}} @tableHeight={{@tableHeight}} @thElement={{this._element}} @onFocusReorderHandle={{this.focusReorderHandle}} @onSetDraggedColumnKey={{this.setDraggedColumnKey}} @onStepColumn={{this.stepColumn}} {{this._registerReorderHandleElement}} />\n        {{/if}}\n        {{#if this.showResizeHandle}}\n          <HdsAdvancedTableThResizeHandle @column={{@column}} @siblingColumnKeys={{@siblingColumnKeys}} @tableHeight={{@tableHeight}} @onApplyTransientWidth={{this.applyTransientWidth}} @onColumnResize={{@onColumnResize}} @onGetAppliedWidth={{this.getAppliedWidth}} @onGetColumnByKey={{this.getColumnByKey}} @onSetTransientColumnWidth={{this.setTransientColumnWidth}} @onSetTransientColumnWidths={{this.setTransientColumnWidths}} @onResetTransientColumnWidths={{this.resetTransientColumnWidths}} @onUpdateResizeDebt={{this.updateResizeDebt}} {{this._registerResizeHandleElement}} />\n        {{/if}}\n      {{/if}}\n    {{/if}}\n  </HdsLayoutFlex>\n  {{#if this.showDropTarget}}\n    <HdsAdvancedTableThReorderDropTarget @column={{@column}} @draggedColumnKey={{@draggedColumnKey}} @hasSelectableRows={{@hasSelectableRows}} @isFirstColumn={{this.isFirstColumn}} @isLastColumn={{this.isLastColumn}} @reorderHoveredColumnKey={{@reorderHoveredColumnKey}} @draggedColumnSiblingColumnKeys={{@draggedColumnSiblingColumnKeys}} @tableHeight={{@tableHeight}} @onReorderDrop={{@onReorderDrop}} @onSetReorderHoveredColumnKey={{@onSetReorderHoveredColumnKey}} />\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class={{this.classNames}} role={{this.role}} aria-sort={{this.ariaSort}} aria-rowspan={{@rowspan}} aria-colspan={{@colspan}} aria-describedby={{@parentId}} {{style grid-row=this.rowspan grid-column=this.colspan padding-left=this.paddingLeft}} {{hdsAdvancedTableCell handleEnableFocusTrap=this.enableFocusTrap shouldTrapFocus=this._shouldTrapFocus setCellElement=this.setElement}} {{focusTrap isActive=this._shouldTrapFocus focusTrapOptions=(hash onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true)}} {{@compositeItem disabled=@isCompositeItemDisabled}} {{hdsScrollIntoViewOnFocus options=(hash block=\"center\" inline=\"center\")}} ...attributes>\n  <HdsLayoutFlex @justify=\"space-between\" @align=\"center\" @gap=\"8\">\n    {{#if @column.isVisuallyHidden}}\n      <span class=\"sr-only\">{{yield}}</span>\n    {{else}}\n      {{#if (and @isExpandable (not this.isSortable))}}\n        <HdsAdvancedTableThButtonExpand @labelId={{this._labelId}} @onToggle={{@onClickToggle}} @isExpanded={{@isExpanded}} @isExpandAll={{@hasExpandAllButton}} {{this._manageExpandButton}} />\n      {{/if}}\n      <div class=\"hds-advanced-table__th-content\">\n        <span id={{this._labelId}} class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\">\n          {{yield}}\n        </span>\n        {{#if @tooltip}}\n          <HdsAdvancedTableThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n        {{/if}}\n      </div>\n      {{#if this.isSortable}}\n        <HdsAdvancedTableThButtonSort @sortOrder={{@sortOrder}} @onClick={{@onClickSort}} @labelId={{this._labelId}} />\n      {{/if}}\n      {{#if @column}}\n        <HdsAdvancedTableThContextMenu @column={{@column}} @hasReorderableColumns={{@hasReorderableColumns}} @hasResizableColumns={{@hasResizableColumns}} @isFirstColumn={{this.isFirstColumn}} @isFirstNonStickyColumn={{this.isFirstNonStickyColumn}} @isLastColumn={{this.isLastColumn}} @isStickyColumn={{@isStickyColumn}} @reorderHandleElement={{this._reorderHandleElement}} @resizeHandleElement={{this._resizeHandleElement}} @onColumnResize={{@onColumnResize}} @onFocusReorderHandle={{this.focusReorderHandle}} @onMoveColumnToTerminalPosition={{@onMoveColumnToTerminalPosition}} @onPinFirstColumn={{@onPinFirstColumn}} @onRestoreColumnWidth={{@onRestoreColumnWidth}} />\n        {{#if (and @hasReorderableColumns (not @isStickyColumn))}}\n          <HdsAdvancedTableThReorderHandle @column={{@column}} @tableHeight={{@tableHeight}} @thElement={{this._element}} @onFocusReorderHandle={{this.focusReorderHandle}} @onSetDraggedColumnKey={{this.setDraggedColumnKey}} @onStepColumn={{this.stepColumn}} {{this._registerReorderHandleElement}} />\n        {{/if}}\n        {{#if this.showResizeHandle}}\n          <HdsAdvancedTableThResizeHandle @column={{@column}} @siblingColumnKeys={{@siblingColumnKeys}} @tableHeight={{@tableHeight}} @onApplyTransientWidth={{this.applyTransientWidth}} @onColumnResize={{@onColumnResize}} @onGetAppliedWidth={{this.getAppliedWidth}} @onGetColumnByKey={{this.getColumnByKey}} @onSetTransientColumnWidth={{this.setTransientColumnWidth}} @onSetTransientColumnWidths={{this.setTransientColumnWidths}} @onResetTransientColumnWidths={{this.resetTransientColumnWidths}} @onUpdateResizeDebt={{this.updateResizeDebt}} {{this._registerResizeHandleElement}} />\n        {{/if}}\n      {{/if}}\n    {{/if}}\n  </HdsLayoutFlex>\n  {{#if this.showDropTarget}}\n    <HdsAdvancedTableThReorderDropTarget @column={{@column}} @draggedColumnKey={{@draggedColumnKey}} @hasSelectableRows={{@hasSelectableRows}} @isFirstColumn={{this.isFirstColumn}} @isLastColumn={{this.isLastColumn}} @reorderHoveredColumnKey={{@reorderHoveredColumnKey}} @draggedColumnSiblingColumnKeys={{@draggedColumnSiblingColumnKeys}} @tableHeight={{@tableHeight}} @onReorderDrop={{@onReorderDrop}} @onSetReorderHoveredColumnKey={{@onSetReorderHoveredColumnKey}} />\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         style,
@@ -991,6 +998,8 @@ const DEFAULT_SCROLL_DIMENSIONS = {
   right: '0px',
   width: '0px'
 };
+const REORDER_EDGE_SCROLL_TRIGGER_PX = 48;
+const REORDER_EDGE_SCROLL_STEP_PX = 16;
 const getScrollIndicatorDimensions = (scrollWrapper, theadElement, hasStickyFirstColumn, isStickyColumnPinned) => {
   const horizontalScrollBarHeight = scrollWrapper.offsetHeight - scrollWrapper.clientHeight;
   const verticalScrollBarWidth = scrollWrapper.offsetWidth - scrollWrapper.clientWidth;
@@ -1057,6 +1066,7 @@ class HdsAdvancedTable extends Component {
   _selectableRows = [];
   _captionId = 'caption-' + guidFor(this);
   _scrollHandler;
+  _dragOverHandler;
   _resizeObserver;
   _theadElement;
   _scrollWrapperElement;
@@ -1140,7 +1150,38 @@ class HdsAdvancedTable extends Component {
     this._scrollHandler = () => {
       this._updateScrollIndicators(element);
     };
+    this._dragOverHandler = event => {
+      if (this.args.hasReorderableColumns !== true) {
+        return;
+      }
+      const canScrollHorizontally = element.scrollWidth > element.clientWidth;
+      if (!canScrollHorizontally) {
+        return;
+      }
+      const firstReorderDropTarget = element.querySelector('.hds-advanced-table__th-reorder-drop-target');
+      if (firstReorderDropTarget === null) {
+        return;
+      }
+      const stickyColumnHeaders = element.querySelectorAll('.hds-advanced-table__th--is-sticky-column');
+      const lastStickyColumnHeader = stickyColumnHeaders[stickyColumnHeaders.length - 1];
+      const leftVisibleEdge = lastStickyColumnHeader?.getBoundingClientRect().right ?? firstReorderDropTarget.getBoundingClientRect().left;
+      const leftScrollTrigger = lastStickyColumnHeader !== undefined ? leftVisibleEdge : leftVisibleEdge + REORDER_EDGE_SCROLL_TRIGGER_PX;
+      const {
+        right
+      } = element.getBoundingClientRect();
+      const rightScrollTrigger = right - REORDER_EDGE_SCROLL_TRIGGER_PX;
+      if (event.clientX <= leftScrollTrigger) {
+        element.scrollBy({
+          left: -REORDER_EDGE_SCROLL_STEP_PX
+        });
+      } else if (event.clientX >= rightScrollTrigger) {
+        element.scrollBy({
+          left: REORDER_EDGE_SCROLL_STEP_PX
+        });
+      }
+    };
     element.addEventListener('scroll', this._scrollHandler);
+    element.addEventListener('dragover', this._dragOverHandler);
     const updateMeasurements = () => {
       const {
         isSelectable = false
@@ -1182,6 +1223,7 @@ class HdsAdvancedTable extends Component {
     }
     return () => {
       element.removeEventListener('scroll', this._scrollHandler);
+      element.removeEventListener('dragover', this._dragOverHandler);
       this._resizeObserver.disconnect();
     };
   });
@@ -1353,6 +1395,12 @@ class HdsAdvancedTable extends Component {
     if (this.hasRowsWithChildren) {
       classes.push(`hds-advanced-table--nested`);
     }
+    if (this.hasStickyFirstColumn) {
+      classes.push('hds-advanced-table--has-sticky-first-column');
+    }
+    if (this.hasStickyFirstColumn && this.isStickyColumnPinned) {
+      classes.push('hds-advanced-table--sticky-first-column-pinned');
+    }
     return classes.join(' ');
   }
   get theadClassNames() {
@@ -1405,9 +1453,6 @@ class HdsAdvancedTable extends Component {
       assert('Cannot have a sticky first column if there are nested rows.', hasStickyFirstColumn === undefined);
       assert(`Cannot have resizable columns if there are nested rows.`, !hasResizableColumns);
     }
-    if (hasReorderableColumns) {
-      assert('Cannot have both reorderable columns and a sticky first column.', hasStickyFirstColumn === undefined);
-    }
   }
   _onColumnReorder = ({
     column,
@@ -1619,7 +1664,7 @@ class HdsAdvancedTable extends Component {
     this._updateScrollIndicators(this._scrollWrapperElement);
   };
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"hds-advanced-table__actions-container-wrapper\">\n  {{#if (has-block \"actions\")}}\n    <div class=\"hds-advanced-table__actions\">\n      {{yield (hash FilterBar=(component HdsFilterBar)) to=\"actions\"}}\n    </div>\n  {{/if}}\n\n  <div class=\"hds-advanced-table__container\n      {{(if this.isStickyHeaderPinned \"hds-advanced-table__container--header-is-pinned\")}}\" {{this._syncSortArgs}} ...attributes>\n    {{!-- Caption --}}\n    <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n      {{@caption}}\n      {{this.sortedMessageText}}\n      {{this.reorderedMessageText}}\n    </div>\n\n    <HdsAdvancedTableColumnManager @columns={{@columns}} @columnOrder={{@columnOrder}} @hasReorderableColumns={{@hasReorderableColumns}} @hasStickyFirstColumn={{@hasStickyFirstColumn}} @isSelectable={{@isSelectable}} @onColumnReorder={{this._onColumnReorder}} as |CM|>\n      <HdsComposite as |C|>\n        {{!-- Grid --}}\n        <div class={{this.classNames}} role=\"grid\" aria-describedby={{this._captionId}} {{style grid-template-columns=CM.gridTemplateColumns --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset max-height=@maxHeight}} {{this._setUpScrollWrapper}} {{CM.syncColumnOrder CM.columns @columnOrder}} {{CM.syncWidthValues}} {{C.composite}}>\n          {{!-- Header --}}\n          <div class={{this.theadClassNames}} role=\"rowgroup\" {{this._setUpThead}} {{on \"dragleave\" (fn CM.setReorderHoveredColumnKey null)}}>\n            <HdsAdvancedTableTr @compositeGroup={{C.group}} @compositeItem={{C.item}} @selectionScope=\"col\" @onClickSortBySelected={{if @selectableColumnKey (fn this.setSortBy @selectableColumnKey)}} @sortBySelectedOrder={{if (eq this.currentSortBy @selectableColumnKey) this.currentSortOrder}} @isSelectable={{this.isSelectable}} @onSelectionChange={{this.onSelectionAllChange}} @didInsert={{this.didInsertSelectAllCheckbox}} @willDestroy={{this.willDestroySelectAllCheckbox}} @selectionAriaLabelSuffix=\"all rows\" @hasStickyColumn={{this.hasStickyFirstColumn}} @isStickyColumnPinned={{this.isStickyColumnPinned}}>\n              {{#each CM.orderedColumns as |column|}}\n                <HdsAdvancedTableTh @align={{column.align}} @column={{column}} @compositeItem={{C.item}} @draggedColumnKey={{CM.draggedColumnKey}} @firstColumnKey={{CM.firstColumnKey}} @hasReorderableColumns={{@hasReorderableColumns}} @hasResizableColumns={{@hasResizableColumns}} @hasSelectableRows={{this.isSelectable}} @hasStickyFirstColumn={{this.hasStickyFirstColumn}} @isStickyColumn={{if (and (eq column.key CM.firstColumnKey) (notEq this.hasStickyFirstColumn undefined)) this.hasStickyFirstColumn undefined}} @isStickyColumnPinned={{this.isStickyColumnPinned}} @lastColumnKey={{CM.lastColumnKey}} @reorderHoveredColumnKey={{CM.reorderHoveredColumnKey}} @draggedColumnSiblingColumnKeys={{if CM.draggedColumnKey (CM.getSiblingColumnKeys CM.draggedColumnKey)}} @siblingColumnKeys={{CM.getSiblingColumnKeys column.key}} @tableHeight={{this._tableHeight}} @tooltip={{column.tooltip}} @hasExpandAllButton={{this.hasRowsWithChildren}} @isExpanded={{this.isAllExpanded}} @isExpandable={{column.isExpandable}} @sortOrder={{if (eq column.key this.currentSortBy) this.currentSortOrder}} @onApplyTransientWidth={{CM.applyTransientWidth}} @onClickSort={{if column.isSortable (fn this.setSortBy column.key)}} @onClickToggle={{this.toggleExpandAll}} @onColumnResize={{@onColumnResize}} @onGetAppliedWidth={{CM.getAppliedWidth}} @onGetColumnByKey={{CM.getColumnByKey}} @onMoveColumnToTerminalPosition={{CM.moveColumnToTerminalPosition}} @onPinFirstColumn={{this._onPinFirstColumn}} @onReorderDrop={{CM.moveColumnToDropTarget}} @onRestoreColumnWidth={{CM.restoreColumnWidth}} @onResetTransientColumnWidths={{CM.resetTransientColumnWidths}} @onSetDraggedColumnKey={{CM.setDraggedColumnKey}} @onSetReorderHoveredColumnKey={{CM.setReorderHoveredColumnKey}} @onSetTransientColumnWidth={{CM.setTransientColumnWidth}} @onSetTransientColumnWidths={{CM.setTransientColumnWidths}} @onStepColumn={{CM.stepColumn}} @onUpdateResizeDebt={{CM.updateResizeDebt}} {{CM.syncThElements column.key}}>\n                  {{column.label}}\n                </HdsAdvancedTableTh>\n              {{/each}}\n            </HdsAdvancedTableTr>\n\n            {{#if this.showScrollIndicatorTop}}\n              <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\" />\n            {{/if}}\n          </div>\n\n          {{!-- Body --}}\n          <HdsAdvancedTableBody @childrenKey={{this.childrenKey}} @expandedRowIds={{this.expandedRowIds}} {{!-- @glint-expect-error: [HDS-4380](https://hashicorp.atlassian.net/browse/HDS-4380) --}} @sortedModel={{sortBy this.sortCriteria @model}} as |B|>\n            {{#each B.rows key=\"id\" as |row index|}}\n              {{#let (and (not this.hasRowsWithChildren) (not row.hasChildren)) as |isSelectionAllowed|}}\n                {{yield (hash Tr=(this.asTr (component HdsAdvancedTableTr columnOrder=CM.columnOrder compositeGroup=C.group compositeItem=C.item data=(this.asRowData row.source) depth=row.depth isCompositeItemDisabled=(not row.isVisible) isParentRow=row.hasChildren isLastRow=(and (eq row.id B.lastVisibleRowId) (notEq B.lastVisibleRowId undefined)) displayRow=row.isVisible selectionScope=(if isSelectionAllowed (this.asScope \"row\")) isSelectable=(if isSelectionAllowed this.isSelectable) onSelectionChange=(if isSelectionAllowed this.onSelectionRowChange) didInsert=(if isSelectionAllowed this.didInsertRowCheckbox) willDestroy=(if isSelectionAllowed this.willDestroyRowCheckbox) hasStickyColumn=this.hasStickyFirstColumn isStickyColumnPinned=this.isStickyColumnPinned)) Th=(component HdsAdvancedTableTh compositeItem=C.item isCompositeItemDisabled=(not row.isVisible) isExpandable=row.hasChildren isExpanded=row.isExpanded onClickToggle=(fn this.toggleRow row.id) depth=row.depth scope=\"row\" newLabel=row.id parentId=undefined isStickyColumn=this.hasStickyFirstColumn isStickyColumnPinned=this.isStickyColumnPinned) Td=(component HdsAdvancedTableTd align=@align compositeItem=C.item isCompositeItemDisabled=(not row.isVisible)) data=(this.asRowData row.source) rowIndex=index isOpen=row.isExpanded) to=\"body\"}}\n              {{/let}}\n            {{/each}}\n          </HdsAdvancedTableBody>\n        </div>\n      </HdsComposite>\n    </HdsAdvancedTableColumnManager>\n\n    {{!-- Empty state --}}\n    {{#if this.isEmpty}}\n      <div class=\"hds-advanced-table__empty-state\">\n        {{#if (has-block \"emptyState\")}}\n          {{yield to=\"emptyState\"}}\n        {{else}}\n          <HdsApplicationState as |A|>\n            <A.Header @title={{hdsT \"hds.components.advanced-table.empty-state.title\" default=\"No data available\"}} />\n            <A.Body @text={{hdsT \"hds.components.advanced-table.empty-state.description\" default=\"There is currently no data to display in the table.\"}} />\n          </HdsApplicationState>\n        {{/if}}\n      </div>\n    {{/if}}\n\n    {{#if this.showScrollIndicatorLeft}}\n      <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\" {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}} />\n    {{/if}}\n\n    {{#if this.showScrollIndicatorRight}}\n      <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\" {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}} />\n    {{/if}}\n\n    {{#if (and this.showScrollIndicatorBottom (not this.isEmpty))}}\n      <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\" {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}} />\n    {{/if}}\n  </div>\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"hds-advanced-table__actions-container-wrapper\">\n  {{#if (has-block \"actions\")}}\n    <div class=\"hds-advanced-table__actions\">\n      {{yield (hash FilterBar=(component HdsFilterBar)) to=\"actions\"}}\n    </div>\n  {{/if}}\n\n  <div class=\"hds-advanced-table__container\n      {{(if this.isStickyHeaderPinned \"hds-advanced-table__container--header-is-pinned\")}}\" {{this._syncSortArgs}} ...attributes>\n    {{!-- Caption --}}\n    <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n      {{@caption}}\n      {{this.sortedMessageText}}\n      {{this.reorderedMessageText}}\n    </div>\n\n    <HdsAdvancedTableColumnManager @columns={{@columns}} @columnOrder={{@columnOrder}} @hasReorderableColumns={{@hasReorderableColumns}} @hasStickyFirstColumn={{this.hasStickyFirstColumn}} @isSelectable={{@isSelectable}} @onColumnReorder={{this._onColumnReorder}} as |CM|>\n      <HdsComposite as |C|>\n        {{!-- Grid --}}\n        <div class={{this.classNames}} role=\"grid\" aria-describedby={{this._captionId}} {{style grid-template-columns=CM.gridTemplateColumns --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset max-height=@maxHeight}} {{this._setUpScrollWrapper}} {{CM.syncColumnOrder CM.columns @columnOrder}} {{CM.syncWidthValues}} {{C.composite}}>\n          {{!-- Header --}}\n          <div class={{this.theadClassNames}} role=\"rowgroup\" {{this._setUpThead}} {{on \"dragleave\" (fn CM.setReorderHoveredColumnKey null)}}>\n            <HdsAdvancedTableTr @compositeGroup={{C.group}} @compositeItem={{C.item}} @selectionScope=\"col\" @onClickSortBySelected={{if @selectableColumnKey (fn this.setSortBy @selectableColumnKey)}} @sortBySelectedOrder={{if (eq this.currentSortBy @selectableColumnKey) this.currentSortOrder}} @isSelectable={{this.isSelectable}} @onSelectionChange={{this.onSelectionAllChange}} @didInsert={{this.didInsertSelectAllCheckbox}} @willDestroy={{this.willDestroySelectAllCheckbox}} @selectionAriaLabelSuffix=\"all rows\" @hasStickyColumn={{this.hasStickyFirstColumn}} @isStickyColumnPinned={{this.isStickyColumnPinned}}>\n              {{#each CM.orderedColumns as |column|}}\n                <HdsAdvancedTableTh @align={{column.align}} @column={{column}} @compositeItem={{C.item}} @draggedColumnKey={{CM.draggedColumnKey}} @firstColumnKey={{CM.firstColumnKey}} @firstNonStickyColumnKey={{CM.firstNonStickyColumnKey}} @hasReorderableColumns={{@hasReorderableColumns}} @hasResizableColumns={{@hasResizableColumns}} @hasSelectableRows={{this.isSelectable}} @hasStickyFirstColumn={{this.hasStickyFirstColumn}} @isStickyColumn={{if (and (eq column.key CM.firstColumnKey) (notEq this.hasStickyFirstColumn undefined)) this.hasStickyFirstColumn undefined}} @isStickyColumnPinned={{this.isStickyColumnPinned}} @lastColumnKey={{CM.lastColumnKey}} @reorderHoveredColumnKey={{CM.reorderHoveredColumnKey}} @draggedColumnSiblingColumnKeys={{if CM.draggedColumnKey (CM.getSiblingColumnKeys CM.draggedColumnKey)}} @siblingColumnKeys={{CM.getSiblingColumnKeys column.key}} @tableHeight={{this._tableHeight}} @tooltip={{column.tooltip}} @hasExpandAllButton={{this.hasRowsWithChildren}} @isExpanded={{this.isAllExpanded}} @isExpandable={{column.isExpandable}} @sortOrder={{if (eq column.key this.currentSortBy) this.currentSortOrder}} @onApplyTransientWidth={{CM.applyTransientWidth}} @onClickSort={{if column.isSortable (fn this.setSortBy column.key)}} @onClickToggle={{this.toggleExpandAll}} @onColumnResize={{@onColumnResize}} @onGetAppliedWidth={{CM.getAppliedWidth}} @onGetColumnByKey={{CM.getColumnByKey}} @onMoveColumnToTerminalPosition={{CM.moveColumnToTerminalPosition}} @onPinFirstColumn={{this._onPinFirstColumn}} @onReorderDrop={{CM.moveColumnToDropTarget}} @onRestoreColumnWidth={{CM.restoreColumnWidth}} @onResetTransientColumnWidths={{CM.resetTransientColumnWidths}} @onSetDraggedColumnKey={{CM.setDraggedColumnKey}} @onSetReorderHoveredColumnKey={{CM.setReorderHoveredColumnKey}} @onSetTransientColumnWidth={{CM.setTransientColumnWidth}} @onSetTransientColumnWidths={{CM.setTransientColumnWidths}} @onStepColumn={{CM.stepColumn}} @onUpdateResizeDebt={{CM.updateResizeDebt}} {{CM.syncThElements column.key}}>\n                  {{column.label}}\n                </HdsAdvancedTableTh>\n              {{/each}}\n            </HdsAdvancedTableTr>\n\n            {{#if this.showScrollIndicatorTop}}\n              <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\" />\n            {{/if}}\n          </div>\n\n          {{!-- Body --}}\n          <HdsAdvancedTableBody @childrenKey={{this.childrenKey}} @expandedRowIds={{this.expandedRowIds}} {{!-- @glint-expect-error: [HDS-4380](https://hashicorp.atlassian.net/browse/HDS-4380) --}} @sortedModel={{sortBy this.sortCriteria @model}} as |B|>\n            {{#each B.rows key=\"id\" as |row index|}}\n              {{#let (and (not this.hasRowsWithChildren) (not row.hasChildren)) as |isSelectionAllowed|}}\n                {{yield (hash Tr=(this.asTr (component HdsAdvancedTableTr columnOrder=CM.columnOrder compositeGroup=C.group compositeItem=C.item data=(this.asRowData row.source) depth=row.depth isCompositeItemDisabled=(not row.isVisible) isParentRow=row.hasChildren isLastRow=(and (eq row.id B.lastVisibleRowId) (notEq B.lastVisibleRowId undefined)) displayRow=row.isVisible selectionScope=(if isSelectionAllowed (this.asScope \"row\")) isSelectable=(if isSelectionAllowed this.isSelectable) onSelectionChange=(if isSelectionAllowed this.onSelectionRowChange) didInsert=(if isSelectionAllowed this.didInsertRowCheckbox) willDestroy=(if isSelectionAllowed this.willDestroyRowCheckbox) hasStickyColumn=this.hasStickyFirstColumn isStickyColumnPinned=this.isStickyColumnPinned)) Th=(component HdsAdvancedTableTh compositeItem=C.item isCompositeItemDisabled=(not row.isVisible) isExpandable=row.hasChildren isExpanded=row.isExpanded onClickToggle=(fn this.toggleRow row.id) depth=row.depth scope=\"row\" newLabel=row.id parentId=undefined isStickyColumnPinned=this.isStickyColumnPinned) Td=(component HdsAdvancedTableTd align=@align compositeItem=C.item isCompositeItemDisabled=(not row.isVisible)) data=(this.asRowData row.source) rowIndex=index isOpen=row.isExpanded) to=\"body\"}}\n              {{/let}}\n            {{/each}}\n          </HdsAdvancedTableBody>\n        </div>\n      </HdsComposite>\n    </HdsAdvancedTableColumnManager>\n\n    {{!-- Empty state --}}\n    {{#if this.isEmpty}}\n      <div class=\"hds-advanced-table__empty-state\">\n        {{#if (has-block \"emptyState\")}}\n          {{yield to=\"emptyState\"}}\n        {{else}}\n          <HdsApplicationState as |A|>\n            <A.Header @title={{hdsT \"hds.components.advanced-table.empty-state.title\" default=\"No data available\"}} />\n            <A.Body @text={{hdsT \"hds.components.advanced-table.empty-state.description\" default=\"There is currently no data to display in the table.\"}} />\n          </HdsApplicationState>\n        {{/if}}\n      </div>\n    {{/if}}\n\n    {{#if this.showScrollIndicatorLeft}}\n      <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\" {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}} />\n    {{/if}}\n\n    {{#if this.showScrollIndicatorRight}}\n      <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\" {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}} />\n    {{/if}}\n\n    {{#if (and this.showScrollIndicatorBottom (not this.isEmpty))}}\n      <div class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\" {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}} />\n    {{/if}}\n  </div>\n</div>", {
       strictMode: true,
       scope: () => ({
         hash,
@@ -1646,4 +1691,4 @@ class HdsAdvancedTable extends Component {
 }
 export { ALIGNMENTS as A, BORDER_WIDTH as B, DEFAULT_ALIGN as D, HdsAdvancedTable as H, VALIGNMENTS as V, HdsAdvancedTableTh as a, HdsAdvancedTableThSelectable as b, HdsAdvancedTableTr as c, HdsAdvancedTableThResizeHandle as d, HdsAdvancedTableThReorderDropTarget as e, DEFAULT_DENSITY as f, DEFAULT_VALIGN as g, DENSITIES as h };
-//# sourceMappingURL=index-BI5s7rxr.js.map
+//# sourceMappingURL=index-B9OqWZ9U.js.map