@aurodesignsystem-dev/auro-formkit 0.0.0-pr1431.3 → 0.0.0-pr1433.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/dist/index.js +1 -1
  4. package/components/checkbox/dist/registered.js +1 -1
  5. package/components/combobox/demo/api.min.js +230 -44
  6. package/components/combobox/demo/index.min.js +230 -44
  7. package/components/combobox/dist/auro-combobox.d.ts +4 -0
  8. package/components/combobox/dist/index.js +142 -22
  9. package/components/combobox/dist/registered.js +142 -22
  10. package/components/counter/demo/api.min.js +30 -2
  11. package/components/counter/demo/index.min.js +30 -2
  12. package/components/counter/dist/index.js +30 -2
  13. package/components/counter/dist/registered.js +30 -2
  14. package/components/datepicker/demo/api.min.js +33 -3
  15. package/components/datepicker/demo/index.min.js +33 -3
  16. package/components/datepicker/dist/index.js +33 -3
  17. package/components/datepicker/dist/registered.js +33 -3
  18. package/components/dropdown/demo/api.min.js +29 -1
  19. package/components/dropdown/demo/index.min.js +29 -1
  20. package/components/dropdown/dist/index.js +29 -1
  21. package/components/dropdown/dist/registered.js +29 -1
  22. package/components/form/demo/api.min.js +326 -54
  23. package/components/form/demo/index.min.js +326 -54
  24. package/components/input/demo/api.min.js +1 -1
  25. package/components/input/demo/index.min.js +1 -1
  26. package/components/input/dist/index.js +1 -1
  27. package/components/input/dist/registered.js +1 -1
  28. package/components/menu/demo/api.min.js +88 -22
  29. package/components/menu/demo/index.min.js +88 -22
  30. package/components/menu/dist/index.js +88 -22
  31. package/components/menu/dist/registered.js +88 -22
  32. package/components/radio/demo/api.min.js +1 -1
  33. package/components/radio/demo/index.min.js +1 -1
  34. package/components/radio/dist/index.js +1 -1
  35. package/components/radio/dist/registered.js +1 -1
  36. package/components/select/demo/api.min.js +118 -24
  37. package/components/select/demo/index.min.js +118 -24
  38. package/components/select/dist/index.js +30 -2
  39. package/components/select/dist/registered.js +30 -2
  40. package/custom-elements.json +1441 -1432
  41. package/package.json +2 -2
@@ -6759,7 +6759,7 @@ class AuroHelpText extends i$3 {
6759
6759
  }
6760
6760
  }
6761
6761
 
6762
- var formkitVersion = '202604091453';
6762
+ var formkitVersion = '202604100244';
6763
6763
 
6764
6764
  /**
6765
6765
  * @license
@@ -6684,7 +6684,7 @@ class AuroHelpText extends i$3 {
6684
6684
  }
6685
6685
  }
6686
6686
 
6687
- var formkitVersion = '202604091453';
6687
+ var formkitVersion = '202604100244';
6688
6688
 
6689
6689
  /**
6690
6690
  * @license
@@ -6626,7 +6626,7 @@ class AuroHelpText extends LitElement {
6626
6626
  }
6627
6627
  }
6628
6628
 
6629
- var formkitVersion = '202604091453';
6629
+ var formkitVersion = '202604100244';
6630
6630
 
6631
6631
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6632
6632
  // See LICENSE in the project root for license information.
@@ -6626,7 +6626,7 @@ class AuroHelpText extends LitElement {
6626
6626
  }
6627
6627
  }
6628
6628
 
6629
- var formkitVersion = '202604091453';
6629
+ var formkitVersion = '202604100244';
6630
6630
 
6631
6631
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6632
6632
  // See LICENSE in the project root for license information.
@@ -709,7 +709,7 @@ class AuroMenuOption extends AuroElement {
709
709
  this.setAttribute('aria-selected', this.selected.toString());
710
710
 
711
711
  // Update menu service selection state if this isn't an internal update
712
- if (this.internalUpdateInProgress !== true) {
712
+ if (this.internalUpdateInProgress !== true && this.menuService) {
713
713
  this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
714
714
  }
715
715
  }
@@ -744,9 +744,10 @@ class AuroMenuOption extends AuroElement {
744
744
  }
745
745
 
746
746
  disconnectedCallback() {
747
- if (this.menuService) {
748
- this.menuService.unsubscribe(this.handleMenuChange);
749
- this.menuService.removeMenuOption(this);
747
+ const { menuService } = this;
748
+ if (menuService) {
749
+ menuService.unsubscribe(this.handleMenuChange);
750
+ menuService.removeMenuOption(this);
750
751
  }
751
752
  }
752
753
 
@@ -915,9 +916,11 @@ class AuroMenuOption extends AuroElement {
915
916
  * @private
916
917
  */
917
918
  handleMouseEnter() {
918
- if (!this.disabled) {
919
- this.menuService.setHighlightedOption(this);
919
+ const { menuService } = this;
920
+ if (!menuService || this.disabled) {
921
+ return;
920
922
  }
923
+ menuService.setHighlightedOption(this);
921
924
  }
922
925
 
923
926
  /**
@@ -1321,10 +1324,15 @@ class MenuService {
1321
1324
  return;
1322
1325
  }
1323
1326
 
1327
+ const before = this.selectedOptions || [];
1324
1328
  const optionsSet = new Set(optionsToDeselect);
1325
- this.selectedOptions = (this.selectedOptions || [])
1326
- .filter(opt => !optionsSet.has(opt));
1329
+ const after = before.filter(opt => !optionsSet.has(opt));
1327
1330
 
1331
+ if (this.optionsArraysMatch(after, before)) {
1332
+ return;
1333
+ }
1334
+
1335
+ this.selectedOptions = after;
1328
1336
  this.stageUpdate();
1329
1337
  }
1330
1338
 
@@ -1420,6 +1428,16 @@ class MenuService {
1420
1428
  return;
1421
1429
  }
1422
1430
 
1431
+ const hostValue = this.host && this.host.value;
1432
+ const hostHasValue = hostValue !== undefined &&
1433
+ hostValue !== null &&
1434
+ (!Array.isArray(hostValue) || hostValue.length > 0) &&
1435
+ (typeof hostValue !== 'string' || hostValue.trim() !== '');
1436
+
1437
+ if (hostHasValue && this._pendingValue != null) {
1438
+ return;
1439
+ }
1440
+
1423
1441
  this.clearPendingValue();
1424
1442
 
1425
1443
  if (this.selectedOptions.length > 0) {
@@ -1600,6 +1618,9 @@ class MenuService {
1600
1618
  this.notify({ type: 'optionsChange', options: this._menuOptions });
1601
1619
 
1602
1620
  if (this._pendingValue != null) {
1621
+ // Reset the retry count so a new option registration gives a fresh
1622
+ // budget — the initial retries fired before delayed options arrived.
1623
+ this._pendingRetryCount = 0;
1603
1624
  this.queuePendingValue(this._pendingValue);
1604
1625
  }
1605
1626
  }
@@ -1944,7 +1965,11 @@ class AuroMenu extends AuroElement {
1944
1965
  * @returns {string} - Returns the label of the currently selected option(s).
1945
1966
  */
1946
1967
  get currentLabel() {
1947
- return this.menuService.currentLabel;
1968
+ const { menuService } = this;
1969
+ if (!menuService) {
1970
+ return '';
1971
+ }
1972
+ return menuService.currentLabel;
1948
1973
  };
1949
1974
 
1950
1975
  /**
@@ -1967,7 +1992,12 @@ class AuroMenu extends AuroElement {
1967
1992
  * @param {number} value - Sets the index of the currently active option.
1968
1993
  */
1969
1994
  set index(value) {
1970
- this.menuService.setHighlightedIndex(value);
1995
+ const { menuService } = this;
1996
+ if (!menuService) {
1997
+ return;
1998
+ }
1999
+
2000
+ menuService.setHighlightedIndex(value);
1971
2001
  }
1972
2002
 
1973
2003
  /**
@@ -1989,7 +2019,11 @@ class AuroMenu extends AuroElement {
1989
2019
  * @returns {String|Array<String>}
1990
2020
  */
1991
2021
  get formattedValue() {
1992
- return this.menuService.currentValue;
2022
+ const { menuService } = this;
2023
+ if (!menuService) {
2024
+ return '';
2025
+ }
2026
+ return menuService.currentValue;
1993
2027
  }
1994
2028
 
1995
2029
  /**
@@ -2033,7 +2067,11 @@ class AuroMenu extends AuroElement {
2033
2067
  * @param {HTMLElement} option - The option to set as active.
2034
2068
  */
2035
2069
  updateActiveOption(option) {
2036
- this.menuService.setHighlightedOption(option);
2070
+ const { menuService } = this;
2071
+ if (!menuService) {
2072
+ return;
2073
+ }
2074
+ menuService.setHighlightedOption(option);
2037
2075
  }
2038
2076
 
2039
2077
  /**
@@ -2061,7 +2099,8 @@ class AuroMenu extends AuroElement {
2061
2099
  if (event.type === 'valueChange') {
2062
2100
 
2063
2101
  // New option is array value or first option with fallback to undefined for empty array in all cases
2064
- const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
2102
+ const options = event.options || [];
2103
+ const newOption = this.multiSelect && options.length ? options : options[0] || undefined;
2065
2104
  const newValue = event.stringValue;
2066
2105
 
2067
2106
  // Check if the option or value has actually changed
@@ -2070,8 +2109,11 @@ class AuroMenu extends AuroElement {
2070
2109
  this.setInternalValue(newValue);
2071
2110
  }
2072
2111
 
2073
- // Notify components of selection change
2074
- this.notifySelectionChange(event);
2112
+ // Notify components of selection change (pass normalized options to avoid undefined iterability errors)
2113
+ this.notifySelectionChange({
2114
+ ...event,
2115
+ options
2116
+ });
2075
2117
  }
2076
2118
 
2077
2119
  if (event.type === 'highlightChange') {
@@ -2094,7 +2136,11 @@ class AuroMenu extends AuroElement {
2094
2136
  * @returns {Array<HTMLElement>}
2095
2137
  */
2096
2138
  get selectedOptions() {
2097
- return this.menuService ? this.menuService.selectedOptions : [];
2139
+ const { menuService } = this;
2140
+ if (!menuService) {
2141
+ return [];
2142
+ }
2143
+ return menuService.selectedOptions;
2098
2144
  }
2099
2145
 
2100
2146
  /**
@@ -2102,7 +2148,11 @@ class AuroMenu extends AuroElement {
2102
2148
  * @returns {HTMLElement|null}
2103
2149
  */
2104
2150
  get selectedOption() {
2105
- return this.menuService ? this.menuService.selectedOptions[0] : null;
2151
+ const { menuService } = this;
2152
+ if (!menuService) {
2153
+ return null;
2154
+ }
2155
+ return menuService.selectedOptions[0] || null;
2106
2156
  }
2107
2157
 
2108
2158
  // Lifecycle Methods
@@ -2146,7 +2196,11 @@ class AuroMenu extends AuroElement {
2146
2196
  // keys are not yet resolved (framework mount-order race), selectByValue
2147
2197
  // queues a bounded retry automatically via queuePendingValue.
2148
2198
  if (changedProperties.has('value') && !this.internalUpdateInProgress) {
2149
- this.menuService.selectByValue(this.value);
2199
+ const { menuService } = this;
2200
+ if (!menuService) {
2201
+ return;
2202
+ }
2203
+ menuService.selectByValue(this.value);
2150
2204
  }
2151
2205
 
2152
2206
  // Handle loading state changes
@@ -2211,7 +2265,11 @@ class AuroMenu extends AuroElement {
2211
2265
  * @protected
2212
2266
  */
2213
2267
  makeSelection() {
2214
- this.menuService.selectHighlightedOption();
2268
+ const { menuService } = this;
2269
+ if (!menuService) {
2270
+ return;
2271
+ }
2272
+ menuService.selectHighlightedOption();
2215
2273
  }
2216
2274
 
2217
2275
  /**
@@ -2230,7 +2288,11 @@ class AuroMenu extends AuroElement {
2230
2288
  * @public
2231
2289
  */
2232
2290
  reset() {
2233
- this.menuService.reset();
2291
+ const { menuService } = this;
2292
+ if (!menuService) {
2293
+ return;
2294
+ }
2295
+ menuService.reset();
2234
2296
 
2235
2297
  // Dispatch reset event
2236
2298
  dispatchMenuEvent(this, 'auroMenu-selectValueReset');
@@ -2265,10 +2327,14 @@ class AuroMenu extends AuroElement {
2265
2327
  * @protected
2266
2328
  */
2267
2329
  navigateOptions(direction) {
2330
+ const { menuService } = this;
2331
+ if (!menuService) {
2332
+ return;
2333
+ }
2268
2334
  if (direction === 'up') {
2269
- this.menuService.highlightPrevious();
2335
+ menuService.highlightPrevious();
2270
2336
  } else if (direction === 'down') {
2271
- this.menuService.highlightNext();
2337
+ menuService.highlightNext();
2272
2338
  }
2273
2339
  }
2274
2340
 
@@ -617,7 +617,7 @@ class AuroMenuOption extends AuroElement {
617
617
  this.setAttribute('aria-selected', this.selected.toString());
618
618
 
619
619
  // Update menu service selection state if this isn't an internal update
620
- if (this.internalUpdateInProgress !== true) {
620
+ if (this.internalUpdateInProgress !== true && this.menuService) {
621
621
  this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
622
622
  }
623
623
  }
@@ -652,9 +652,10 @@ class AuroMenuOption extends AuroElement {
652
652
  }
653
653
 
654
654
  disconnectedCallback() {
655
- if (this.menuService) {
656
- this.menuService.unsubscribe(this.handleMenuChange);
657
- this.menuService.removeMenuOption(this);
655
+ const { menuService } = this;
656
+ if (menuService) {
657
+ menuService.unsubscribe(this.handleMenuChange);
658
+ menuService.removeMenuOption(this);
658
659
  }
659
660
  }
660
661
 
@@ -823,9 +824,11 @@ class AuroMenuOption extends AuroElement {
823
824
  * @private
824
825
  */
825
826
  handleMouseEnter() {
826
- if (!this.disabled) {
827
- this.menuService.setHighlightedOption(this);
827
+ const { menuService } = this;
828
+ if (!menuService || this.disabled) {
829
+ return;
828
830
  }
831
+ menuService.setHighlightedOption(this);
829
832
  }
830
833
 
831
834
  /**
@@ -1229,10 +1232,15 @@ class MenuService {
1229
1232
  return;
1230
1233
  }
1231
1234
 
1235
+ const before = this.selectedOptions || [];
1232
1236
  const optionsSet = new Set(optionsToDeselect);
1233
- this.selectedOptions = (this.selectedOptions || [])
1234
- .filter(opt => !optionsSet.has(opt));
1237
+ const after = before.filter(opt => !optionsSet.has(opt));
1235
1238
 
1239
+ if (this.optionsArraysMatch(after, before)) {
1240
+ return;
1241
+ }
1242
+
1243
+ this.selectedOptions = after;
1236
1244
  this.stageUpdate();
1237
1245
  }
1238
1246
 
@@ -1328,6 +1336,16 @@ class MenuService {
1328
1336
  return;
1329
1337
  }
1330
1338
 
1339
+ const hostValue = this.host && this.host.value;
1340
+ const hostHasValue = hostValue !== undefined &&
1341
+ hostValue !== null &&
1342
+ (!Array.isArray(hostValue) || hostValue.length > 0) &&
1343
+ (typeof hostValue !== 'string' || hostValue.trim() !== '');
1344
+
1345
+ if (hostHasValue && this._pendingValue != null) {
1346
+ return;
1347
+ }
1348
+
1331
1349
  this.clearPendingValue();
1332
1350
 
1333
1351
  if (this.selectedOptions.length > 0) {
@@ -1508,6 +1526,9 @@ class MenuService {
1508
1526
  this.notify({ type: 'optionsChange', options: this._menuOptions });
1509
1527
 
1510
1528
  if (this._pendingValue != null) {
1529
+ // Reset the retry count so a new option registration gives a fresh
1530
+ // budget — the initial retries fired before delayed options arrived.
1531
+ this._pendingRetryCount = 0;
1511
1532
  this.queuePendingValue(this._pendingValue);
1512
1533
  }
1513
1534
  }
@@ -1852,7 +1873,11 @@ class AuroMenu extends AuroElement {
1852
1873
  * @returns {string} - Returns the label of the currently selected option(s).
1853
1874
  */
1854
1875
  get currentLabel() {
1855
- return this.menuService.currentLabel;
1876
+ const { menuService } = this;
1877
+ if (!menuService) {
1878
+ return '';
1879
+ }
1880
+ return menuService.currentLabel;
1856
1881
  };
1857
1882
 
1858
1883
  /**
@@ -1875,7 +1900,12 @@ class AuroMenu extends AuroElement {
1875
1900
  * @param {number} value - Sets the index of the currently active option.
1876
1901
  */
1877
1902
  set index(value) {
1878
- this.menuService.setHighlightedIndex(value);
1903
+ const { menuService } = this;
1904
+ if (!menuService) {
1905
+ return;
1906
+ }
1907
+
1908
+ menuService.setHighlightedIndex(value);
1879
1909
  }
1880
1910
 
1881
1911
  /**
@@ -1897,7 +1927,11 @@ class AuroMenu extends AuroElement {
1897
1927
  * @returns {String|Array<String>}
1898
1928
  */
1899
1929
  get formattedValue() {
1900
- return this.menuService.currentValue;
1930
+ const { menuService } = this;
1931
+ if (!menuService) {
1932
+ return '';
1933
+ }
1934
+ return menuService.currentValue;
1901
1935
  }
1902
1936
 
1903
1937
  /**
@@ -1941,7 +1975,11 @@ class AuroMenu extends AuroElement {
1941
1975
  * @param {HTMLElement} option - The option to set as active.
1942
1976
  */
1943
1977
  updateActiveOption(option) {
1944
- this.menuService.setHighlightedOption(option);
1978
+ const { menuService } = this;
1979
+ if (!menuService) {
1980
+ return;
1981
+ }
1982
+ menuService.setHighlightedOption(option);
1945
1983
  }
1946
1984
 
1947
1985
  /**
@@ -1969,7 +2007,8 @@ class AuroMenu extends AuroElement {
1969
2007
  if (event.type === 'valueChange') {
1970
2008
 
1971
2009
  // New option is array value or first option with fallback to undefined for empty array in all cases
1972
- const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
2010
+ const options = event.options || [];
2011
+ const newOption = this.multiSelect && options.length ? options : options[0] || undefined;
1973
2012
  const newValue = event.stringValue;
1974
2013
 
1975
2014
  // Check if the option or value has actually changed
@@ -1978,8 +2017,11 @@ class AuroMenu extends AuroElement {
1978
2017
  this.setInternalValue(newValue);
1979
2018
  }
1980
2019
 
1981
- // Notify components of selection change
1982
- this.notifySelectionChange(event);
2020
+ // Notify components of selection change (pass normalized options to avoid undefined iterability errors)
2021
+ this.notifySelectionChange({
2022
+ ...event,
2023
+ options
2024
+ });
1983
2025
  }
1984
2026
 
1985
2027
  if (event.type === 'highlightChange') {
@@ -2002,7 +2044,11 @@ class AuroMenu extends AuroElement {
2002
2044
  * @returns {Array<HTMLElement>}
2003
2045
  */
2004
2046
  get selectedOptions() {
2005
- return this.menuService ? this.menuService.selectedOptions : [];
2047
+ const { menuService } = this;
2048
+ if (!menuService) {
2049
+ return [];
2050
+ }
2051
+ return menuService.selectedOptions;
2006
2052
  }
2007
2053
 
2008
2054
  /**
@@ -2010,7 +2056,11 @@ class AuroMenu extends AuroElement {
2010
2056
  * @returns {HTMLElement|null}
2011
2057
  */
2012
2058
  get selectedOption() {
2013
- return this.menuService ? this.menuService.selectedOptions[0] : null;
2059
+ const { menuService } = this;
2060
+ if (!menuService) {
2061
+ return null;
2062
+ }
2063
+ return menuService.selectedOptions[0] || null;
2014
2064
  }
2015
2065
 
2016
2066
  // Lifecycle Methods
@@ -2054,7 +2104,11 @@ class AuroMenu extends AuroElement {
2054
2104
  // keys are not yet resolved (framework mount-order race), selectByValue
2055
2105
  // queues a bounded retry automatically via queuePendingValue.
2056
2106
  if (changedProperties.has('value') && !this.internalUpdateInProgress) {
2057
- this.menuService.selectByValue(this.value);
2107
+ const { menuService } = this;
2108
+ if (!menuService) {
2109
+ return;
2110
+ }
2111
+ menuService.selectByValue(this.value);
2058
2112
  }
2059
2113
 
2060
2114
  // Handle loading state changes
@@ -2119,7 +2173,11 @@ class AuroMenu extends AuroElement {
2119
2173
  * @protected
2120
2174
  */
2121
2175
  makeSelection() {
2122
- this.menuService.selectHighlightedOption();
2176
+ const { menuService } = this;
2177
+ if (!menuService) {
2178
+ return;
2179
+ }
2180
+ menuService.selectHighlightedOption();
2123
2181
  }
2124
2182
 
2125
2183
  /**
@@ -2138,7 +2196,11 @@ class AuroMenu extends AuroElement {
2138
2196
  * @public
2139
2197
  */
2140
2198
  reset() {
2141
- this.menuService.reset();
2199
+ const { menuService } = this;
2200
+ if (!menuService) {
2201
+ return;
2202
+ }
2203
+ menuService.reset();
2142
2204
 
2143
2205
  // Dispatch reset event
2144
2206
  dispatchMenuEvent(this, 'auroMenu-selectValueReset');
@@ -2173,10 +2235,14 @@ class AuroMenu extends AuroElement {
2173
2235
  * @protected
2174
2236
  */
2175
2237
  navigateOptions(direction) {
2238
+ const { menuService } = this;
2239
+ if (!menuService) {
2240
+ return;
2241
+ }
2176
2242
  if (direction === 'up') {
2177
- this.menuService.highlightPrevious();
2243
+ menuService.highlightPrevious();
2178
2244
  } else if (direction === 'down') {
2179
- this.menuService.highlightNext();
2245
+ menuService.highlightNext();
2180
2246
  }
2181
2247
  }
2182
2248