@aurodesignsystem/auro-formkit 3.2.0-beta.1 → 3.2.1

package/components/select/dist/index.js

@@ -3445,7 +3445,6 @@ var tokensCss$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
-  'xl',
   'lg',
   'md',
   'sm',
@@ -3517,7 +3516,6 @@ class AuroDropdownBib extends LitElement {
 
   set mobileFullscreenBreakpoint(value) {
     // verify the defined breakpoint is valid and exit out if not
-    // 'disabled' is a design token breakpoint so it acts as our "undefined" value
     const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
     if (!validatedValue) {
       this._mobileBreakpointValue = undefined;
@@ -4043,12 +4041,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-       *
-       * When expanded, the dropdown will automatically display in fullscreen mode
-       * if the screen size is equal to or smaller than the selected breakpoint.
-       * @default sm
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        */
       fullscreenBreakpoint: {
         type: String,
@@ -4188,15 +4181,6 @@ class AuroDropdown extends LitElement {
     AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
   }
 
-  /**
-   * Accessor for reusing the focusable entity query string.
-   * @private
-   * @returns {string}
-   */
-  get focusableEntityQuery () {
-    return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
-  }
-
   connectedCallback() {
     super.connectedCallback();
   }
@@ -4210,8 +4194,6 @@ class AuroDropdown extends LitElement {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
 
-    // Note: `disabled` is not a breakpoint (it is not a screen size),
-    // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
     if (changedProperties.has('fullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
@@ -4362,7 +4344,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4383,7 +4365,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -5607,11 +5589,8 @@ class AuroSelect extends LitElement {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-       *
-       * When expanded, the dropdown will automatically display in fullscreen mode
-       * if the screen size is equal to or smaller than the selected breakpoint.
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
+       * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        * @default sm
        */
       fullscreenBreakpoint: {
@@ -5913,6 +5892,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('up');
         }
+
+        return;
       }
 
       if (evt.key === 'ArrowDown') {
@@ -5923,6 +5904,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('down');
         }
+
+        return;
       }
 
       if (evt.key === 'Enter') {
@@ -5930,6 +5913,8 @@ class AuroSelect extends LitElement {
           evt.preventDefault();
           this.menu.makeSelection();
         }
+
+        return;
       }
 
       if (evt.key === 'Tab') {
@@ -5938,7 +5923,12 @@ class AuroSelect extends LitElement {
         } else {
           this.dropdown.hide();
         }
+
+        return;
       }
+
+      // Handle all other key presses by updating the active option based on the key pressed
+      this.updateActiveOptionBasedOnKey(evt.key);
     });
 
     this.addEventListener('focusin', this.handleFocusin);
@@ -5948,6 +5938,45 @@ class AuroSelect extends LitElement {
     });
   }
 
+  updateActiveOptionBasedOnKey(_key) {
+
+    // Get a lowercase version of the key pressed
+    const key = _key.toLowerCase();
+
+    // Calculate how many times the same letter has been pressed
+    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+
+    // Set last letter for tracking
+    this.lastLetter = key;
+
+    // Get all the options that start with the last letter pressed
+    const letterOptions = this.options.filter((option) => {
+      const optionText = option.value || '';
+      return optionText.toLowerCase().startsWith(this.lastLetter);
+    });
+
+    // If we have options that match the letter pressed
+    if (letterOptions.length) {
+
+      // Show the dropdown if it is not already visible
+      this.dropdown.show();
+
+      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
+      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+
+      // Select the new option in the menu
+      const newOption = letterOptions[index];
+      const newOptionIndex = this.options.indexOf(newOption);
+      this.menu.updateActiveOption(newOptionIndex);
+
+      newOption.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+
   /**
    * Manages the visibility of the dropdown based on loading state changes.
    *

package/components/select/dist/registered.js

@@ -3445,7 +3445,6 @@ var tokensCss$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
-  'xl',
   'lg',
   'md',
   'sm',
@@ -3517,7 +3516,6 @@ class AuroDropdownBib extends LitElement {
 
   set mobileFullscreenBreakpoint(value) {
     // verify the defined breakpoint is valid and exit out if not
-    // 'disabled' is a design token breakpoint so it acts as our "undefined" value
     const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
     if (!validatedValue) {
       this._mobileBreakpointValue = undefined;
@@ -4043,12 +4041,7 @@ class AuroDropdown extends LitElement {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-       *
-       * When expanded, the dropdown will automatically display in fullscreen mode
-       * if the screen size is equal to or smaller than the selected breakpoint.
-       * @default sm
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        */
       fullscreenBreakpoint: {
         type: String,
@@ -4188,15 +4181,6 @@ class AuroDropdown extends LitElement {
     AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
   }
 
-  /**
-   * Accessor for reusing the focusable entity query string.
-   * @private
-   * @returns {string}
-   */
-  get focusableEntityQuery () {
-    return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
-  }
-
   connectedCallback() {
     super.connectedCallback();
   }
@@ -4210,8 +4194,6 @@ class AuroDropdown extends LitElement {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
 
-    // Note: `disabled` is not a breakpoint (it is not a screen size),
-    // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
     if (changedProperties.has('fullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
@@ -4362,7 +4344,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -4383,7 +4365,7 @@ class AuroDropdown extends LitElement {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -5607,11 +5589,8 @@ class AuroSelect extends LitElement {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-       *
-       * When expanded, the dropdown will automatically display in fullscreen mode
-       * if the screen size is equal to or smaller than the selected breakpoint.
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
+       * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        * @default sm
        */
       fullscreenBreakpoint: {
@@ -5913,6 +5892,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('up');
         }
+
+        return;
       }
 
       if (evt.key === 'ArrowDown') {
@@ -5923,6 +5904,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('down');
         }
+
+        return;
       }
 
       if (evt.key === 'Enter') {
@@ -5930,6 +5913,8 @@ class AuroSelect extends LitElement {
           evt.preventDefault();
           this.menu.makeSelection();
         }
+
+        return;
       }
 
       if (evt.key === 'Tab') {
@@ -5938,7 +5923,12 @@ class AuroSelect extends LitElement {
         } else {
           this.dropdown.hide();
         }
+
+        return;
       }
+
+      // Handle all other key presses by updating the active option based on the key pressed
+      this.updateActiveOptionBasedOnKey(evt.key);
     });
 
     this.addEventListener('focusin', this.handleFocusin);
@@ -5948,6 +5938,45 @@ class AuroSelect extends LitElement {
     });
   }
 
+  updateActiveOptionBasedOnKey(_key) {
+
+    // Get a lowercase version of the key pressed
+    const key = _key.toLowerCase();
+
+    // Calculate how many times the same letter has been pressed
+    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+
+    // Set last letter for tracking
+    this.lastLetter = key;
+
+    // Get all the options that start with the last letter pressed
+    const letterOptions = this.options.filter((option) => {
+      const optionText = option.value || '';
+      return optionText.toLowerCase().startsWith(this.lastLetter);
+    });
+
+    // If we have options that match the letter pressed
+    if (letterOptions.length) {
+
+      // Show the dropdown if it is not already visible
+      this.dropdown.show();
+
+      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
+      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+
+      // Select the new option in the menu
+      const newOption = letterOptions[index];
+      const newOptionIndex = this.options.indexOf(newOption);
+      this.menu.updateActiveOption(newOptionIndex);
+
+      newOption.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+
   /**
    * Manages the visibility of the dropdown based on loading state changes.
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "3.2.0-beta.1",
+  "version": "3.2.1",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {

package/components/form/demo/autocomplete.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Demo page for auto-complete</title>
-</head>
-<body>
-<!-- EVERY AUTOCOMPLETE OPTION, auro inputs -->
-
-<!-- EVERY AUTOCOMPLETE OPTION, auro combobox -->
-
-<!-- LOGIN FORM -->
-</body>
-</html>