@aurodesignsystem/auro-formkit 5.2.3 → 5.3.1

package/components/menu/demo/api.min.js

@@ -867,6 +867,9 @@ class AuroMenu extends AuroElement$1 {
       case "ArrowUp":
         this.navigateOptions('up');
         break;
+      case "Tab":
+        this.makeSelection();
+        break;
       case "Enter":
         this.makeSelection();
         break;

package/components/menu/demo/index.min.js

@@ -827,6 +827,9 @@ class AuroMenu extends AuroElement$1 {
       case "ArrowUp":
         this.navigateOptions('up');
         break;
+      case "Tab":
+        this.makeSelection();
+        break;
       case "Enter":
         this.makeSelection();
         break;

package/components/menu/dist/index.js

@@ -834,6 +834,9 @@ class AuroMenu extends AuroElement$1 {
       case "ArrowUp":
         this.navigateOptions('up');
         break;
+      case "Tab":
+        this.makeSelection();
+        break;
       case "Enter":
         this.makeSelection();
         break;

package/components/menu/dist/registered.js

@@ -793,6 +793,9 @@ class AuroMenu extends AuroElement$1 {
       case "ArrowUp":
         this.navigateOptions('up');
         break;
+      case "Tab":
+        this.makeSelection();
+        break;
       case "Enter":
         this.makeSelection();
         break;

package/components/radio/demo/api.min.js

@@ -1148,12 +1148,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/demo/index.min.js

@@ -1123,12 +1123,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/dist/index.js

@@ -1076,12 +1076,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/dist/registered.js

@@ -1076,12 +1076,23 @@ class AuroFormValidation {
     }
 
     if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
-      elem.validity = this.auroInputElements[0].validity;
-      elem.errorMessage = this.auroInputElements[0].errorMessage;
+
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistValue) {
+
+        // run validation on all inputs since we're going to use them to set the validity of this component
+        this.auroInputElements.forEach(input => input.validate());
+
+        // Reset element validity to the validity of the input
+        elem.validity = this.auroInputElements[0].validity;
+        elem.errorMessage = this.auroInputElements[0].errorMessage;
+      }
 
       // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !isCombobox) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/select/demo/api.md

@@ -40,6 +40,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                          |                | Sets a custom help text message to display for all validityStates. |
 | [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                          |                | Custom help text message to display when validity = `customError`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                          |                | Custom help text message to display when validity = `valueMissing`. |
+| [shift](#shift)                         | `shift`                         | `boolean`                         | "false"        | If set, the dropdown will shift its position to avoid being cut off by the viewport. |
 | [validity](#validity)                      | `validity`                      | `string`                          |                | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `string`                          |                | Value selected for the component.                |
 
@@ -1130,12 +1131,13 @@ The label for selected option can be customized using `displayValue` slot under
 </auro-accordion>
 
 ### Customized bib position
-The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement` attributes.
+The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement`, and `shift` attributes.
 
 - `placement` specifies the preferred position where the bib should appear relative to the trigger.
 - `offset` sets the distance between the trigger and the bib.
 - When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`.
 - Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position.
+- `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floaterConfig.html) -->
@@ -1180,6 +1182,19 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
         <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
       </auro-menu>
     </auro-select>
+    <auro-select width="350px" offset="20" noFlip placement="bottom-start" shift noFlip >
+      <span slot="bib.fullscreen.headline">Bib Headline</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
+      <auro-menu>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+      </auro-menu>
+    </auro-select>
   </div>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1229,6 +1244,19 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
     </auro-menu>
   </auro-select>
+  <auro-select width="350px" offset="20" noFlip placement="bottom-start" shift noFlip >
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
 </div>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->