@aurodesignsystem-dev/auro-formkit 0.0.0-pr1516.0 → 0.0.0-pr1519.0

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

@@ -4343,11 +4343,17 @@ class AuroFormValidation {
           return;
         }
 
-        // Validate that the date passed was the correct format and is a valid date
+        // Validate that the date passed was the correct format and is a valid date.
+        // For partial date formats, valueObject is never populated; validate them directly.
         if (elem.value && !elem.valueObject) {
-          elem.validity = 'patternMismatch';
-          elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
-          return;
+          const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
+          const isValidPartial = isPartialDateFormat && elem.util.isValidPartialDate(elem.value, elem.format);
+
+          if (!isValidPartial) {
+            elem.validity = 'patternMismatch';
+            elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
+            return;
+          }
         }
 
         // Perform the rest of the validation
@@ -4441,15 +4447,17 @@ class AuroFormValidation {
         );
       }
 
-      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements?.length === 2) {
-        if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+
+      // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
+      // Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
+      // field (datepicker is the intended consumer — start/end are independently required).
+      if (this.auroInputElements?.length === 2 && !isCombobox) {
+        if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
           hasValue = false;
         }
       }
 
-      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
-
       if (isCombobox) {
 
         if (!elem.persistInput || elem.behavior === "filter") {
@@ -10349,6 +10357,42 @@ class AuroInputUtilities {
     return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
   }
 
+  /**
+   * Validates a value against a partial date format (one that lacks yy/mm/dd all three).
+   * Single-component formats are checked as integer ranges; multi-component formats use
+   * a date-fns parse + round-trip to confirm both validity and exact formatting.
+   * @param {string} value - The user-facing display value.
+   * @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
+   * @returns {boolean}
+   */
+  isValidPartialDate(value, format$1) {
+    if (!value || !format$1) {
+      return false;
+    }
+    const normalizedFormat = format$1.toLowerCase();
+
+    if (normalizedFormat === 'dd') {
+      const num = Number(value);
+      return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
+    }
+    if (normalizedFormat === 'yy') {
+      const num = Number(value);
+      return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
+    }
+    if (normalizedFormat === 'yyyy') {
+      const num = Number(value);
+      return (/^\d{4}$/u).test(value) && num >= 1 && num <= 9999;
+    }
+
+    const dateFnsMask = this.toDateFnsMask(normalizedFormat);
+    // Use the 1st of the current month as the reference so that formats
+    // omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
+    const referenceDate = new Date();
+    referenceDate.setDate(1);
+    const parsed = parse(value, dateFnsMask, referenceDate);
+    return isValid(parsed) && format(parsed, dateFnsMask) === value;
+  }
+
   /**
    * Converts a display string to its model value.
    * For full date formats, converts the display string to an ISO date string.
@@ -10396,6 +10440,7 @@ class AuroInputUtilities {
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
       return undefined;
     }
 
@@ -10553,6 +10598,7 @@ class BaseInput extends AuroElement {
     // so a parent (datepicker/combobox) calling `validate()` synchronously
     // during its own update cycle sees a populated util instance.
     this.activeLabel = false;
+
     /** @private */
     this.allowedInputTypes = [
       "text",
@@ -10563,6 +10609,7 @@ class BaseInput extends AuroElement {
       "tel"
     ];
     this.appearance = "default";
+
     /** @private */
     this.dateFormatMap = {
       'mm/dd/yyyy': 'dateMMDDYYYY',
@@ -10581,23 +10628,24 @@ class BaseInput extends AuroElement {
       'mm/dd': 'dateMMDD'
     };
     this.disabled = false;
+
     /** @private */
     this.domHandler = new DomHandler();
     this.dvInputOnly = false;
     this.hasValue = false;
     this.hideLabelVisually = false;
     this.icon = false;
+
     /** @private */
     this.inputIconName = undefined;
+
     /** @private */
     this.label = 'Input label is undefined';
     this.layout = 'classic';
     this.locale = 'en-US';
     this.max = undefined;
-    this._maxObject = undefined;
     this.maxLength = undefined;
     this.min = undefined;
-    this._minObject = undefined;
     this.minLength = undefined;
     this.noValidate = false;
     this.onDark = false;
@@ -10614,23 +10662,27 @@ class BaseInput extends AuroElement {
       "email"
     ];
     this.shape = 'classic';
+
     /** @private */
     this.showPassword = false;
     this.size = 'lg';
     this.touched = false;
+
     /** @private */
     this.uniqueId = new UniqueId().create();
+
     /** @private */
     this.util = new AuroInputUtilities({
       locale: this.locale,
       format: this.format
     });
+
     /** @private */
     this.validation = new AuroFormValidation();
+
     /** @private */
     this.validationCCLength = undefined;
     this.value = undefined;
-    this._valueObject = undefined;
   }
 
   // function to define props used within the scope of this component
@@ -10960,6 +11012,13 @@ class BaseInput extends AuroElement {
         type: String
       },
 
+      /**
+       * Custom help text message to display when validity = `patternMismatch`.
+       */
+      setCustomValidityPatternMismatch: {
+        type: String
+      },
+
       /**
        * Custom help text message to display when validity = `rangeOverflow`.
        */
@@ -11030,7 +11089,7 @@ class BaseInput extends AuroElement {
 
       /**
        * Populates the `type` attribute on the input.
-       * @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
+       * @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
        * @default 'text'
        */
       type: {
@@ -11068,7 +11127,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject || this._computeDateObjectFallback(this.value);
+    return this.value && dateFormatter.isValidDate(this.value) ? dateFormatter.stringToDateInstance(this.value) : undefined;
   }
 
   /**
@@ -11076,7 +11135,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject || this._computeDateObjectFallback(this.min);
+    return this.min && dateFormatter.isValidDate(this.min) ? dateFormatter.stringToDateInstance(this.min) : undefined;
   }
 
   /**
@@ -11084,50 +11143,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get maxObject() {
-    return this._maxObject || this._computeDateObjectFallback(this.max);
-  }
-
-  /**
-   * Parses a date string into a Date object when the corresponding `_*Object`
-   * field hasn't been synced yet by `updated()`. Returns undefined when the
-   * input type/format isn't a full date or the string is not a valid date.
-   *
-   * Why this exists: a parent (datepicker) can call `inputN.validate()` from
-   * inside its own `updated()` before this input's `updated()` has run
-   * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
-   * and range checks would otherwise silently no-op (flipping the result to
-   * `valid` or `patternMismatch`).
-   * @private
-   * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
-   * @returns {Date|undefined}
-   */
-  _computeDateObjectFallback(dateStr) {
-    if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
-      return undefined;
-    }
-    if (!dateFormatter.isValidDate(dateStr)) {
-      return undefined;
-    }
-    return dateFormatter.stringToDateInstance(dateStr);
-  }
-
-  /**
-   * Internal setter for readonly date object properties.
-   * @private
-   * @param {'valueObject'|'minObject'|'maxObject'} propertyName - Public object property name.
-   * @param {Date|undefined} propertyValue - Value to assign.
-   * @returns {void}
-   */
-  setDateObjectProperty(propertyName, propertyValue) {
-    const internalPropertyName = `_${propertyName}`;
-    const previousValue = this[internalPropertyName];
-
-    if (previousValue === propertyValue) {
-      return;
-    }
-
-    this[internalPropertyName] = propertyValue;
-    this.requestUpdate(propertyName, previousValue);
+    return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
   }
 
   connectedCallback() {
@@ -11156,7 +11172,6 @@ class BaseInput extends AuroElement {
       format: this.format
     });
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   disconnectedCallback() {
@@ -11195,7 +11210,6 @@ class BaseInput extends AuroElement {
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   /**
@@ -11339,8 +11353,6 @@ class BaseInput extends AuroElement {
       this.configureDataForType();
     }
 
-    this.syncDateValues(changedProperties);
-
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
@@ -11362,14 +11374,14 @@ class BaseInput extends AuroElement {
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        if (this.maskInstance && this.type === 'credit-card') {
+        if (this.maskInstance && this.type !== 'date') {
           // Route through the mask so its _value and el.value stay in lock-step
           // (set value calls updateControl which writes el.value = displayValue).
           // Writing el.value directly leaves the mask thinking displayValue is
-          // stale; _saveSelection on the next focus/click then warns. Scoped to
-          // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
-          // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
-          // and flip validity from patternMismatch to tooShort.
+          // stale; _saveSelection on the next focus/click then warns. Date is
+          // excluded because its formattedValue can be raw ISO when the calendar
+          // is invalid, and re-masking through mm/dd/yyyy would truncate it and
+          // flip validity from patternMismatch to tooShort.
           this.maskInstance.value = formattedValue || '';
         } else if (formattedValue) {
           this.inputElement.value = formattedValue;
@@ -11411,120 +11423,65 @@ class BaseInput extends AuroElement {
     }));
   }
 
-
-  /**
-   * Synchronizes the ISO string values and Date object representations for date-related properties.
-   * This keeps the model and display values aligned when either side changes.
-   *
-   * When a full date format is in use, this method updates `value`, `min`, and `max` from their corresponding
-   * Date objects or vice versa, based on which properties have changed. It only runs when the current configuration
-   * represents a full year/month/day date format.
-   *
-   * @param {Map<string, unknown>|undefined} [changedProperties=undefined] - Optional map of changed properties used to limit which values are synchronized.
-   * @returns {void}
-   * @private
-   */
-  syncDateValues(changedProperties = undefined) {
-    if (!this.util.isFullDateFormat(this.type, this.format)) {
-      return;
-    }
-
-    this.syncSingleDateValue(changedProperties, 'valueObject', 'value');
-    this.syncSingleDateValue(changedProperties, 'minObject', 'min');
-    this.syncSingleDateValue(changedProperties, 'maxObject', 'max');
-  }
-
-  /**
-   * Synchronizes one date object/string property pair.
-   * @private
-   * @param {Map<string, unknown>|undefined} changedProperties - Map of changed properties from Lit.
-   * @param {string} objectProperty - Date object property name.
-   * @param {string} valueProperty - ISO string property name.
-   * @returns {void}
-   */
-  syncSingleDateValue(changedProperties, objectProperty, valueProperty) {
-    const objectPropertyChanged = !changedProperties || changedProperties.has(objectProperty);
-
-    // objectProperty wins over valueProperty when both changed
-    if (objectPropertyChanged && this[objectProperty]) {
-      this[valueProperty] = dateFormatter.toISOFormatString(this[objectProperty]);
-      return;
-    }
-
-    const valuePropertyChanged = !changedProperties || changedProperties.has(valueProperty);
-    if (!valuePropertyChanged) {
-      return;
-    }
-
-    // when value is newly set to the same ISO string that corresponds to the existing Date object, do not clear the Date object (avoid unnecessary updates)
-    if (
-      changedProperties &&
-      valueProperty === 'value' &&
-      changedProperties.get('value') === undefined &&
-      this[objectProperty] instanceof Date &&
-      this[valueProperty] === dateFormatter.toISOFormatString(this[objectProperty])
-    ) {
-      return;
-    }
-
-    if (dateFormatter.isValidDate(this[valueProperty])) {
-      this.setDateObjectProperty(objectProperty, dateFormatter.stringToDateInstance(this[valueProperty]));
-    } else {
-      this.setDateObjectProperty(objectProperty, undefined);
-    }
-  }
-
   /**
    * Sets up IMasks and logic based on auto-formatting requirements.
    * @private
    * @returns {void}
    */
   configureAutoFormatting() {
-    // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
-    // by _configuringMask above) could otherwise trigger handleInput →
-    // processCreditCard → configureAutoFormatting before the outer call's
-    // set value has finished its alignCursor pass.
+    // _configuringMask gates two things: external re-entry into this method
+    // while setup is mid-flight (from property changes that call back here),
+    // and the accept/complete listeners below — both need to ignore the mask
+    // events fired by our own value-restore step.
     if (this._configuringMask) return;
     this._configuringMask = true;
     try {
+      // Destroy any prior mask so IMask can attach fresh under the new format.
+      // Null the reference too — if the new maskOptions.mask is falsy (e.g.
+      // type switched from credit-card to text) the IMask() reassignment
+      // below is skipped, and downstream writes at line ~823 would otherwise
+      // route through the destroyed instance.
       if (this.maskInstance) {
         this.maskInstance.destroy();
+        this.maskInstance = null;
       }
 
-      // Pass new format to util
       this.util.updateFormat(this.format);
 
       const maskOptions = this.util.getMaskOptions(this.type, this.format);
 
       if (this.inputElement && maskOptions.mask) {
-
-        // Stash and clear any existing value before IMask init.
-        // IMask's constructor processes the current input value which requires
-        // selection state — clearing first avoids that scenario entirely.
-        // When the format changes (e.g. locale switch) and we have a valid ISO
-        // model value, compute the display string for the NEW format instead of
-        // re-using the old display string, which may be invalid in the new mask.
+        // Capture the current display so it can be re-applied after IMask
+        // attaches. The restore at the bottom goes through maskInstance.value
+        // (not inputElement.value directly) so the mask's internal state and
+        // the input's displayed text stay in lock-step.
         let existingValue = this.inputElement.value;
+
+        // Format-change case (e.g. locale switch): existingValue is the OLD
+        // mask's display string and may not parse under the new mask. When
+        // we have a valid date model, rebuild the display from valueObject
+        // (the canonical source) using the new mask's format function.
         if (
           this.util.isFullDateFormat(this.type, this.format) &&
           this.value &&
-          dateFormatter.isValidDate(this.value) &&
-          this.valueObject instanceof Date &&
-          !Number.isNaN(this.valueObject.getTime()) &&
+          this.valueObject &&
           typeof maskOptions.format === 'function'
         ) {
           existingValue = maskOptions.format(this.valueObject);
         }
 
+        // Clear before IMask attaches so the constructor seeds an empty
+        // internal value. Otherwise IMask reads the stale unmasked string
+        // and emits a spurious 'accept' before the restore below runs.
         this.skipNextProgrammaticInputEvent = true;
         this.inputElement.value = '';
 
         this.maskInstance = IMask(this.inputElement, maskOptions);
 
+        // Mask fires 'accept' on every value change, including the restore
+        // step below. Skip events fired during configureAutoFormatting so
+        // we don't overwrite a value the parent just pushed.
         this.maskInstance.on('accept', () => {
-          // Suppress propagation during configureAutoFormatting's own value-restoration
-          // (line below) — the mask emits 'accept' on every value-set, including ours,
-          // and we don't want to overwrite a value the parent just pushed.
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
           if (this.type === "date") {
@@ -11532,6 +11489,8 @@ class BaseInput extends AuroElement {
           }
         });
 
+        // Mask fires 'complete' on the restore step below for any value that
+        // happens to be a complete match. Same setup-suppression as 'accept'.
         this.maskInstance.on('complete', () => {
           if (this._configuringMask) return;
           this.value = this.util.toModelValue(this.maskInstance.value, this.format);
@@ -11540,7 +11499,9 @@ class BaseInput extends AuroElement {
           }
         });
 
-        // Restore the stashed value through IMask so it's properly masked
+        // Write existingValue through the mask (not the input directly) so
+        // the mask reformats it under the new rules and keeps its internal
+        // _value aligned with the input's displayed text.
         if (existingValue) {
           this.maskInstance.value = existingValue;
         }
@@ -11634,9 +11595,9 @@ class BaseInput extends AuroElement {
     // the gated types currently support it, since the list is a public
     // property a consumer could mutate.
     if (this.setSelectionInputTypes.includes(this.type)) {
-      let selectionStart;
+      let selectionStart = null;
       try {
-        selectionStart = this.inputElement.selectionStart;
+        ({ selectionStart } = this.inputElement);
       } catch (error) { // eslint-disable-line no-unused-vars
         return;
       }
@@ -11740,7 +11701,6 @@ class BaseInput extends AuroElement {
    */
   reset() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
     this.validation.reset(this);
   }
 
@@ -11749,7 +11709,6 @@ class BaseInput extends AuroElement {
    */
   clear() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
   }
 
   /**
@@ -12278,7 +12237,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202606292156';
+var formkitVersion = '202607011722';
 
 /**
  * @license

package/components/input/dist/base-input.d.ts

@@ -291,6 +291,12 @@ export default class BaseInput extends AuroElement {
         setCustomValidityForType: {
             type: StringConstructor;
         };
+        /**
+         * Custom help text message to display when validity = `patternMismatch`.
+         */
+        setCustomValidityPatternMismatch: {
+            type: StringConstructor;
+        };
         /**
          * Custom help text message to display when validity = `rangeOverflow`.
          */
@@ -352,10 +358,10 @@ export default class BaseInput extends AuroElement {
         };
         /**
          * Populates the `type` attribute on the input.
-         * @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
+         * @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
          * @default 'text'
          */
-        type: "text" | "password" | "email" | "credit-card" | "tel" | "number";
+        type: "text" | "password" | "email" | "credit-card" | "tel" | "number" | "date";
         /**
          * Sets validation mode to re-eval with each input.
          */
@@ -401,10 +407,8 @@ export default class BaseInput extends AuroElement {
     private label;
     locale: string;
     max: any;
-    _maxObject: any;
     maxLength: any;
     min: any;
-    _minObject: any;
     minLength: any;
     noValidate: boolean;
     onDark: boolean;
@@ -427,7 +431,6 @@ export default class BaseInput extends AuroElement {
     /** @private */
     private validationCCLength;
     value: any;
-    _valueObject: any;
     /**
      * Read-only Date object representation of `value` for full date formats.
      * @returns {Date|undefined}
@@ -443,29 +446,6 @@ export default class BaseInput extends AuroElement {
      * @returns {Date|undefined}
      */
     get maxObject(): Date | undefined;
-    /**
-     * Parses a date string into a Date object when the corresponding `_*Object`
-     * field hasn't been synced yet by `updated()`. Returns undefined when the
-     * input type/format isn't a full date or the string is not a valid date.
-     *
-     * Why this exists: a parent (datepicker) can call `inputN.validate()` from
-     * inside its own `updated()` before this input's `updated()` has run
-     * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
-     * and range checks would otherwise silently no-op (flipping the result to
-     * `valid` or `patternMismatch`).
-     * @private
-     * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
-     * @returns {Date|undefined}
-     */
-    private _computeDateObjectFallback;
-    /**
-     * Internal setter for readonly date object properties.
-     * @private
-     * @param {'valueObject'|'minObject'|'maxObject'} propertyName - Public object property name.
-     * @param {Date|undefined} propertyValue - Value to assign.
-     * @returns {void}
-     */
-    private setDateObjectProperty;
     firstUpdated(): void;
     wrapperElement: Element | null | undefined;
     inputElement: HTMLInputElement | null | undefined;
@@ -500,28 +480,6 @@ export default class BaseInput extends AuroElement {
      * @returns {void} Notify validity state changed via event.
      */
     private notifyValidityChange;
-    /**
-     * Synchronizes the ISO string values and Date object representations for date-related properties.
-     * This keeps the model and display values aligned when either side changes.
-     *
-     * When a full date format is in use, this method updates `value`, `min`, and `max` from their corresponding
-     * Date objects or vice versa, based on which properties have changed. It only runs when the current configuration
-     * represents a full year/month/day date format.
-     *
-     * @param {Map<string, unknown>|undefined} [changedProperties=undefined] - Optional map of changed properties used to limit which values are synchronized.
-     * @returns {void}
-     * @private
-     */
-    private syncDateValues;
-    /**
-     * Synchronizes one date object/string property pair.
-     * @private
-     * @param {Map<string, unknown>|undefined} changedProperties - Map of changed properties from Lit.
-     * @param {string} objectProperty - Date object property name.
-     * @param {string} valueProperty - ISO string property name.
-     * @returns {void}
-     */
-    private syncSingleDateValue;
     /**
      * Sets up IMasks and logic based on auto-formatting requirements.
      * @private
@@ -529,7 +487,7 @@ export default class BaseInput extends AuroElement {
      */
     private configureAutoFormatting;
     _configuringMask: boolean | undefined;
-    maskInstance: import("imask").InputMask<any> | undefined;
+    maskInstance: import("imask").InputMask<any> | null | undefined;
     /**
      * Sends event notifying that the input has changed it's value.
      * @private