@ni/nimble-components 24.1.3 → 24.1.5

package/dist/esm/combobox/index.d.ts

@@ -1,10 +1,9 @@
 import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
 import { ToggleButton } from '../toggle-button';
 import type { ErrorPattern } from '../patterns/error/types';
-import type { DropdownPattern, ListOptionOwner } from '../patterns/dropdown/types';
+import type { DropdownPattern } from '../patterns/dropdown/types';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 import type { AnchoredRegion } from '../anchored-region';
-import type { ListOption } from '../list-option';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-combobox': Combobox;
@@ -13,7 +12,7 @@ declare global {
 /**
  * A nimble-styed HTML combobox
  */
-export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern, ListOptionOwner {
+export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern {
     appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
@@ -60,10 +59,6 @@ export declare class Combobox extends FoundationCombobox implements DropdownPatt
     inputHandler(e: InputEvent): boolean | void;
     keydownHandler(e: KeyboardEvent): boolean | void;
     focusoutHandler(e: FocusEvent): boolean | void;
-    /**
-     * @internal
-     */
-    registerOption(option: ListOption): void;
     protected focusAndScrollOptionIntoView(): void;
     protected openChanged(): void;
     private regionChanged;

package/dist/esm/combobox/index.js

@@ -134,21 +134,6 @@ export class Combobox extends FoundationCombobox {
         this.emitChangeIfValueUpdated();
         return returnValue;
     }
-    /**
-     * @internal
-     */
-    registerOption(option) {
-        if (this.options.includes(option)) {
-            return;
-        }
-        // Adding an option to the end, ultimately, isn't the correct
-        // thing to do, as this will mean the option's index in the options,
-        // at least temporarily, does not match the DOM order. However, it
-        // is expected that a successive run of `slottedOptionsChanged` will
-        // correct this order issue. See 'https://github.com/ni/nimble/issues/1915'
-        // for more info.
-        this.options.push(option);
-    }
     focusAndScrollOptionIntoView() {
         if (this.open) {
             super.focusAndScrollOptionIntoView();

package/dist/esm/combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, html, observable, ref } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Combobox as FoundationCombobox,\n    ComboboxOptions\n} from '@microsoft/fast-foundation';\nimport {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport { ToggleButton, toggleButtonTag } from '../toggle-button';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\nimport { styles } from './styles';\nimport type { ErrorPattern } from '../patterns/error/types';\nimport type {\n    DropdownPattern,\n    ListOptionOwner\n} from '../patterns/dropdown/types';\nimport { DropdownAppearance } from '../patterns/dropdown/types';\nimport type { AnchoredRegion } from '../anchored-region';\nimport { template } from './template';\nimport type { ListOption } from '../list-option';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-combobox': Combobox;\n    }\n}\n\n/**\n * A nimble-styed HTML combobox\n */\nexport class Combobox\n    extends FoundationCombobox\n    implements DropdownPattern, ErrorPattern, ListOptionOwner {\n    @attr\n    public appearance: DropdownAppearance = DropdownAppearance.underline;\n\n    /**\n     * The ref to the internal dropdown button element.\n     *\n     * @internal\n     */\n    @observable\n    public readonly dropdownButton?: ToggleButton;\n\n    /**\n     * A message explaining why the value is invalid.\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: error-text\n     */\n    @attr({ attribute: 'error-text' })\n    public errorText?: string;\n\n    @attr({ attribute: 'error-visible', mode: 'boolean' })\n    public errorVisible = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public region?: AnchoredRegion;\n\n    /**\n     * @internal\n     */\n    @observable\n    public controlWrapper?: HTMLElement;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    public override get value(): string {\n        return super.value;\n    }\n\n    // This override is to work around an issue in FAST where an old filter value\n    // is used after programmatically setting the value property.\n    // See: https://github.com/microsoft/fast/issues/6749\n    public override set value(next: string) {\n        super.value = next;\n        // Workaround using index notation to manipulate private member\n        // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749\n        // eslint-disable-next-line @typescript-eslint/dot-notation\n        this['filter'] = next;\n        this.filterOptions();\n        this.selectedIndex = this.options\n            .map(option => option.text)\n            .indexOf(this.value);\n    }\n\n    private valueUpdatedByInput = false;\n    private valueBeforeTextUpdate?: string;\n\n    // Workaround for https://github.com/microsoft/fast/issues/5123\n    public override setPositioning(): void {\n        if (!this.$fastController.isConnected) {\n            // Don't call setPositioning() until we're connected,\n            // since this.forcedPosition isn't initialized yet.\n            return;\n        }\n        super.setPositioning();\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/5773\n    public override slottedOptionsChanged(\n        prev: HTMLElement[],\n        next: HTMLElement[]\n    ): void {\n        const value = this.value;\n        super.slottedOptionsChanged(prev, next);\n        if (value) {\n            this.value = value;\n        }\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        // Call setPositioning() after this.forcedPosition is initialized.\n        this.setPositioning();\n        this.updateInputAriaLabel();\n    }\n\n    public toggleButtonClickHandler(e: Event): void {\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonChangeHandler(e: Event): void {\n        this.open = this.dropdownButton!.checked;\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n            case keyArrowDown:\n            case keySpace:\n            case keyEnter:\n                this.open = true;\n                this.stopPropagation(e);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public override filterOptions(): void {\n        super.filterOptions();\n        const enabledOptions = this.filteredOptions.filter(o => !o.disabled);\n        this.filteredOptions = enabledOptions;\n    }\n\n    /**\n     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267\n     * For now, we will update the value ourselves while a user types in text. Note that there is other\n     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set\n     * of desired behavior described in the issue noted above.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override inputHandler(e: InputEvent): boolean | void {\n        const returnValue = super.inputHandler(e);\n        if (!this.valueUpdatedByInput) {\n            this.valueBeforeTextUpdate = this.value;\n        }\n        this.valueUpdatedByInput = true;\n        // This is a workaround for this FAST issue: https://github.com/microsoft/fast/issues/6776\n        if (this.value !== this.control.value) {\n            this.focusAndScrollOptionIntoView();\n        }\n\n        this.value = this.control.value;\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override keydownHandler(e: KeyboardEvent): boolean | void {\n        const returnValue = super.keydownHandler(e);\n        if (e.ctrlKey || e.altKey) {\n            return returnValue;\n        }\n\n        switch (e.key) {\n            case keyEnter:\n                this.emitChangeIfValueUpdated();\n                break;\n            case keyArrowDown:\n            case keyArrowUp:\n                if (this.open && this.valueUpdatedByInput) {\n                    this.valueUpdatedByInput = false;\n                }\n                break;\n            default:\n                return returnValue;\n        }\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override focusoutHandler(e: FocusEvent): boolean | void {\n        const returnValue = super.focusoutHandler(e);\n        this.open = false;\n        this.emitChangeIfValueUpdated();\n        return returnValue;\n    }\n\n    /**\n     * @internal\n     */\n    public registerOption(option: ListOption): void {\n        if (this.options.includes(option)) {\n            return;\n        }\n\n        // Adding an option to the end, ultimately, isn't the correct\n        // thing to do, as this will mean the option's index in the options,\n        // at least temporarily, does not match the DOM order. However, it\n        // is expected that a successive run of `slottedOptionsChanged` will\n        // correct this order issue. See 'https://github.com/ni/nimble/issues/1915'\n        // for more info.\n        this.options.push(option);\n    }\n\n    protected override focusAndScrollOptionIntoView(): void {\n        if (this.open) {\n            super.focusAndScrollOptionIntoView();\n        }\n    }\n\n    protected override openChanged(): void {\n        super.openChanged();\n        if (this.dropdownButton) {\n            this.dropdownButton.checked = this.open;\n        }\n    }\n\n    private regionChanged(\n        _prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    private controlWrapperChanged(\n        _prev: HTMLElement | undefined,\n        _next: HTMLElement | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/6041.\n    private ariaLabelChanged(_oldValue: string, _newValue: string): void {\n        this.updateInputAriaLabel();\n    }\n\n    private maxHeightChanged(): void {\n        this.updateListboxMaxHeightCssVariable();\n    }\n\n    private updateListboxMaxHeightCssVariable(): void {\n        if (this.listbox) {\n            this.listbox.style.setProperty(\n                '--ni-private-select-max-height',\n                `${this.maxHeight}px`\n            );\n        }\n    }\n\n    private updateInputAriaLabel(): void {\n        const inputElement = this.shadowRoot?.querySelector('.selected-value');\n        if (this.ariaLabel) {\n            inputElement?.setAttribute('aria-label', this.ariaLabel);\n        } else {\n            inputElement?.removeAttribute('aria-label');\n        }\n    }\n\n    /**\n     * This will only emit a `change` event after text entry where the text in the input prior to\n     * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).\n     * So, for a concrete example:\n     * 1) User types 'Sue' (when Combobox input was blank).\n     * 2) User presses <Enter> -> 'change' event fires\n     * 3) User deletes 'Sue'\n     * 4) User re-types 'Sue'\n     * 5) User presses <Enter> -> NO 'change' event is fired\n     */\n    private emitChangeIfValueUpdated(): void {\n        if (this.valueUpdatedByInput) {\n            if (this.value !== this.valueBeforeTextUpdate) {\n                this.$emit('change');\n            }\n\n            this.valueUpdatedByInput = false;\n        }\n    }\n}\n\nconst nimbleCombobox = Combobox.compose<ComboboxOptions>({\n    baseName: 'combobox',\n    baseClass: FoundationCombobox,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    },\n    end: html<Combobox>`\n        <div class=\"end-slot-container\">\n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n            <div class=\"separator\"></div>\n            <${toggleButtonTag}\n                ${ref('dropdownButton')}\n                appearance=\"ghost\"\n                ?checked=\"${x => x.open}\"\n                ?disabled=\"${x => x.disabled}\"\n                content-hidden=\"true\"\n                @click=\"${(x, c) => x.toggleButtonClickHandler(c.event)}\"\n                @change=\"${(x, c) => x.toggleButtonChangeHandler(c.event)}\"\n                @keydown=\"${(x, c) => x.toggleButtonKeyDownHandler(c.event as KeyboardEvent)}\"\n                class=\"dropdown-button\"\n                part=\"button\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"${x => x.open}\"\n                tabindex=\"-1\"\n            >\n                <${iconArrowExpanderDownTag}\n                    slot=\"start\"\n                    class=\"dropdown-icon\"\n                >\n                </${iconArrowExpanderDownTag}>\n            </${toggleButtonTag}>\n        </div>\n        ${errorTextTemplate}\n    `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());\nexport const comboboxTag = 'nimble-combobox';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, html, observable, ref } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Combobox as FoundationCombobox,\n    ComboboxOptions\n} from '@microsoft/fast-foundation';\nimport {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport { ToggleButton, toggleButtonTag } from '../toggle-button';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\nimport { styles } from './styles';\nimport type { ErrorPattern } from '../patterns/error/types';\nimport type { DropdownPattern } from '../patterns/dropdown/types';\nimport { DropdownAppearance } from '../patterns/dropdown/types';\nimport type { AnchoredRegion } from '../anchored-region';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-combobox': Combobox;\n    }\n}\n\n/**\n * A nimble-styed HTML combobox\n */\nexport class Combobox\n    extends FoundationCombobox\n    implements DropdownPattern, ErrorPattern {\n    @attr\n    public appearance: DropdownAppearance = DropdownAppearance.underline;\n\n    /**\n     * The ref to the internal dropdown button element.\n     *\n     * @internal\n     */\n    @observable\n    public readonly dropdownButton?: ToggleButton;\n\n    /**\n     * A message explaining why the value is invalid.\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: error-text\n     */\n    @attr({ attribute: 'error-text' })\n    public errorText?: string;\n\n    @attr({ attribute: 'error-visible', mode: 'boolean' })\n    public errorVisible = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public region?: AnchoredRegion;\n\n    /**\n     * @internal\n     */\n    @observable\n    public controlWrapper?: HTMLElement;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    public override get value(): string {\n        return super.value;\n    }\n\n    // This override is to work around an issue in FAST where an old filter value\n    // is used after programmatically setting the value property.\n    // See: https://github.com/microsoft/fast/issues/6749\n    public override set value(next: string) {\n        super.value = next;\n        // Workaround using index notation to manipulate private member\n        // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749\n        // eslint-disable-next-line @typescript-eslint/dot-notation\n        this['filter'] = next;\n        this.filterOptions();\n        this.selectedIndex = this.options\n            .map(option => option.text)\n            .indexOf(this.value);\n    }\n\n    private valueUpdatedByInput = false;\n    private valueBeforeTextUpdate?: string;\n\n    // Workaround for https://github.com/microsoft/fast/issues/5123\n    public override setPositioning(): void {\n        if (!this.$fastController.isConnected) {\n            // Don't call setPositioning() until we're connected,\n            // since this.forcedPosition isn't initialized yet.\n            return;\n        }\n        super.setPositioning();\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/5773\n    public override slottedOptionsChanged(\n        prev: HTMLElement[],\n        next: HTMLElement[]\n    ): void {\n        const value = this.value;\n        super.slottedOptionsChanged(prev, next);\n        if (value) {\n            this.value = value;\n        }\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        // Call setPositioning() after this.forcedPosition is initialized.\n        this.setPositioning();\n        this.updateInputAriaLabel();\n    }\n\n    public toggleButtonClickHandler(e: Event): void {\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonChangeHandler(e: Event): void {\n        this.open = this.dropdownButton!.checked;\n        e.stopImmediatePropagation();\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n            case keyArrowDown:\n            case keySpace:\n            case keyEnter:\n                this.open = true;\n                this.stopPropagation(e);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public override filterOptions(): void {\n        super.filterOptions();\n        const enabledOptions = this.filteredOptions.filter(o => !o.disabled);\n        this.filteredOptions = enabledOptions;\n    }\n\n    /**\n     * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267\n     * For now, we will update the value ourselves while a user types in text. Note that there is other\n     * implementation related to this (like the 'keydownEventHandler') needed to create the complete set\n     * of desired behavior described in the issue noted above.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override inputHandler(e: InputEvent): boolean | void {\n        const returnValue = super.inputHandler(e);\n        if (!this.valueUpdatedByInput) {\n            this.valueBeforeTextUpdate = this.value;\n        }\n        this.valueUpdatedByInput = true;\n        // This is a workaround for this FAST issue: https://github.com/microsoft/fast/issues/6776\n        if (this.value !== this.control.value) {\n            this.focusAndScrollOptionIntoView();\n        }\n\n        this.value = this.control.value;\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override keydownHandler(e: KeyboardEvent): boolean | void {\n        const returnValue = super.keydownHandler(e);\n        if (e.ctrlKey || e.altKey) {\n            return returnValue;\n        }\n\n        switch (e.key) {\n            case keyEnter:\n                this.emitChangeIfValueUpdated();\n                break;\n            case keyArrowDown:\n            case keyArrowUp:\n                if (this.open && this.valueUpdatedByInput) {\n                    this.valueUpdatedByInput = false;\n                }\n                break;\n            default:\n                return returnValue;\n        }\n        return returnValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type\n    public override focusoutHandler(e: FocusEvent): boolean | void {\n        const returnValue = super.focusoutHandler(e);\n        this.open = false;\n        this.emitChangeIfValueUpdated();\n        return returnValue;\n    }\n\n    protected override focusAndScrollOptionIntoView(): void {\n        if (this.open) {\n            super.focusAndScrollOptionIntoView();\n        }\n    }\n\n    protected override openChanged(): void {\n        super.openChanged();\n        if (this.dropdownButton) {\n            this.dropdownButton.checked = this.open;\n        }\n    }\n\n    private regionChanged(\n        _prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    private controlWrapperChanged(\n        _prev: HTMLElement | undefined,\n        _next: HTMLElement | undefined\n    ): void {\n        if (this.region && this.controlWrapper) {\n            this.region.anchorElement = this.controlWrapper;\n        }\n    }\n\n    // Workaround for https://github.com/microsoft/fast/issues/6041.\n    private ariaLabelChanged(_oldValue: string, _newValue: string): void {\n        this.updateInputAriaLabel();\n    }\n\n    private maxHeightChanged(): void {\n        this.updateListboxMaxHeightCssVariable();\n    }\n\n    private updateListboxMaxHeightCssVariable(): void {\n        if (this.listbox) {\n            this.listbox.style.setProperty(\n                '--ni-private-select-max-height',\n                `${this.maxHeight}px`\n            );\n        }\n    }\n\n    private updateInputAriaLabel(): void {\n        const inputElement = this.shadowRoot?.querySelector('.selected-value');\n        if (this.ariaLabel) {\n            inputElement?.setAttribute('aria-label', this.ariaLabel);\n        } else {\n            inputElement?.removeAttribute('aria-label');\n        }\n    }\n\n    /**\n     * This will only emit a `change` event after text entry where the text in the input prior to\n     * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).\n     * So, for a concrete example:\n     * 1) User types 'Sue' (when Combobox input was blank).\n     * 2) User presses <Enter> -> 'change' event fires\n     * 3) User deletes 'Sue'\n     * 4) User re-types 'Sue'\n     * 5) User presses <Enter> -> NO 'change' event is fired\n     */\n    private emitChangeIfValueUpdated(): void {\n        if (this.valueUpdatedByInput) {\n            if (this.value !== this.valueBeforeTextUpdate) {\n                this.$emit('change');\n            }\n\n            this.valueUpdatedByInput = false;\n        }\n    }\n}\n\nconst nimbleCombobox = Combobox.compose<ComboboxOptions>({\n    baseName: 'combobox',\n    baseClass: FoundationCombobox,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    },\n    end: html<Combobox>`\n        <div class=\"end-slot-container\">\n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n            <div class=\"separator\"></div>\n            <${toggleButtonTag}\n                ${ref('dropdownButton')}\n                appearance=\"ghost\"\n                ?checked=\"${x => x.open}\"\n                ?disabled=\"${x => x.disabled}\"\n                content-hidden=\"true\"\n                @click=\"${(x, c) => x.toggleButtonClickHandler(c.event)}\"\n                @change=\"${(x, c) => x.toggleButtonChangeHandler(c.event)}\"\n                @keydown=\"${(x, c) => x.toggleButtonKeyDownHandler(c.event as KeyboardEvent)}\"\n                class=\"dropdown-button\"\n                part=\"button\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"${x => x.open}\"\n                tabindex=\"-1\"\n            >\n                <${iconArrowExpanderDownTag}\n                    slot=\"start\"\n                    class=\"dropdown-icon\"\n                >\n                </${iconArrowExpanderDownTag}>\n            </${toggleButtonTag}>\n        </div>\n        ${errorTextTemplate}\n    `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());\nexport const comboboxTag = 'nimble-combobox';\n"]}

package/dist/esm/drawer/index.js

@@ -97,6 +97,12 @@ export class Drawer extends FoundationElement {
         this.triggerAnimation();
     }
     triggerAnimation() {
+        // Read the offsetHeight of the dialog to trigger a reflow. This guarantees that the browser
+        // has processed the 'animating' class being removed before trying to readd it, even if the previous
+        // animation has just finished. Otherwise, problems can occur. For example, trying to close the
+        // drawer immediately after the opening animation ends does not actually close the drawer.
+        // https://github.com/ni/nimble/issues/1994
+        void this.dialog.offsetHeight;
         this.dialog.classList.add('animating');
         if (this.closing) {
             this.dialog.classList.add('closing');

package/dist/esm/drawer/index.js.map

@@ -1 +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        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"]}
+{"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/dist/esm/src/combobox/index.d.ts

@@ -1,10 +1,9 @@
 import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
 import { ToggleButton } from '../toggle-button';
 import type { ErrorPattern } from '../patterns/error/types';
-import type { DropdownPattern, ListOptionOwner } from '../patterns/dropdown/types';
+import type { DropdownPattern } from '../patterns/dropdown/types';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 import type { AnchoredRegion } from '../anchored-region';
-import type { ListOption } from '../list-option';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-combobox': Combobox;
@@ -13,7 +12,7 @@ declare global {
 /**
  * A nimble-styed HTML combobox
  */
-export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern, ListOptionOwner {
+export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern {
     appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
@@ -60,10 +59,6 @@ export declare class Combobox extends FoundationCombobox implements DropdownPatt
     inputHandler(e: InputEvent): boolean | void;
     keydownHandler(e: KeyboardEvent): boolean | void;
     focusoutHandler(e: FocusEvent): boolean | void;
-    /**
-     * @internal
-     */
-    registerOption(option: ListOption): void;
     protected focusAndScrollOptionIntoView(): void;
     protected openChanged(): void;
     private regionChanged;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "24.1.3",
+  "version": "24.1.5",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "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",