@aurodesignsystem/auro-formkit 5.2.2 → 5.3.0

package/components/checkbox/dist/index.js

@@ -1087,12 +1087,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/checkbox/dist/registered.js

@@ -1087,12 +1087,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/combobox/demo/api.js

@@ -1,6 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
+import { setupExternalSelectionExample } from '../apiExamples/externalSelection.js';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
 import { inDialogExample } from '../apiExamples/inDialog';
@@ -24,6 +25,7 @@ export function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    setupExternalSelectionExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/combobox/demo/api.md

@@ -35,6 +35,7 @@
 | [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`. |
 | [shape](#shape)                         |                                 |           | `string`              | "classic"                  |                                                  |
+| [shift](#shift)                         | `shift`                         |           | `boolean`             | "false"                    | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
 | [size](#size)                          |                                 |           | `string`              | "xl"                       |                                                  |
 | [triggerIcon](#triggerIcon)                   | `triggerIcon`                   |           | `boolean`             | false                      | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
 | [type](#type)                          | `type`                          |           | `string`              |                            | Applies the defined value as the type attribute on auro-input. |
@@ -381,6 +382,92 @@ export async function dynamicMenuExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Updating Externally
+
+This example demonstrates using the <code>updateActiveOption</code> method to set a specific menu option as "active."
+
+This is useful for situations like matching IATA codes (sea -> SeaTac airport) 
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/externalSelection.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/externalSelection.html -->
+  <p style="color: white;">
+      Type 'a' in the combobox for best testing results :)
+  </p>
+  <auro-combobox ondark id="externalSelectionExample" layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
+    <span slot="ariaLabel.bib.close">Close combobox</span>
+    <span slot="ariaLabel.input.clear">Clear All</span>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+    <span slot="helpText">
+      Help text - Lorem ipsum solar lorem ipsum solar
+    </span>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/externalSelection.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/externalSelection.html -->
+
+```html
+<p style="color: white;">
+    Type 'a' in the combobox for best testing results :)
+</p>
+<auro-combobox ondark id="externalSelectionExample" layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
+  <span slot="ariaLabel.bib.close">Close combobox</span>
+  <span slot="ariaLabel.input.clear">Clear All</span>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+  <span slot="helpText">
+    Help text - Lorem ipsum solar lorem ipsum solar
+  </span>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/externalSelection.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/externalSelection.js -->
+
+```js
+import { AuroCombobox } from "../src/auro-combobox";
+
+/**
+ * Demonstrates how to make external selection in the combobox.
+ */
+export function setupExternalSelectionExample() {
+
+  /** @type {AuroCombobox} */
+  const combobox = document.getElementById('externalSelectionExample');
+
+  combobox.addEventListener('input', () => {
+    // Perform whatever matching logic you need here
+
+    // This comes from your custom code, for example matching SEA to SeaTac IATA code.
+    // This matches "peaches" as configured.
+    const matchingMenuOption = 2;
+    combobox.updateActiveOption(matchingMenuOption);
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Property Examples
 
 #### disabled
@@ -1154,8 +1241,8 @@ export function auroMenuLoadingExample() {
 
   }
 
-  combobox.addEventListener("input", (e) => {
-    if (e.target.value && e.target.value !== e.target.optionSelected?.textContent) {
+  combobox.addEventListener("inputValue", (e) => {
+    if (e.target.inputValue && e.target.value !== e.target.inputValue) {
       load();
     }
   });
@@ -1178,12 +1265,13 @@ export function auroMenuLoadingExample() {
 </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) -->
@@ -1227,6 +1315,19 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
         <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
         <auro-menuoption static nomatch>No matching option</auro-menuoption>
       </auro-menu>
+    </auro-combobox>
+    <auro-combobox width="350px" offset="20" noFlip placement="bottom-start" shift>
+      <span slot="bib.fullscreen.headline">Bib Header</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
+      <auro-menu>
+        <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+        <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+        <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+        <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+        <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+        <auro-menuoption static nomatch>No matching option</auro-menuoption>
+      </auro-menu>
     </auro-combobox>
   </div>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1276,6 +1377,19 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
       <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
       <auro-menuoption static nomatch>No matching option</auro-menuoption>
     </auro-menu>
+  </auro-combobox>
+  <auro-combobox width="350px" offset="20" noFlip placement="bottom-start" shift>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
   </auro-combobox>
 </div>
 ```