diff --git a/Makefile b/Makefile index cf9e3b12b1d..c10606accc9 100644 --- a/Makefile +++ b/Makefile @@ -121,11 +121,14 @@ website-production: # $(MAKE) s2-docs-production $(MAKE) starter-zip $(MAKE) tailwind-starter + $(MAKE) hooks-starter $(MAKE) s2-storybook-docs mv starters/docs/storybook-static dist/production/docs/react-aria-starter mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip + mv starters/hooks/storybook-static dist/production/docs/react-aria-hooks-starter + mv starters/hooks/react-aria-hooks-starter.zip dist/production/docs/react-aria-hooks-starter.$$(git rev-parse --short HEAD).zip check-examples: node scripts/extractExamplesS2.mjs @@ -146,6 +149,12 @@ tailwind-starter: cd starters/tailwind && zip -r react-aria-tailwind-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*" cd starters/tailwind && yarn build-storybook +hooks-starter: + cp LICENSE starters/hooks/. + cd starters/hooks && yarn --no-immutable && yarn up react-aria react-stately @internationalized/date && yarn tsc + cd starters/hooks && zip -r react-aria-hooks-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*" + cd starters/hooks && yarn build-storybook + s2-storybook-docs: yarn build:s2-storybook-docs -o dist/production/docs/s2 diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json index af2b357bd21..1ec9f5dea25 100644 --- a/packages/dev/s2-docs/package.json +++ b/packages/dev/s2-docs/package.json @@ -58,7 +58,8 @@ }, "alias": { "tailwind-starter": "../../../starters/tailwind/src", - "vanilla-starter": "../../../starters/docs/src" + "vanilla-starter": "../../../starters/docs/src", + "hooks-starter": "../../../starters/hooks/src" }, "targets": { "react-static": { diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx index 9a270196acc..fa40a76d886 100644 --- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx @@ -7,7 +7,7 @@ import Anatomy from '/packages/react-aria/docs/breadcrumbs/anatomy.svg'; import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const tags = ['navigation']; -export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'Breadcrumbs/useBreadcrumbs.html'}]; +export const relatedPages = [{'title': 'useBreadcrumbs', 'url': './Breadcrumbs/useBreadcrumbs'}]; export const description = 'Displays a hierarchy of links to the current page or resource in an application.'; # Breadcrumbs diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx new file mode 100644 index 00000000000..ae2cf090e0c --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx @@ -0,0 +1,56 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/breadcrumbs'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a breadcrumbs component.'; +export const isSubpage = true; + +# useBreadcrumbs + +{docs.exports.useBreadcrumbs.description} + +This example uses `useBreadcrumbs` for the navigation landmark and `useBreadcrumbItem` for each item, marking the last item as the current page. + +```tsx render files={["starters/hooks/src/Breadcrumbs.tsx", "starters/hooks/src/Breadcrumbs.css", "starters/hooks/src/Link.css"]} +"use client"; +import {Breadcrumbs, Breadcrumb} from 'hooks-starter/Breadcrumbs'; + + + alert('Pressed Folder 1')}>Folder 1 + alert('Pressed Folder 2')}>Folder 2 + Folder 3 + +``` + +## API + + + + +### AriaBreadcrumbsProps + + + +### BreadcrumbsAria + + + +### AriaBreadcrumbItemProps + + + +### BreadcrumbItemAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index 22065cb4fb5..33478c4307c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -12,7 +12,7 @@ import '../../tailwind/tailwind.css'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; export const tags = ['btn']; -export const relatedPages = [{'title': 'useButton', 'url': 'Button/useButton.html'}]; +export const relatedPages = [{'title': 'useButton', 'url': './Button/useButton'}]; export const description = 'Allows a user to perform an action, with mouse, touch, and keyboard interactions.'; # Button diff --git a/packages/dev/s2-docs/pages/react-aria/Button/useButton.mdx b/packages/dev/s2-docs/pages/react-aria/Button/useButton.mdx new file mode 100644 index 00000000000..300ed80ada3 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Button/useButton.mdx @@ -0,0 +1,41 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/button'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a button.'; +export const isSubpage = true; + +# useButton + +{docs.exports.useButton.description} + +```tsx render files={["starters/hooks/src/Button.tsx", "starters/hooks/src/Button.css"]} +"use client"; +import {Button} from 'hooks-starter/Button'; + + +``` + +## API + + + +### AriaButtonProps + + + +### ButtonAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index 7a3ec7657ce..95f0cad2472 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/calendar/calendar-anatomy.svg'; export const tags = ['date']; -export const relatedPages = [{'title': 'useCalendar', 'url': 'Calendar/useCalendar.html'}]; +export const relatedPages = [{'title': 'useCalendar', 'url': './Calendar/useCalendar'}]; export const description = 'Displays one or more date grids and allows users to select a single date.'; # Calendar diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx new file mode 100644 index 00000000000..73b80b54ab3 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx @@ -0,0 +1,63 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/calendar'; +import statelyDocs from 'docs:@react-stately/calendar'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a calendar component.'; +export const isSubpage = true; + +# useCalendar + +{docs.exports.useCalendar.description} + +A calendar is built from scratch with `useCalendar`, `useCalendarGrid`, and `useCalendarCell`, since those hooks are the calendar primitives. The previous and next navigation buttons reuse the [Button](../Button) component from React Aria Components. + +```tsx render files={["starters/hooks/src/Calendar.tsx", "starters/hooks/src/Calendar.css"]} +"use client"; +import {Calendar} from 'hooks-starter/Calendar'; + + +``` + +## API + + + + + + +### AriaCalendarProps + + + +### CalendarAria + + + +### AriaCalendarGridProps + + + +### CalendarGridAria + + + +### AriaCalendarCellProps + + + +### CalendarCellAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx index bd49f4fa4c1..db4bc876876 100644 --- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx @@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/checkbox/checkbox-anatomy.svg'; export const tags = ['input']; -export const relatedPages = [{'title': 'useCheckbox', 'url': 'Checkbox/useCheckbox.html'}]; +export const relatedPages = [{'title': 'useCheckbox', 'url': './Checkbox/useCheckbox'}]; export const description = 'Allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.'; # Checkbox diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx new file mode 100644 index 00000000000..ff11218173a --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx @@ -0,0 +1,45 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/checkbox'; +import statelyDocs from 'docs:@react-stately/toggle'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a checkbox.'; +export const isSubpage = true; + +# useCheckbox + +{docs.exports.useCheckbox.description} + +This example uses `useCheckbox` to build a checkbox from a native ``, wrapped in a label. + +```tsx render files={["starters/hooks/src/Checkbox.tsx", "starters/hooks/src/Checkbox.css"]} +"use client"; +import {Checkbox} from 'hooks-starter/Checkbox'; + +Unsubscribe +``` + +## API + + + + +### AriaCheckboxProps + + + +### CheckboxAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx index 480c5fd0337..edf194d79fb 100644 --- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx @@ -9,7 +9,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['input']; export const relatedPages = [ - {title: 'useCheckboxGroup', url: 'CheckboxGroup/useCheckboxGroup.html'}, + {title: 'useCheckboxGroup', url: './CheckboxGroup/useCheckboxGroup'}, {title: 'Testing CheckboxGroup', url: './CheckboxGroup/testing'} ]; export const description = 'Allows a user to select multiple items from a list of options.'; diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx new file mode 100644 index 00000000000..87e6f72950b --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx @@ -0,0 +1,54 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/checkbox'; +import statelyDocs from 'docs:@react-stately/checkbox'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a checkbox group component.'; +export const isSubpage = true; + +# useCheckboxGroup + +{docs.exports.useCheckboxGroup.description} + +This example uses `useCheckboxGroup` for the group and `useCheckboxGroupItem` for each checkbox. The group state is shared with each item through React context. + +```tsx render files={["starters/hooks/src/CheckboxGroup.tsx", "starters/hooks/src/CheckboxGroup.css", "starters/hooks/src/Checkbox.css"]} +"use client"; +import {CheckboxGroup, Checkbox} from 'hooks-starter/CheckboxGroup'; + + + Soccer + Baseball + Basketball + +``` + +## API + + + + + +### AriaCheckboxGroupProps + + + +### CheckboxGroupAria + + + +### AriaCheckboxGroupItemProps + + diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx index 83e333f1166..cd962371c4c 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx @@ -8,7 +8,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/color/ColorAreaAnatomy.svg'; export const tags = []; -export const relatedPages = [{'title': 'useColorArea', 'url': 'ColorArea/useColorArea.html'}]; +export const relatedPages = [{'title': 'useColorArea', 'url': './ColorArea/useColorArea'}]; export const description = 'Allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.'; # ColorArea diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx new file mode 100644 index 00000000000..810ec9d9c87 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx @@ -0,0 +1,45 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/color'; +import statelyDocs from 'docs:@react-stately/color'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a color area.'; +export const isSubpage = true; + +# useColorArea + +{docs.exports.useColorArea.description} + +This example builds a color area from scratch with `useColorArea`. It adjusts two channels of a color at once via a draggable thumb over a two-dimensional gradient. The thumb grows when focused via the keyboard. + +```tsx render files={["starters/hooks/src/ColorArea.tsx", "starters/hooks/src/ColorArea.css", "starters/hooks/src/ColorThumb.css"]} +"use client"; +import {ColorArea} from 'hooks-starter/ColorArea'; + + +``` + +## API + + + + +### AriaColorAreaOptions + + + +### ColorAreaAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx index 1596d84ea05..bff24a940a6 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx @@ -9,7 +9,7 @@ import docs from 'docs:react-aria-components'; import Anatomy from '/packages/react-aria/docs/color/ColorFieldAnatomy.svg'; export const tags = ['input']; -export const relatedPages = [{'title': 'useColorField', 'url': 'ColorField/useColorField.html'}]; +export const relatedPages = [{'title': 'useColorField', 'url': './ColorField/useColorField'}]; export const description = 'Allows users to edit a hex color or individual color channel value.'; # ColorField diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx new file mode 100644 index 00000000000..c9ced2e3111 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx @@ -0,0 +1,45 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/color'; +import statelyDocs from 'docs:@react-stately/color'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a color field.'; +export const isSubpage = true; + +# useColorField + +{docs.exports.useColorField.description} + +This example builds a color field from scratch with `useColorField`, which parses and formats a hex color value as the user types. `useFocus` toggles a `data-focused` attribute so the field shows the focus ring from the reused styles. + +```tsx render files={["starters/hooks/src/ColorField.tsx", "starters/hooks/src/ColorField.css", "starters/hooks/src/TextField.css", "starters/hooks/src/Form.css"]} +"use client"; +import {ColorField} from 'hooks-starter/ColorField'; + + +``` + +## API + + + + +### AriaColorFieldProps + + + +### ColorFieldAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx index 2ea8ccd7dfc..d32f25f9ea1 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx @@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/color/ColorSliderAnatomy.svg'; export const tags = ['input']; -export const relatedPages = [{'title': 'useColorSlider', 'url': 'ColorSlider/useColorSlider.html'}]; +export const relatedPages = [{'title': 'useColorSlider', 'url': './ColorSlider/useColorSlider'}]; export const description = 'Allows users to adjust an individual channel of a color value.'; # ColorSlider diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx new file mode 100644 index 00000000000..236f3048847 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx @@ -0,0 +1,45 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/color'; +import statelyDocs from 'docs:@react-stately/color'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a color slider.'; +export const isSubpage = true; + +# useColorSlider + +{docs.exports.useColorSlider.description} + +This example builds a color slider from scratch with `useColorSlider`, which adjusts a single channel of a color along a gradient track. The label and value default to the localized channel name and formatted value. + +```tsx render files={["starters/hooks/src/ColorSlider.tsx", "starters/hooks/src/ColorSlider.css", "starters/hooks/src/ColorThumb.css"]} +"use client"; +import {ColorSlider} from 'hooks-starter/ColorSlider'; + + +``` + +## API + + + + +### AriaColorSliderOptions + + + +### ColorSliderAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx index 42e60ddde2d..f4435671cd4 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx @@ -8,7 +8,7 @@ import {ColorSwatch as TailwindColorSwatch} from 'tailwind-starter/ColorSwatch'; import '../../tailwind/tailwind.css'; export const tags = []; -export const relatedPages = [{'title': 'useColorSwatch', 'url': 'ColorSwatch/useColorSwatch.html'}]; +export const relatedPages = [{'title': 'useColorSwatch', 'url': './ColorSwatch/useColorSwatch'}]; export const description = 'Displays a preview of a selected color.'; # ColorSwatch diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatch/useColorSwatch.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatch/useColorSwatch.mdx new file mode 100644 index 00000000000..20af88beb6d --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatch/useColorSwatch.mdx @@ -0,0 +1,43 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/color'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a color swatch.'; +export const isSubpage = true; + +# useColorSwatch + +{docs.exports.useColorSwatch.description} + +This example uses `useColorSwatch` to display a preview of a color value. A checkerboard pattern behind the color communicates transparency for colors with an alpha channel. + +```tsx render files={["starters/hooks/src/ColorSwatch.tsx", "starters/hooks/src/ColorSwatch.css"]} +"use client"; +import {ColorSwatch} from 'hooks-starter/ColorSwatch'; + + +``` + +## API + + + +### AriaColorSwatchProps + + + +### ColorSwatchAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx index 9f675ffbc3d..f29c9da1eae 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx @@ -8,7 +8,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/color/ColorWheelAnatomy.svg'; export const tags = ['input']; -export const relatedPages = [{'title': 'useColorWheel', 'url': 'ColorWheel/useColorWheel.html'}]; +export const relatedPages = [{'title': 'useColorWheel', 'url': './ColorWheel/useColorWheel'}]; export const description = 'Allows users to adjust the hue of an HSL or HSB color value on a circular track.'; # ColorWheel diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx new file mode 100644 index 00000000000..a1760b8e713 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx @@ -0,0 +1,45 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/color'; +import statelyDocs from 'docs:@react-stately/color'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a color wheel.'; +export const isSubpage = true; + +# useColorWheel + +{docs.exports.useColorWheel.description} + +This example builds a color wheel from scratch with `useColorWheel`, which adjusts the hue channel along a circular gradient track. The thumb grows when focused via the keyboard. + +```tsx render files={["starters/hooks/src/ColorWheel.tsx", "starters/hooks/src/ColorWheel.css", "starters/hooks/src/ColorThumb.css"]} +"use client"; +import {ColorWheel} from 'hooks-starter/ColorWheel'; + + +``` + +## API + + + + +### AriaColorWheelOptions + + + +### ColorWheelAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index 78e98c2ebe2..283b63b3835 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -10,7 +10,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['autocomplete', 'search', 'typeahead', 'input']; export const relatedPages = [ - {title: 'useComboBox', url: 'ComboBox/useComboBox.html'}, + {title: 'useComboBox', url: './ComboBox/useComboBox'}, {title: 'Testing ComboBox', url: './ComboBox/testing'} ]; export const description = 'Combines a text input with a listbox, allowing users to filter a list of options to items matching a query.'; diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox/useComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox/useComboBox.mdx new file mode 100644 index 00000000000..502e9dcf7d2 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox/useComboBox.mdx @@ -0,0 +1,126 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/combobox'; +import statelyDocs from 'docs:@react-stately/combobox'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a combo box component.'; +export const isSubpage = true; + +# useComboBox + +{docs.exports.useComboBox.description} + +This example uses `useComboBox` to provide the behavior for a custom combo box, and reuses the [Input](../TextField), [Button](../Button), [Popover](../Popover), and [ListBox](../ListBox) components from React Aria Components to render the text field, trigger, popup, and list of options. The values returned by the hook are passed to these components via context, following the [Reusing children](../customization#reusing-children) pattern. A "contains" filter from [useFilter](../useFilter) filters the options as the user types. + +```tsx render +"use client"; +import React from 'react'; +import {useComboBox} from 'react-aria/useComboBox'; +import {useFilter} from 'react-aria/useFilter'; +import {useComboBoxState} from 'react-stately/useComboBoxState'; +import {CollectionBuilder} from 'react-aria/CollectionBuilder'; +import type {Collection as ICollection, Node} from '@react-types/shared'; +import {Provider} from 'react-aria-components/slots'; +import {ComboBoxStateContext} from 'react-aria-components/ComboBox'; +import {Collection} from 'react-aria-components/Collection'; +import {LabelContext} from 'react-aria-components/Label'; +import {ButtonContext} from 'react-aria-components/Button'; +import {Input, InputContext} from 'react-aria-components/Input'; +import {OverlayTriggerStateContext} from 'react-aria-components/Dialog'; +import {PopoverContext} from 'react-aria-components/Popover'; +import {ListBoxContext, ListStateContext} from 'react-aria-components/ListBox'; +import {Label, FieldButton} from 'vanilla-starter/Form'; +import {Popover} from 'vanilla-starter/Popover'; +import {ComboBoxListBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; +import {ChevronDown} from 'lucide-react'; +import 'vanilla-starter/ComboBox.css'; + +function ComboBox(props: Parameters[0] & {label?: React.ReactNode, children?: React.ReactNode}) { + // useComboBoxState needs a collection built from the items. CollectionBuilder + // renders a hidden copy of them to construct it before rendering. + return ( + {props.children}}> + {collection => } + + ); +} + +function ComboBoxInner({collection, ...props}: {collection: ICollection>} & Parameters[0] & {label?: React.ReactNode}) { + // Create state based on the collection and incoming props. A "contains" + // filter from useFilter filters the options against the current input text. + let {contains} = useFilter({sensitivity: 'base'}); + let state = useComboBoxState({...props, defaultFilter: contains, collection, children: undefined}); + + // Get props for child elements from useComboBox. + let fieldRef = React.useRef(null); + let inputRef = React.useRef(null); + let buttonRef = React.useRef(null); + let listBoxRef = React.useRef(null); + let popoverRef = React.useRef(null); + let {labelProps, inputProps, buttonProps, listBoxProps} = + useComboBox({...props, inputRef, buttonRef, listBoxRef, popoverRef}, state); + + // Provide the values returned by the hook to the reused components via context. + return ( + +
+ +
+ + + + +
+ + {/* Rendered from the collection in state, provided via ListStateContext. */} + + +
+ + ); +} + + + Aardvark + Cat + Dog + Kangaroo + Panda + Snake + +``` + +## API + + + + +### AriaComboBoxOptions + + + +### ComboBoxAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx index 1ba68790041..de59f5a1513 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx @@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/datepicker/datefield-anatomy.svg'; export const tags = ['calendar', 'input']; -export const relatedPages = [{'title': 'useDateField', 'url': 'DateField/useDateField.html'}]; +export const relatedPages = [{'title': 'useDateField', 'url': './DateField/useDateField'}]; export const description = 'Allows users to enter and edit date and time values using a keyboard.'; # DateField diff --git a/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx new file mode 100644 index 00000000000..cbee6bb12de --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx @@ -0,0 +1,46 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/datepicker'; +import statelyDocs from 'docs:@react-stately/datepicker'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a date field component.'; +export const isSubpage = true; + +# useDateField + +{docs.exports.useDateField.description} + +This example builds a date field from scratch with `useDateField` and `useDateSegment`, where each date and time unit is an individually editable segment. `useFocusWithin` toggles a `data-focus-within` attribute so the field shows a focus ring while editing. + +```tsx render files={["starters/hooks/src/DateField.tsx", "starters/hooks/src/DateField.css", "starters/hooks/src/Form.css"]} +"use client"; +import {DateField} from 'hooks-starter/DateField'; + + +``` + +## API + + + + + +### AriaDateFieldProps + + + +### DateFieldAria + + diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index 2e3b34f81fd..a097c9408f8 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css'; import Anatomy from '/packages/react-aria/docs/datepicker/datepicker-anatomy.svg'; export const tags = ['calendar', 'input']; -export const relatedPages = [{'title': 'useDatePicker', 'url': 'DatePicker/useDatePicker.html'}]; +export const relatedPages = [{'title': 'useDatePicker', 'url': './DatePicker/useDatePicker'}]; export const description = 'Combines a DateField and a Calendar popover to allow users to enter or select a date and time value.'; # DatePicker diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx new file mode 100644 index 00000000000..f31281183a3 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx @@ -0,0 +1,120 @@ +{/* Copyright 2026 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. */} + +import {Layout} from '../../../src/Layout'; +export default Layout; +import {FunctionAPI} from '../../../src/FunctionAPI'; +import {InterfaceType} from '../../../src/types'; +import docs from 'docs:@react-aria/datepicker'; +import statelyDocs from 'docs:@react-stately/datepicker'; +import Anatomy from '/packages/react-aria/docs/datepicker/datepicker-anatomy.svg'; + +export const section = 'Hooks'; +export const description = 'Provides the behavior and accessibility implementation for a date picker component.'; +export const isSubpage = true; + +# useDatePicker + +{docs.exports.useDatePicker.description} + +This example uses `useDatePicker` to combine a date field and a calendar popover, and reuses the [DateField](../DateField), [Button](../Button), [Popover](../Popover), and [Calendar](../Calendar) components from React Aria Components to render each part. The values returned by the hook are passed to these components via context, following the [Reusing children](../customization#reusing-children) pattern. Date values use the [@internationalized/date](../internationalized/date/) library. + +```tsx render +"use client"; +import React from 'react'; +import {useDatePicker, type AriaDatePickerProps} from 'react-aria/useDatePicker'; +import {useDatePickerState} from 'react-stately/useDatePickerState'; +import type {DateValue} from '@internationalized/date'; +import {Provider} from 'react-aria-components/slots'; +import {Group, GroupContext} from 'react-aria-components/Group'; +import {DateFieldContext} from 'react-aria-components/DateField'; +import {ButtonContext} from 'react-aria-components/Button'; +import {LabelContext} from 'react-aria-components/Label'; +import {CalendarContext} from 'react-aria-components/Calendar'; +import {DialogContext, OverlayTriggerStateContext} from 'react-aria-components/Dialog'; +import {PopoverContext} from 'react-aria-components/Popover'; +import {DateInput, DateSegment} from 'vanilla-starter/DateField'; +import {Label, FieldButton} from 'vanilla-starter/Form'; +import {Calendar} from 'vanilla-starter/Calendar'; +import {Popover} from 'vanilla-starter/Popover'; +import {ChevronDown} from 'lucide-react'; +import 'vanilla-starter/DatePicker.css'; + +function DatePicker(props: AriaDatePickerProps) { + // Create state based on the incoming props. + let state = useDatePickerState(props); + + // Get props for the child elements from useDatePicker. + let groupRef = React.useRef(null); + let {groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps} = + useDatePicker(props, state, groupRef); + + // Provide the values returned by the hook to the reused components via context. + return ( + +
+ + + {/* The DateInput builds its own field state from fieldProps, provided via DateFieldContext. */} + {segment => } + + + + + + {/* Rendered from calendarProps, provided via CalendarContext. */} + + +
+ + ); +} + + +``` + +## API + + + +```tsx links={{DateInput: '../DateField', DateSegment: '../DateField', Button: '../Button', Popover: '../Popover', Calendar: '../Calendar'}} + +