fix: save render through optimized useSlot() (#7270)

* allow for initializing slot with a false state

* save slot render in checkboxgroup

* save slot render in radiogroup

* save slot render in meter

* save render in select

* save render in timefield

* save render in datefield

* save render in hexcolorfield

* save render in colorchannelfield

* save render in progressbar

* saver render in combobox

* save render in searchfield

* save render in numberfield

* save render in taggroup

* save render in textfield

* save render in colorslider

* save render in slider

* save render in datepicker

* Update packages/react-aria-components/src/utils.tsx

---------

Co-authored-by: Robert Snow <[email protected]>

Author: nwidynski

packages/react-aria-components/src/Checkbox.tsx

@@ -123,7 +123,9 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
     ...props,
     validationBehavior
   });
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {groupProps, labelProps, descriptionProps, errorMessageProps, ...validation} = useCheckboxGroup({
     ...props,
     label,

packages/react-aria-components/src/ColorField.tsx

@@ -86,7 +86,9 @@ function ColorChannelField(props: ColorChannelFieldProps) {
   });
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     inputProps,
@@ -129,7 +131,9 @@ function HexColorField(props: HexColorFieldProps) {
   });
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     inputProps,

packages/react-aria-components/src/ColorSlider.tsx

@@ -41,7 +41,9 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
   let trackRef = React.useRef(null);
   let inputRef = React.useRef(null);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     trackProps,
     thumbProps,

packages/react-aria-components/src/ComboBox.tsx

@@ -126,7 +126,9 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   let inputRef = useRef<HTMLInputElement>(null);
   let listBoxRef = useRef<HTMLDivElement>(null);
   let popoverRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     buttonProps,
     inputProps,

packages/react-aria-components/src/DateField.tsx

@@ -64,7 +64,9 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
   });
 
   let fieldRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let inputRef = useRef<HTMLInputElement>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useDateField({
     ...removeDataAttributes(props),
@@ -127,7 +129,9 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   });
 
   let fieldRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let inputRef = useRef<HTMLInputElement>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTimeField({
     ...removeDataAttributes(props),

packages/react-aria-components/src/DatePicker.tsx

@@ -85,7 +85,9 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   let groupRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     groupProps,
     labelProps,
@@ -186,7 +188,9 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
   });
 
   let groupRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     groupProps,
     labelProps,

packages/react-aria-components/src/Meter.tsx

@@ -45,7 +45,9 @@ export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter
   } = props;
   value = clamp(value, minValue, maxValue);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     meterProps,
     labelProps

packages/react-aria-components/src/NumberField.tsx

@@ -61,7 +61,9 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     groupProps,

packages/react-aria-components/src/ProgressBar.tsx

@@ -51,7 +51,9 @@ export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarPro
   } = props;
   value = clamp(value, minValue, maxValue);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     progressBarProps,
     labelProps

packages/react-aria-components/src/RadioGroup.tsx

@@ -125,7 +125,9 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     validationBehavior
   });
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validation} = useRadioGroup({
     ...props,
     label,