highlight hook usage in example code

packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx

@@ -41,7 +41,9 @@ function Popover({state, children, triggerRef, ...props}: Omit<Parameters<typeof
   // usePopover positions the overlay relative to the trigger and closes it on
   // outside interaction or Escape. The state comes from useOverlayTriggerState.
   let popoverRef = React.useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {popoverProps, underlayProps} = usePopover({...props, triggerRef, popoverRef}, state);
+  /*- end highlight -*/
 
   return (
     // Overlay renders into a portal and contains focus while the popover is open.

starters/hooks/src/Breadcrumbs.tsx

@@ -34,7 +34,9 @@ export function Breadcrumbs(props: AriaBreadcrumbsProps & {children?: ReactNode}
 
 export function Breadcrumb(props: AriaBreadcrumbItemProps & {href?: string; children?: ReactNode}) {
   let ref = useRef<HTMLAnchorElement>(null);
+  /*- begin highlight -*/
   let {itemProps} = useBreadcrumbItem({...props, elementType: 'a'}, ref);
+  /*- end highlight -*/
   let {hoverProps, isHovered} = useHover(props);
   let {focusProps, isFocusVisible} = useFocusRing();
 

starters/hooks/src/Calendar.tsx

@@ -20,7 +20,9 @@ import './Calendar.css';
 export function Calendar(props: AriaCalendarProps<DateValue>) {
   let {locale} = useLocale();
   let state = useCalendarState({...props, locale, createCalendar});
+  /*- begin highlight -*/
   let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state);
+  /*- end highlight -*/
 
   return (
     <div {...calendarProps} className="react-aria-Calendar">

starters/hooks/src/Checkbox.tsx

@@ -11,11 +11,13 @@ import './Checkbox.css';
 export function Checkbox(props: AriaCheckboxProps) {
   let state = useToggleState(props);
   let ref = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useCheckbox(
     props,
     state,
     ref
   );
+  /*- end highlight -*/
   let {hoverProps, isHovered} = useHover({isDisabled: isDisabled || isReadOnly});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let isIndeterminate = props.isIndeterminate || false;

starters/hooks/src/CheckboxGroup.tsx

@@ -55,11 +55,13 @@ export function CheckboxGroup({children, orientation = 'vertical', ...props}: Ch
 export function Checkbox(props: AriaCheckboxGroupItemProps) {
   let state = React.useContext(CheckboxGroupContext)!;
   let ref = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useCheckboxGroupItem(
     props,
     state,
     ref
   );
+  /*- end highlight -*/
   let {hoverProps, isHovered} = useHover({isDisabled: isDisabled || isReadOnly});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
 

starters/hooks/src/ColorArea.tsx

@@ -12,11 +12,12 @@ export function ColorArea(props: AriaColorAreaProps) {
   let containerRef = useRef<HTMLDivElement>(null);
   // useColorAreaState manages the two channel values behind the 2D gradient.
   let state = useColorAreaState(props);
-  // colorAreaProps.style carries the 2D gradient background, while thumbProps.style positions the thumb.
+  /*- begin highlight -*/
   let {colorAreaProps, xInputProps, yInputProps, thumbProps} = useColorArea(
     {...props, inputXRef, inputYRef, containerRef},
     state
   );
+  /*- end highlight -*/
   let {focusProps, isFocusVisible} = useFocusRing();
 
   return (

starters/hooks/src/ColorField.tsx

@@ -10,7 +10,9 @@ import './Form.css';
 export function ColorField(props: AriaColorFieldProps & {label?: React.ReactNode}) {
   let state = useColorFieldState(props);
   let inputRef = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {labelProps, inputProps} = useColorField(props, state, inputRef);
+  /*- end highlight -*/
   let [isFocused, setFocused] = useState(false);
   let {focusProps} = useFocus({onFocusChange: setFocused});
 

starters/hooks/src/ColorSlider.tsx

@@ -16,11 +16,12 @@ export function ColorSlider(props: AriaColorSliderProps & {label?: string}) {
 
   // Default the label to the channel name in the current locale.
   let label = props.label || state.value.getChannelName(props.channel, locale);
-  // trackProps.style carries the gradient background, while thumbProps.style positions the thumb.
+  /*- begin highlight -*/
   let {trackProps, thumbProps, inputProps, labelProps, outputProps} = useColorSlider(
     {...props, label, trackRef, inputRef},
     state
   );
+  /*- end highlight -*/
   let {focusProps, isFocusVisible} = useFocusRing();
 
   return (

starters/hooks/src/ColorWheel.tsx

@@ -13,12 +13,13 @@ export function ColorWheel(props: Omit<AriaColorWheelProps, 'outerRadius' | 'inn
   // useColorWheelState manages the hue value behind the circular gradient track.
   let state = useColorWheelState(props);
   let inputRef = useRef<HTMLInputElement>(null);
-  // trackProps.style carries the conic gradient, while thumbProps.style positions the thumb on the ring.
+  /*- begin highlight -*/
   let {trackProps, thumbProps, inputProps} = useColorWheel(
     {...props, outerRadius: RADIUS, innerRadius: RADIUS - TRACK_THICKNESS},
     state,
     inputRef
   );
+  /*- end highlight -*/
   let {focusProps, isFocusVisible} = useFocusRing();
 
   return (

starters/hooks/src/DateField.tsx

@@ -18,7 +18,9 @@ export function DateField(props: AriaDateFieldProps<DateValue> & {label?: React.
   let {locale} = useLocale();
   let state = useDateFieldState({...props, locale, createCalendar});
   let ref = useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {labelProps, fieldProps} = useDateField(props, state, ref);
+  /*- end highlight -*/
   let [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({onFocusWithinChange: setFocusWithin});
 

starters/hooks/src/Disclosure.tsx

@@ -15,7 +15,9 @@ export function Disclosure(props: AriaDisclosureProps & {title?: ReactNode; chil
   let state = useDisclosureState(props);
   let panelRef = useRef<HTMLDivElement>(null);
   let buttonRef = useRef<HTMLButtonElement>(null);
+  /*- begin highlight -*/
   let {buttonProps, panelProps} = useDisclosure(props, state, panelRef);
+  /*- end highlight -*/
   let {buttonProps: pressProps, isPressed} = useButton(buttonProps, buttonRef);
   let {hoverProps, isHovered} = useHover({});
   let {focusProps, isFocusVisible} = useFocusRing();

starters/hooks/src/Meter.tsx

@@ -5,7 +5,9 @@ import './Form.css';
 
 export function Meter(props: AriaMeterProps) {
   let {label, value = 0, minValue = 0, maxValue = 100} = props;
+  /*- begin highlight -*/
   let {meterProps, labelProps} = useMeter(props);
+  /*- end highlight -*/
 
   // Calculate the width of the meter fill as a percentage.
   let percentage = ((value - minValue) / (maxValue - minValue)) * 100;

starters/hooks/src/NumberField.tsx

@@ -17,8 +17,10 @@ export function NumberField(props: AriaNumberFieldProps & {label?: React.ReactNo
   let {locale} = useLocale();
   let state = useNumberFieldState({...props, locale});
   let inputRef = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps} =
     useNumberField(props, state, inputRef);
+  /*- end highlight -*/
 
   return (
     <div className="react-aria-NumberField">

starters/hooks/src/ProgressBar.tsx

@@ -5,7 +5,9 @@ import './Form.css';
 
 export function ProgressBar(props: AriaProgressBarProps) {
   let {label, value = 0, minValue = 0, maxValue = 100, isIndeterminate} = props;
+  /*- begin highlight -*/
   let {progressBarProps, labelProps} = useProgressBar(props);
+  /*- end highlight -*/
 
   // Calculate the width of the progress fill as a percentage.
   let percentage = ((value - minValue) / (maxValue - minValue)) * 100;

starters/hooks/src/RadioGroup.tsx

@@ -47,7 +47,9 @@ export function RadioGroup({children, ...props}: RadioGroupProps) {
 export function Radio(props: AriaRadioProps) {
   let state = React.useContext(RadioContext)!;
   let ref = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {inputProps, isSelected, isPressed, isDisabled} = useRadio(props, state, ref);
+  /*- end highlight -*/
   let {hoverProps, isHovered} = useHover({isDisabled: isDisabled || state.isReadOnly});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
 

starters/hooks/src/RangeCalendar.tsx

@@ -26,11 +26,13 @@ export function RangeCalendar(props: AriaRangeCalendarProps<DateValue>) {
   let {locale} = useLocale();
   let state = useRangeCalendarState({...props, locale, createCalendar});
   let ref = useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {calendarProps, prevButtonProps, nextButtonProps, title} = useRangeCalendar(
     props,
     state,
     ref
   );
+  /*- end highlight -*/
 
   return (
     <div {...calendarProps} ref={ref} className="react-aria-RangeCalendar">

starters/hooks/src/SearchField.tsx

@@ -12,7 +12,9 @@ import './Form.css';
 export function SearchField(props: AriaSearchFieldProps & {label?: React.ReactNode}) {
   let state = useSearchFieldState(props);
   let ref = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {labelProps, inputProps, clearButtonProps} = useSearchField(props, state, ref);
+  /*- end highlight -*/
   let [isFocused, setFocused] = useState(false);
   let {focusProps} = useFocus({onFocusChange: setFocused});
 

starters/hooks/src/Slider.tsx

@@ -33,7 +33,9 @@ export function Slider({label, thumbLabels, fillOffset, formatOptions, ...props}
   let trackRef = useRef<HTMLDivElement>(null);
   let numberFormatter = useNumberFormatter(formatOptions);
   let state = useSliderState({...props, numberFormatter});
+  /*- begin highlight -*/
   let {groupProps, trackProps, labelProps, outputProps} = useSlider(props, state, trackRef);
+  /*- end highlight -*/
 
   // The fill spans from fillOffset (or the min) to the last thumb.
   let start =

starters/hooks/src/Switch.tsx

@@ -11,11 +11,13 @@ import './Switch.css';
 export function Switch(props: AriaSwitchProps) {
   let state = useToggleState(props);
   let ref = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useSwitch(
     props,
     state,
     ref
   );
+  /*- end highlight -*/
   let {hoverProps, isHovered} = useHover({isDisabled: isDisabled || isReadOnly});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
 

starters/hooks/src/Table.tsx

@@ -81,7 +81,9 @@ function TableHeaderRow({
   children: ReactNode;
 }) {
   let ref = useRef<HTMLTableRowElement>(null);
+  /*- begin highlight -*/
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
+  /*- end highlight -*/
   return (
     <tr {...rowProps} ref={ref}>
       {children}

starters/hooks/src/Tabs.tsx

@@ -11,7 +11,9 @@ import './Tabs.css';
 export function Tabs(props: AriaTabListOptions<object> & Parameters<typeof useTabListState>[0]) {
   let state = useTabListState(props);
   let ref = useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {tabListProps} = useTabList(props, state, ref);
+  /*- end highlight -*/
   let orientation = props.orientation || 'horizontal';
 
   return (

starters/hooks/src/TagGroup.tsx

@@ -16,7 +16,9 @@ export function TagGroup(
 ) {
   let ref = useRef<HTMLDivElement>(null);
   let state = useListState(props);
+  /*- begin highlight -*/
   let {gridProps, labelProps} = useTagGroup(props, state, ref);
+  /*- end highlight -*/
 
   return (
     <div className="react-aria-TagGroup">

starters/hooks/src/TextField.tsx

@@ -8,7 +8,9 @@ import './Form.css';
 
 export function TextField(props: AriaTextFieldProps & {label?: React.ReactNode}) {
   let ref = useRef<HTMLInputElement>(null);
+  /*- begin highlight -*/
   let {labelProps, inputProps} = useTextField(props, ref);
+  /*- end highlight -*/
   let [isFocused, setFocused] = useState(false);
   let {focusProps} = useFocus({onFocusChange: setFocused});
 

starters/hooks/src/TimeField.tsx

@@ -14,7 +14,9 @@ export function TimeField(props: AriaTimeFieldProps<TimeValue> & {label?: React.
   let {locale} = useLocale();
   let state = useTimeFieldState({...props, locale});
   let ref = useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {labelProps, fieldProps} = useTimeField(props, state, ref);
+  /*- end highlight -*/
   let [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({onFocusWithinChange: setFocusWithin});
 

starters/hooks/src/Toast.tsx

@@ -58,11 +58,13 @@ function Toast({
   ...props
 }: AriaToastProps<string> & {state: ReturnType<typeof useToastState<string>>}) {
   let ref = useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {toastProps, contentProps, titleProps, closeButtonProps} = useToast(
     {...props, toast},
     state,
     ref
   );
+  /*- end highlight -*/
   let {focusProps, isFocusVisible} = useFocusRing();
 
   return (

starters/hooks/src/ToggleButton.tsx

@@ -19,7 +19,9 @@ interface ToggleButtonProps extends AriaToggleButtonProps {
 export function ToggleButton({variant = 'primary', ...props}: ToggleButtonProps) {
   let ref = useRef<HTMLButtonElement>(null);
   let state = useToggleState(props);
+  /*- begin highlight -*/
   let {buttonProps, isPressed} = useToggleButton(props, state, ref);
+  /*- end highlight -*/
   let {hoverProps, isHovered} = useHover(props);
   let {focusProps, isFocusVisible} = useFocusRing();
 

starters/hooks/src/Toolbar.tsx

@@ -7,7 +7,9 @@ import './Toolbar.css';
 export function Toolbar(props: AriaToolbarProps & {children?: ReactNode}) {
   let {orientation = 'horizontal'} = props;
   let ref = useRef<HTMLDivElement>(null);
+  /*- begin highlight -*/
   let {toolbarProps} = useToolbar(props, ref);
+  /*- end highlight -*/
 
   return (
     <div {...toolbarProps} ref={ref} className="react-aria-Toolbar" data-orientation={orientation}>