@hashicorp/design-system-components
Version:
Helios Design System Components
149 lines (146 loc) • 6.45 kB
JavaScript
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
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/modifiers/focus-trap';
import { HdsFlyoutSizesValues } from './types.js';
import HdsDialogPrimitiveBody from '../dialog-primitive/body.js';
import HdsDialogPrimitiveDescription from '../dialog-primitive/description.js';
import HdsDialogPrimitiveFooter from '../dialog-primitive/footer.js';
import HdsDialogPrimitiveHeader from '../dialog-primitive/header.js';
import HdsDialogPrimitiveOverlay from '../dialog-primitive/overlay.js';
import HdsDialogPrimitiveWrapper from '../dialog-primitive/wrapper.js';
import { getElementId } from '../../../utils/hds-get-element-id.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const waiter = buildWaiter('@hashicorp/design-system-components:flyout');
const DEFAULT_SIZE = HdsFlyoutSizesValues.Medium;
const DEFAULT_HAS_OVERLAY = true;
const SIZES = Object.values(HdsFlyoutSizesValues);
class HdsFlyout extends Component {
static {
g(this.prototype, "_isOpen", [tracked], function () {
return false;
});
}
#_isOpen = (i(this, "_isOpen"), void 0);
// 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
// private _element!: HTMLDialogElement;
_element;
_body;
_bodyInitialOverflowValue = '';
get size() {
const {
size = DEFAULT_SIZE
} = this.args;
assert(` for "Hds::Flyout" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
return size;
}
get id() {
return getElementId(this);
}
get classNames() {
const classes = ['hds-flyout'];
// add a class based on the @size argument
classes.push(`hds-flyout--size-${this.size}`);
return classes.join(' ');
}
_performCloseCleanup() {
this._isOpen = false;
// Reset page `overflow` property
if (this._body) {
this._body.style.removeProperty('overflow');
if (this._bodyInitialOverflowValue === '') {
if (this._body.style.length === 0) {
this._body.removeAttribute('style');
}
} else {
this._body.style.setProperty('overflow', this._bodyInitialOverflowValue);
}
}
// Return focus to a specific element (if provided)
if (this.args.returnFocusTo) {
const initiator = document.getElementById(this.args.returnFocusTo);
if (initiator) {
initiator.focus();
}
}
}
_registerDialog = modifier(element => {
// Store references of `<dialog>` and `<body>` elements
this._element = element;
this._body = document.body;
if (this._body) {
// Store the initial `overflow` value of `<body>` so we can reset to it
this._bodyInitialOverflowValue = this._body.style.getPropertyValue('overflow');
}
// Register "onClose" callback function to be called when a native 'close' event is dispatched
this._element.addEventListener('close', this.registerOnCloseCallback, true);
// If the flyout dialog is not already open
if (!this._element.open) {
this.open();
}
return () => {
// if the <dialog> is removed from the dom while open we emulate the close event
if (this._isOpen) {
this._performCloseCleanup();
}
this._element?.removeEventListener('close', this.registerOnCloseCallback, true);
};
});
registerOnCloseCallback = event => {
if (this.args.onClose && typeof this.args.onClose === 'function') {
this.args.onClose(event);
}
this._performCloseCleanup();
};
open = () => {
// Make flyout dialog visible using the native `showModal` method
this._element.showModal();
this._isOpen = true;
// Prevent page from scrolling when the dialog is open
if (this._body) this._body.style.setProperty('overflow', 'hidden');
// Call "onOpen" callback function
if (this.args.onOpen && typeof this.args.onOpen === 'function') {
this.args.onOpen();
}
};
onDismiss = () => {
// allow ember test helpers to be aware of when the `close` event fires
// when using `click` or other helpers from '@ember/test-helpers'
if (this._element.open) {
const token = waiter.beginAsync();
const listener = () => {
waiter.endAsync(token);
this._element.removeEventListener('close', listener);
};
this._element.addEventListener('close', listener);
}
// Make flyout dialog invisible using the native `close` method
this._element.close();
};
static {
setComponentTemplate(precompileTemplate("<HdsDialogPrimitiveWrapper class={{this.classNames}} ...attributes aria-labelledby={{this.id}} {{this._registerDialog}} {{focusTrap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}>\n <:header>\n {{yield (hash Header=(component HdsDialogPrimitiveHeader id=this.id onDismiss=this.onDismiss contextualClassPrefix=\"hds-flyout\" titleTag=\"h1\") Description=(component HdsDialogPrimitiveDescription contextualClass=\"hds-flyout__description\"))}}\n </:header>\n <:body>\n {{yield (hash Body=(component HdsDialogPrimitiveBody contextualClass=\"hds-flyout__body\"))}}\n </:body>\n <:footer>\n {{yield (hash Footer=(component HdsDialogPrimitiveFooter onDismiss=this.onDismiss contextualClass=\"hds-flyout__footer\"))}}\n </:footer>\n</HdsDialogPrimitiveWrapper>\n\n{{#if this._isOpen}}\n <HdsDialogPrimitiveOverlay @contextualClass=\"hds-flyout__overlay\" />\n{{/if}}", {
strictMode: true,
scope: () => ({
HdsDialogPrimitiveWrapper,
focusTrap,
hash,
HdsDialogPrimitiveHeader,
HdsDialogPrimitiveDescription,
HdsDialogPrimitiveBody,
HdsDialogPrimitiveFooter,
HdsDialogPrimitiveOverlay
})
}), this);
}
}
export { DEFAULT_HAS_OVERLAY, DEFAULT_SIZE, SIZES, HdsFlyout as default };
//# sourceMappingURL=index.js.map