chore: add explainers to disabled jsx-sort-props on ref prop (#7584)

**Related Issue:** N/A

## Summary

Add explainer to widespread disabled `jsx-sort-props` on `ref` props
supporting #6530.

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}
 />
 ```

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;

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>

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;

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()}

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 ? (

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">

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()}

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}

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>

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">

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>}

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) {

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}

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} />

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;
         }}

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;
               }}

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()}

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 })
       }

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"} />

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;
         }}

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)}
             />,
           ]}