@genesislcap/foundation-ui 14.284.3 → 14.284.4

package/dist/custom-elements.json

@@ -921,6 +921,188 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionStyles",
+          "declaration": {
+            "name": "foundationAccordionStyles",
+            "module": "src/accordion/accordion.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Accordion>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionTemplate",
+          "declaration": {
+            "name": "foundationAccordionTemplate",
+            "module": "src/accordion/accordion.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Accordion",
+          "superclass": {
+            "name": "FASTAccordion",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-accordion",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordionShadowOptions",
+          "type": {
+            "text": "ShadowRootInit"
+          },
+          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultAccordionConfig",
+          "type": {
+            "text": "object"
+          },
+          "default": "{}"
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordion",
+          "description": "The Foundation Accordion",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Accordion",
+          "declaration": {
+            "name": "Accordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordionShadowOptions",
+          "declaration": {
+            "name": "foundationAccordionShadowOptions",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultAccordionConfig",
+          "declaration": {
+            "name": "defaultAccordionConfig",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordion",
+          "declaration": {
+            "name": "foundationAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/_config/index.ts",
@@ -1346,188 +1528,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionStyles",
-          "declaration": {
-            "name": "foundationAccordionStyles",
-            "module": "src/accordion/accordion.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Accordion>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionTemplate",
-          "declaration": {
-            "name": "foundationAccordionTemplate",
-            "module": "src/accordion/accordion.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Accordion",
-          "superclass": {
-            "name": "FASTAccordion",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-accordion",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordionShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultAccordionConfig",
-          "type": {
-            "text": "object"
-          },
-          "default": "{}"
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordion",
-          "description": "The Foundation Accordion",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Accordion",
-          "declaration": {
-            "name": "Accordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordionShadowOptions",
-          "declaration": {
-            "name": "foundationAccordionShadowOptions",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultAccordionConfig",
-          "declaration": {
-            "name": "defaultAccordionConfig",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordion",
-          "declaration": {
-            "name": "foundationAccordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.template"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/actions-menu/actions-menu.styles.ts",
@@ -35937,12 +35937,23 @@
             {
               "kind": "method",
               "name": "openChanged",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "prev"
+                  "name": "prev",
+                  "type": {
+                    "text": "boolean | undefined"
+                  }
                 },
                 {
-                  "name": "next"
+                  "name": "next",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -47193,6 +47204,23 @@
               }
             }
           ]
+        },
+        {
+          "kind": "function",
+          "name": "getRootActiveElement",
+          "return": {
+            "type": {
+              "text": "Element | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -47219,6 +47247,14 @@
             "name": "getPrefix",
             "module": "src/utils/dom.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "getRootActiveElement",
+          "declaration": {
+            "name": "getRootActiveElement",
+            "module": "src/utils/dom.ts"
+          }
         }
       ]
     },

package/dist/dts/select/select.d.ts

@@ -1,10 +1,17 @@
 import { Select as FASTSelect } from '@microsoft/fast-components';
-import type { SelectOptions } from '@microsoft/fast-foundation';
+import type { ListboxOption, SelectOptions } from '@microsoft/fast-foundation';
 /**
  * @tagname %%prefix%%-select
  */
 export declare class Select extends FASTSelect {
-    openChanged(prev: any, next: any): void;
+    /**
+     * Ensures that the provided option is focused and scrolled into view.
+     *
+     * @param optionToFocus - The option to focus
+     * @internal
+     */
+    protected focusAndScrollOptionIntoView(optionToFocus?: ListboxOption | null): void;
+    openChanged(prev: boolean | undefined, next: boolean): void;
     keydownHandler(e: KeyboardEvent): boolean | void;
 }
 export declare const foundationSelectShadowOptions: ShadowRootInit;

package/dist/dts/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAIhE;;GAEG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,WAAW,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA;IASb,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;CAoB1D;AAGD,eAAO,MAAM,6BAA6B,EAAE,cAA0B,CAAC;AAEvE,eAAO,MAAM,mBAAmB;;CAa/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,0SAM3B,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK/E;;GAEG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC;;;;;OAKG;IACH,SAAS,CAAC,4BAA4B,CACpC,aAAa,GAAE,aAAa,GAAG,IAA+B,GAC7D,IAAI;IAcE,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAuB3D,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;CAoB1D;AAGD,eAAO,MAAM,6BAA6B,EAAE,cAA0B,CAAC;AAEvE,eAAO,MAAM,mBAAmB;;CAa/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,0SAM3B,CAAC"}

package/dist/dts/utils/dom.d.ts

@@ -1,4 +1,5 @@
 export declare const wasClickOutsideElement: (event: MouseEvent, target: EventTarget) => boolean;
 export declare const wasClickInsideElement: (event: MouseEvent, target: EventTarget) => boolean;
 export declare const getPrefix: (element: any) => any;
+export declare function getRootActiveElement(element: Element): Element | null;
 //# sourceMappingURL=dom.d.ts.map

package/dist/dts/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,UAAW,UAAU,UAAU,WAAW,YACrC,CAAC;AAEzC,eAAO,MAAM,qBAAqB,UAAW,UAAU,UAAU,WAAW,YACrC,CAAC;AAExC,eAAO,MAAM,SAAS,YAAa,GAAG,QAAgD,CAAC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,UAAW,UAAU,UAAU,WAAW,YACrC,CAAC;AAEzC,eAAO,MAAM,qBAAqB,UAAW,UAAU,UAAU,WAAW,YACrC,CAAC;AAExC,eAAO,MAAM,SAAS,YAAa,GAAG,QAAgD,CAAC;AAEvF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAQrE"}

package/dist/esm/select/select.js

@@ -1,16 +1,47 @@
 import { Select as FASTSelect } from '@microsoft/fast-components';
+import { DOM } from '@microsoft/fast-element';
+import { getRootActiveElement } from '../utils';
 import { foundationSelectStyles as styles } from './select.styles';
 import { foundationSelectTemplate as template } from './select.template';
 /**
  * @tagname %%prefix%%-select
  */
 export class Select extends FASTSelect {
+    /**
+     * Ensures that the provided option is focused and scrolled into view.
+     *
+     * @param optionToFocus - The option to focus
+     * @internal
+     */
+    focusAndScrollOptionIntoView(optionToFocus = this.firstSelectedOption) {
+        // To ensure that the browser handles both `focus()` and `scrollIntoView()`, the
+        // timing here needs to guarantee that they happen on different frames. Since this
+        // function is typically called from the `openChanged` observer, `DOM.queueUpdate`
+        // causes the calls to be grouped into the same frame. To prevent this,
+        // `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
+        if (this.contains(getRootActiveElement(this)) && optionToFocus !== null) {
+            optionToFocus.focus();
+            requestAnimationFrame(() => {
+                optionToFocus.scrollIntoView({ block: 'nearest' });
+            });
+        }
+    }
     openChanged(prev, next) {
-        super.openChanged(prev, next);
-        if (!this.open) {
-            const selectedOption = this.options[this.selectedIndex];
-            selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.scrollIntoView({ block: 'center', behavior: 'auto' });
+        if (!this.collapsible) {
+            return;
+        }
+        if (this.open) {
+            this.ariaControls = this.listboxId;
+            this.ariaExpanded = 'true';
+            this.setPositioning();
+            this.focusAndScrollOptionIntoView();
+            this['indexWhenOpened'] = this.selectedIndex;
+            // focus is directed to the element when `open` is changed programmatically
+            DOM.queueUpdate(() => this.focus());
+            return;
         }
+        this.ariaControls = '';
+        this.ariaExpanded = 'false';
     }
     keydownHandler(e) {
         const key = e.key;

package/dist/esm/utils/dom.js

@@ -1,3 +1,10 @@
 export const wasClickOutsideElement = (event, target) => !event.composedPath().includes(target);
 export const wasClickInsideElement = (event, target) => event.composedPath().includes(target);
 export const getPrefix = (element) => element.tagName.toLowerCase().split('-')[0];
+export function getRootActiveElement(element) {
+    const rootNode = element.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+        return rootNode.activeElement;
+    }
+    return document.activeElement;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.284.3",
+  "version": "14.284.4",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.284.3",
-    "@genesislcap/genx": "14.284.3",
-    "@genesislcap/rollup-builder": "14.284.3",
-    "@genesislcap/ts-builder": "14.284.3",
-    "@genesislcap/uvu-playwright-builder": "14.284.3",
-    "@genesislcap/vite-builder": "14.284.3",
-    "@genesislcap/webpack-builder": "14.284.3",
+    "@genesislcap/foundation-testing": "14.284.4",
+    "@genesislcap/genx": "14.284.4",
+    "@genesislcap/rollup-builder": "14.284.4",
+    "@genesislcap/ts-builder": "14.284.4",
+    "@genesislcap/uvu-playwright-builder": "14.284.4",
+    "@genesislcap/vite-builder": "14.284.4",
+    "@genesislcap/webpack-builder": "14.284.4",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.0",
     "rxjs": "^7.5.4"
@@ -100,15 +100,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.284.3",
-    "@genesislcap/foundation-comms": "14.284.3",
-    "@genesislcap/foundation-criteria": "14.284.3",
-    "@genesislcap/foundation-errors": "14.284.3",
-    "@genesislcap/foundation-events": "14.284.3",
-    "@genesislcap/foundation-logger": "14.284.3",
-    "@genesislcap/foundation-notifications": "14.284.3",
-    "@genesislcap/foundation-user": "14.284.3",
-    "@genesislcap/foundation-utils": "14.284.3",
+    "@genesislcap/expression-builder": "14.284.4",
+    "@genesislcap/foundation-comms": "14.284.4",
+    "@genesislcap/foundation-criteria": "14.284.4",
+    "@genesislcap/foundation-errors": "14.284.4",
+    "@genesislcap/foundation-events": "14.284.4",
+    "@genesislcap/foundation-logger": "14.284.4",
+    "@genesislcap/foundation-notifications": "14.284.4",
+    "@genesislcap/foundation-user": "14.284.4",
+    "@genesislcap/foundation-utils": "14.284.4",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -130,5 +130,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "db1cb0ca13743e398d9fdd546efb554f8e6a8931"
+  "gitHead": "2d0cf06b2b00f5e0e5fd096552cef9d324e832f5"
 }