RAC: Additional render props and docs improvements (#4755)

* export new types from RAC index.ts

* update RAC Tailwind example app

* add more exports

* update docs

* show optional props for Meter/ProgressBar table

* update various render props

* remove focus from various components

* fix searchfield test

* show optional in Checkbox/Combobox

* fix table row dragging docs table

* add more showOptional

* add state table for SliderTrack

* revert type updates

* add missing state table

* actual fix

* fix checkbox type

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: reidbarber

examples/rac-tailwind/src/App.js

@@ -362,7 +362,7 @@ function SliderExample() {
           <SliderOutput />
         </div>
         <SliderTrack className="relative w-full h-7">
-          {(state) => <>
+          {({state}) => <>
             <div className="absolute h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40" />
             <div className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white" style={{width: state.getThumbPercent(0) * 100 + '%'}} />
             <SliderThumb className="h-7 w-7 top-[50%] rounded-full border border-purple-800/75 bg-white transition-colors data-[dragging]:bg-purple-100 outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-black" />

packages/react-aria-components/docs/Calendar.mdx

@@ -363,7 +363,9 @@ The states, selectors, and render props for each component used in a `Calendar`
 
 ### Calendar
 
-A `Calendar` can be targeted with the `.react-aria-Calendar` CSS selector, or by overriding with a custom `className`. It provides a <TypeLink links={statelyDocs.links} type={statelyDocs.exports.CalendarState} /> object to its render props, which can be used to customize the `className`, `style`, or `children`.
+A `Calendar` can be targeted with the `.react-aria-Calendar` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
+
+<StateTable properties={docs.exports.CalendarRenderProps.properties} />
 
 ### Button
 

packages/react-aria-components/docs/Checkbox.mdx

@@ -250,7 +250,7 @@ Render props may also be used as children to alter what elements are rendered ba
 
 The states, selectors, and render props for `Checkbox` are documented below.
 
-<StateTable properties={docs.exports.CheckboxRenderProps.properties} />
+<StateTable properties={docs.exports.CheckboxRenderProps.properties} showOptional />
 
 ## Reusable wrappers
 

packages/react-aria-components/docs/ComboBox.mdx

@@ -425,15 +425,17 @@ The states and selectors for each component used in a `ComboBox` are documented
 
 A `ComboBox` can be targeted with the `.react-aria-ComboBox` CSS selector, or by overriding with a custom `className`. It supports the following states:
 
-<StateTable properties={docs.exports.ComboBoxRenderProps.properties} />
+<StateTable properties={docs.exports.ComboBoxRenderProps.properties} showOptional />
 
 ### Label
 
 A `Label` can be targeted with the `.react-aria-Label` CSS selector, or by overriding with a custom `className`.
 
 ### Input
 
-An `Input` within a ComboBox can be targeted with the `.react-aria-Input` CSS selector, or by overriding with a custom `className`. It supports standard CSS pseudo classes such as `:focus` for states. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes) for details.
+An `Input` can be targeted with the `.react-aria-Input` CSS selector, or by overriding with a custom `className`. It supports the following states:
+
+<StateTable properties={docs.exports.InputRenderProps.properties} />
 
 ### Button
 

packages/react-aria-components/docs/DateField.mdx

@@ -280,7 +280,9 @@ The states, selectors, and render props for each component used in a `DateField`
 
 ### DateField
 
-A `DateField` can be targeted with the `.react-aria-DateField` CSS selector, or by overriding with a custom `className`. It provides a <TypeLink links={statelyDocs.links} type={statelyDocs.exports.DateFieldState} /> object to its render props, which can be used to customize the `className`, `style`, or `children`.
+A `DateField` can be targeted with the `.react-aria-DateField` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
+
+<StateTable properties={docs.exports.DateFieldRenderProps.properties} />
 
 ### Label
 

packages/react-aria-components/docs/DatePicker.mdx

@@ -645,7 +645,9 @@ The states, selectors, and render props for each component used in a `DatePicker
 
 ### DatePicker
 
-A `DatePicker` can be targeted with the `.react-aria-DatePicker` CSS selector, or by overriding with a custom `className`. It provides a <TypeLink links={statelyDocs.links} type={statelyDocs.exports.DatePickerState} /> object to its render props, which can be used to customize the `className`, `style`, or `children`.
+A `DatePicker` can be targeted with the `.react-aria-DatePicker` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
+
+<StateTable properties={docs.exports.DatePickerRenderProps.properties} />
 
 ### Label
 

packages/react-aria-components/docs/DateRangePicker.mdx

@@ -681,7 +681,9 @@ The states, selectors, and render props for each component used in a `DateRangeP
 
 ### DateRangePicker
 
-A `DateRangePicker` can be targeted with the `.react-aria-DateRangePicker` CSS selector, or by overriding with a custom `className`. It provides a <TypeLink links={statelyDocs.links} type={statelyDocs.exports.DateRangePickerState} /> object to its render props, which can be used to customize the `className`, `style`, or `children`.
+A `DateRangePicker` can be targeted with the `.react-aria-DateRangePicker` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
+
+<StateTable properties={docs.exports.DateRangePickerRenderProps.properties} />
 
 ### Label
 

packages/react-aria-components/docs/Meter.mdx

@@ -181,7 +181,7 @@ The selectors and render props for each component used in a `Meter` are document
 
 A `Meter` can be targeted with the `.react-aria-Meter` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
 
-<StateTable properties={docs.exports.MeterRenderProps.properties} />
+<StateTable properties={docs.exports.MeterRenderProps.properties} showOptional />
 
 ### Label
 

packages/react-aria-components/docs/NumberField.mdx

@@ -285,7 +285,9 @@ The states, selectors, and render props for each component used in a `NumberFiel
 
 ### NumberField
 
-A `NumberField` can be targeted with the `.react-aria-NumberField` CSS selector, or by overriding with a custom `className`. It provides a <TypeLink links={statelyDocs.links} type={statelyDocs.exports.NumberFieldState} /> object to its render props, which can be used to customize the `className`, `style`, or `children`.
+A `NumberField` can be targeted with the `.react-aria-NumberField` CSS selector, or by overriding with a custom `className`. It supports the following states:
+
+<StateTable properties={docs.exports.NumberFieldRenderProps.properties} showOptional />
 
 ### Label
 

packages/react-aria-components/docs/ProgressBar.mdx

@@ -197,7 +197,7 @@ The selectors and render props for each component used in a `ProgressBar` are do
 
 A `ProgressBar` can be targeted with the `.react-aria-ProgressBar` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
 
-<StateTable properties={docs.exports.ProgressBarRenderProps.properties} />
+<StateTable properties={docs.exports.ProgressBarRenderProps.properties} showOptional />
 
 ### Label