@esri/calcite-components 1.7.0-next.0 → 1.7.0-next.2

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const dom = require('./dom-882e8adf.js');
-const conditionalSlot = require('./conditionalSlot-0b2eec9f.js');
-const loadable = require('./loadable-8ad0def8.js');
-const t9n = require('./t9n-51db37e2.js');
-const interactive = require('./interactive-f7aec39c.js');
-const locale = require('./locale-b39d68ba.js');
-const observers = require('./observers-e391d71f.js');
-const key = require('./key-8df4992e.js');
-require('./guid-26de9cda.js');
-require('./resources-e4c8601b.js');
+const index = require('./index-a299f336.js');
+const dom = require('./dom-a6b1b2d0.js');
+const conditionalSlot = require('./conditionalSlot-b7752012.js');
+const loadable = require('./loadable-11abb55e.js');
+const t9n = require('./t9n-9d761c44.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const locale = require('./locale-e320d64c.js');
+const observers = require('./observers-42ec2f3d.js');
+const key = require('./key-31549e1f.js');
+require('./guid-537c824b.js');
+require('./resources-a528d8de.js');
 
 const CSS = {
   title: "title",
@@ -205,7 +205,7 @@ const Chip = class {
   }
   renderCloseButton() {
     return (index.h("button", { "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, tabIndex: this.disabled ? -1 : 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButtonEl = el) }, index.h("calcite-icon", { icon: ICONS.close, scale: this.scale === "l" ? "m" : "s" })));
   }
   renderIcon() {
@@ -236,7 +236,7 @@ const Chip = class {
           (this.selectionMode === "none" ||
             (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
       }, onClick: this.handleEmittingEvent, role: role, tabIndex: disableInteraction ? -1 : 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.containerEl = el) }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { class: CSS.title }, index.h("slot", null)), this.closable && this.renderCloseButton())));
   }
   static get assetsDirs() { return ["assets"]; }

package/dist/cjs/calcite-color-picker_3.cjs.entry.js

@@ -1,26 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const dom = require('./dom-882e8adf.js');
-const utils = require('./utils-ede1e9c6.js');
-const interactive = require('./interactive-f7aec39c.js');
-const key = require('./key-8df4992e.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const math = require('./math-ce6a2ddf.js');
-const t9n = require('./t9n-51db37e2.js');
-const throttle = require('./throttle-366faeab.js');
-require('./guid-26de9cda.js');
-require('./resources-e4c8601b.js');
-require('./observers-e391d71f.js');
-require('./debounce-ba742625.js');
+const index = require('./index-a299f336.js');
+const dom = require('./dom-a6b1b2d0.js');
+const utils = require('./utils-c584378c.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const key = require('./key-31549e1f.js');
+const loadable = require('./loadable-11abb55e.js');
+const locale = require('./locale-e320d64c.js');
+const math = require('./math-2b370053.js');
+const t9n = require('./t9n-9d761c44.js');
+const throttle = require('./throttle-37938891.js');
+require('./guid-537c824b.js');
+require('./resources-a528d8de.js');
+require('./observers-42ec2f3d.js');
+require('./debounce-2d82837f.js');
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -2743,26 +2743,26 @@ const ColorPicker = class {
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
     return (index.h("div", { class: CSS$2.container }, index.h("div", { class: CSS$2.controlAndScope }, index.h("canvas", { class: CSS$2.colorField, onPointerDown: this.handleColorFieldPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.initColorField }), index.h("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$2.scope]: true, [CSS$2.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
         top: `${adjustedColorFieldScopeTop || 0}px`,
         left: `${adjustedColorFieldScopeLeft || 0}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeColorFieldScope })), index.h("div", { class: CSS$2.previewAndSliders }, index.h("calcite-color-picker-swatch", { class: CSS$2.preview, color: selectedColorInHex, scale: "l" }), index.h("div", { class: CSS$2.sliders }, index.h("div", { class: CSS$2.controlAndScope }, index.h("canvas", { class: { [CSS$2.slider]: true, [CSS$2.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.initHueSlider }), index.h("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$2.scope]: true, [CSS$2.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
         top: `${adjustedHueScopeTop}px`,
         left: `${adjustedHueScopeLeft}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeHueScope })), alphaChannel ? (index.h("div", { class: CSS$2.controlAndScope }, index.h("canvas", { class: { [CSS$2.slider]: true, [CSS$2.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.initOpacitySlider }), index.h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$2.scope]: true, [CSS$2.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, role: "slider", style: {
         top: `${adjustedOpacityScopeTop}px`,
         left: `${adjustedOpacityScopeLeft}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeOpacityScope }))) : null)), noHex && noChannels ? null : (index.h("div", { class: {
         [CSS$2.controlSection]: true,
         [CSS$2.section]: true,
@@ -3272,9 +3272,9 @@ const ColorPickerHexInput = class {
     const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
     const inputScale = scale === "l" ? "m" : "s";
     return (index.h("div", { class: CSS$1.container }, index.h("calcite-input-text", { class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeHexInputRef }), alphaChannel ? (index.h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, scale: inputScale, suffixText: "%", value: opacityInputValue,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeOpacityInputRef })) : null));
   }
   //--------------------------------------------------------------------------

package/dist/cjs/calcite-combobox_3.cjs.entry.js

@@ -1,29 +1,29 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const filter = require('./filter-d178922e.js');
-const dom = require('./dom-882e8adf.js');
-const floatingUi = require('./floating-ui-05afc335.js');
-const form = require('./form-7ec8012f.js');
-const guid = require('./guid-26de9cda.js');
-const interactive = require('./interactive-f7aec39c.js');
-const label = require('./label-1abe1847.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const observers = require('./observers-e391d71f.js');
-const openCloseComponent = require('./openCloseComponent-6424e4e3.js');
-const t9n = require('./t9n-51db37e2.js');
-const debounce = require('./debounce-ba742625.js');
-const conditionalSlot = require('./conditionalSlot-0b2eec9f.js');
-require('./resources-e4c8601b.js');
-require('./key-8df4992e.js');
+const index = require('./index-a299f336.js');
+const filter = require('./filter-5b666461.js');
+const dom = require('./dom-a6b1b2d0.js');
+const floatingUi = require('./floating-ui-73ac6149.js');
+const form = require('./form-efb81018.js');
+const guid = require('./guid-537c824b.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const label = require('./label-822b0770.js');
+const loadable = require('./loadable-11abb55e.js');
+const locale = require('./locale-e320d64c.js');
+const observers = require('./observers-42ec2f3d.js');
+const openCloseComponent = require('./openCloseComponent-b662151a.js');
+const t9n = require('./t9n-9d761c44.js');
+const debounce = require('./debounce-2d82837f.js');
+const conditionalSlot = require('./conditionalSlot-b7752012.js');
+require('./resources-a528d8de.js');
+require('./key-31549e1f.js');
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -57,7 +57,7 @@ const CSS$2 = {
 };
 function XButton({ disabled, key, label, onClick, ref, scale, }) {
   return (index.h("button", { "aria-label": label, class: CSS$2.button, disabled: disabled, key: key, onClick: onClick, tabIndex: -1, type: "button", 
-    // eslint-disable-next-line react/jsx-sort-props
+    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
     ref: ref },
     index.h("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
@@ -338,6 +338,10 @@ const Combobox = class {
       this.selectedItems = this.getSelectedItems();
       this.filteredItems = this.getFilteredItems();
       this.needsIcon = this.getNeedsIcon();
+      this.items.forEach((item) => {
+        item.selectionMode = this.selectionMode;
+        item.scale = this.scale;
+      });
       if (!this.allowCustomValues) {
         this.setMaxScrollerHeight();
       }
@@ -424,6 +428,9 @@ const Combobox = class {
   overlayPositioningHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -508,12 +515,13 @@ const Combobox = class {
     interactive.connectInteractive(this);
     locale.connectLocalized(this);
     t9n.connectMessages(this);
+    label.connectLabel(this);
+    form.connectForm(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    label.connectLabel(this);
-    form.connectForm(this);
+    this.updateItems();
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -848,7 +856,7 @@ const Combobox = class {
         "input--hidden": showLabel,
         "input--icon": !!this.placeholderIcon,
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.textInput = el) })));
   }
   renderListBoxOptions() {
@@ -865,9 +873,9 @@ const Combobox = class {
         "floating-ui-container": true,
         "floating-ui-container--active": open,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: setFloatingEl }, index.h("div", { class: classes,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: setContainerEl }, index.h("ul", { class: { list: true, "list--hide": !open } }, index.h("slot", null)))));
   }
   renderIconStart() {
@@ -893,7 +901,7 @@ const Combobox = class {
         "wrapper--single": single || !this.selectedItems.length,
         "wrapper--active": open,
       }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setReferenceEl }, index.h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), index.h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label$1), this.renderInput()), isClearable ? (index.h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), index.h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), index.h(form.HiddenFormInputSlot, { component: this })));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -903,6 +911,8 @@ const Combobox = class {
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
+    "selectionMode": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],
@@ -933,8 +943,6 @@ const ComboboxItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteComboboxItemChange = index.createEvent(this, "calciteComboboxItemChange", 6);
-    /** Specifies the scale of the combobox-item controlled by parent, defaults to m */
-    this.scale = "m";
     this.itemClickHandler = (event) => {
       event.preventDefault();
       this.toggleSelected();
@@ -949,6 +957,8 @@ const ComboboxItem = class {
     this.textLabel = undefined;
     this.value = undefined;
     this.filterDisabled = undefined;
+    this.selectionMode = "multiple";
+    this.scale = "m";
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit();
@@ -960,7 +970,6 @@ const ComboboxItem = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = dom.getElementProp(this.el, "scale", this.scale);
     conditionalSlot.connectConditionalSlotComponent(this);
     interactive.connectInteractive(this);
   }
@@ -1012,7 +1021,7 @@ const ComboboxItem = class {
     return null;
   }
   render() {
-    const isSingleSelect = dom.getElementProp(this.el, "selection-mode", "multiple") === "single";
+    const isSingleSelect = this.selectionMode === "single";
     const showDot = isSingleSelect && !this.disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
     const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;
@@ -1044,10 +1053,10 @@ const ComboboxItemGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.guid = guid.guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -1056,7 +1065,6 @@ const ComboboxItemGroup = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = dom.getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //

package/dist/cjs/calcite-date-picker_4.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const utils = require('./utils-c41dca81.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const t9n = require('./t9n-51db37e2.js');
-const dom = require('./dom-882e8adf.js');
-const interactive = require('./interactive-f7aec39c.js');
-const key = require('./key-8df4992e.js');
-const resources = require('./resources-e4c8601b.js');
-const Heading = require('./Heading-bae30ace.js');
-require('./observers-e391d71f.js');
-require('./guid-26de9cda.js');
+const index = require('./index-a299f336.js');
+const utils = require('./utils-8ff54125.js');
+const loadable = require('./loadable-11abb55e.js');
+const locale = require('./locale-e320d64c.js');
+const t9n = require('./t9n-9d761c44.js');
+const dom = require('./dom-a6b1b2d0.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const key = require('./key-31549e1f.js');
+const resources = require('./resources-a528d8de.js');
+const Heading = require('./Heading-963c98c4.js');
+require('./observers-42ec2f3d.js');
+require('./guid-537c824b.js');
 
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -833,7 +833,7 @@ const DatePickerMonth = class {
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart,
       }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !utils.inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !utils.sameDate(this.startDate, this.endDate), rangeEdge: dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : undefined, rangeHover: this.isRangeHover(date), scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
@@ -1001,7 +1001,7 @@ const DatePickerMonthHeader = class {
         year: true,
         [CSS.yearSuffix]: !!suffix,
       }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", type: "text", value: localizedYear,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.yearInput = el) }), suffix && index.h("span", { class: CSS.suffix }, suffix))), index.h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, index.h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {

package/dist/cjs/calcite-dropdown_3.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const dom = require('./dom-882e8adf.js');
-const floatingUi = require('./floating-ui-05afc335.js');
-const guid = require('./guid-26de9cda.js');
-const interactive = require('./interactive-f7aec39c.js');
-const key = require('./key-8df4992e.js');
-const loadable = require('./loadable-8ad0def8.js');
-const observers = require('./observers-e391d71f.js');
-const openCloseComponent = require('./openCloseComponent-6424e4e3.js');
-require('./resources-e4c8601b.js');
-require('./debounce-ba742625.js');
+const index = require('./index-a299f336.js');
+const dom = require('./dom-a6b1b2d0.js');
+const floatingUi = require('./floating-ui-73ac6149.js');
+const guid = require('./guid-537c824b.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const key = require('./key-31549e1f.js');
+const loadable = require('./loadable-11abb55e.js');
+const observers = require('./observers-42ec2f3d.js');
+const openCloseComponent = require('./openCloseComponent-b662151a.js');
+require('./resources-a528d8de.js');
+require('./debounce-2d82837f.js');
 
 const SLOTS = {
   dropdownTrigger: "trigger",
@@ -247,15 +247,15 @@ const Dropdown = class {
   render() {
     const { open, guid } = this;
     return (index.h(index.Host, null, index.h("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setReferenceEl }, index.h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), index.h("div", { "aria-hidden": dom.toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setFloatingEl }, index.h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [floatingUi.FloatingCSS.animation]: true,
         [floatingUi.FloatingCSS.animationActive]: open,
       }, id: `${guid}-menu`, role: "menu",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setScrollerAndTransitionEl }, index.h("slot", { onSlotchange: this.updateGroups })))));
   }
   //--------------------------------------------------------------------------
@@ -315,12 +315,8 @@ const Dropdown = class {
     const target = keyboardEvent.target;
     switch (keyboardEvent.key) {
       case "Tab":
-        if (this.items.indexOf(target) === this.items.length - 1 && !keyboardEvent.shiftKey) {
-          this.closeCalciteDropdown();
-        }
-        else if (this.items.indexOf(target) === 0 && keyboardEvent.shiftKey) {
-          this.closeCalciteDropdown();
-        }
+        this.open = false;
+        this.updateTabIndexOfItems(target);
         break;
       case "ArrowDown":
         dom.focusElementInGroup(this.items, target, "next");
@@ -400,6 +396,11 @@ const Dropdown = class {
       : item;
     dom.focusElement(target);
   }
+  updateTabIndexOfItems(target) {
+    this.items.forEach((item) => {
+      item.tabIndex = target !== item ? -1 : 0;
+    });
+  }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -548,7 +549,7 @@ const DropdownItem = class {
           ? [contentNode, iconEndEl]
           : contentNode;
     const contentEl = !href ? (slottedContent) : (index.h("a", { "aria-label": label, class: CSS.link, href: href, rel: this.rel, tabIndex: -1, target: this.target,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.childLink = el) }, slottedContent));
     const itemRole = href
       ? null

package/dist/cjs/calcite-fab.cjs.entry.js

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const dom = require('./dom-882e8adf.js');
-const interactive = require('./interactive-f7aec39c.js');
-const loadable = require('./loadable-8ad0def8.js');
-require('./guid-26de9cda.js');
-require('./resources-e4c8601b.js');
+const index = require('./index-a299f336.js');
+const dom = require('./dom-a6b1b2d0.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const loadable = require('./loadable-11abb55e.js');
+require('./guid-537c824b.js');
+require('./resources-a528d8de.js');
 
 const CSS = {
   button: "button",
@@ -76,7 +76,7 @@ const Fab = class {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
     const title = !textEnabled ? label || text || null : null;
     return (index.h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (buttonEl) => {
         this.buttonEl = buttonEl;
       } }, this.textEnabled ? this.text : null));

package/dist/cjs/calcite-filter.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const filter = require('./filter-d178922e.js');
-const interactive = require('./interactive-f7aec39c.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const t9n = require('./t9n-51db37e2.js');
-const debounce = require('./debounce-ba742625.js');
-require('./dom-882e8adf.js');
-require('./guid-26de9cda.js');
-require('./resources-e4c8601b.js');
-require('./key-8df4992e.js');
-require('./observers-e391d71f.js');
+const index = require('./index-a299f336.js');
+const filter = require('./filter-5b666461.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const loadable = require('./loadable-11abb55e.js');
+const locale = require('./locale-e320d64c.js');
+const t9n = require('./t9n-9d761c44.js');
+const debounce = require('./debounce-2d82837f.js');
+require('./dom-a6b1b2d0.js');
+require('./guid-537c824b.js');
+require('./resources-a528d8de.js');
+require('./key-31549e1f.js');
+require('./observers-42ec2f3d.js');
 
 const CSS = {
   container: "container",
@@ -150,7 +150,7 @@ const Filter = class {
   render() {
     const { disabled, scale } = this;
     return (index.h(index.Fragment, null, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => {
         this.textInput = el;
       } })))));

package/dist/cjs/calcite-flow-item.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-170040b3.js');
-const dom = require('./dom-882e8adf.js');
-const interactive = require('./interactive-f7aec39c.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const t9n = require('./t9n-51db37e2.js');
-const resources = require('./resources-9f59c659.js');
-require('./guid-26de9cda.js');
-require('./resources-e4c8601b.js');
-require('./key-8df4992e.js');
-require('./observers-e391d71f.js');
+const index = require('./index-a299f336.js');
+const dom = require('./dom-a6b1b2d0.js');
+const interactive = require('./interactive-34d4b6bc.js');
+const loadable = require('./loadable-11abb55e.js');
+const locale = require('./locale-e320d64c.js');
+const t9n = require('./t9n-9d761c44.js');
+const resources = require('./resources-7c4f2264.js');
+require('./guid-537c824b.js');
+require('./resources-a528d8de.js');
+require('./key-31549e1f.js');
+require('./observers-42ec2f3d.js');
 
 const CSS = {
   backButton: "back-button",
@@ -157,13 +157,13 @@ const FlowItem = class {
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (index.h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label, title: label,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setBackRef })) : null;
   }
   render() {
     const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
     return (index.h(index.Host, null, index.h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerRef }, this.renderBackButton(), index.h("slot", { name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null))));
   }
   static get assetsDirs() { return ["assets"]; }