@ni/nimble-components 24.1.1 → 24.1.3

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

@@ -1,9 +1,10 @@
 import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
 import { ToggleButton } from '../toggle-button';
 import type { ErrorPattern } from '../patterns/error/types';
-import type { DropdownPattern } from '../patterns/dropdown/types';
+import type { DropdownPattern, ListOptionOwner } 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;
@@ -12,7 +13,7 @@ declare global {
 /**
  * A nimble-styed HTML combobox
  */
-export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern {
+export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern, ListOptionOwner {
     appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
@@ -59,6 +60,10 @@ 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,6 +134,21 @@ 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 { 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"]}
+{"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"]}

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

@@ -1,9 +1,10 @@
 import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
 import { ToggleButton } from '../toggle-button';
 import type { ErrorPattern } from '../patterns/error/types';
-import type { DropdownPattern } from '../patterns/dropdown/types';
+import type { DropdownPattern, ListOptionOwner } 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;
@@ -12,7 +13,7 @@ declare global {
 /**
  * A nimble-styed HTML combobox
  */
-export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern {
+export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern, ListOptionOwner {
     appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
@@ -59,6 +60,10 @@ 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/src/table-column/date-text/testing/table-column-date-text.pageobject.d.ts

@@ -4,5 +4,6 @@ import { TableColumnFormattedTextPageObject } from '../../testing/table-column-f
  * Page object for date text table column.
  */
 export declare class TableColumnDateTextPageObject<T extends TableRecord> extends TableColumnFormattedTextPageObject<T> {
+    getDefaultFormattedCellText(value: number, locale: string): string;
     protected verifyCellType(rowIndex: number, columnIndex: number): void;
 }

package/dist/esm/table-column/date-text/testing/table-column-date-text.pageobject.d.ts

@@ -4,5 +4,6 @@ import { TableColumnFormattedTextPageObject } from '../../testing/table-column-f
  * Page object for date text table column.
  */
 export declare class TableColumnDateTextPageObject<T extends TableRecord> extends TableColumnFormattedTextPageObject<T> {
+    getDefaultFormattedCellText(value: number, locale: string): string;
     protected verifyCellType(rowIndex: number, columnIndex: number): void;
 }

package/dist/esm/table-column/date-text/testing/table-column-date-text.pageobject.js

@@ -4,6 +4,14 @@ import { TableColumnDateTextCellView } from '../cell-view';
  * Page object for date text table column.
  */
 export class TableColumnDateTextPageObject extends TableColumnFormattedTextPageObject {
+    getDefaultFormattedCellText(value, locale) {
+        const defaultOptions = {
+            dateStyle: 'medium',
+            timeStyle: 'medium'
+        };
+        const formatter = new Intl.DateTimeFormat(locale, defaultOptions);
+        return formatter.format(value);
+    }
     verifyCellType(rowIndex, columnIndex) {
         const cell = this.tablePageObject.getRenderedCellView(rowIndex, columnIndex);
         if (!(cell instanceof TableColumnDateTextCellView)) {

package/dist/esm/table-column/date-text/testing/table-column-date-text.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-column-date-text.pageobject.js","sourceRoot":"","sources":["../../../../../src/table-column/date-text/testing/table-column-date-text.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kCAAkC,EAAE,MAAM,sDAAsD,CAAC;AAC1G,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAE3D;;GAEG;AACH,MAAM,OAAO,6BAEX,SAAQ,kCAAqC;IACxB,cAAc,CAC7B,QAAgB,EAChB,WAAmB;QAEnB,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,CACjD,QAAQ,EACR,WAAW,CACd,CAAC;QACF,IAAI,CAAC,CAAC,IAAI,YAAY,2BAA2B,CAAC,EAAE;YAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;SACxD;IACL,CAAC;CACJ","sourcesContent":["import type { TableRecord } from '../../../table/types';\nimport { TableColumnFormattedTextPageObject } from '../../testing/table-column-formatted-text.pageobject';\nimport { TableColumnDateTextCellView } from '../cell-view';\n\n/**\n * Page object for date text table column.\n */\nexport class TableColumnDateTextPageObject<\n    T extends TableRecord\n> extends TableColumnFormattedTextPageObject<T> {\n    protected override verifyCellType(\n        rowIndex: number,\n        columnIndex: number\n    ): void {\n        const cell = this.tablePageObject.getRenderedCellView(\n            rowIndex,\n            columnIndex\n        );\n        if (!(cell instanceof TableColumnDateTextCellView)) {\n            throw new Error('Cell is not in a date text column');\n        }\n    }\n}\n"]}
+{"version":3,"file":"table-column-date-text.pageobject.js","sourceRoot":"","sources":["../../../../../src/table-column/date-text/testing/table-column-date-text.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kCAAkC,EAAE,MAAM,sDAAsD,CAAC;AAC1G,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAE3D;;GAEG;AACH,MAAM,OAAO,6BAEX,SAAQ,kCAAqC;IACpC,2BAA2B,CAAC,KAAa,EAAE,MAAc;QAC5D,MAAM,cAAc,GAA+B;YAC/C,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE,QAAQ;SACtB,CAAC;QACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QAClE,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAEkB,cAAc,CAC7B,QAAgB,EAChB,WAAmB;QAEnB,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,CACjD,QAAQ,EACR,WAAW,CACd,CAAC;QACF,IAAI,CAAC,CAAC,IAAI,YAAY,2BAA2B,CAAC,EAAE;YAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;SACxD;IACL,CAAC;CACJ","sourcesContent":["import type { TableRecord } from '../../../table/types';\nimport { TableColumnFormattedTextPageObject } from '../../testing/table-column-formatted-text.pageobject';\nimport { TableColumnDateTextCellView } from '../cell-view';\n\n/**\n * Page object for date text table column.\n */\nexport class TableColumnDateTextPageObject<\n    T extends TableRecord\n> extends TableColumnFormattedTextPageObject<T> {\n    public getDefaultFormattedCellText(value: number, locale: string): string {\n        const defaultOptions: Intl.DateTimeFormatOptions = {\n            dateStyle: 'medium',\n            timeStyle: 'medium'\n        };\n        const formatter = new Intl.DateTimeFormat(locale, defaultOptions);\n        return formatter.format(value);\n    }\n\n    protected override verifyCellType(\n        rowIndex: number,\n        columnIndex: number\n    ): void {\n        const cell = this.tablePageObject.getRenderedCellView(\n            rowIndex,\n            columnIndex\n        );\n        if (!(cell instanceof TableColumnDateTextCellView)) {\n            throw new Error('Cell is not in a date text column');\n        }\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "24.1.1",
+  "version": "24.1.3",
   "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",
@@ -162,6 +162,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
     "storybook": "^8.0.4",
+    "storybook-addon-pseudo-states": "^3.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.2.5",
     "typescript": "~4.9.5",