@aurodesignsystem/auro-formkit 5.1.3 → 5.1.4

package/components/combobox/demo/readme.md

@@ -21,6 +21,8 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
+
+By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->

package/components/combobox/dist/auro-combobox.d.ts

@@ -7,7 +7,9 @@
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
- * @event auroCombobox-valueSet - Notifies that the component has a new value set.
+ * @event auroCombobox-valueSet - (Deprecated) Notifies that the component has a new value set.
+ * @event input - Notifies that the component has a new value set.
+ * @event inputValue - Notifies that the components internal HTML5 input value has changed.
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
  */
 export class AuroCombobox extends AuroElement {
@@ -37,7 +39,7 @@ export class AuroCombobox extends AuroElement {
             reflect: boolean;
         };
         /**
-         * When attribute is present auro-menu will apply checkmarks to selected options.
+         * When attribute is present auro-menu will apply check marks to selected options.
          */
         checkmark: {
             type: BooleanConstructor;
@@ -68,6 +70,13 @@ export class AuroCombobox extends AuroElement {
             reflect: boolean;
             attribute: boolean;
         };
+        /**
+         * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
+         */
+        dvInputOnly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
          */
@@ -138,6 +147,13 @@ export class AuroCombobox extends AuroElement {
          * @type {HTMLElement}
          */
         optionSelected: HTMLElement;
+        /**
+         * If declared, selecting a menu option will not change the input value. By doing so,
+         * the current menu filter will be preserved and the user can continue from their last
+         * filter state. It is recommended to use this in combination with the `displayValue` slot.
+         * @type {Boolean}
+         */
+        persistInput: boolean;
         /**
          * Position where the bib should appear relative to the trigger.
          * Accepted values:
@@ -183,6 +199,13 @@ export class AuroCombobox extends AuroElement {
         setCustomValidityValueMissing: {
             type: StringConstructor;
         };
+        /**
+         * Indicates whether the combobox is in a dirty state (has been interacted with).
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        touched: boolean;
         /**
          * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
          */
@@ -197,6 +220,13 @@ export class AuroCombobox extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Specifies the value of the input element within the combobox.
+         */
+        typedValue: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * Specifies the `validityState` this element is in.
          */
@@ -250,49 +280,52 @@ export class AuroCombobox extends AuroElement {
      *
      */
     static register(name?: string): void;
-    matchWidth: boolean;
-    /**
-     * @private
-     * @returns {void} Internal defaults.
-     */
-    private privateDefaults;
-    dropdownOpen: any;
-    dropdownId: any;
-    onDark: boolean;
-    noFilter: boolean;
-    validity: any;
-    value: any;
-    optionSelected: any;
-    checkmark: boolean;
     disabled: boolean;
+    msgSelectionMissing: string;
+    noFilter: boolean;
     noValidate: boolean;
-    required: boolean;
-    triggerIcon: boolean;
-    availableOptions: any[];
     optionActive: any;
-    msgSelectionMissing: string;
+    persistInput: boolean;
+    required: boolean;
+    value: any;
+    typedValue: any;
+    checkmark: boolean;
+    dvInputOnly: boolean;
     fullscreenBreakpoint: string;
-    largeFullscreenHeadline: boolean;
-    validation: AuroFormValidation;
-    runtimeUtils: any;
-    isHiddenWhileLoading: boolean;
-    errorMessage: any;
-    /**
-     * @private
-     */
-    private shape;
-    /**
-     * @private
-     */
-    private size;
+    matchWidth: boolean;
+    shape: string;
+    size: string;
+    triggerIcon: boolean;
     placement: string;
     offset: number;
     noFlip: boolean;
     autoPlacement: boolean;
+    /**
+     * @private
+     * @returns {void} Internal defaults.
+     */
+    private privateDefaults;
     dropdownTag: any;
     bibtemplateTag: any;
     inputTag: any;
     helpTextTag: any;
+    availableOptions: any[];
+    dropdownId: any;
+    dropdownOpen: any;
+    errorMessage: any;
+    isHiddenWhileLoading: boolean;
+    largeFullscreenHeadline: boolean;
+    onDark: boolean;
+    optionSelected: any;
+    runtimeUtils: any;
+    touched: boolean;
+    validation: AuroFormValidation;
+    validity: any;
+    /**
+     * Returns the current value of the input element within the combobox.
+     * @returns {string|undefined} The value of the input element, or undefined if the input is not present.
+     */
+    get inputValue(): string | undefined;
     /**
      * Checks if the element is valid.
      * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -310,6 +343,11 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private syncValuesAndStates;
+    /**
+     * Update displayValue or input.value, it's called when making a selection.
+     * @private
+     */
+    private updateTriggerTextDisplay;
     /**
      * Resets the menu matchWord to true.
      * @private
@@ -350,6 +388,10 @@ export class AuroCombobox extends AuroElement {
      * @private
      */
     private setInputFocus;
+    /**
+     * @private
+     */
+    private setClearBtnFocus;
     /**
      * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
      * @private
@@ -421,6 +463,7 @@ export class AuroCombobox extends AuroElement {
      */
     validate(force?: boolean): void;
     updated(changedProperties: any): Promise<void>;
+    hasValue: boolean;
     /**
      * Applies slotted nodes to a target element with a new slot name.
      * @private
@@ -430,6 +473,11 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private transportAssignedNodes;
+    /**
+     * Updates the active option in the menu.
+     * @param {number} index - Index of the option to make active.
+     */
+    updateActiveOption(index: number): void;
     /**
      * Watch for slot changes and recalculate the menuoptions.
      * @private