From c9e26f4124f3574185205dfb3633956655c615bb Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 23 Aug 2023 02:26:23 -0700
Subject: [PATCH] chore: add explainers to disabled jsx-sort-props on ref prop

---
 .../calcite-components/conventions/README.md  |  2 +-
 .../src/components/action-bar/action-bar.tsx  |  2 +-
 .../components/action-menu/action-menu.tsx    |  2 +-
 .../src/components/action-pad/action-pad.tsx  |  2 +-
 .../src/components/action/action.tsx          |  2 +-
 .../src/components/alert/alert.tsx            |  4 +--
 .../src/components/checkbox/checkbox.tsx      |  2 +-
 .../src/components/chip/chip.tsx              |  4 +--
 .../color-picker-hex-input.tsx                |  4 +--
 .../components/color-picker/color-picker.tsx  | 12 ++++-----
 .../src/components/combobox/combobox.tsx      |  8 +++---
 .../date-picker-month-header.tsx              |  2 +-
 .../date-picker-month/date-picker-month.tsx   |  2 +-
 .../dropdown-item/dropdown-item.tsx           |  2 +-
 .../src/components/dropdown/dropdown.tsx      |  6 ++---
 .../src/components/fab/fab.tsx                |  2 +-
 .../src/components/filter/filter.tsx          |  2 +-
 .../src/components/flow-item/flow-item.tsx    |  4 +--
 .../components/functional/ExpandToggle.tsx    |  2 +-
 .../src/components/functional/XButton.tsx     |  2 +-
 .../src/components/handle/handle.tsx          |  2 +-
 .../inline-editable/inline-editable.tsx       |  6 ++---
 .../input-date-picker/input-date-picker.tsx   | 14 +++++-----
 .../components/input-number/input-number.tsx  |  2 +-
 .../src/components/input-text/input-text.tsx  |  2 +-
 .../input-time-picker/input-time-picker.tsx   |  6 ++---
 .../input-time-zone/input-time-zone.tsx       |  2 +-
 .../src/components/input/input.tsx            |  4 +--
 .../src/components/link/link.tsx              |  2 +-
 .../src/components/list-item/list-item.tsx    |  8 +++---
 .../src/components/list/list.tsx              |  2 +-
 .../src/components/menu-item/menu-item.tsx    |  4 +--
 .../src/components/modal/modal.tsx            |  6 ++---
 .../src/components/navigation/navigation.tsx  |  2 +-
 .../src/components/notice/notice.tsx          |  2 +-
 .../src/components/panel/panel.tsx            |  6 ++---
 .../pick-list-item/pick-list-item.tsx         |  2 +-
 .../pick-list/shared-list-render.tsx          |  4 +--
 .../src/components/popover/popover.tsx        |  6 ++---
 .../components/radio-button/radio-button.tsx  |  2 +-
 .../src/components/rating/rating.tsx          |  2 +-
 .../segmented-control.e2e.ts                  |  4 +++
 .../src/components/select/select.tsx          |  2 +-
 .../components/shell-panel/shell-panel.tsx    |  4 +--
 .../src/components/slider/slider.tsx          | 26 +++++++++----------
 .../components/stepper-item/stepper-item.tsx  |  2 +-
 .../src/components/switch/switch.tsx          |  2 +-
 .../src/components/tab-nav/tab-nav.tsx        |  6 ++---
 .../src/components/tab-title/tab-title.tsx    |  4 +--
 .../src/components/text-area/text-area.tsx    |  2 +-
 .../components/time-picker/time-picker.tsx    |  8 +++---
 .../components/tip-manager/tip-manager.tsx    |  2 +-
 .../src/components/tooltip/tooltip.tsx        |  4 +--
 .../src/components/tree-item/tree-item.tsx    |  2 +-
 .../value-list-item/value-list-item.tsx       |  2 +-
 55 files changed, 114 insertions(+), 110 deletions(-)

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
index 1845302fc5a..f86368d715d 100644
--- a/packages/calcite-components/conventions/README.md
+++ b/packages/calcite-components/conventions/README.md
@@ -162,7 +162,7 @@ Due to a [bug in Stencil](https://github.com/ionic-team/stencil/issues/4074), `r
   class={CSS.foo}
   // ...
   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.storeSomeElementRef}
 />
 ```
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index 5ceec967901..142e07c27f4 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -384,7 +384,7 @@ export class ActionBar
         scale={scale}
         toggle={toggleExpand}
         tooltip={this.expandTooltip}
-        // 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.setExpandToggleRef}
       />
     ) : null;
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index de448ab3b99..72ca5cdfcd4 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -273,7 +273,7 @@ export class ActionMenu implements LoadableComponent {
           scale={scale}
           text={label}
           textEnabled={expanded}
-          // 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.setDefaultMenuButtonEl}
         />
       </slot>
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index eb7c11c9cb3..32a489edaa3 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -262,7 +262,7 @@ export class ActionPad
         scale={scale}
         toggle={toggleExpand}
         tooltip={this.expandTooltip}
-        // 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.setExpandToggleRef}
       />
     ) : null;
diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
index 2b1279d509b..ef33a5bfbf8 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -310,7 +310,7 @@ export class Action
           class={buttonClasses}
           disabled={disabled}
           id={buttonId}
-          // 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): HTMLButtonElement => (this.buttonEl = buttonEl)}
         >
           {this.renderIconContainer()}
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index e1ea3e37167..a183055d31a 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -212,7 +212,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
         class="alert-close"
         onClick={this.closeAlert}
         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={(el) => (this.closeButton = el)}
       >
         <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
@@ -264,7 +264,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
           }}
           onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}
           onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}
-          // 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.setTransitionEl}
         >
           {requestedIcon ? (
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
index 4de56858a74..bdd54391236 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.tsx
+++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -265,7 +265,7 @@ export class Checkbox
           onFocus={this.onToggleFocus}
           role="checkbox"
           tabIndex={this.disabled ? undefined : 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={(toggleEl) => (this.toggleEl = toggleEl)}
         >
           <svg aria-hidden="true" class="check-svg" viewBox="0 0 16 16">
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index b7c07b27c8b..c8a548c0e6b 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -351,7 +351,7 @@ export class Chip
         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)}
       >
         <calcite-icon icon={ICONS.close} scale={this.scale === "l" ? "m" : "s"} />
@@ -408,7 +408,7 @@ export class Chip
           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()}
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
index 21c126438ac..b36e61314a5 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
@@ -321,7 +321,7 @@ export class ColorPickerHexInput implements LoadableComponent {
           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 ? (
@@ -340,7 +340,7 @@ export class ColorPickerHexInput implements LoadableComponent {
             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}
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index bf776e75432..defcaf51bd5 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -767,7 +767,7 @@ export class ColorPicker
           <canvas
             class={CSS.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}
           />
           <div
@@ -783,7 +783,7 @@ export class ColorPicker
               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}
           />
         </div>
@@ -794,7 +794,7 @@ export class ColorPicker
               <canvas
                 class={{ [CSS.slider]: true, [CSS.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}
               />
               <div
@@ -810,7 +810,7 @@ export class ColorPicker
                   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}
               />
             </div>
@@ -819,7 +819,7 @@ export class ColorPicker
                 <canvas
                   class={{ [CSS.slider]: true, [CSS.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}
                 />
                 <div
@@ -835,7 +835,7 @@ export class ColorPicker
                     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}
                 />
               </div>
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index aa935735792..e51bd338342 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1229,7 +1229,7 @@ export class Combobox
           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 as HTMLInputElement)}
         />
       </span>
@@ -1264,12 +1264,12 @@ export class Combobox
           "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}
       >
         <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}
         >
           <ul class={{ list: true, "list--hide": !open }}>
@@ -1337,7 +1337,7 @@ export class Combobox
           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}
         >
           <div class="grid-input">
diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index 457edeef090..0bc524ba1e9 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -165,7 +165,7 @@ export class DatePickerMonthHeader {
               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 && <span class={CSS.suffix}>{suffix}</span>}
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index a40c9e4524a..6559fdd091b 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -472,7 +472,7 @@ export class DatePickerMonth {
           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: HTMLCalciteDatePickerDayElement) => {
             // when moving via keyboard, focus must be updated on active date
             if (ref && active && this.activeFocus) {
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index b362c01424d..9bb35dd4c20 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -162,7 +162,7 @@ export class DropdownItem implements LoadableComponent {
         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}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index f5f3c041a85..b31570c4a5b 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -239,7 +239,7 @@ export class Dropdown
           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}
         >
           <slot
@@ -253,7 +253,7 @@ export class Dropdown
         <div
           aria-hidden={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}
         >
           <div
@@ -265,7 +265,7 @@ export class Dropdown
             }}
             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}
           >
             <slot onSlotchange={this.updateGroups} />
diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx
index 2765fc4e74f..1170f5c5087 100755
--- a/packages/calcite-components/src/components/fab/fab.tsx
+++ b/packages/calcite-components/src/components/fab/fab.tsx
@@ -165,7 +165,7 @@ export class Fab implements InteractiveComponent, LoadableComponent {
         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): void => {
           this.buttonEl = buttonEl;
         }}
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 07cd0bd1241..7d4ee486fd8 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -281,7 +281,7 @@ export class Filter
               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): void => {
                 this.textInput = el;
               }}
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index d7ce563bd74..4f118cd856f 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -292,7 +292,7 @@ export class FlowItem
         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;
@@ -324,7 +324,7 @@ export class FlowItem
           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()}
diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
index 2bacb693e71..f9e4520dd8e 100644
--- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx
+++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
@@ -94,7 +94,7 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
       text={text}
       textEnabled={expanded}
       title={!expanded && !tooltip ? text : null}
-      // 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={(referenceElement): HTMLCalciteActionElement =>
         setTooltipReference({ tooltip, referenceElement, expanded, ref })
       }
diff --git a/packages/calcite-components/src/components/functional/XButton.tsx b/packages/calcite-components/src/components/functional/XButton.tsx
index 0fdff0c0d20..cc3d278d854 100644
--- a/packages/calcite-components/src/components/functional/XButton.tsx
+++ b/packages/calcite-components/src/components/functional/XButton.tsx
@@ -30,7 +30,7 @@ export function XButton({
       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}
     >
       <calcite-icon icon="x" scale={scale === "l" ? "m" : "s"} />
diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx
index cb906853596..712ab04bb10 100644
--- a/packages/calcite-components/src/components/handle/handle.tsx
+++ b/packages/calcite-components/src/components/handle/handle.tsx
@@ -251,7 +251,7 @@ export class Handle implements LoadableComponent, T9nComponent {
         role="button"
         tabindex="0"
         title={this.messages?.dragHandle}
-        // 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): void => {
           this.handleButton = el;
         }}
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index 92d5ae83999..26c2562f3a5 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -182,7 +182,7 @@ export class InlineEditable
               width: this.editingEnabled ? "0" : "inherit",
             }}
             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={(el) => (this.enableEditingButton = el)}
           />
           {this.shouldShowControls && [
@@ -197,7 +197,7 @@ export class InlineEditable
                 onClick={this.cancelEditingHandler}
                 scale={this.scale}
                 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={(el) => (this.cancelEditingButton = el)}
               />
             </div>,
@@ -212,7 +212,7 @@ export class InlineEditable
               onClick={this.confirmChangesHandler}
               scale={this.scale}
               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={(el) => (this.confirmEditingButton = el)}
             />,
           ]}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 8e1070d5a57..c34ff9e4b08 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -515,7 +515,7 @@ export class InputDatePicker
             <div
               class="input-wrapper"
               onClick={this.onInputWrapperClick}
-              // 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.setStartWrapper}
             >
               <calcite-input
@@ -540,7 +540,7 @@ export class InputDatePicker
                 role="combobox"
                 scale={this.scale}
                 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={this.setStartInput}
               />
               {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start")}
@@ -559,7 +559,7 @@ export class InputDatePicker
               }}
               id={this.dialogId}
               role="dialog"
-              // 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}
             >
               <div
@@ -569,7 +569,7 @@ export class InputDatePicker
                   [FloatingCSS.animation]: true,
                   [FloatingCSS.animationActive]: this.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={this.setTransitionEl}
               >
                 <calcite-date-picker
@@ -589,7 +589,7 @@ export class InputDatePicker
                   scale={this.scale}
                   tabIndex={this.open ? undefined : -1}
                   valueAsDate={this.valueAsDate}
-                  // 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.setDatePickerRef}
                 />
               </div>
@@ -613,7 +613,7 @@ export class InputDatePicker
               <div
                 class="input-wrapper"
                 onClick={this.onInputWrapperClick}
-                // 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.setEndWrapper}
               >
                 <calcite-input
@@ -638,7 +638,7 @@ export class InputDatePicker
                   role="combobox"
                   scale={this.scale}
                   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={this.setEndInput}
                 />
                 {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end")}
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index a14a339da22..4a7a7a5854c 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -1004,7 +1004,7 @@ export class InputNumber
         readOnly={this.readOnly}
         type="text"
         value={this.localizedValue}
-        // 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.setChildNumberElRef}
       />
     );
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index f857fd09af3..b20c6ec344f 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -653,7 +653,7 @@ export class InputText
         tabIndex={this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null}
         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={this.setChildElRef}
       />
     );
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index b0c48d86e76..20649d58ed0 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -822,7 +822,7 @@ export class InputTimePicker
             role="combobox"
             scale={this.scale}
             step={this.step}
-            // 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.setCalciteInputEl}
           />
           {!this.readOnly && this.renderToggleIcon(this.open)}
@@ -839,7 +839,7 @@ export class InputTimePicker
           placement={this.placement}
           referenceElement={this.referenceElementId}
           triggerDisabled={true}
-          // 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.setCalcitePopoverEl}
         >
           <calcite-time-picker
@@ -851,7 +851,7 @@ export class InputTimePicker
             step={this.step}
             tabIndex={this.open ? undefined : -1}
             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={this.setCalciteTimePickerEl}
           />
         </calcite-popover>
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index 18e70a6625e..2decb2cc1be 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -317,7 +317,7 @@ export class InputTimeZone
           overlayPositioning={this.overlayPositioning}
           scale={this.scale}
           selectionMode="single"
-          // 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.setComboboxRef}
         >
           {this.timeZoneGroups.map((group) => {
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 6656655fb43..147ba5afdc6 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -1137,7 +1137,7 @@ export class Input
           readOnly={this.readOnly}
           type="text"
           value={this.localizedValue}
-          // 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.setChildNumberElRef}
         />
       ) : null;
@@ -1180,7 +1180,7 @@ export class Input
               }
               type={this.type}
               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={this.setChildElRef}
             />,
             this.isTextarea ? (
diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
index 041c7734cd2..c72cbb24321 100644
--- a/packages/calcite-components/src/components/link/link.tsx
+++ b/packages/calcite-components/src/components/link/link.tsx
@@ -127,7 +127,7 @@ export class Link implements InteractiveComponent, LoadableComponent {
           role={role}
           tabIndex={tabIndex}
           target={Tag === "a" && 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={this.storeTagRef}
         >
           {this.iconStart ? iconStartEl : null}
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index 13eec92b2da..57695f934b4 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -412,7 +412,7 @@ export class ListItem
         hidden={!hasActionsStart}
         key="actions-start-container"
         role="gridcell"
-        // 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.actionsStartEl = el)}
       >
         <slot name={SLOTS.actionsStart} onSlotchange={this.handleActionsStartSlotChange} />
@@ -429,7 +429,7 @@ export class ListItem
         hidden={!(hasActionsEnd || closable)}
         key="actions-end-container"
         role="gridcell"
-        // 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.actionsEndEl = el)}
       >
         <slot name={SLOTS.actionsEnd} onSlotchange={this.handleActionsEndSlotChange} />
@@ -514,7 +514,7 @@ export class ListItem
         key="content-container"
         onClick={this.itemClicked}
         role="gridcell"
-        // 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.contentEl = el)}
       >
         {content}
@@ -561,7 +561,7 @@ export class ListItem
           role="row"
           style={{ "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }}
           tabIndex={active ? 0 : -1}
-          // 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.renderDragHandle()}
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 10faf27d8ee..4b614638446 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -419,7 +419,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
                       onCalciteFilterChange={this.handleFilterChange}
                       placeholder={filterPlaceholder}
                       value={filterText}
-                      // 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.setFilterEl}
                     />
                     <slot
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index 4dfa72f2e8f..bac34ddeec4 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -406,7 +406,7 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
         onClick={this.clickHandler}
         onKeyDown={this.keyDownHandler}
         text={this.messages.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={(el) => (this.dropdownActionEl = el)}
       />
     );
@@ -483,7 +483,7 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
               role="menuitem"
               tabIndex={this.isTopLevelItem ? 0 : -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.anchorEl = el)}
             >
               {this.renderItemContent(dir)}
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index e94ab4aaaa7..69cb37eb9ab 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -218,7 +218,7 @@ export class Modal
             class={{
               [CSS.modal]: true,
             }}
-            // 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.setTransitionEl}
           >
             <div class={CSS.header}>
@@ -233,7 +233,7 @@ export class Modal
                 [CSS.content]: true,
                 [CSS.contentNoFooter]: !this.hasFooter,
               }}
-              // 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.modalContent = el)}
             >
               <slot name={SLOTS.content} />
@@ -286,7 +286,7 @@ export class Modal
         key="button"
         onClick={this.close}
         title={this.messages.close}
-        // 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)}
       >
         <calcite-icon
diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx
index 698cfca8845..c268e90dc32 100644
--- a/packages/calcite-components/src/components/navigation/navigation.tsx
+++ b/packages/calcite-components/src/components/navigation/navigation.tsx
@@ -198,7 +198,7 @@ export class CalciteNavigation implements LoadableComponent {
             icon={ICONS.hamburger}
             onClick={this.actionClickHandler}
             text={this.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={(el: HTMLCalciteActionElement) => (this.navigationActionEl = el)}
           />
         )}
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 3ac28953359..0de5f697909 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -150,7 +150,7 @@ export class Notice
         aria-label={this.messages.close}
         class={CSS.close}
         onClick={this.close}
-        // 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.closeButton = el)}
       >
         <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 66d15ccacbe..74d27ee072d 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -405,7 +405,7 @@ export class Panel
         onClick={close}
         text={text}
         title={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={this.setCloseRef}
       />
     ) : null;
@@ -524,7 +524,7 @@ export class Panel
       <div
         class={CSS.contentWrapper}
         onScroll={this.panelScrollHandler}
-        // 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.setPanelScrollEl}
       >
         <slot />
@@ -551,7 +551,7 @@ export class Panel
         hidden={closed}
         onKeyDown={panelKeyDownHandler}
         tabIndex={closable ? 0 : -1}
-        // 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.renderHeaderNode()}
diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
index d40b119c257..ba1b309291a 100644
--- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
+++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx
@@ -390,7 +390,7 @@ export class PickListItem
           onClick={this.pickListClickHandler}
           onKeyDown={this.pickListKeyDownHandler}
           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={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}
         >
           <div
diff --git a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
index 67364e89329..1ac3684414c 100644
--- a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
+++ b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
@@ -46,7 +46,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes<any>
           <span
             aria-live="assertive"
             class="assistive-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={storeAssistiveEl}
           />
         ) : null}
@@ -59,7 +59,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes<any>
               onCalciteFilterChange={handleFilterEvent}
               placeholder={filterPlaceholder}
               value={filterText}
-              // 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={setFilterEl}
             />
           ) : null}
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 16e0e2e66aa..e0266a8d338 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -539,7 +539,7 @@ export class Popover
           onClick={this.hide}
           scale={this.scale}
           text={messages.close}
-          // 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={(closeButtonEl) => (this.closeButtonEl = closeButtonEl)}
         >
           <calcite-icon icon="x" scale={this.scale === "l" ? "m" : this.scale} />
@@ -573,7 +573,7 @@ export class Popover
       <FloatingArrow
         floatingLayout={floatingLayout}
         key="floating-arrow"
-        // 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.storeArrowEl}
       />
     ) : null;
@@ -592,7 +592,7 @@ export class Popover
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: displayed,
           }}
-          // 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.setTransitionEl}
         >
           {arrowNode}
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx
index fc61dc4f21a..9339bcab7a3 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.tsx
+++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -507,7 +507,7 @@ export class RadioButton
           onFocus={this.onContainerFocus}
           role="radio"
           tabIndex={tabIndex}
-          // 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.setContainerEl}
         >
           <div class="radio" />
diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
index 63c4ee3e870..ec5b9ac0e98 100644
--- a/packages/calcite-components/src/components/rating/rating.tsx
+++ b/packages/calcite-components/src/components/rating/rating.tsx
@@ -287,7 +287,7 @@ export class Rating
                       onKeyDown={this.handleInputKeyDown}
                       type="radio"
                       value={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.inputRefs[idx] = el;
                         return (
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
index a6671f3b5c8..f3ed67bcb5c 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
@@ -363,4 +363,8 @@ describe("calcite-segmented-control", () => {
       );
     });
   });
+
+  describe("updates items when children are modified after initialization", () => {
+    // TODO:
+  });
 });
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index 36c30d3f561..c78334b0a2a 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -382,7 +382,7 @@ export class Select
           class={CSS.select}
           disabled={this.disabled}
           onChange={this.handleInternalSelectChange}
-          // 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.storeSelectRef}
         >
           <slot />
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 27e18c1a839..6ccc6537b82 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -278,7 +278,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
           role="separator"
           tabIndex={0}
           touch-action="none"
-          // 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.connectSeparator}
         />
       ) : null;
@@ -308,7 +308,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
         hidden={collapsed}
         key="content"
         style={style}
-        // 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.storeContentEl}
       >
         {this.renderHeader()}
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index 16ca473c496..56c2c41676c 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -286,7 +286,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <div class="handle" />
@@ -312,7 +312,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <span aria-hidden="true" class={handleLabelValueClasses}>
@@ -347,7 +347,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <div class="handle" />
@@ -383,7 +383,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <div class="handle" />
@@ -411,7 +411,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <div class="handle-extension" />
@@ -439,7 +439,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <span aria-hidden="true" class={handleLabelValueClasses}>
@@ -476,7 +476,7 @@ export class Slider
         role="slider"
         style={{ right: rightThumbOffset }}
         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={(el) => (this.maxHandle = el as HTMLDivElement)}
       >
         <div class="handle-extension" />
@@ -512,7 +512,7 @@ export class Slider
         role="slider"
         style={{ left: leftThumbOffset }}
         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={(el) => (this.minHandle = el as HTMLDivElement)}
       >
         <div class="handle" />
@@ -538,7 +538,7 @@ export class Slider
         role="slider"
         style={{ left: leftThumbOffset }}
         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={(el) => (this.minHandle = el as HTMLDivElement)}
       >
         <span aria-hidden="true" class={handleLabelMinValueClasses}>
@@ -573,7 +573,7 @@ export class Slider
         role="slider"
         style={{ left: leftThumbOffset }}
         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={(el) => (this.minHandle = el as HTMLDivElement)}
       >
         <div class="handle" />
@@ -609,7 +609,7 @@ export class Slider
         role="slider"
         style={{ left: leftThumbOffset }}
         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={(el) => (this.minHandle = el as HTMLDivElement)}
       >
         <div class="handle-extension" />
@@ -637,7 +637,7 @@ export class Slider
         role="slider"
         style={{ left: leftThumbOffset }}
         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={(el) => (this.minHandle = el as HTMLDivElement)}
       >
         <div class="handle-extension" />
@@ -667,7 +667,7 @@ export class Slider
           {this.renderGraph()}
           <div
             class="track"
-            // 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.storeTrackRef}
           >
             <div
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 5189b55b4d7..d73822e53b3 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -215,7 +215,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
               /* additional tab index logic needed because of display: contents */
               this.layout === "horizontal" && !this.disabled ? 0 : null
             }
-            // 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.headerEl = el)}
           >
             {this.icon ? this.renderIcon() : null}
diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx
index e09c3ea5c53..cce1c657b61 100644
--- a/packages/calcite-components/src/components/switch/switch.tsx
+++ b/packages/calcite-components/src/components/switch/switch.tsx
@@ -205,7 +205,7 @@ export class Switch
           class="container"
           role="switch"
           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.setSwitchEl}
         >
           <div class="track">
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
index d8548f30a3c..831bc3ee7cc 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
@@ -171,19 +171,19 @@ export class TabNav {
         <div
           class="tab-nav"
           onScroll={this.handleContainerScroll}
-          // 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: HTMLDivElement) => (this.tabNavEl = el)}
         >
           <slot />
           <div
             class="tab-nav-active-indicator-container"
-            // 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.activeIndicatorContainerEl = el)}
           >
             <div
               class="tab-nav-active-indicator"
               style={indicatorStyle}
-              // 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.activeIndicatorEl = el as HTMLElement)}
             />
           </div>
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index e771fcf7716..703b9fb5e48 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -223,7 +223,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
             [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
           }}
           hidden={closed}
-          // 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.resizeObserver?.observe(el)}
         >
           <div class={{ [CSS.content]: true, [CSS.contentHasText]: this.hasText }}>
@@ -249,7 +249,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
         onClick={this.closeClickHandler}
         title={messages.close}
         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={(el) => (this.closeButtonEl = el)}
       >
         <calcite-icon icon={ICONS.close} scale={this.scale === "l" ? "m" : "s"} />
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index f2211a7a744..2316c376083 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -276,7 +276,7 @@ export class TextArea
           rows={this.rows}
           value={this.value}
           wrap={this.wrap}
-          // 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.setTextAreaEl}
         />
         <span class={{ [CSS.content]: true }}>
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx
index ebc0d43a2dc..5b57ce14e47 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.tsx
+++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx
@@ -791,7 +791,7 @@ export class TimePicker
             onKeyDown={this.hourKeyDownHandler}
             role="spinbutton"
             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.setHourEl}
           >
             {this.localizedHour || "--"}
@@ -839,7 +839,7 @@ export class TimePicker
             onKeyDown={this.minuteKeyDownHandler}
             role="spinbutton"
             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.setMinuteEl}
           >
             {this.localizedMinute || "--"}
@@ -886,7 +886,7 @@ export class TimePicker
               onKeyDown={this.secondKeyDownHandler}
               role="spinbutton"
               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.setSecondEl}
             >
               {this.localizedSecond || "--"}
@@ -943,7 +943,7 @@ export class TimePicker
               onKeyDown={this.meridiemKeyDownHandler}
               role="spinbutton"
               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.setMeridiemEl}
             >
               {this.localizedMeridiem || "--"}
diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.tsx b/packages/calcite-components/src/components/tip-manager/tip-manager.tsx
index edf071db8bd..a741f698261 100644
--- a/packages/calcite-components/src/components/tip-manager/tip-manager.tsx
+++ b/packages/calcite-components/src/components/tip-manager/tip-manager.tsx
@@ -299,7 +299,7 @@ export class TipManager {
         hidden={closed}
         onKeyDown={this.tipManagerKeyDownHandler}
         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.storeContainerRef}
       >
         <header class={CSS.header}>
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 94ee94a73c0..552ae61ec99 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -344,12 +344,12 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: displayed,
           }}
-          // 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.setTransitionEl}
         >
           <FloatingArrow
             floatingLayout={floatingLayout}
-            // 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={(arrowEl: SVGElement) => (this.arrowEl = arrowEl)}
           />
           <div class={CSS.container}>
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index de063bc54a0..b4f3a70176d 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -275,7 +275,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
                 [CSS_UTILITY.rtl]: rtl,
               }}
               data-selection-mode={this.selectionMode}
-              // 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.defaultSlotWrapper = el as HTMLElement)}
             >
               {chevron}
diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
index 3160127ae2d..8772c2f8be3 100644
--- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
+++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx
@@ -298,7 +298,7 @@ export class ValueListItem
           removable={this.removable}
           selected={this.selected}
           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={this.getPickListRef}
         >
           {this.renderActionsStart()}