@ni/nimble-components 24.1.3 → 24.1.4
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.
- package/dist/all-components-bundle.js +7 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +1 -1
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/drawer/index.js +6 -0
- package/dist/esm/drawer/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/drawer/index.js
CHANGED
|
@@ -97,6 +97,12 @@ export class Drawer extends FoundationElement {
|
|
|
97
97
|
this.triggerAnimation();
|
|
98
98
|
}
|
|
99
99
|
triggerAnimation() {
|
|
100
|
+
// Read the offsetHeight of the dialog to trigger a reflow. This guarantees that the browser
|
|
101
|
+
// has processed the 'animating' class being removed before trying to readd it, even if the previous
|
|
102
|
+
// animation has just finished. Otherwise, problems can occur. For example, trying to close the
|
|
103
|
+
// drawer immediately after the opening animation ends does not actually close the drawer.
|
|
104
|
+
// https://github.com/ni/nimble/issues/1994
|
|
105
|
+
void this.dialog.offsetHeight;
|
|
100
106
|
this.dialog.classList.add('animating');
|
|
101
107
|
if (this.closing) {
|
|
102
108
|
this.dialog.classList.add('closing');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC;AAQzB;;;GAGG;AACH,mEAAmE;AACnE,MAAM,OAAO,MAA2B,SAAQ,iBAAiB;IAAjE;;QAMW,aAAQ,GAAmB,cAAc,CAAC,KAAK,CAAC;QAGhD,mBAAc,GAAG,KAAK,CAAC;QAGtB,YAAO,GAAG,KAAK,CAAC;QAkFP,gCAA2B,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport {\n applyMixins,\n ARIAGlobalStatesAndProperties,\n DesignSystem,\n FoundationElement\n} from '@microsoft/fast-foundation';\nimport { eventAnimationEnd } from '@microsoft/fast-web-utilities';\nimport { UserDismissed } from '../patterns/dialog/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { DrawerLocation } from './types';\n\nexport { UserDismissed };\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-drawer': Drawer;\n }\n}\n\n/**\n * Drawer control. Shows content in a panel on the left / right side of the screen,\n * which animates to be visible with a slide-in / slide-out animation.\n */\n// eslint-disable-next-line @typescript-eslint/no-invalid-void-type\nexport class Drawer<CloseReason = void> extends FoundationElement {\n // We want the member to match the name of the constant\n // eslint-disable-next-line @typescript-eslint/naming-convention\n public static readonly UserDismissed = UserDismissed;\n\n @attr\n public location: DrawerLocation = DrawerLocation.right;\n\n @attr({ attribute: 'prevent-dismiss', mode: 'boolean' })\n public preventDismiss = false;\n\n public dialog!: HTMLDialogElement;\n private closing = false;\n\n private resolveShow?: (reason: CloseReason | UserDismissed) => void;\n private closeReason!: CloseReason | UserDismissed;\n\n /**\n * True if the drawer is open, opening, or closing. Otherwise, false.\n */\n public get open(): boolean {\n return this.resolveShow !== undefined;\n }\n\n /**\n * Opens the drawer\n * @returns Promise that is resolved when the drawer finishes closing. The value of the resolved\n * Promise is the reason value passed to the close() method, or UserDismissed if the drawer was\n * closed via the ESC key.\n */\n public async show(): Promise<CloseReason | UserDismissed> {\n if (this.open) {\n throw new Error('Drawer is already open');\n }\n this.openDialog();\n return new Promise((resolve, _reject) => {\n this.resolveShow = resolve;\n });\n }\n\n /**\n * Closes the drawer\n * @param reason An optional value indicating how/why the drawer was closed.\n */\n public close(reason: CloseReason): void {\n if (!this.open || this.closing) {\n throw new Error('Drawer is not open or already closing');\n }\n this.closeReason = reason;\n this.closeDialog();\n }\n\n /**\n * @internal\n */\n public cancelHandler(event: Event): boolean {\n // Allowing the dialog to close itself bypasses the drawer's animation logic, so we\n // should close the drawer ourselves when preventDismiss is false.\n event.preventDefault();\n\n if (!this.preventDismiss) {\n this.closeReason = UserDismissed;\n this.closeDialog();\n }\n return true;\n }\n\n /**\n * @internal\n */\n public closeHandler(event: Event): void {\n if (event.target !== this.dialog) {\n return;\n }\n if (this.resolveShow) {\n // If\n // - the browser implements dialogs with the CloseWatcher API, and\n // - the user presses ESC without first interacting with the drawer (e.g. clicking, scrolling),\n // the cancel event is not fired, but the close event still is, and the drawer just closes.\n // The animation is never started, so there is no animation end listener to clean up.\n this.doResolveShow(UserDismissed);\n }\n }\n\n private doResolveShow(reason: CloseReason | UserDismissed): void {\n if (!this.resolveShow) {\n throw new Error(\n 'Do not call doResolveShow unless there is a promise to resolve'\n );\n }\n this.resolveShow(reason);\n this.resolveShow = undefined;\n }\n\n private readonly animationEndHandlerFunction = (): void => this.animationEndHandler();\n\n private openDialog(): void {\n this.dialog.showModal();\n this.triggerAnimation();\n }\n\n private closeDialog(): void {\n this.closing = true;\n this.triggerAnimation();\n }\n\n private triggerAnimation(): void {\n // Read the offsetHeight of the dialog to trigger a reflow. This guarantees that the browser\n // has processed the 'animating' class being removed before trying to readd it, even if the previous\n // animation has just finished. Otherwise, problems can occur. For example, trying to close the\n // drawer immediately after the opening animation ends does not actually close the drawer.\n // https://github.com/ni/nimble/issues/1994\n void this.dialog.offsetHeight;\n\n this.dialog.classList.add('animating');\n if (this.closing) {\n this.dialog.classList.add('closing');\n }\n\n this.dialog.addEventListener(\n eventAnimationEnd,\n this.animationEndHandlerFunction\n );\n }\n\n private animationEndHandler(): void {\n this.dialog.removeEventListener(\n eventAnimationEnd,\n this.animationEndHandlerFunction\n );\n this.dialog.classList.remove('animating');\n if (this.closing) {\n this.dialog.classList.remove('closing');\n this.dialog.close();\n this.closing = false;\n this.doResolveShow(this.closeReason);\n }\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface Drawer extends ARIAGlobalStatesAndProperties {}\napplyMixins(Drawer, ARIAGlobalStatesAndProperties);\n\nconst nimbleDrawer = Drawer.compose({\n baseName: 'drawer',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());\nexport const drawerTag = 'nimble-drawer';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "24.1.
|
|
3
|
+
"version": "24.1.4",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|