npm - @ni/nimble-components - Versions diffs - 29.7.8 → 29.8.0 - Mend

@ni/nimble-components 29.7.8 → 29.8.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 (57) hide show

package/dist/esm/all-components.d.ts CHANGED Viewed

@@ -47,6 +47,7 @@ import './table-column/anchor';
 import './table-column/date-text';
 import './table-column/duration-text';
 import './table-column/mapping';
+import './table-column/menu-button';
 import './table-column/number-text';
 import './table-column/text';
 import './tabs';

package/dist/esm/all-components.js CHANGED Viewed

@@ -47,6 +47,7 @@ import './table-column/anchor';
 import './table-column/date-text';
 import './table-column/duration-text';
 import './table-column/mapping';
+import './table-column/menu-button';
 import './table-column/number-text';
 import './table-column/text';
 import './tabs';

package/dist/esm/all-components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC","sourcesContent":["/*\n Import of all the web components available in Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport './anchor';\nimport './anchor-button';\nimport './anchor-menu-item';\nimport './anchor-tab';\nimport './anchor-tabs';\nimport './anchor-tree-item';\nimport './anchored-region';\nimport './banner';\nimport './breadcrumb';\nimport './breadcrumb-item';\nimport './button';\nimport './card';\nimport './card-button';\nimport './checkbox';\nimport './combobox';\nimport './dialog';\nimport './drawer';\nimport './icons/all-icons';\nimport './label-provider/core';\nimport './label-provider/table';\nimport './list-option';\nimport './list-option-group';\nimport './mapping/empty';\nimport './mapping/icon';\nimport './mapping/spinner';\nimport './mapping/text';\nimport './menu';\nimport './menu-button';\nimport './menu-item';\nimport './number-field';\nimport './radio';\nimport './radio-group';\nimport './rich-text/editor';\nimport './rich-text/viewer';\nimport './select';\nimport './spinner';\nimport './switch';\nimport './tab';\nimport './tab-panel';\nimport './table';\nimport './table-column/anchor';\nimport './table-column/date-text';\nimport './table-column/duration-text';\nimport './table-column/mapping';\nimport './table-column/number-text';\nimport './table-column/text';\nimport './tabs';\nimport './tabs-toolbar';\nimport './text-area';\nimport './text-field';\nimport './theme-provider';\nimport './toggle-button';\nimport './toolbar';\nimport './tooltip';\nimport './tree-item';\nimport './tree-view';\nimport './unit/byte';\nimport './unit/volt';\nimport './wafer-map';\n"]}
1	+ {"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AACpC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC","sourcesContent":["/*\n Import of all the web components available in Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport './anchor';\nimport './anchor-button';\nimport './anchor-menu-item';\nimport './anchor-tab';\nimport './anchor-tabs';\nimport './anchor-tree-item';\nimport './anchored-region';\nimport './banner';\nimport './breadcrumb';\nimport './breadcrumb-item';\nimport './button';\nimport './card';\nimport './card-button';\nimport './checkbox';\nimport './combobox';\nimport './dialog';\nimport './drawer';\nimport './icons/all-icons';\nimport './label-provider/core';\nimport './label-provider/table';\nimport './list-option';\nimport './list-option-group';\nimport './mapping/empty';\nimport './mapping/icon';\nimport './mapping/spinner';\nimport './mapping/text';\nimport './menu';\nimport './menu-button';\nimport './menu-item';\nimport './number-field';\nimport './radio';\nimport './radio-group';\nimport './rich-text/editor';\nimport './rich-text/viewer';\nimport './select';\nimport './spinner';\nimport './switch';\nimport './tab';\nimport './tab-panel';\nimport './table';\nimport './table-column/anchor';\nimport './table-column/date-text';\nimport './table-column/duration-text';\nimport './table-column/mapping';\nimport './table-column/menu-button';\nimport './table-column/number-text';\nimport './table-column/text';\nimport './tabs';\nimport './tabs-toolbar';\nimport './text-area';\nimport './text-field';\nimport './theme-provider';\nimport './toggle-button';\nimport './toolbar';\nimport './tooltip';\nimport './tree-item';\nimport './tree-view';\nimport './unit/byte';\nimport './unit/volt';\nimport './wafer-map';\n"]}

package/dist/esm/menu-button/testing/menu-button.pageobject.d.ts CHANGED Viewed

@@ -28,6 +28,10 @@ export declare class MenuButtonPageObject {
      * @returns The trimmed text that is slotted into the menu button.
      */
     getLabelText(): string;
+    /**
+     * @returns Whether or not the menu button is focused.
+     */
+    isFocused(): boolean;
     /**
      * @internal
      * Focuses and clicks the menu button.
@@ -53,4 +57,12 @@ export declare class MenuButtonPageObject {
      * Presses the Arrow Down key on the menu button.
      */
     pressArrowDownKey(): void;
+    /**
+     * @internal
+     */
+    getTitle(): string;
+    /**
+     * @internal
+     */
+    dispatchEvent(event: Event): void;
 }

package/dist/esm/menu-button/testing/menu-button.pageobject.js CHANGED Viewed

@@ -49,6 +49,12 @@ export class MenuButtonPageObject {
     getLabelText() {
         return this.menuButtonElement.textContent?.trim() ?? '';
     }
+    /**
+     * @returns Whether or not the menu button is focused.
+     */
+    isFocused() {
+        return this.menuButtonElement.shadowRoot?.activeElement !== null;
+    }
     /**
      * @internal
      * Focuses and clicks the menu button.
@@ -64,6 +70,8 @@ export class MenuButtonPageObject {
      * Presses the Enter key on the menu button.
      */
     pressEnterKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keypress', {
             key: keyEnter
         });
@@ -74,6 +82,8 @@ export class MenuButtonPageObject {
      * Presses the Space key on the menu button.
      */
     pressSpaceKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keypress', {
             key: keySpace
         });
@@ -84,6 +94,8 @@ export class MenuButtonPageObject {
      * Presses the Arrow Up key on the menu button.
      */
     pressArrowUpKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keydown', {
             key: keyArrowUp
         });
@@ -94,10 +106,24 @@ export class MenuButtonPageObject {
      * Presses the Arrow Down key on the menu button.
      */
     pressArrowDownKey() {
+        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.
+        this.menuButtonElement.focus();
         const event = new KeyboardEvent('keydown', {
             key: keyArrowDown
         });
         this.menuButtonElement.toggleButton.dispatchEvent(event);
     }
+    /**
+     * @internal
+     */
+    getTitle() {
+        return this.menuButtonElement.title;
+    }
+    /**
+     * @internal
+     */
+    dispatchEvent(event) {
+        this.menuButtonElement.dispatchEvent(event);
+    }
 }
 //# sourceMappingURL=menu-button.pageobject.js.map

package/dist/esm/menu-button/testing/menu-button.pageobject.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,OAAO,oBAAoB;IAC7B,YAAsC,iBAA6B;QAA7B,sBAAiB,GAAjB,iBAAiB,CAAY;IAAG,CAAC;IAEvE;;OAEG;IACI,MAAM;QACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,QAAQ;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;YACf,OAAO;SACV;QAED,MAAM,kBAAkB,GAAG,iBAAiB,CACxC,IAAI,CAAC,iBAAiB,EACtB,QAAQ,CACX,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,MAAM,kBAAkB,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACI,mBAAmB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;SAC5D;QAED,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAED;;;OAGG;IACI,YAAY;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5D,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gFAAgF;QAChF,0EAA0E;QAC1E,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACzD,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,UAAU;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACI,iBAAiB;QACpB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,YAAY;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;CACJ","sourcesContent":["import {\n keyArrowDown,\n keyArrowUp,\n keyEnter,\n keyEscape,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/tests/component';\n\n/*\n Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n \n This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n /\nexport class MenuButtonPageObject {\n public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n /\n @returns Whether or not the menu is open.\n /\n public isOpen(): boolean {\n return this.menuButtonElement.open;\n }\n\n /\n Opens the menu.\n * @returns A promise that resolves when the menu opens.\n /\n public async openMenu(): Promise<void> {\n if (this.isOpen()) {\n return;\n }\n\n const toggleEventPromise = waitForEventAsync(\n this.menuButtonElement,\n 'toggle'\n );\n this.clickMenuButton();\n await toggleEventPromise;\n }\n\n /\n Closes the menu by pressing Escape.\n * Throws an error if the menu is not open.\n /\n public closeMenuWithEscape(): void {\n if (!this.isOpen()) {\n throw new Error('Cannot close menu when it is not open');\n }\n\n const event = new KeyboardEvent('keydown', {\n key: keyEscape\n });\n this.menuButtonElement.region!.dispatchEvent(event);\n }\n\n /\n Gets the text in the menu button.\n * @returns The trimmed text that is slotted into the menu button.\n /\n public getLabelText(): string {\n return this.menuButtonElement.textContent?.trim() ?? '';\n }\n\n /\n @internal\n * Focuses and clicks the menu button.\n /\n public clickMenuButton(): void {\n // Focus the menu button before calling click() because ordinarily a mouse click\n // would bring focus to the button, but calling click() directly does not.\n this.menuButtonElement.focus();\n this.menuButtonElement.toggleButton!.control.click();\n }\n\n /\n @internal\n * Presses the Enter key on the menu button.\n /\n public pressEnterKey(): void {\n const event = new KeyboardEvent('keypress', {\n key: keyEnter\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Space key on the menu button.\n /\n public pressSpaceKey(): void {\n const event = new KeyboardEvent('keypress', {\n key: keySpace\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Up key on the menu button.\n /\n public pressArrowUpKey(): void {\n const event = new KeyboardEvent('keydown', {\n key: keyArrowUp\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Down key on the menu button.\n */\n public pressArrowDownKey(): void {\n const event = new KeyboardEvent('keydown', {\n key: keyArrowDown\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n}\n"]}
1	+ {"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n keyArrowDown,\n keyArrowUp,\n keyEnter,\n keyEscape,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/tests/component';\n\n/*\n Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n \n This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n /\nexport class MenuButtonPageObject {\n public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n /\n @returns Whether or not the menu is open.\n /\n public isOpen(): boolean {\n return this.menuButtonElement.open;\n }\n\n /\n Opens the menu.\n * @returns A promise that resolves when the menu opens.\n /\n public async openMenu(): Promise<void> {\n if (this.isOpen()) {\n return;\n }\n\n const toggleEventPromise = waitForEventAsync(\n this.menuButtonElement,\n 'toggle'\n );\n this.clickMenuButton();\n await toggleEventPromise;\n }\n\n /\n Closes the menu by pressing Escape.\n * Throws an error if the menu is not open.\n /\n public closeMenuWithEscape(): void {\n if (!this.isOpen()) {\n throw new Error('Cannot close menu when it is not open');\n }\n\n const event = new KeyboardEvent('keydown', {\n key: keyEscape\n });\n this.menuButtonElement.region!.dispatchEvent(event);\n }\n\n /\n Gets the text in the menu button.\n * @returns The trimmed text that is slotted into the menu button.\n /\n public getLabelText(): string {\n return this.menuButtonElement.textContent?.trim() ?? '';\n }\n\n /\n @returns Whether or not the menu button is focused.\n /\n public isFocused(): boolean {\n return this.menuButtonElement.shadowRoot?.activeElement !== null;\n }\n\n /\n @internal\n * Focuses and clicks the menu button.\n /\n public clickMenuButton(): void {\n // Focus the menu button before calling click() because ordinarily a mouse click\n // would bring focus to the button, but calling click() directly does not.\n this.menuButtonElement.focus();\n this.menuButtonElement.toggleButton!.control.click();\n }\n\n /\n @internal\n * Presses the Enter key on the menu button.\n /\n public pressEnterKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keypress', {\n key: keyEnter\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Space key on the menu button.\n /\n public pressSpaceKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keypress', {\n key: keySpace\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Up key on the menu button.\n /\n public pressArrowUpKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keydown', {\n key: keyArrowUp\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /\n @internal\n * Presses the Arrow Down key on the menu button.\n /\n public pressArrowDownKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keydown', {\n key: keyArrowDown\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /\n @internal\n /\n public getTitle(): string {\n return this.menuButtonElement.title;\n }\n\n /\n @internal\n */\n public dispatchEvent(event: Event): void {\n this.menuButtonElement.dispatchEvent(event);\n }\n}\n"]}

package/dist/esm/patterns/button/styles.js CHANGED Viewed

@@ -81,6 +81,10 @@ export const styles = css `
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
+        slot[name='start']::slotted(*) {
+            flex-shrink: 0;
+        }
         :host([content-hidden]) .content {
             ${accessiblyHidden}
         }
@@ -89,6 +93,10 @@ export const styles = css `
             display: contents;
             ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
+        slot[name='end']::slotted(*) {
+            flex-shrink: 0;
+        }
     }
     @layer hover {

package/dist/esm/patterns/button/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, checked, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n ${\n /\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n / ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: border-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n color: ${buttonLabelFontColor};\n border-color: ${borderHoverColor};\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n\n .control:active [part='start'],\n .control:active [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n cursor: default;\n }\n\n :host([disabled]) .control {\n color: ${buttonLabelDisabledFontColor};\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(),\n :host([disabled]) slot[name='end']::slotted() {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer active {\n :host([appearance-variant='accent']) .control:active {\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent'])\n .control:active\n [part='start'],\n :host([appearance-variant='accent'])\n .control:active\n [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='primary']) [part='start'],\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n }\n `\n )\n);\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, checked, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n ${\n /\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n / ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: border-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='start']::slotted() {\n flex-shrink: 0;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='end']::slotted() {\n flex-shrink: 0;\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n color: ${buttonLabelFontColor};\n border-color: ${borderHoverColor};\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n\n .control:active [part='start'],\n .control:active [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n cursor: default;\n }\n\n :host([disabled]) .control {\n color: ${buttonLabelDisabledFontColor};\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(),\n :host([disabled]) slot[name='end']::slotted() {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer active {\n :host([appearance-variant='accent']) .control:active {\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent'])\n .control:active\n [part='start'],\n :host([appearance-variant='accent'])\n .control:active\n [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='primary']) [part='start'],\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n }\n `\n )\n);\n"]}

package/dist/esm/select/index.js CHANGED Viewed

@@ -101,7 +101,7 @@ export class Select extends FormAssociatedSelect {
             }
             newValue = this.firstSelectedOption?.value ?? newValue;
         }
-        if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+        if (prev !== newValue) {
             this._value = newValue;
             super.valueChanged(prev, newValue);
             Observable.notify(this, 'value');
@@ -190,12 +190,12 @@ export class Select extends FormAssociatedSelect {
         }
         const previousSelectedIndex = this.selectedIndex;
         super.clickHandler(e);
-        this.open = this.collapsible && !this.open;
-        if (!this.open
+        if (this.open
             && this.selectedIndex !== previousSelectedIndex
             && optionClicked) {
             this.updateValue(true);
         }
+        this.open = this.collapsible && !this.open;
     }
     /**
      * Updates the value when an option's value changes.
@@ -378,6 +378,7 @@ export class Select extends FormAssociatedSelect {
             return true;
         }
         let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+        let commitValueThenClose = false;
         switch (key) {
             case keySpace: {
                 // when dropdown is open allow user to enter a space for filter text
@@ -404,8 +405,13 @@ export class Select extends FormAssociatedSelect {
                     || this.filteredOptions.every(o => o.disabled)) {
                     return false;
                 }
-                this.open = !this.open;
-                if (!this.open) {
+                if (this.open) {
+                    commitValueThenClose = true;
+                }
+                else {
+                    this.open = true;
+                }
+                if (commitValueThenClose) {
                     this.focus();
                 }
                 break;
@@ -431,11 +437,16 @@ export class Select extends FormAssociatedSelect {
                 break;
             }
         }
-        if (!this.open && this.selectedIndex !== currentActiveIndex) {
-            this.selectedIndex = currentActiveIndex;
+        if (!this.open || commitValueThenClose) {
+            if (this.selectedIndex !== currentActiveIndex) {
+                this.selectedIndex = currentActiveIndex;
+            }
+            if (initialSelectedIndex !== this.selectedIndex) {
+                this.updateValue(true);
+            }
         }
-        if (!this.open && initialSelectedIndex !== this.selectedIndex) {
-            this.updateValue(true);
+        if (commitValueThenClose) {
+            this.open = false;
         }
         return !(key === keyArrowDown || key === keyArrowUp);
     }