From 10a43de887ffc28913c770a33573aebf3df786fc Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 26 Nov 2024 11:34:14 -0800 Subject: [PATCH] chore: Improve React Fast Refresh in storybook (#7435) * Improve React Fast Refresh in storybook * Migrate forwardRef syntax to avoid underscores in the name * Resolve storybook versions to a single one * Update docs * Bump version --- .chromatic-fc/.parcelrc | 11 +- .chromatic/.parcelrc | 11 +- .parcelrc-storybook | 10 +- .storybook-s2/.parcelrc | 9 +- .storybook-s2/custom-addons/provider/index.js | 5 +- .storybook-s2/preview.tsx | 25 +- .storybook/.parcelrc | 8 +- ...book-builder-parcel-https-7ea26540e8.patch | 54 - package.json | 41 +- packages/@react-aria/dnd/src/DragPreview.tsx | 7 +- .../@react-aria/focus/src/useFocusable.tsx | 7 +- .../virtualizer/src/Virtualizer.tsx | 11 +- .../accordion/src/Accordion.tsx | 38 +- .../actionbar/src/ActionBar.tsx | 13 +- .../actionbar/src/ActionBarContainer.tsx | 15 +- .../actiongroup/src/ActionGroup.tsx | 13 +- .../@react-spectrum/avatar/src/Avatar.tsx | 13 +- packages/@react-spectrum/badge/src/Badge.tsx | 13 +- .../breadcrumbs/src/Breadcrumbs.tsx | 13 +- .../button/src/ActionButton.tsx | 15 +- .../@react-spectrum/button/src/Button.tsx | 17 +- .../button/src/ClearButton.tsx | 7 +- .../button/src/FieldButton.tsx | 7 +- .../button/src/LogicButton.tsx | 13 +- .../button/src/ToggleButton.tsx | 15 +- .../buttongroup/src/ButtonGroup.tsx | 13 +- .../@react-spectrum/calendar/src/Calendar.tsx | 13 +- .../calendar/src/RangeCalendar.tsx | 13 +- .../@react-spectrum/card/src/CardBase.tsx | 13 +- .../@react-spectrum/card/src/CardView.tsx | 13 +- .../@react-spectrum/checkbox/src/Checkbox.tsx | 14 +- .../checkbox/src/CheckboxGroup.tsx | 13 +- .../@react-spectrum/color/src/ColorArea.tsx | 13 +- .../@react-spectrum/color/src/ColorEditor.tsx | 13 +- .../@react-spectrum/color/src/ColorField.tsx | 13 +- .../@react-spectrum/color/src/ColorPicker.tsx | 13 +- .../@react-spectrum/color/src/ColorSlider.tsx | 13 +- .../@react-spectrum/color/src/ColorSwatch.tsx | 13 +- .../color/src/ColorSwatchPicker.tsx | 13 +- .../@react-spectrum/color/src/ColorWheel.tsx | 13 +- .../@react-spectrum/combobox/src/ComboBox.tsx | 13 +- .../contextualhelp/src/ContextualHelp.tsx | 13 +- .../datepicker/src/DateField.tsx | 15 +- .../datepicker/src/DatePicker.tsx | 13 +- .../datepicker/src/DateRangePicker.tsx | 15 +- .../@react-spectrum/datepicker/src/Input.tsx | 7 +- .../datepicker/src/TimeField.tsx | 15 +- .../dialog/src/AlertDialog.tsx | 10 +- .../@react-spectrum/dialog/src/Dialog.tsx | 15 +- .../@react-spectrum/divider/src/Divider.tsx | 15 +- .../@react-spectrum/dropzone/src/DropZone.tsx | 13 +- packages/@react-spectrum/form/src/Form.tsx | 13 +- .../src/IllustratedMessage.tsx | 15 +- packages/@react-spectrum/image/src/Image.tsx | 13 +- .../inlinealert/src/InlineAlert.tsx | 15 +- packages/@react-spectrum/label/src/Field.tsx | 7 +- .../@react-spectrum/label/src/HelpText.tsx | 13 +- packages/@react-spectrum/label/src/Label.tsx | 7 +- .../labeledvalue/src/LabeledValue.tsx | 13 +- packages/@react-spectrum/layout/src/Flex.tsx | 15 +- packages/@react-spectrum/layout/src/Grid.tsx | 15 +- .../@react-spectrum/list/src/ListView.tsx | 13 +- .../@react-spectrum/listbox/src/ListBox.tsx | 21 +- .../listbox/src/ListBoxBase.tsx | 11 +- .../@react-spectrum/menu/src/ActionMenu.tsx | 13 +- packages/@react-spectrum/menu/src/Menu.tsx | 17 +- .../@react-spectrum/menu/src/MenuTrigger.tsx | 15 +- packages/@react-spectrum/meter/src/Meter.tsx | 15 +- .../numberfield/src/NumberField.tsx | 13 +- .../numberfield/src/StepButton.tsx | 13 +- .../@react-spectrum/overlays/src/Modal.tsx | 7 +- .../@react-spectrum/overlays/src/Overlay.tsx | 7 +- .../@react-spectrum/overlays/src/Popover.tsx | 7 +- .../@react-spectrum/overlays/src/Tray.tsx | 7 +- .../@react-spectrum/picker/src/Picker.tsx | 17 +- .../progress/src/ProgressBar.tsx | 15 +- .../progress/src/ProgressBarBase.tsx | 7 +- .../progress/src/ProgressCircle.tsx | 15 +- .../@react-spectrum/provider/src/Provider.tsx | 17 +- packages/@react-spectrum/radio/src/Radio.tsx | 15 +- .../@react-spectrum/radio/src/RadioGroup.tsx | 15 +- .../s2/chromatic/TextField.stories.tsx | 33 - packages/@react-spectrum/s2/src/Accordion.tsx | 13 +- .../@react-spectrum/s2/src/ActionButton.tsx | 15 +- .../s2/src/ActionButtonGroup.tsx | 13 +- .../@react-spectrum/s2/src/ActionMenu.tsx | 13 +- .../@react-spectrum/s2/src/AlertDialog.tsx | 13 +- packages/@react-spectrum/s2/src/Avatar.tsx | 13 +- .../@react-spectrum/s2/src/AvatarGroup.tsx | 13 +- packages/@react-spectrum/s2/src/Badge.tsx | 13 +- .../@react-spectrum/s2/src/Breadcrumbs.tsx | 18 +- packages/@react-spectrum/s2/src/Button.tsx | 26 +- .../@react-spectrum/s2/src/ButtonGroup.tsx | 13 +- packages/@react-spectrum/s2/src/CardView.tsx | 7 +- packages/@react-spectrum/s2/src/Checkbox.tsx | 15 +- .../@react-spectrum/s2/src/CheckboxGroup.tsx | 13 +- .../@react-spectrum/s2/src/ClearButton.tsx | 7 +- .../@react-spectrum/s2/src/CloseButton.tsx | 13 +- packages/@react-spectrum/s2/src/ColorArea.tsx | 13 +- .../@react-spectrum/s2/src/ColorField.tsx | 13 +- .../@react-spectrum/s2/src/ColorSlider.tsx | 13 +- .../@react-spectrum/s2/src/ColorSwatch.tsx | 13 +- .../s2/src/ColorSwatchPicker.tsx | 13 +- .../@react-spectrum/s2/src/ColorWheel.tsx | 13 +- packages/@react-spectrum/s2/src/ComboBox.tsx | 13 +- packages/@react-spectrum/s2/src/Content.tsx | 42 +- .../@react-spectrum/s2/src/ContextualHelp.tsx | 13 +- .../@react-spectrum/s2/src/CustomDialog.tsx | 13 +- packages/@react-spectrum/s2/src/Dialog.tsx | 15 +- .../@react-spectrum/s2/src/Disclosure.tsx | 39 +- packages/@react-spectrum/s2/src/Divider.tsx | 15 +- packages/@react-spectrum/s2/src/DropZone.tsx | 13 +- packages/@react-spectrum/s2/src/Field.tsx | 21 +- packages/@react-spectrum/s2/src/Form.tsx | 13 +- .../s2/src/FullscreenDialog.tsx | 13 +- .../s2/src/IllustratedMessage.tsx | 15 +- packages/@react-spectrum/s2/src/Image.tsx | 9 +- .../@react-spectrum/s2/src/InlineAlert.tsx | 15 +- packages/@react-spectrum/s2/src/Link.tsx | 15 +- packages/@react-spectrum/s2/src/Menu.tsx | 13 +- packages/@react-spectrum/s2/src/Meter.tsx | 15 +- packages/@react-spectrum/s2/src/Modal.tsx | 13 +- .../@react-spectrum/s2/src/NumberField.tsx | 13 +- packages/@react-spectrum/s2/src/Picker.tsx | 13 +- packages/@react-spectrum/s2/src/Popover.tsx | 24 +- .../@react-spectrum/s2/src/ProgressBar.tsx | 15 +- .../@react-spectrum/s2/src/ProgressCircle.tsx | 15 +- packages/@react-spectrum/s2/src/Radio.tsx | 15 +- .../@react-spectrum/s2/src/RadioGroup.tsx | 15 +- .../@react-spectrum/s2/src/RangeSlider.tsx | 7 +- .../@react-spectrum/s2/src/SearchField.tsx | 13 +- .../s2/src/SegmentedControl.tsx | 26 +- packages/@react-spectrum/s2/src/Slider.tsx | 7 +- .../@react-spectrum/s2/src/StatusLight.tsx | 15 +- packages/@react-spectrum/s2/src/Switch.tsx | 15 +- packages/@react-spectrum/s2/src/TableView.tsx | 52 +- packages/@react-spectrum/s2/src/Tabs.tsx | 13 +- packages/@react-spectrum/s2/src/TagGroup.tsx | 21 +- packages/@react-spectrum/s2/src/TextField.tsx | 48 +- .../@react-spectrum/s2/src/ToggleButton.tsx | 15 +- .../s2/src/ToggleButtonGroup.tsx | 13 +- packages/@react-spectrum/s2/src/Tooltip.tsx | 14 +- .../s2/stories/CheckboxGroup.stories.tsx | 52 +- .../s2/stories/ColorField.stories.tsx | 66 +- .../s2/stories/ComboBox.stories.tsx | 89 +- .../s2/stories/Dialog.stories.tsx | 61 - .../s2/stories/Disclosure.stories.tsx | 31 +- .../s2/stories/Menu.stories.tsx | 268 +- .../s2/stories/NumberField.stories.tsx | 68 +- .../s2/stories/Picker.stories.tsx | 78 +- .../s2/stories/RadioGroup.stories.tsx | 71 +- .../s2/stories/RangeSlider.stories.tsx | 78 +- .../s2/stories/SearchField.stories.tsx | 68 +- .../s2/stories/Slider.stories.tsx | 83 +- .../s2/stories/TagGroup.stories.tsx | 76 +- .../s2/stories/TextField.stories.tsx | 72 +- .../searchfield/src/SearchField.tsx | 13 +- .../searchwithin/src/SearchWithin.tsx | 13 +- .../slider/src/RangeSlider.tsx | 13 +- .../@react-spectrum/slider/src/Slider.tsx | 13 +- .../@react-spectrum/slider/src/SliderBase.tsx | 7 +- .../statuslight/src/StatusLight.tsx | 15 +- .../@react-spectrum/steplist/src/StepList.tsx | 7 +- .../@react-spectrum/switch/src/Switch.tsx | 15 +- .../@react-spectrum/table/src/Resizer.tsx | 7 +- .../@react-spectrum/table/src/TableView.tsx | 7 +- .../table/src/TableViewWrapper.tsx | 15 +- .../table/src/TreeGridTableView.tsx | 7 +- packages/@react-spectrum/tabs/src/Tabs.tsx | 17 +- packages/@react-spectrum/tag/src/TagGroup.tsx | 9 +- packages/@react-spectrum/text/src/Heading.tsx | 13 +- .../@react-spectrum/text/src/Keyboard.tsx | 13 +- packages/@react-spectrum/text/src/Text.tsx | 13 +- .../textfield/src/TextArea.tsx | 17 +- .../textfield/src/TextField.tsx | 17 +- .../textfield/src/TextFieldBase.tsx | 7 +- packages/@react-spectrum/toast/src/Toast.tsx | 7 +- .../@react-spectrum/tooltip/src/Tooltip.tsx | 13 +- .../@react-spectrum/tree/src/TreeView.tsx | 13 +- packages/@react-spectrum/view/src/Content.tsx | 13 +- packages/@react-spectrum/view/src/Footer.tsx | 13 +- packages/@react-spectrum/view/src/Header.tsx | 13 +- packages/@react-spectrum/view/src/View.tsx | 15 +- packages/@react-spectrum/well/src/Well.tsx | 15 +- .../ReactDocgenTSTransformer.ts | 114 - .../package.json | 15 - packages/dev/s2-icon-builder/package.json | 16 +- .../react-aria-components/src/Breadcrumbs.tsx | 13 +- packages/react-aria-components/src/Button.tsx | 13 +- .../react-aria-components/src/Calendar.tsx | 50 +- .../react-aria-components/src/Checkbox.tsx | 28 +- .../react-aria-components/src/ColorArea.tsx | 13 +- .../react-aria-components/src/ColorField.tsx | 13 +- .../react-aria-components/src/ColorSlider.tsx | 13 +- .../react-aria-components/src/ColorSwatch.tsx | 13 +- .../src/ColorSwatchPicker.tsx | 20 +- .../react-aria-components/src/ColorThumb.tsx | 13 +- .../react-aria-components/src/ColorWheel.tsx | 26 +- .../react-aria-components/src/ComboBox.tsx | 13 +- .../react-aria-components/src/DateField.tsx | 54 +- .../react-aria-components/src/DatePicker.tsx | 24 +- packages/react-aria-components/src/Dialog.tsx | 13 +- .../react-aria-components/src/Disclosure.tsx | 41 +- .../react-aria-components/src/DragAndDrop.tsx | 13 +- .../react-aria-components/src/DropZone.tsx | 13 +- .../react-aria-components/src/FieldError.tsx | 13 +- .../react-aria-components/src/FileTrigger.tsx | 13 +- packages/react-aria-components/src/Form.tsx | 15 +- .../react-aria-components/src/GridList.tsx | 15 +- packages/react-aria-components/src/Group.tsx | 13 +- .../react-aria-components/src/Heading.tsx | 7 +- packages/react-aria-components/src/Input.tsx | 13 +- .../react-aria-components/src/Keyboard.tsx | 7 +- packages/react-aria-components/src/Label.tsx | 7 +- packages/react-aria-components/src/Link.tsx | 15 +- .../react-aria-components/src/ListBox.tsx | 20 +- packages/react-aria-components/src/Menu.tsx | 20 +- packages/react-aria-components/src/Meter.tsx | 13 +- packages/react-aria-components/src/Modal.tsx | 13 +- .../react-aria-components/src/NumberField.tsx | 13 +- .../src/OverlayArrow.tsx | 15 +- .../react-aria-components/src/Popover.tsx | 13 +- .../react-aria-components/src/ProgressBar.tsx | 15 +- .../react-aria-components/src/RadioGroup.tsx | 26 +- .../react-aria-components/src/SearchField.tsx | 13 +- packages/react-aria-components/src/Select.tsx | 28 +- packages/react-aria-components/src/Slider.tsx | 52 +- packages/react-aria-components/src/Switch.tsx | 13 +- packages/react-aria-components/src/Table.tsx | 29 +- packages/react-aria-components/src/Tabs.tsx | 37 +- .../react-aria-components/src/TagGroup.tsx | 22 +- packages/react-aria-components/src/Text.tsx | 7 +- .../react-aria-components/src/TextArea.tsx | 12 +- .../react-aria-components/src/TextField.tsx | 13 +- .../src/ToggleButton.tsx | 13 +- .../src/ToggleButtonGroup.tsx | 13 +- .../react-aria-components/src/Toolbar.tsx | 15 +- .../react-aria-components/src/Tooltip.tsx | 13 +- packages/react-aria-components/src/Tree.tsx | 15 +- patches/parcel-resolver-storybook+1.0.0.patch | 19 - patches/storybook-builder-parcel+0.0.0.patch | 25 - .../src/{{ componentName }}.tsx.hbs | 13 +- yarn.lock | 2149 ++++++++--------- 243 files changed, 2451 insertions(+), 4468 deletions(-) delete mode 100644 .yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch delete mode 100644 packages/dev/parcel-transformer-react-docgen-typescript/ReactDocgenTSTransformer.ts delete mode 100644 packages/dev/parcel-transformer-react-docgen-typescript/package.json delete mode 100644 patches/parcel-resolver-storybook+1.0.0.patch delete mode 100644 patches/storybook-builder-parcel+0.0.0.patch diff --git a/.chromatic-fc/.parcelrc b/.chromatic-fc/.parcelrc index 86e08486da1..6ccb1ea7917 100644 --- a/.chromatic-fc/.parcelrc +++ b/.chromatic-fc/.parcelrc @@ -1,17 +1,12 @@ { - "extends": "@parcel/config-default", - "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."], + "extends": "@parcel/config-storybook", + "resolvers": ["@parcel/resolver-glob", "..."], "transformers": { - "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."], "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], "packages/*/*/intl/*.json": ["parcel-transformer-intl"], // Disable PostCSS from running over style macro output "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"], - "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ - "@parcel/transformer-js", - "@parcel/transformer-react-refresh-wrap" - ], - "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"], + "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"] } } diff --git a/.chromatic/.parcelrc b/.chromatic/.parcelrc index 86e08486da1..4460c507377 100644 --- a/.chromatic/.parcelrc +++ b/.chromatic/.parcelrc @@ -1,17 +1,12 @@ { - "extends": "@parcel/config-default", - "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."], + "extends": "@parcel/config-storybook", + "resolvers": ["@parcel/resolver-glob", "..."], "transformers": { - "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."], "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], "packages/*/*/intl/*.json": ["parcel-transformer-intl"], // Disable PostCSS from running over style macro output "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"], - "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ - "@parcel/transformer-js", - "@parcel/transformer-react-refresh-wrap" - ], - "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"], + "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"] } } diff --git a/.parcelrc-storybook b/.parcelrc-storybook index 81677b70840..2ff3823ae26 100644 --- a/.parcelrc-storybook +++ b/.parcelrc-storybook @@ -1,11 +1,7 @@ { - "extends": "@parcel/config-default", - "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."], + "extends": "@parcel/config-storybook", + "resolvers": ["@parcel/resolver-glob", "..."], "transformers": { - "packages/*/*/intl/*.json": ["parcel-transformer-intl"], - "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ - "@parcel/transformer-js", - "@parcel/transformer-react-refresh-wrap" - ] + "packages/*/*/intl/*.json": ["parcel-transformer-intl"] } } diff --git a/.storybook-s2/.parcelrc b/.storybook-s2/.parcelrc index 228bdc80acf..eec62b28e01 100644 --- a/.storybook-s2/.parcelrc +++ b/.storybook-s2/.parcelrc @@ -1,17 +1,12 @@ { - "extends": "@parcel/config-default", - "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."], + "extends": "@parcel/config-storybook", + "resolvers": ["@parcel/resolver-glob", "..."], "transformers": { - "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."], "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], "packages/*/*/intl/*.json": ["parcel-transformer-intl"], // Disable PostCSS from running over style macro output "*.css": ["@parcel/transformer-css"], - "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ - "@parcel/transformer-js", - "@parcel/transformer-react-refresh-wrap" - ], "*.svg": ["@parcel/transformer-svg-react"], "*.{mdx,md}": ["parcel-transformer-mdx-storybook"], "raw:*": ["@parcel/transformer-raw"] diff --git a/.storybook-s2/custom-addons/provider/index.js b/.storybook-s2/custom-addons/provider/index.js index 0e5a21557e0..49535c86d83 100644 --- a/.storybook-s2/custom-addons/provider/index.js +++ b/.storybook-s2/custom-addons/provider/index.js @@ -2,7 +2,10 @@ import React, {useEffect, useState} from 'react'; import {addons} from '@storybook/preview-api'; import {makeDecorator} from '@storybook/preview-api'; import {getQueryParams} from '@storybook/preview-api'; -import {Provider} from '@react-spectrum/s2'; +// Importing from src so that HMR works. +// Without this, all HMR updates will bubble through the index.ts and up +// to the root instead of stopping at the story files. +import {Provider} from '@react-spectrum/s2/src/Provider'; document.body.style.margin = '0'; diff --git a/.storybook-s2/preview.tsx b/.storybook-s2/preview.tsx index 2ea90a9cfd4..db3f879bc02 100644 --- a/.storybook-s2/preview.tsx +++ b/.storybook-s2/preview.tsx @@ -32,23 +32,14 @@ const preview = { }, source: { // code: null, // Will disable code button, and show "No code available" - transform: (code: string) => { - // Replace any <_ with < - code = code.replace(/<\s?_/g, '<'); - // Replace any with - code = code.replace(/<([a-z])\s?\/>/g, ''); - // Replace with - code = code.replace(//g, ''); - // Move any lines with just a > to the previous line - code = code.replace(/\n\s*>/g, '>'); + transform: (code: string, ctx) => { + code = ctx.parameters.docs?.source?.originalSource ?? code; + code = code.replace(/ \{\.\.\.args\}/g, ''); + if (/^(.*?) =>/.test(code)) { + code = code.replace(/^(.*?) => /, ''); + code = code.replace(/^\s{2}(\s+)/gm, '$1'); + code = code.replace(/\n\s{2}(.*)$/, '\n$1'); + } return code; } } diff --git a/.storybook/.parcelrc b/.storybook/.parcelrc index dff0cb116b8..c2544f2aec3 100644 --- a/.storybook/.parcelrc +++ b/.storybook/.parcelrc @@ -1,12 +1,8 @@ { - "extends": "@parcel/config-default", - "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."], + "extends": "@parcel/config-storybook", + "resolvers": ["@parcel/resolver-glob", "..."], "transformers": { "packages/*/*/intl/*.json": ["parcel-transformer-intl"], - "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ - "@parcel/transformer-js", - "@parcel/transformer-react-refresh-wrap" - ], "raw:*": ["@parcel/transformer-raw"] } } diff --git a/.yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch b/.yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch deleted file mode 100644 index 5f676aad8c2..00000000000 --- a/.yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch +++ /dev/null @@ -1,54 +0,0 @@ -diff --git a/gen-preview-modern.js b/gen-preview-modern.js -index a1fe3d1ce6b748e533200f5af69a0481e5809c6c..aeed09de7dbaddd4606ac3579a86cb2ba389eb2f 100644 ---- a/gen-preview-modern.js -+++ b/gen-preview-modern.js -@@ -7,9 +7,16 @@ const { - } = require("@storybook/core-common"); - const { logger } = require("@storybook/node-logger"); - const { promise: glob } = require("glob-promise"); -+const isMingw = require('is-mingw'); - --const absoluteToSpecifier = (generatedEntries, abs) => -- "./" + path.relative(generatedEntries, abs); -+const absoluteToSpecifier = (generatedEntries, abs) => { -+ let relativePath = path.relative(generatedEntries, abs); -+ if (isMingw()) { -+ relativePath = relativePath.replace(/\\/g, '/'); -+ } -+ -+ return "./" + relativePath; -+} - - module.exports.generatePreviewModern = async function generatePreviewModern( - options, -@@ -66,7 +73,7 @@ module.exports.generatePreviewModern = async function generatePreviewModern( - */ - const code = ` - import { composeConfigs, PreviewWeb, ClientApi } from '@storybook/preview-api'; -- -+ - // generateAddonSetupCode - import { createBrowserChannel } from '@storybook/channels'; - import { addons } from '@storybook/preview-api'; -@@ -94,7 +101,7 @@ module.exports.generatePreviewModern = async function generatePreviewModern( - window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); - - preview.initialize({ importFn, getProjectAnnotations }); -- -+ - `; - // ${generateHMRHandler(frameworkName)}; - return code; -@@ -152,7 +159,11 @@ function toImportPath(relativePath) { - async function toImportFn(stories, generatedEntries) { - const objectEntries = stories.map((file) => { - const ext = path.extname(file); -- const relativePath = /*normalizePath*/ path.relative(process.cwd(), file); -+ let relativePath = /*normalizePath*/ path.relative(process.cwd(), file); -+ if (isMingw()) { -+ relativePath = relativePath.replace(/\\/g, '/'); -+ } -+ - if (![".js", ".jsx", ".ts", ".tsx", ".mdx"].includes(ext)) { - logger.warn( - `Cannot process ${ext} file with storyStoreV7: ${relativePath}` diff --git a/package.json b/package.json index abfa7539fd9..83e16a7eee5 100644 --- a/package.json +++ b/package.json @@ -86,29 +86,30 @@ "@faker-js/faker": "^8.4.1", "@jdb8/eslint-plugin-monorepo": "^1.0.1", "@octokit/rest": "*", - "@parcel/bundler-library": "2.12.0", - "@parcel/config-default": "^2.13.0", - "@parcel/core": "^2.13.0", - "@parcel/optimizer-data-url": "^2.13.0", - "@parcel/optimizer-terser": "^2.13.0", - "@parcel/packager-ts": "^2.13.0", - "@parcel/reporter-cli": "^2.13.0", - "@parcel/resolver-glob": "^2.13.0", - "@parcel/transformer-inline": "^2.13.0", - "@parcel/transformer-inline-string": "^2.13.0", - "@parcel/transformer-svg-react": "^2.13.0", - "@parcel/transformer-typescript-types": "^2.13.0", + "@parcel/bundler-library": "^2.12.1", + "@parcel/config-default": "^2.13.1", + "@parcel/config-storybook": "^0.0.2", + "@parcel/core": "^2.13.1", + "@parcel/optimizer-data-url": "^2.13.1", + "@parcel/optimizer-terser": "^2.13.1", + "@parcel/packager-ts": "^2.13.1", + "@parcel/reporter-cli": "^2.13.1", + "@parcel/resolver-glob": "^2.13.1", + "@parcel/transformer-inline": "^2.13.1", + "@parcel/transformer-inline-string": "^2.13.1", + "@parcel/transformer-svg-react": "^2.13.1", + "@parcel/transformer-typescript-types": "^2.13.1", "@react-spectrum/s2-icon-builder": "^0.2.0", "@spectrum-css/component-builder": "1.0.1", "@spectrum-css/vars": "^2.3.0", - "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch", + "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch", "@storybook/addon-actions": "^7.6.19", "@storybook/addon-controls": "^7.6.19", - "@storybook/addon-essentials": "7.6.19", - "@storybook/addon-interactions": "7.6.19", + "@storybook/addon-essentials": "^7.6.19", + "@storybook/addon-interactions": "^7.6.19", "@storybook/addon-links": "^7.6.19", "@storybook/addon-onboarding": "1.0.8", - "@storybook/addon-themes": "7.6.19", + "@storybook/addon-themes": "^7.6.19", "@storybook/api": "^7.6.19", "@storybook/components": "^7.6.19", "@storybook/manager-api": "^7.6.19", @@ -176,9 +177,8 @@ "npm-cli-login": "^1.0.0", "nyc": "^10.2.0", "p-queue": "^6.2.1", - "parcel": "^2.13.0", + "parcel": "^2.13.1", "parcel-optimizer-strict-mode": "workspace:^", - "parcel-resolver-storybook": "https://gitpkg.vercel.app/mischnic/storybook-parcel/packages/parcel-resolver-storybook?master", "patch-package": "^6.2.0", "playwright": "^1.45.3", "plop": "^2.4.0", @@ -199,9 +199,8 @@ "sharp": "^0.33.5", "sinon": "^7.3.1", "storybook": "^7.6.19", - "storybook-builder-parcel": "patch:storybook-builder-parcel@https%3A//gitpkg.vercel.app/mischnic/storybook-parcel/packages/storybook-builder-parcel?master#~/.yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch", "storybook-dark-mode": "^3.0.3", - "storybook-react-parcel": "https://gitpkg.vercel.app/mischnic/storybook-parcel/packages/storybook-react-parcel?master", + "storybook-react-parcel": "^0.0.1", "tailwind-variants": "^0.1.18", "tailwindcss": "^3.4.0", "tailwindcss-animate": "^1.0.7", @@ -228,8 +227,6 @@ "remark-parse": "10.0.1", "browserslist": "4.24.0", "caniuse-lite": "1.0.30001563", - "@storybook/core-common": "7.6.19", - "storybook-builder-parcel/@storybook/core-common": "7.6.19", "@types/react": "npm:types-react@19.0.0-rc.0", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0", "recast": "0.23.6", diff --git a/packages/@react-aria/dnd/src/DragPreview.tsx b/packages/@react-aria/dnd/src/DragPreview.tsx index 1228b85d313..254212b6571 100644 --- a/packages/@react-aria/dnd/src/DragPreview.tsx +++ b/packages/@react-aria/dnd/src/DragPreview.tsx @@ -18,7 +18,7 @@ export interface DragPreviewProps { children: (items: DragItem[]) => JSX.Element | null } -function DragPreview(props: DragPreviewProps, ref: ForwardedRef) { +export const DragPreview = React.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef) { let render = props.children; let [children, setChildren] = useState(null); let domRef = useRef(null); @@ -57,7 +57,4 @@ function DragPreview(props: DragPreviewProps, ref: ForwardedRef ); -} - -let _DragPreview = React.forwardRef(DragPreview); -export {_DragPreview as DragPreview}; +}); diff --git a/packages/@react-aria/focus/src/useFocusable.tsx b/packages/@react-aria/focus/src/useFocusable.tsx index 8e4c2b70344..aab6fec5362 100644 --- a/packages/@react-aria/focus/src/useFocusable.tsx +++ b/packages/@react-aria/focus/src/useFocusable.tsx @@ -44,7 +44,7 @@ function useFocusableContext(ref: RefObject): Focusable /** * Provides DOM props to the nearest focusable child. */ -function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef) { +export const FocusableProvider = React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef) { let {children, ...otherProps} = props; let objRef = useObjectRef(ref); let context = { @@ -57,10 +57,7 @@ function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef ); -} - -let _FocusableProvider = React.forwardRef(FocusableProvider); -export {_FocusableProvider as FocusableProvider}; +}); export interface FocusableAria { /** Props for the focusable element. */ diff --git a/packages/@react-aria/virtualizer/src/Virtualizer.tsx b/packages/@react-aria/virtualizer/src/Virtualizer.tsx index 6502b80130b..0bbd0e56e90 100644 --- a/packages/@react-aria/virtualizer/src/Virtualizer.tsx +++ b/packages/@react-aria/virtualizer/src/Virtualizer.tsx @@ -36,7 +36,9 @@ interface VirtualizerProps extends Omit(props: VirtualizerProps, forwardedRef: ForwardedRef) { +// forwardRef doesn't support generic parameters, so cast the result to the correct type +// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref +export const Virtualizer = React.forwardRef(function Virtualizer(props: VirtualizerProps, forwardedRef: ForwardedRef) { let { children: renderView, renderWrapper, @@ -82,12 +84,7 @@ function Virtualizer(props: Virtualize {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)} ); -} - -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref -const _Virtualizer = React.forwardRef(Virtualizer) as (props: VirtualizerProps & {ref?: RefObject}) => ReactElement; -export {_Virtualizer as Virtualizer}; +}) as (props: VirtualizerProps & {ref?: RefObject}) => ReactElement; function renderChildren(parent: ReusableView | null, views: ReusableView[], renderWrapper: RenderWrapper) { return views.map(view => { diff --git a/packages/@react-spectrum/accordion/src/Accordion.tsx b/packages/@react-spectrum/accordion/src/Accordion.tsx index c0a28520b2e..1344ca0cff1 100644 --- a/packages/@react-spectrum/accordion/src/Accordion.tsx +++ b/packages/@react-spectrum/accordion/src/Accordion.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; +import {AriaLabelingProps, DOMProps, DOMRef, forwardRefType, StyleProps} from '@react-types/shared'; import {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components'; import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium'; import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium'; @@ -29,7 +29,8 @@ export interface SpectrumAccordionProps extends Omit(null); -function Accordion(props: SpectrumAccordionProps, ref: DOMRef) { +/** A group of disclosures that can be expanded and collapsed. */ +export const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function Accordion(props: SpectrumAccordionProps, ref: DOMRef) { props = useProviderProps(props); let {styleProps} = useStyleProps(props); let domRef = useDOMRef(ref); @@ -44,7 +45,7 @@ function Accordion(props: SpectrumAccordionProps, ref: DOMRef) { ); -} +}); export interface SpectrumDisclosureProps extends Omit, AriaLabelingProps, StyleProps { /** Whether the Disclosure should be displayed with a quiet style. */ @@ -53,7 +54,8 @@ export interface SpectrumDisclosureProps extends Omit) { +/** A collapsible section of content composed of a heading that expands and collapses a panel. */ +export const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef) { props = useProviderProps(props); let {styleProps} = useStyleProps(props); let domRef = useDOMRef(ref); @@ -72,14 +74,15 @@ function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef) {props.children} ); -} +}); export interface SpectrumDisclosurePanelProps extends Omit, DOMProps, AriaLabelingProps, StyleProps { /** The contents of the accordion panel. */ children: React.ReactNode } -function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef) { +/** The panel that contains the content of the disclosure. */ +export const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef) { let {styleProps} = useStyleProps(props); let domRef = useDOMRef(ref); return ( @@ -91,7 +94,7 @@ function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef ); -} +}); export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProps, StyleProps { /** @@ -103,7 +106,8 @@ export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProp children: React.ReactNode } -function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef) { +/** The heading of the disclosure. */ +export const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef) { let {styleProps} = useStyleProps(props); let {level = 3} = props; let {direction} = useLocale(); @@ -130,20 +134,4 @@ function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef ); -} - -/** A group of disclosures that can be expanded and collapsed. */ -const _Accordion = forwardRef(Accordion) as (props: SpectrumAccordionProps & {ref?: DOMRef}) => ReturnType; -export {_Accordion as Accordion}; - -/** A collapsible section of content composed of a heading that expands and collapses a panel. */ -const _Disclosure = forwardRef(Disclosure) as (props: SpectrumDisclosureProps & {ref?: DOMRef}) => ReturnType; -export {_Disclosure as Disclosure}; - -/** The panel that contains the content of the disclosure. */ -const _DisclosurePanel = forwardRef(DisclosurePanel) as (props: SpectrumDisclosurePanelProps & {ref?: DOMRef}) => ReturnType; -export {_DisclosurePanel as DisclosurePanel}; - -/** The heading of the disclosure. */ -const _DisclosureTitle = forwardRef(DisclosureTitle) as (props: SpectrumDisclosureTitleProps & {ref?: DOMRef}) => ReturnType; -export {_DisclosureTitle as DisclosureTitle}; +}); diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx index 594f353591f..0cb940c29b7 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx @@ -29,7 +29,10 @@ import {useKeyboard} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function ActionBar(props: SpectrumActionBarProps, ref: DOMRef) { +/** + * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time. + */ +export const ActionBar = React.forwardRef(function ActionBar(props: SpectrumActionBarProps, ref: DOMRef) { let isOpen = props.selectedItemCount !== 0; let domRef = useDOMRef(ref); @@ -42,7 +45,7 @@ function ActionBar(props: SpectrumActionBarProps, ref: DOMR ); -} +}) as (props: SpectrumActionBarProps & {ref?: DOMRef}) => ReactElement; interface ActionBarInnerProps extends SpectrumActionBarProps { isOpen?: boolean @@ -138,9 +141,3 @@ function ActionBarInner(props: ActionBarInnerProps, ref: Ref(props: ActionBarInnerProps & {ref?: Ref}) => ReactElement; - -/** - * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time. - */ -const _ActionBar = React.forwardRef(ActionBar) as (props: SpectrumActionBarProps & {ref?: DOMRef}) => ReactElement; -export {_ActionBar as ActionBar}; diff --git a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx index 340d7968f26..ed74c03c882 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx @@ -18,7 +18,11 @@ import {SpectrumActionBarContainerProps} from '@react-types/actionbar'; import styles from './actionbar.css'; import {useProviderProps} from '@react-spectrum/provider'; -function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef) { +/** + * ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles + * the ActionBar's position with respect to its linked component. + */ +export const ActionBarContainer = React.forwardRef(function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef) { // Grabs specific props from the closest Provider (see https://react-spectrum.adobe.com/react-spectrum/Provider.html#property-groups). Remove if your component doesn't support any of the listed props. props = useProviderProps(props); @@ -35,11 +39,4 @@ function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef< {children} ); -} - -/** - * ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles - * the ActionBar's position with respect to its linked component. - */ -const _ActionBarContainer = React.forwardRef(ActionBarContainer); -export {_ActionBarContainer as ActionBarContainer}; +}); diff --git a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx index 2b8014ad267..1fc2645aad4 100644 --- a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx +++ b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx @@ -37,7 +37,10 @@ import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; import {useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; -function ActionGroup(props: SpectrumActionGroupProps, ref: DOMRef) { +/** + * An ActionGroup is a grouping of ActionButtons that are related to one another. + */ +export const ActionGroup = forwardRef(function ActionGroup(props: SpectrumActionGroupProps, ref: DOMRef) { props = useProviderProps(props); props = useSlotProps(props, 'actionGroup'); @@ -255,13 +258,7 @@ function ActionGroup(props: SpectrumActionGroupProps, ref: ); -} - -/** - * An ActionGroup is a grouping of ActionButtons that are related to one another. - */ -const _ActionGroup = forwardRef(ActionGroup) as (props: SpectrumActionGroupProps & {ref?: DOMRef}) => ReactElement; -export {_ActionGroup as ActionGroup}; +}) as (props: SpectrumActionGroupProps & {ref?: DOMRef}) => ReactElement; interface ActionGroupItemProps extends DOMProps, StyleProps { item: Node, diff --git a/packages/@react-spectrum/avatar/src/Avatar.tsx b/packages/@react-spectrum/avatar/src/Avatar.tsx index 36d5040ac14..c3eee993820 100644 --- a/packages/@react-spectrum/avatar/src/Avatar.tsx +++ b/packages/@react-spectrum/avatar/src/Avatar.tsx @@ -21,7 +21,10 @@ import {useProviderProps} from '@react-spectrum/provider'; const DEFAULT_SIZE = 'avatar-size-100'; const SIZE_RE = /^size-\d+/; -function Avatar(props: SpectrumAvatarProps, ref: DOMRef) { +/** + * An avatar is a thumbnail representation of an entity, such as a user or an organization. + */ +export const Avatar = forwardRef(function Avatar(props: SpectrumAvatarProps, ref: DOMRef) { props = useSlotProps(props, 'avatar'); const { alt = '', @@ -61,10 +64,4 @@ function Avatar(props: SpectrumAvatarProps, ref: DOMRef) { ...(sizeValue && {height: sizeValue, width: sizeValue}) }} /> ); -} - -/** - * An avatar is a thumbnail representation of an entity, such as a user or an organization. - */ -const _Avatar = forwardRef(Avatar); -export {_Avatar as Avatar}; +}); diff --git a/packages/@react-spectrum/badge/src/Badge.tsx b/packages/@react-spectrum/badge/src/Badge.tsx index c20dc4cd9b6..552c9f56234 100644 --- a/packages/@react-spectrum/badge/src/Badge.tsx +++ b/packages/@react-spectrum/badge/src/Badge.tsx @@ -20,7 +20,10 @@ import {Text} from '@react-spectrum/text'; import {useProviderProps} from '@react-spectrum/provider'; -function Badge(props: SpectrumBadgeProps, ref: DOMRef) { +/** + * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention. + */ +export const Badge = forwardRef(function Badge(props: SpectrumBadgeProps, ref: DOMRef) { let { children, variant, @@ -63,10 +66,4 @@ function Badge(props: SpectrumBadgeProps, ref: DOMRef) { ); -} - -/** - * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention. - */ -let _Badge = forwardRef(Badge); -export {_Badge as Badge}; +}); diff --git a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx index 0fa824c2dee..e74fafb891d 100644 --- a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx @@ -25,7 +25,10 @@ import {useProviderProps} from '@react-spectrum/provider'; const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; -function Breadcrumbs(props: SpectrumBreadcrumbsProps, ref: DOMRef) { +/** + * Breadcrumbs show hierarchy and navigational context for a user’s location within an application. + */ +export const Breadcrumbs = React.forwardRef(function Breadcrumbs(props: SpectrumBreadcrumbsProps, ref: DOMRef) { props = useProviderProps(props); let { size = 'L', @@ -242,10 +245,4 @@ function Breadcrumbs(props: SpectrumBreadcrumbsProps, ref: DOMRef) { ); -} - -/** - * Breadcrumbs show hierarchy and navigational context for a user’s location within an application. - */ -let _Breadcrumbs = React.forwardRef(Breadcrumbs); -export {_Breadcrumbs as Breadcrumbs}; +}); diff --git a/packages/@react-spectrum/button/src/ActionButton.tsx b/packages/@react-spectrum/button/src/ActionButton.tsx index 5dff44594a1..c7969ddd5b7 100644 --- a/packages/@react-spectrum/button/src/ActionButton.tsx +++ b/packages/@react-spectrum/button/src/ActionButton.tsx @@ -23,7 +23,11 @@ import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; -function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef) { +/** + * ActionButtons allow users to perform an action. + * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention. + */ +export const ActionButton = React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef) { props = useProviderProps(props); props = useSlotProps(props, 'actionButton'); let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text'); @@ -97,11 +101,4 @@ function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef ); -} - -/** - * ActionButtons allow users to perform an action. - * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention. - */ -let _ActionButton = React.forwardRef(ActionButton); -export {_ActionButton as ActionButton}; +}); diff --git a/packages/@react-spectrum/button/src/Button.tsx b/packages/@react-spectrum/button/src/Button.tsx index 73113c3e433..e0c196a2ea2 100644 --- a/packages/@react-spectrum/button/src/Button.tsx +++ b/packages/@react-spectrum/button/src/Button.tsx @@ -49,7 +49,12 @@ function disablePendingProps(props) { return props; } -function Button(props: SpectrumButtonProps, ref: FocusableRef) { +/** + * Buttons allow users to perform an action or to navigate to another page. + * They have multiple styles for various needs, and are ideal for calling attention to + * where a user needs to do something in order to move forward in a flow. + */ +export const Button = React.forwardRef(function Button(props: SpectrumButtonProps, ref: FocusableRef) { props = useProviderProps(props); props = useSlotProps(props, 'button'); props = disablePendingProps(props); @@ -199,12 +204,4 @@ function Button(props: SpectrumButtonProps, ); -} - -/** - * Buttons allow users to perform an action or to navigate to another page. - * They have multiple styles for various needs, and are ideal for calling attention to - * where a user needs to do something in order to move forward in a flow. - */ -let _Button = React.forwardRef(Button) as (props: SpectrumButtonProps & {ref?: FocusableRef}) => ReactElement; -export {_Button as Button}; +}) as (props: SpectrumButtonProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/button/src/ClearButton.tsx b/packages/@react-spectrum/button/src/ClearButton.tsx index f91a6748065..08dc3bad77b 100644 --- a/packages/@react-spectrum/button/src/ClearButton.tsx +++ b/packages/@react-spectrum/button/src/ClearButton.tsx @@ -28,7 +28,7 @@ interface ClearButtonProps extends ButtonProps preventFocus?: boolean } -function ClearButton(props: ClearButtonProps, ref: FocusableRef) { +export const ClearButton = React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef) { let { children = , focusClassName, @@ -75,7 +75,4 @@ function ClearButton(props: ClearButtonProps, ref: FocusableRef ); -} - -let _ClearButton = React.forwardRef(ClearButton); -export {_ClearButton as ClearButton}; +}); diff --git a/packages/@react-spectrum/button/src/FieldButton.tsx b/packages/@react-spectrum/button/src/FieldButton.tsx index 00afe1f262a..a6070f06ea5 100644 --- a/packages/@react-spectrum/button/src/FieldButton.tsx +++ b/packages/@react-spectrum/button/src/FieldButton.tsx @@ -29,7 +29,7 @@ interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps { } // @private -function FieldButton(props: FieldButtonProps, ref: FocusableRef) { +export const FieldButton = React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) { props = useSlotProps(props, 'button'); let { isQuiet, @@ -78,7 +78,4 @@ function FieldButton(props: FieldButtonProps, ref: FocusableRef) { ); -} - -let _FieldButton = React.forwardRef(FieldButton); -export {_FieldButton as FieldButton}; +}); diff --git a/packages/@react-spectrum/button/src/LogicButton.tsx b/packages/@react-spectrum/button/src/LogicButton.tsx index 054747fc655..ce04abf7d85 100644 --- a/packages/@react-spectrum/button/src/LogicButton.tsx +++ b/packages/@react-spectrum/button/src/LogicButton.tsx @@ -21,7 +21,10 @@ import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; -function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef) { +/** + * A LogicButton displays an operator within a boolean logic sequence. + */ +export const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef) { props = useProviderProps(props); let { variant, @@ -58,10 +61,4 @@ function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef ); -} - -/** - * A LogicButton displays an operator within a boolean logic sequence. - */ -let _LogicButton = React.forwardRef(LogicButton); -export {_LogicButton as LogicButton}; +}); diff --git a/packages/@react-spectrum/button/src/ToggleButton.tsx b/packages/@react-spectrum/button/src/ToggleButton.tsx index 2aa6da77e8d..b5356661919 100644 --- a/packages/@react-spectrum/button/src/ToggleButton.tsx +++ b/packages/@react-spectrum/button/src/ToggleButton.tsx @@ -23,7 +23,11 @@ import {useProviderProps} from '@react-spectrum/provider'; import {useToggleButton} from '@react-aria/button'; import {useToggleState} from '@react-stately/toggle'; -function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef) { +/** + * ToggleButtons allow users to toggle a selection on or off, for example + * switching between two states or modes. + */ +export const ToggleButton = React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef) { props = useProviderProps(props); let { isQuiet, @@ -83,11 +87,4 @@ function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef ); -} - -/** - * ToggleButtons allow users to toggle a selection on or off, for example - * switching between two states or modes. - */ -let _ToggleButton = React.forwardRef(ToggleButton); -export {_ToggleButton as ToggleButton}; +}); diff --git a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx index 7cdae6b3d27..f01e328bb8f 100644 --- a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx +++ b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx @@ -25,7 +25,10 @@ import React, {useCallback, useRef} from 'react'; import {SpectrumButtonGroupProps} from '@react-types/buttongroup'; import styles from '@adobe/spectrum-css-temp/components/buttongroup/vars.css'; -function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef) { +/** + * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other. + */ +export const ButtonGroup = React.forwardRef(function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef) { let {scale} = useProvider(); props = useProviderProps(props); props = useSlotProps(props, 'buttonGroup'); @@ -112,10 +115,4 @@ function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef ); -} - -/** - * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other. - */ -let _ButtonGroup = React.forwardRef(ButtonGroup); -export {_ButtonGroup as ButtonGroup}; +}); diff --git a/packages/@react-spectrum/calendar/src/Calendar.tsx b/packages/@react-spectrum/calendar/src/Calendar.tsx index 36f8fd7d194..1fde8e4adab 100644 --- a/packages/@react-spectrum/calendar/src/Calendar.tsx +++ b/packages/@react-spectrum/calendar/src/Calendar.tsx @@ -21,7 +21,10 @@ import {useCalendarState} from '@react-stately/calendar'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function Calendar(props: SpectrumCalendarProps, ref: FocusableRef) { +/** + * Calendars display a grid of days in one or more months and allow users to select a single date. + */ +export const Calendar = React.forwardRef(function Calendar(props: SpectrumCalendarProps, ref: FocusableRef) { props = useProviderProps(props); let {visibleMonths = 1} = props; visibleMonths = Math.max(visibleMonths, 1); @@ -55,10 +58,4 @@ function Calendar(props: SpectrumCalendarProps, ref: Foc nextButtonProps={nextButtonProps} errorMessageProps={errorMessageProps} /> ); -} - -/** - * Calendars display a grid of days in one or more months and allow users to select a single date. - */ -const _Calendar = React.forwardRef(Calendar) as (props: SpectrumCalendarProps & {ref?: FocusableRef}) => ReactElement; -export {_Calendar as Calendar}; +}) as (props: SpectrumCalendarProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx index ddfc7810aa8..20e9df5756f 100644 --- a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx +++ b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx @@ -21,7 +21,10 @@ import {useProviderProps} from '@react-spectrum/provider'; import {useRangeCalendar} from '@react-aria/calendar'; import {useRangeCalendarState} from '@react-stately/calendar'; -function RangeCalendar(props: SpectrumRangeCalendarProps, ref: FocusableRef) { +/** + * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates. + */ +export const RangeCalendar = React.forwardRef(function RangeCalendar(props: SpectrumRangeCalendarProps, ref: FocusableRef) { props = useProviderProps(props); let {visibleMonths = 1} = props; visibleMonths = Math.max(visibleMonths, 1); @@ -55,10 +58,4 @@ function RangeCalendar(props: SpectrumRangeCalendarProps nextButtonProps={nextButtonProps} errorMessageProps={errorMessageProps} /> ); -} - -/** - * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates. - */ -const _RangeCalendar = React.forwardRef(RangeCalendar) as (props: SpectrumRangeCalendarProps & {ref?: FocusableRef}) => ReactElement; -export {_RangeCalendar as RangeCalendar}; +}) as (props: SpectrumRangeCalendarProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/card/src/CardBase.tsx b/packages/@react-spectrum/card/src/CardBase.tsx index 67d421debbb..3efd75dd3f9 100644 --- a/packages/@react-spectrum/card/src/CardBase.tsx +++ b/packages/@react-spectrum/card/src/CardBase.tsx @@ -28,7 +28,10 @@ interface CardBaseProps extends SpectrumCardProps { item?: Node } -function CardBase(props: CardBaseProps, ref: DOMRef) { +/** + * TODO: Add description of component here. + */ +export const CardBase = React.forwardRef(function CardBase(props: CardBaseProps, ref: DOMRef) { props = useProviderProps(props); let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx let {state} = context; @@ -151,7 +154,7 @@ function CardBase(props: CardBaseProps, ref: DOMRef ); -} +}); interface AriaCardOptions extends AriaCardProps { } @@ -183,9 +186,3 @@ function useCard(props: AriaCardOptions): CardAria { contentProps }; } - -/** - * TODO: Add description of component here. - */ -const _CardBase = React.forwardRef(CardBase); -export {_CardBase as CardBase}; diff --git a/packages/@react-spectrum/card/src/CardView.tsx b/packages/@react-spectrum/card/src/CardView.tsx index eef7e6d65f8..e060a2e84a4 100644 --- a/packages/@react-spectrum/card/src/CardView.tsx +++ b/packages/@react-spectrum/card/src/CardView.tsx @@ -30,7 +30,10 @@ import {useListState} from '@react-stately/list'; import {useProvider} from '@react-spectrum/provider'; import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer'; -function CardView(props: SpectrumCardViewProps, ref: DOMRef) { +/** + * TODO: Add description of component here. + */ +export const CardView = React.forwardRef(function CardView(props: SpectrumCardViewProps, ref: DOMRef) { let {scale} = useProvider(); let {styleProps} = useStyleProps(props); let domRef = useDOMRef(ref); @@ -140,7 +143,7 @@ function CardView(props: SpectrumCardViewProps, ref: DOMRef ); -} +}) as (props: SpectrumCardViewProps & {ref?: DOMRef}) => ReactElement; function LoadingState() { let {state} = useCardViewContext(); @@ -245,9 +248,3 @@ function InternalCard(props) { ); } - -/** - * TODO: Add description of component here. - */ -const _CardView = React.forwardRef(CardView) as (props: SpectrumCardViewProps & {ref?: DOMRef}) => ReactElement; -export {_CardView as CardView}; diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx index a67eb2d2c5f..04424ab5cfe 100644 --- a/packages/@react-spectrum/checkbox/src/Checkbox.tsx +++ b/packages/@react-spectrum/checkbox/src/Checkbox.tsx @@ -26,7 +26,11 @@ import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; import {useToggleState} from '@react-stately/toggle'; -function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef) { +/** + * Checkboxes allow users to select multiple items from a list of individual items, + * or to mark one individual item as selected. + */ +export const Checkbox = forwardRef(function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef) { let originalProps = props; let inputRef = useRef(null); let domRef = useFocusableRef(ref, inputRef); @@ -115,10 +119,4 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef ); -} -/** - * Checkboxes allow users to select multiple items from a list of individual items, - * or to mark one individual item as selected. - */ -let _Checkbox = forwardRef(Checkbox); -export {_Checkbox as Checkbox}; +}); diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx index 9c736e48148..721ab646fff 100644 --- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx @@ -22,7 +22,10 @@ import {useCheckboxGroup} from '@react-aria/checkbox'; import {useCheckboxGroupState} from '@react-stately/checkbox'; import {useFormProps} from '@react-spectrum/form'; -function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef) { +/** + * A CheckboxGroup allows users to select one or more items from a list of choices. + */ +export const CheckboxGroup = React.forwardRef(function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef) { props = useProviderProps(props); props = useFormProps(props); let { @@ -61,10 +64,4 @@ function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef ); -} - -/** - * A CheckboxGroup allows users to select one or more items from a list of choices. - */ -const _CheckboxGroup = React.forwardRef(CheckboxGroup); -export {_CheckboxGroup as CheckboxGroup}; +}); diff --git a/packages/@react-spectrum/color/src/ColorArea.tsx b/packages/@react-spectrum/color/src/ColorArea.tsx index 82419d23d70..fbcd2b069dd 100644 --- a/packages/@react-spectrum/color/src/ColorArea.tsx +++ b/packages/@react-spectrum/color/src/ColorArea.tsx @@ -23,7 +23,10 @@ import {useColorAreaState} from '@react-stately/color'; import {useFocusRing} from '@react-aria/focus'; import {useProviderProps} from '@react-spectrum/provider'; -function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef) { +/** + * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background. + */ +export const ColorArea = React.forwardRef(function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef) { props = useProviderProps(props); let inputXRef = useRef(null); let inputYRef = useRef(null); @@ -81,10 +84,4 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef ); -} - -/** - * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background. - */ -let _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef}) => ReactElement; -export {_ColorArea as ColorArea}; +}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/color/src/ColorEditor.tsx b/packages/@react-spectrum/color/src/ColorEditor.tsx index 416f90f67d4..b7ce2c39ff5 100644 --- a/packages/@react-spectrum/color/src/ColorEditor.tsx +++ b/packages/@react-spectrum/color/src/ColorEditor.tsx @@ -17,7 +17,10 @@ export interface SpectrumColorEditorProps { hideAlphaChannel?: boolean } -function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef) { +/** + * ColorEditor provides a default UI for editing colors within a ColorPicker. + */ +export const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef) { let [format, setFormat] = useState('hex'); let domRef = useDOMRef(ref); let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color'); @@ -54,10 +57,4 @@ function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef ); -} - -/** - * ColorEditor provides a default UI for editing colors within a ColorPicker. - */ -let _ColorEditor = React.forwardRef(ColorEditor); -export {_ColorEditor as ColorEditor}; +}); diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx index b479d8cb100..5ca1cbc8524 100644 --- a/packages/@react-spectrum/color/src/ColorField.tsx +++ b/packages/@react-spectrum/color/src/ColorField.tsx @@ -23,7 +23,10 @@ import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function ColorField(props: SpectrumColorFieldProps, ref: Ref) { +/** + * A color field allows users to edit a hex color or individual color channel value. + */ +export const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref) { props = useProviderProps(props); props = useFormProps(props); [props] = useContextProps(props, null, ColorFieldContext); @@ -36,13 +39,7 @@ function ColorField(props: SpectrumColorFieldProps, ref: Ref) { } else { return ; } -} - -/** - * A color field allows users to edit a hex color or individual color channel value. - */ -const _ColorField = React.forwardRef(ColorField); -export {_ColorField as ColorField}; +}); interface ColorChannelFieldProps extends Omit { channel: ColorChannel, diff --git a/packages/@react-spectrum/color/src/ColorPicker.tsx b/packages/@react-spectrum/color/src/ColorPicker.tsx index 7482372c6be..c0be4288e97 100644 --- a/packages/@react-spectrum/color/src/ColorPicker.tsx +++ b/packages/@react-spectrum/color/src/ColorPicker.tsx @@ -37,7 +37,10 @@ export interface SpectrumColorPickerProps extends ValueBase) { +/** + * A ColorPicker combines a swatch with a customizable popover for editing a color. + */ +export const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef) { let swatchRef = useRef(null); let domRef = useFocusableRef(ref); let labelId = useId(); @@ -114,10 +117,4 @@ function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef ); -} - -/** - * A ColorPicker combines a swatch with a customizable popover for editing a color. - */ -let _ColorPicker = React.forwardRef(ColorPicker); -export {_ColorPicker as ColorPicker}; +}); diff --git a/packages/@react-spectrum/color/src/ColorSlider.tsx b/packages/@react-spectrum/color/src/ColorSlider.tsx index 3d2dfcefc85..3bb5907bf0b 100644 --- a/packages/@react-spectrum/color/src/ColorSlider.tsx +++ b/packages/@react-spectrum/color/src/ColorSlider.tsx @@ -24,7 +24,10 @@ import {useFocus, useFocusVisible} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef) { +/** + * ColorSliders allow users to adjust an individual channel of a color value. + */ +export const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef) { props = useProviderProps(props); let inputRef = useRef(null); let trackRef = useRef(null); @@ -135,10 +138,4 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef ); -} - -/** - * ColorSliders allow users to adjust an individual channel of a color value. - */ -let _ColorSlider = React.forwardRef(ColorSlider); -export {_ColorSlider as ColorSlider}; +}); diff --git a/packages/@react-spectrum/color/src/ColorSwatch.tsx b/packages/@react-spectrum/color/src/ColorSwatch.tsx index 4060a9d117e..ff7ba8a0484 100644 --- a/packages/@react-spectrum/color/src/ColorSwatch.tsx +++ b/packages/@react-spectrum/color/src/ColorSwatch.tsx @@ -37,7 +37,10 @@ interface SpectrumColorSwatchContextValue extends Pick(null); -function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef): JSX.Element { +/** + * A ColorSwatch displays a preview of a selected color. + */ +export const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef): JSX.Element { let domRef = useDOMRef(ref); [props, domRef] = useContextProps(props, domRef, ColorSwatchContext); let {colorSwatchProps, color} = useColorSwatch(props); @@ -93,10 +96,4 @@ function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef) { +/** + * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them. + */ +export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef) { let { density = 'regular', size = 'M', @@ -69,13 +72,7 @@ function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef ); -} - -/** - * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them. - */ -let _ColorSwatchPicker = forwardRef(ColorSwatchPicker); -export {_ColorSwatchPicker as ColorSwatchPicker}; +}); function useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) { return ( diff --git a/packages/@react-spectrum/color/src/ColorWheel.tsx b/packages/@react-spectrum/color/src/ColorWheel.tsx index 4b9ccd4c9a7..b187a4a1f6b 100644 --- a/packages/@react-spectrum/color/src/ColorWheel.tsx +++ b/packages/@react-spectrum/color/src/ColorWheel.tsx @@ -25,7 +25,10 @@ import {useResizeObserver} from '@react-aria/utils'; const WHEEL_THICKNESS = 24; -function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef) { +/** + * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track. + */ +export const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef) { props = useProviderProps(props); let inputRef = useRef(null); let containerRef = useFocusableRef(ref, inputRef); @@ -104,10 +107,4 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef ); -} - -/** - * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track. - */ -let _ColorWheel = React.forwardRef(ColorWheel); -export {_ColorWheel as ColorWheel}; +}); diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx index 740f56e392e..faa6936aaff 100644 --- a/packages/@react-spectrum/combobox/src/ComboBox.tsx +++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx @@ -53,7 +53,10 @@ import {useFormProps} from '@react-spectrum/form'; import {useLayoutEffect} from '@react-aria/utils'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; -function ComboBox(props: SpectrumComboBoxProps, ref: FocusableRef) { +/** + * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. + */ +export const ComboBox = React.forwardRef(function ComboBox(props: SpectrumComboBoxProps, ref: FocusableRef) { props = useProviderProps(props); props = useFormProps(props); @@ -68,7 +71,7 @@ function ComboBox(props: SpectrumComboBoxProps, ref: Focusa } else { return ; } -} +}) as (props: SpectrumComboBoxProps & {ref?: FocusableRef}) => ReactElement; const ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps, ref: FocusableRef) { let { @@ -364,9 +367,3 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp ) ); }); - -/** - * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. - */ -const _ComboBox = React.forwardRef(ComboBox) as (props: SpectrumComboBoxProps & {ref?: FocusableRef}) => ReactElement; -export {_ComboBox as ComboBox}; diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 3c1724506c7..4d2857e0032 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -24,7 +24,10 @@ import React from 'react'; import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef) { +/** + * Contextual help shows a user extra information about the state of an adjacent component, or a total view. + */ +export const ContextualHelp = React.forwardRef(function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef) { let { variant = 'help', placement = 'bottom start', @@ -61,10 +64,4 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef ); -} - -/** - * Contextual help shows a user extra information about the state of an adjacent component, or a total view. - */ -let _ContextualHelp = React.forwardRef(ContextualHelp); -export {_ContextualHelp as ContextualHelp}; +}); diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx index de30373ce53..8d281711bc1 100644 --- a/packages/@react-spectrum/datepicker/src/DateField.tsx +++ b/packages/@react-spectrum/datepicker/src/DateField.tsx @@ -26,7 +26,11 @@ import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function DateField(props: SpectrumDateFieldProps, ref: FocusableRef) { +/** + * DateFields allow users to enter and edit date and time values using a keyboard. + * Each part of a date value is displayed in an individually editable segment. + */ +export const DateField = React.forwardRef(function DateField(props: SpectrumDateFieldProps, ref: FocusableRef) { props = useProviderProps(props); props = useFormProps(props); let { @@ -99,11 +103,4 @@ function DateField(props: SpectrumDateFieldProps, ref: F ); -} - -/** - * DateFields allow users to enter and edit date and time values using a keyboard. - * Each part of a date value is displayed in an individually editable segment. - */ -const _DateField = React.forwardRef(DateField) as (props: SpectrumDateFieldProps & {ref?: FocusableRef}) => ReactElement; -export {_DateField as DateField}; +}) as (props: SpectrumDateFieldProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx index a81334f1424..3faf0437fec 100644 --- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx @@ -38,7 +38,10 @@ import {useHover} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function DatePicker(props: SpectrumDatePickerProps, ref: FocusableRef) { +/** + * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value. + */ +export const DatePicker = React.forwardRef(function DatePicker(props: SpectrumDatePickerProps, ref: FocusableRef) { props = useProviderProps(props); props = useFormProps(props); let { @@ -191,10 +194,4 @@ function DatePicker(props: SpectrumDatePickerProps, ref: ); -} - -/** - * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value. - */ -const _DatePicker = React.forwardRef(DatePicker) as (props: SpectrumDatePickerProps & {ref?: FocusableRef}) => ReactElement; -export {_DatePicker as DatePicker}; +}) as (props: SpectrumDatePickerProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx index 9b8dc42ba2f..0cd78290f6a 100644 --- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx @@ -38,7 +38,11 @@ import {useHover} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function DateRangePicker(props: SpectrumDateRangePickerProps, ref: FocusableRef) { +/** + * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users + * to enter or select a date and time range. + */ +export const DateRangePicker = React.forwardRef(function DateRangePicker(props: SpectrumDateRangePickerProps, ref: FocusableRef) { props = useProviderProps(props); props = useFormProps(props); let { @@ -217,7 +221,7 @@ function DateRangePicker(props: SpectrumDateRangePickerProp ); -} +}) as (props: SpectrumDateRangePickerProps & {ref?: FocusableRef}) => ReactElement; function DateRangeDash() { return ( @@ -227,10 +231,3 @@ function DateRangeDash() { className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} /> ); } - -/** - * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users - * to enter or select a date and time range. - */ -const _DateRangePicker = React.forwardRef(DateRangePicker) as (props: SpectrumDateRangePickerProps & {ref?: FocusableRef}) => ReactElement; -export {_DateRangePicker as DateRangePicker}; diff --git a/packages/@react-spectrum/datepicker/src/Input.tsx b/packages/@react-spectrum/datepicker/src/Input.tsx index fc44e36da54..ba8f56eb937 100644 --- a/packages/@react-spectrum/datepicker/src/Input.tsx +++ b/packages/@react-spectrum/datepicker/src/Input.tsx @@ -19,7 +19,7 @@ import React, {ReactElement, useCallback, useRef} from 'react'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {useFocusRing} from '@react-aria/focus'; -function Input(props, ref) { +export const Input = React.forwardRef(function Input(props: any, ref: any) { let inputRef = useRef(null); let { isDisabled, @@ -139,7 +139,4 @@ function Input(props, ref) { {validationIcon} ); -} - -const _Input = React.forwardRef(Input); -export {_Input as Input}; +}); diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx index 428f4363451..9f831b35194 100644 --- a/packages/@react-spectrum/datepicker/src/TimeField.tsx +++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx @@ -25,7 +25,11 @@ import {useProviderProps} from '@react-spectrum/provider'; import {useTimeField} from '@react-aria/datepicker'; import {useTimeFieldState} from '@react-stately/datepicker'; -function TimeField(props: SpectrumTimeFieldProps, ref: FocusableRef) { +/** + * TimeFields allow users to enter and edit time values using a keyboard. + * Each part of the time is displayed in an individually editable segment. + */ +export const TimeField = React.forwardRef(function TimeField(props: SpectrumTimeFieldProps, ref: FocusableRef) { props = useProviderProps(props); props = useFormProps(props); let { @@ -89,11 +93,4 @@ function TimeField(props: SpectrumTimeFieldProps, ref: F ); -} - -/** - * TimeFields allow users to enter and edit time values using a keyboard. - * Each part of the time is displayed in an individually editable segment. - */ -const _TimeField = React.forwardRef(TimeField) as (props: SpectrumTimeFieldProps & {ref?: FocusableRef}) => ReactElement; -export {_TimeField as TimeField}; +}) as (props: SpectrumTimeFieldProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx index e76623990a0..e7f4603c9e2 100644 --- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx +++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx @@ -32,7 +32,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; /** * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge. */ -function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) { +export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) { let { onClose = () => {} } = useContext(DialogContext) || {} as DialogContextValue; @@ -108,10 +108,4 @@ function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) { ); -} - -/** - * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge. - */ -let _AlertDialog = forwardRef(AlertDialog); -export {_AlertDialog as AlertDialog}; +}); diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index a4b353e48db..70adf576081 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -41,7 +41,11 @@ let sizeMap = { fullscreenTakeover: 'fullscreenTakeover' }; -function Dialog(props: SpectrumDialogProps, ref: DOMRef) { +/** + * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. + * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged. + */ +export const Dialog = React.forwardRef(function Dialog(props: SpectrumDialogProps, ref: DOMRef) { props = useSlotProps(props, 'dialog'); let { type = 'modal', @@ -111,11 +115,4 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) { ); -} - -/** - * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. - * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged. - */ -let _Dialog = React.forwardRef(Dialog); -export {_Dialog as Dialog}; +}); diff --git a/packages/@react-spectrum/divider/src/Divider.tsx b/packages/@react-spectrum/divider/src/Divider.tsx index 39836133f2e..f86f766777d 100644 --- a/packages/@react-spectrum/divider/src/Divider.tsx +++ b/packages/@react-spectrum/divider/src/Divider.tsx @@ -23,7 +23,11 @@ let sizeMap = { L: 'large' }; -function Divider(props: SpectrumDividerProps, ref: DOMRef) { +/** + * Dividers bring clarity to a layout by grouping and dividing content in close proximity. + * They can also be used to establish rhythm and hierarchy. + */ +export const Divider = React.forwardRef(function Divider(props: SpectrumDividerProps, ref: DOMRef) { props = useSlotProps(props, 'divider'); let { size = 'L', @@ -63,11 +67,4 @@ function Divider(props: SpectrumDividerProps, ref: DOMRef) { ref={domRef} {...separatorProps} /> ); -} - -/** - * Dividers bring clarity to a layout by grouping and dividing content in close proximity. - * They can also be used to establish rhythm and hierarchy. - */ -let _Divider = React.forwardRef(Divider); -export {_Divider as Divider}; +}); diff --git a/packages/@react-spectrum/dropzone/src/DropZone.tsx b/packages/@react-spectrum/dropzone/src/DropZone.tsx index 7132eafbcfb..1c272755267 100644 --- a/packages/@react-spectrum/dropzone/src/DropZone.tsx +++ b/packages/@react-spectrum/dropzone/src/DropZone.tsx @@ -36,7 +36,10 @@ let filterProps = (props) => { return otherProps; }; -function DropZone(props: SpectrumDropZoneProps, ref: DOMRef) { +/** + * A drop zone is an area into which one or multiple objects can be dragged and dropped. + */ +export const DropZone = React.forwardRef(function DropZone(props: SpectrumDropZoneProps, ref: DOMRef) { let {children, isFilled, replaceMessage, ...otherProps} = props; let {styleProps} = useStyleProps(props); let domRef = useDOMRef(ref); @@ -86,10 +89,4 @@ function DropZone(props: SpectrumDropZoneProps, ref: DOMRef) { ); -} - -/** - * A drop zone is an area into which one or multiple objects can be dragged and dropped. - */ -let _DropZone = React.forwardRef(DropZone); -export {_DropZone as DropZone}; +}); diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx index 86fc1095f1b..b15d9012d5f 100644 --- a/packages/@react-spectrum/form/src/Form.tsx +++ b/packages/@react-spectrum/form/src/Form.tsx @@ -44,7 +44,10 @@ const formPropNames = new Set([ 'onInvalid' ]); -function Form(props: SpectrumFormProps, ref: DOMRef) { +/** + * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields. + */ +export const Form = React.forwardRef(function Form(props: SpectrumFormProps, ref: DOMRef) { props = useProviderProps(props); let { children, @@ -104,10 +107,4 @@ function Form(props: SpectrumFormProps, ref: DOMRef) { ); -} - -/** - * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields. - */ -const _Form = React.forwardRef(Form); -export {_Form as Form}; +}); diff --git a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx index 9a22885a933..038545fc671 100644 --- a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx +++ b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx @@ -18,7 +18,11 @@ import React, {forwardRef} from 'react'; import {SpectrumIllustratedMessageProps} from '@react-types/illustratedmessage'; import styles from '@adobe/spectrum-css-temp/components/illustratedmessage/vars.css'; -function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef) { +/** + * An IllustratedMessage displays an illustration and a message, usually + * for an empty state or an error page. + */ +export const IllustratedMessage = forwardRef(function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef) { props = useSlotProps(props, 'illustration'); let { children, @@ -52,11 +56,4 @@ function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef< ); -} - -/** - * An IllustratedMessage displays an illustration and a message, usually - * for an empty state or an error page. - */ -let _IllustratedMessage = forwardRef(IllustratedMessage); -export {_IllustratedMessage as IllustratedMessage}; +}); diff --git a/packages/@react-spectrum/image/src/Image.tsx b/packages/@react-spectrum/image/src/Image.tsx index ca67371b0e7..b3a0a5a6100 100644 --- a/packages/@react-spectrum/image/src/Image.tsx +++ b/packages/@react-spectrum/image/src/Image.tsx @@ -18,7 +18,10 @@ import {SpectrumImageProps} from '@react-types/image'; import styles from '@adobe/spectrum-css-temp/components/image/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; -// incomplete component for show right now +/** + * Image is used to insert and display an image within a component. + */ +export const Image = React.forwardRef(// incomplete component for show right now function Image(props: SpectrumImageProps, ref: DOMRef) { /* Slots should be able to pass an alt for default behavior, but in Images, the child may know better. */ @@ -61,10 +64,4 @@ function Image(props: SpectrumImageProps, ref: DOMRef) { onLoad={props?.onLoad} /> ); -} - -/** - * Image is used to insert and display an image within a component. - */ -const _Image = React.forwardRef(Image); -export {_Image as Image}; +}); diff --git a/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx index 328032281c5..396647e2cfc 100644 --- a/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx @@ -48,7 +48,11 @@ let ICONS = { negative: AlertMedium }; -function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef) { +/** + * Inline alerts display a non-modal message associated with objects in a view. + * These are often used in form validation, providing a place to aggregate feedback related to multiple fields. + */ +export const InlineAlert = React.forwardRef(function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef) { props = useProviderProps(props); let { children, @@ -105,11 +109,4 @@ function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef ); -} - -/** - * Inline alerts display a non-modal message associated with objects in a view. - * These are often used in form validation, providing a place to aggregate feedback related to multiple fields. - */ -const _InlineAlert = React.forwardRef(InlineAlert); -export {_InlineAlert as InlineAlert}; +}); diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx index a154a24067c..45feae08714 100644 --- a/packages/@react-spectrum/label/src/Field.tsx +++ b/packages/@react-spectrum/label/src/Field.tsx @@ -21,7 +21,7 @@ import React, {ReactNode, Ref} from 'react'; import {SpectrumFieldProps} from '@react-types/label'; import {useFormProps} from '@react-spectrum/form'; -function Field(props: SpectrumFieldProps, ref: Ref) { +export const Field = React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref) { let formProps = useFormProps(props); let isInForm = formProps !== props; props = formProps; @@ -174,7 +174,4 @@ function Field(props: SpectrumFieldProps, ref: Ref) { {renderChildren()} ) ); -} - -let _Field = React.forwardRef(Field); -export {_Field as Field}; +}); diff --git a/packages/@react-spectrum/label/src/HelpText.tsx b/packages/@react-spectrum/label/src/HelpText.tsx index 8033dc7d732..85f08bc9be6 100644 --- a/packages/@react-spectrum/label/src/HelpText.tsx +++ b/packages/@react-spectrum/label/src/HelpText.tsx @@ -25,7 +25,10 @@ interface HelpTextProps extends Omit, Omi errorMessage?: ReactNode } -function HelpText(props: HelpTextProps, ref: DOMRef) { +/** + * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms. + */ +export const HelpText = React.forwardRef(function HelpText(props: HelpTextProps, ref: DOMRef) { let { description, errorMessage, @@ -65,10 +68,4 @@ function HelpText(props: HelpTextProps, ref: DOMRef) { )} ); -} - -/** - * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms. - */ -const _HelpText = React.forwardRef(HelpText); -export {_HelpText as HelpText}; +}); diff --git a/packages/@react-spectrum/label/src/Label.tsx b/packages/@react-spectrum/label/src/Label.tsx index 39c4db4ddde..8e3a5b5893c 100644 --- a/packages/@react-spectrum/label/src/Label.tsx +++ b/packages/@react-spectrum/label/src/Label.tsx @@ -22,7 +22,7 @@ import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -function Label(props: SpectrumLabelProps, ref: DOMRef) { +export const Label = React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef) { props = useProviderProps(props); let { children, @@ -76,7 +76,4 @@ function Label(props: SpectrumLabelProps, ref: DOMRef) { {necessityIndicator === 'icon' && isRequired && icon} ); -} - -let _Label = React.forwardRef(Label); -export {_Label as Label}; +}); diff --git a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx index 575de7f24cb..58b91823bb0 100644 --- a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx +++ b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx @@ -68,7 +68,10 @@ type LabeledValueProps = type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue | RangeValue; export type SpectrumLabeledValueProps = LabeledValueProps & LabeledValueBaseProps; -function LabeledValue(props: SpectrumLabeledValueProps, ref: DOMRef) { +/** + * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale. + */ +export const LabeledValue = React.forwardRef(function LabeledValue(props: SpectrumLabeledValueProps, ref: DOMRef) { let { value, formatOptions @@ -105,7 +108,7 @@ function LabeledValue(props: SpectrumLabele {children} ); -} +}); function FormattedStringList(props: StringListProps) { let stringFormatter = useListFormatter(props.formatOptions); @@ -181,9 +184,3 @@ function convertValue(value: Time) { return toCalendarDateTime(date, value); } - -/** - * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale. - */ -let _LabeledValue = React.forwardRef(LabeledValue); -export {_LabeledValue as LabeledValue}; diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx index aa6c05c223c..494a54cded1 100644 --- a/packages/@react-spectrum/layout/src/Flex.tsx +++ b/packages/@react-spectrum/layout/src/Flex.tsx @@ -25,7 +25,11 @@ const flexStyleProps: StyleHandlers = { alignContent: ['alignContent', flexAlignValue] }; -function Flex(props: FlexProps, ref: DOMRef) { +/** + * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap + * property to define consistent spacing between items. + */ +export const Flex = forwardRef(function Flex(props: FlexProps, ref: DOMRef) { let { children, ...otherProps @@ -58,7 +62,7 @@ function Flex(props: FlexProps, ref: DOMRef) { {children} ); -} +}); /** * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end' @@ -86,10 +90,3 @@ function flexWrapValue(value) { return value; } - -/** - * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap - * property to define consistent spacing between items. - */ -const _Flex = forwardRef(Flex); -export {_Flex as Flex}; diff --git a/packages/@react-spectrum/layout/src/Grid.tsx b/packages/@react-spectrum/layout/src/Grid.tsx index 497c64473b2..b09a89705a4 100644 --- a/packages/@react-spectrum/layout/src/Grid.tsx +++ b/packages/@react-spectrum/layout/src/Grid.tsx @@ -40,7 +40,11 @@ const gridStyleProps: StyleHandlers = { alignContent: ['alignContent', passthroughStyle] }; -function Grid(props: GridProps, ref: DOMRef) { +/** + * A layout container using CSS grid. Supports Spectrum dimensions as values to + * ensure consistent and adaptive sizing and spacing. + */ +export const Grid = forwardRef(function Grid(props: GridProps, ref: DOMRef) { let { children, ...otherProps @@ -56,7 +60,7 @@ function Grid(props: GridProps, ref: DOMRef) { {children} ); -} +}); /** * Can be used to make a repeating fragment of the columns or rows list. @@ -106,10 +110,3 @@ function gridTemplateValue(value) { return gridDimensionValue(value); } - -/** - * A layout container using CSS grid. Supports Spectrum dimensions as values to - * ensure consistent and adaptive sizing and spacing. - */ -const _Grid = forwardRef(Grid); -export {_Grid as Grid}; diff --git a/packages/@react-spectrum/list/src/ListView.tsx b/packages/@react-spectrum/list/src/ListView.tsx index d56f2a0997f..3072a20e745 100644 --- a/packages/@react-spectrum/list/src/ListView.tsx +++ b/packages/@react-spectrum/list/src/ListView.tsx @@ -104,7 +104,10 @@ function useListLayout(state: ListState, density: SpectrumListViewProps return layout; } -function ListView(props: SpectrumListViewProps, ref: DOMRef) { +/** + * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. + */ +export const ListView = React.forwardRef(function ListView(props: SpectrumListViewProps, ref: DOMRef) { let { density = 'regular', loadingState, @@ -280,7 +283,7 @@ function ListView(props: SpectrumListViewProps, ref: DOMRef } ); -} +}) as (props: SpectrumListViewProps & {ref?: DOMRef}) => ReactElement; function Item({item}: {item: Node}) { let {isListDroppable, state, onAction} = useContext(ListViewContext)!; @@ -351,9 +354,3 @@ function CenteredWrapper({children}) { ); } - -/** - * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action. - */ -const _ListView = React.forwardRef(ListView) as (props: SpectrumListViewProps & {ref?: DOMRef}) => ReactElement; -export {_ListView as ListView}; diff --git a/packages/@react-spectrum/listbox/src/ListBox.tsx b/packages/@react-spectrum/listbox/src/ListBox.tsx index 9d614af8c20..c17db580ef8 100644 --- a/packages/@react-spectrum/listbox/src/ListBox.tsx +++ b/packages/@react-spectrum/listbox/src/ListBox.tsx @@ -17,7 +17,14 @@ import {SpectrumListBoxProps} from '@react-types/listbox'; import {useDOMRef} from '@react-spectrum/utils'; import {useListState} from '@react-stately/list'; -function ListBox(props: SpectrumListBoxProps, ref: DOMRef) { +// forwardRef doesn't support generic parameters, so cast the result to the correct type +// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref + + +/** + * A list of options that can allow selection of one or more. + */ +export const ListBox = React.forwardRef(function ListBox(props: SpectrumListBoxProps, ref: DOMRef) { let state = useListState(props); let layout = useListBoxLayout(); let domRef = useDOMRef(ref); @@ -29,14 +36,4 @@ function ListBox(props: SpectrumListBoxProps, ref: DOMRef ); -} - -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref - - -/** - * A list of options that can allow selection of one or more. - */ -const _ListBox = React.forwardRef(ListBox) as (props: SpectrumListBoxProps & {ref?: DOMRef}) => ReactElement; -export {_ListBox as ListBox}; +}) as (props: SpectrumListBoxProps & {ref?: DOMRef}) => ReactElement; diff --git a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx index 93dbbc45898..d69c8356563 100644 --- a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx +++ b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx @@ -62,8 +62,10 @@ export function useListBoxLayout(): ListBoxLayout { return layout; } +// forwardRef doesn't support generic parameters, so cast the result to the correct type +// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref /** @private */ -function ListBoxBase(props: ListBoxBaseProps, ref: ForwardedRef) { +export const ListBoxBase = React.forwardRef(function ListBoxBase(props: ListBoxBaseProps, ref: ForwardedRef) { let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props; let objectRef = useObjectRef(ref); let {listBoxProps} = useListBox({ @@ -145,12 +147,7 @@ function ListBoxBase(props: ListBoxBaseProps, ref: Forwarde ); -} - -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref -const _ListBoxBase = React.forwardRef(ListBoxBase) as (props: ListBoxBaseProps & {ref?: RefObject}) => ReactElement; -export {_ListBoxBase as ListBoxBase}; +}) as (props: ListBoxBaseProps & {ref?: RefObject}) => ReactElement; function LoadingState() { let {state} = useContext(ListBoxContext)!; diff --git a/packages/@react-spectrum/menu/src/ActionMenu.tsx b/packages/@react-spectrum/menu/src/ActionMenu.tsx index 74c3df41709..4b23d10e1f9 100644 --- a/packages/@react-spectrum/menu/src/ActionMenu.tsx +++ b/packages/@react-spectrum/menu/src/ActionMenu.tsx @@ -23,7 +23,10 @@ import {SpectrumActionMenuProps} from '@react-types/menu'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSlotProps} from '@react-spectrum/utils'; -function ActionMenu(props: SpectrumActionMenuProps, ref: FocusableRef) { +/** + * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases. + */ +export const ActionMenu = forwardRef(function ActionMenu(props: SpectrumActionMenuProps, ref: FocusableRef) { props = useSlotProps(props, 'actionMenu'); let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu'); let buttonProps = filterDOMProps(props, {labelable: true}); @@ -52,10 +55,4 @@ function ActionMenu(props: SpectrumActionMenuProps, ref: Fo onAction={props.onAction} /> ); -} - -/** - * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases. - */ -const _ActionMenu = forwardRef(ActionMenu) as (props: SpectrumActionMenuProps & {ref?: FocusableRef}) => ReactElement; -export {_ActionMenu as ActionMenu}; +}) as (props: SpectrumActionMenuProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/menu/src/Menu.tsx b/packages/@react-spectrum/menu/src/Menu.tsx index 8864f9a09c5..c1397a4eccf 100644 --- a/packages/@react-spectrum/menu/src/Menu.tsx +++ b/packages/@react-spectrum/menu/src/Menu.tsx @@ -29,7 +29,12 @@ import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMenu} from '@react-aria/menu'; import {useTreeState} from '@react-stately/tree'; -function Menu(props: SpectrumMenuProps, ref: DOMRef) { +/** + * Menus display a list of actions or options that a user can choose. + */ +// forwardRef doesn't support generic parameters, so cast the result to the correct type +// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref +export const Menu = React.forwardRef(function Menu(props: SpectrumMenuProps, ref: DOMRef) { let isSubmenu = true; let contextProps = useContext(MenuContext); let parentMenuContext = useMenuStateContext(); @@ -126,7 +131,7 @@ function Menu(props: SpectrumMenuProps, ref: DOMRef ); -} +}) as (props: SpectrumMenuProps & {ref?: DOMRef}) => ReactElement; export function TrayHeaderWrapper(props) { let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props; @@ -216,11 +221,3 @@ export function TrayHeaderWrapper(props) { ); } - -/** - * Menus display a list of actions or options that a user can choose. - */ -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref -const _Menu = React.forwardRef(Menu) as (props: SpectrumMenuProps & {ref?: DOMRef}) => ReactElement; -export {_Menu as Menu}; diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx index a80e90fcae3..cacb37f3d8b 100644 --- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx +++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx @@ -22,7 +22,11 @@ import styles from '@adobe/spectrum-css-temp/components/menu/vars.css'; import {useMenuTrigger} from '@react-aria/menu'; import {useMenuTriggerState} from '@react-stately/menu'; -function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef) { +/** + * The MenuTrigger serves as a wrapper around a Menu and its associated trigger, + * linking the Menu's open state with the trigger's press state. + */ +export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef) { let triggerRef = useRef(null); let domRef = useDOMRef(ref); let menuTriggerRef = domRef || triggerRef; @@ -105,11 +109,4 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef) ); -} - -/** - * The MenuTrigger serves as a wrapper around a Menu and its associated trigger, - * linking the Menu's open state with the trigger's press state. - */ -let _MenuTrigger = forwardRef(MenuTrigger); -export {_MenuTrigger as MenuTrigger}; +}); diff --git a/packages/@react-spectrum/meter/src/Meter.tsx b/packages/@react-spectrum/meter/src/Meter.tsx index 8099019abfb..5943fd3fcf2 100644 --- a/packages/@react-spectrum/meter/src/Meter.tsx +++ b/packages/@react-spectrum/meter/src/Meter.tsx @@ -18,7 +18,11 @@ import {SpectrumMeterProps} from '@react-types/meter'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; import {useMeter} from '@react-aria/meter'; -function Meter(props: SpectrumMeterProps, ref: DOMRef) { +/** + * Meters are visual representations of a quantity or an achievement. + * Their progress is determined by user actions, rather than system actions. + */ +export const Meter = React.forwardRef(function Meter(props: SpectrumMeterProps, ref: DOMRef) { let {variant = 'informative', ...otherProps} = props; const { meterProps, @@ -42,11 +46,4 @@ function Meter(props: SpectrumMeterProps, ref: DOMRef) { ) } /> ); -} - -/** - * Meters are visual representations of a quantity or an achievement. - * Their progress is determined by user actions, rather than system actions. - */ -let _Meter = React.forwardRef(Meter); -export {_Meter as Meter}; +}); diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx index 9fc44a1e256..8cc36864594 100644 --- a/packages/@react-spectrum/numberfield/src/NumberField.tsx +++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx @@ -28,7 +28,10 @@ import {useLocale} from '@react-aria/i18n'; import {useNumberField} from '@react-aria/numberfield'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; -function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef) { +/** + * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons. + */ +export const NumberField = React.forwardRef(function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef) { props = useProviderProps(props); props = useFormProps(props); let provider = useProvider(); @@ -110,7 +113,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef ); -} +}); interface NumberFieldInputProps extends SpectrumNumberFieldProps { @@ -191,9 +194,3 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe ); }); - -/** - * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons. - */ -let _NumberField = React.forwardRef(NumberField); -export {_NumberField as NumberField}; diff --git a/packages/@react-spectrum/numberfield/src/StepButton.tsx b/packages/@react-spectrum/numberfield/src/StepButton.tsx index 609fbc605dc..fe48c536ce5 100644 --- a/packages/@react-spectrum/numberfield/src/StepButton.tsx +++ b/packages/@react-spectrum/numberfield/src/StepButton.tsx @@ -30,7 +30,10 @@ interface StepButtonProps extends AriaButtonProps { direction: 'up' | 'down' } -function StepButton(props: StepButtonProps, ref: FocusableRef) { +/** + * Buttons for NumberField. + */ +export const StepButton = React.forwardRef(function StepButton(props: StepButtonProps, ref: FocusableRef) { props = useProviderProps(props); let {scale} = useProvider(); let {direction, isDisabled, isQuiet} = props; @@ -75,10 +78,4 @@ function StepButton(props: StepButtonProps, ref: FocusableRef) { ); -} - -/** - * Buttons for NumberField. - */ -let _StepButton = React.forwardRef(StepButton) as (props: StepButtonProps & {ref?: FocusableRef}) => ReactElement; -export {_StepButton as StepButton}; +}) as (props: StepButtonProps & {ref?: FocusableRef}) => ReactElement; diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index fe3a3abde21..6a8e34450c4 100644 --- a/packages/@react-spectrum/overlays/src/Modal.tsx +++ b/packages/@react-spectrum/overlays/src/Modal.tsx @@ -34,7 +34,7 @@ interface ModalWrapperProps extends ModalProps { children: ReactNode } -function Modal(props: ModalProps, ref: DOMRef) { +export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef) { let {children, state, ...otherProps} = props; let domRef = useDOMRef(ref); let wrapperRef = useRef(null); @@ -46,7 +46,7 @@ function Modal(props: ModalProps, ref: DOMRef) { ); -} +}); let typeMap = { fullscreen: 'fullscreen', @@ -107,6 +107,3 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: Forwarded ); }); - -let _Modal = forwardRef(Modal); -export {_Modal as Modal}; diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx index d998bd633f6..e999fa5a546 100644 --- a/packages/@react-spectrum/overlays/src/Overlay.tsx +++ b/packages/@react-spectrum/overlays/src/Overlay.tsx @@ -17,7 +17,7 @@ import {Provider} from '@react-spectrum/provider'; import React, {useCallback, useState} from 'react'; import {Overlay as ReactAriaOverlay} from '@react-aria/overlays'; -function Overlay(props: OverlayProps, ref: DOMRef) { +export const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef) { let { children, isOpen, @@ -73,7 +73,4 @@ function Overlay(props: OverlayProps, ref: DOMRef) { ); -} - -let _Overlay = React.forwardRef(Overlay); -export {_Overlay as Overlay}; +}); diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx index 59d16f4ac5b..de4b7064334 100644 --- a/packages/@react-spectrum/overlays/src/Popover.tsx +++ b/packages/@react-spectrum/overlays/src/Popover.tsx @@ -67,7 +67,7 @@ let arrowPlacement = { bottom: 'bottom' }; -function Popover(props: PopoverProps, ref: DOMRef) { +export const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef) { let { children, state, @@ -83,7 +83,7 @@ function Popover(props: PopoverProps, ref: DOMRef) { ); -} +}); const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef) => { let { @@ -238,9 +238,6 @@ function Arrow(props: ArrowProps) { ); } -let _Popover = forwardRef(Popover); -export {_Popover as Popover}; - /** * More explanation on popover tips. * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid. diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx index ed58af05b04..28f70d2c313 100644 --- a/packages/@react-spectrum/overlays/src/Tray.tsx +++ b/packages/@react-spectrum/overlays/src/Tray.tsx @@ -33,7 +33,7 @@ interface TrayWrapperProps extends TrayProps { wrapperRef: RefObject } -function Tray(props: TrayProps, ref: DOMRef) { +export const Tray = forwardRef(function Tray(props: TrayProps, ref: DOMRef) { let {children, state, ...otherProps} = props; let domRef = useDOMRef(ref); let wrapperRef = useRef(null); @@ -45,7 +45,7 @@ function Tray(props: TrayProps, ref: DOMRef) { ); -} +}); let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRef) { let { @@ -114,6 +114,3 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRe ); }); - -let _Tray = forwardRef(Tray); -export {_Tray as Tray}; diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx index 06bbd50cc14..67fca8f89c1 100644 --- a/packages/@react-spectrum/picker/src/Picker.tsx +++ b/packages/@react-spectrum/picker/src/Picker.tsx @@ -41,7 +41,12 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; import {useSelectState} from '@react-stately/select'; -function Picker(props: SpectrumPickerProps, ref: DOMRef) { +/** + * Pickers allow users to choose a single option from a collapsible list of options when space is limited. + */ +// forwardRef doesn't support generic parameters, so cast the result to the correct type +// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref +export const Picker = React.forwardRef(function Picker(props: SpectrumPickerProps, ref: DOMRef) { props = useSlotProps(props, 'picker'); props = useProviderProps(props); props = useFormProps(props); @@ -251,12 +256,4 @@ function Picker(props: SpectrumPickerProps, ref: DOMRef ); -} - -/** - * Pickers allow users to choose a single option from a collapsible list of options when space is limited. - */ -// forwardRef doesn't support generic parameters, so cast the result to the correct type -// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref -const _Picker = React.forwardRef(Picker) as (props: SpectrumPickerProps & {ref?: DOMRef}) => ReactElement; -export {_Picker as Picker}; +}) as (props: SpectrumPickerProps & {ref?: DOMRef}) => ReactElement; diff --git a/packages/@react-spectrum/progress/src/ProgressBar.tsx b/packages/@react-spectrum/progress/src/ProgressBar.tsx index 85e8fa96afb..65146a01ea1 100644 --- a/packages/@react-spectrum/progress/src/ProgressBar.tsx +++ b/packages/@react-spectrum/progress/src/ProgressBar.tsx @@ -18,7 +18,11 @@ import {SpectrumProgressBarProps} from '@react-types/progress'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; import {useProgressBar} from '@react-aria/progress'; -function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef) { +/** + * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. + * They can represent either determinate or indeterminate progress. + */ +export const ProgressBar = React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef) { let {staticColor, variant, ...otherProps} = props; const { progressBarProps, @@ -42,11 +46,4 @@ function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef ); -} - -/** - * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. - * They can represent either determinate or indeterminate progress. - */ -let _ProgressBar = React.forwardRef(ProgressBar); -export {_ProgressBar as ProgressBar}; +}); diff --git a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx index 22749154c9f..e343c6d1545 100644 --- a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx +++ b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx @@ -24,7 +24,7 @@ interface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBar } // Base ProgressBar component shared with Meter. -function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef) { +export const ProgressBarBase = React.forwardRef(function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef) { let { value = 0, minValue = 0, @@ -96,7 +96,4 @@ function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef ); -} - -let _ProgressBarBase = React.forwardRef(ProgressBarBase); -export {_ProgressBarBase as ProgressBarBase}; +}); diff --git a/packages/@react-spectrum/progress/src/ProgressCircle.tsx b/packages/@react-spectrum/progress/src/ProgressCircle.tsx index 313cf032914..be2044f3115 100644 --- a/packages/@react-spectrum/progress/src/ProgressCircle.tsx +++ b/packages/@react-spectrum/progress/src/ProgressCircle.tsx @@ -19,7 +19,11 @@ import styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css'; import {useProgressBar} from '@react-aria/progress'; -function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef) { +/** + * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. + * They can represent determinate or indeterminate progress. + */ +export const ProgressCircle = React.forwardRef(function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef) { let { value = 0, minValue = 0, @@ -99,11 +103,4 @@ function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef ); -} - -/** - * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. - * They can represent determinate or indeterminate progress. - */ -let _ProgressCircle = React.forwardRef(ProgressCircle); -export {_ProgressCircle as ProgressCircle}; +}); diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/packages/@react-spectrum/provider/src/Provider.tsx index ca9c4a963f9..a88b8cc7ea1 100644 --- a/packages/@react-spectrum/provider/src/Provider.tsx +++ b/packages/@react-spectrum/provider/src/Provider.tsx @@ -33,7 +33,12 @@ import {version} from '../package.json'; const DEFAULT_BREAKPOINTS = {S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536}; -function Provider(props: ProviderProps, ref: DOMRef) { +/** + * Provider is the container for all React Spectrum applications. + * It defines the theme, locale, and other application level settings, + * and can also be used to provide common properties to a group of components. + */ +export const Provider = React.forwardRef(function Provider(props: ProviderProps, ref: DOMRef) { let prevContext = useContext(Context); let prevColorScheme = prevContext && prevContext.colorScheme; let prevBreakpoints = prevContext && prevContext.breakpoints; @@ -117,15 +122,7 @@ function Provider(props: ProviderProps, ref: DOMRef) { ); -} - -/** - * Provider is the container for all React Spectrum applications. - * It defines the theme, locale, and other application level settings, - * and can also be used to provide common properties to a group of components. - */ -let _Provider = React.forwardRef(Provider); -export {_Provider as Provider}; +}); const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: ProviderProps, ref: DOMRef) { let { diff --git a/packages/@react-spectrum/radio/src/Radio.tsx b/packages/@react-spectrum/radio/src/Radio.tsx index b11e259587f..a0d586fb4cd 100644 --- a/packages/@react-spectrum/radio/src/Radio.tsx +++ b/packages/@react-spectrum/radio/src/Radio.tsx @@ -20,7 +20,11 @@ import {useHover} from '@react-aria/interactions'; import {useRadio} from '@react-aria/radio'; import {useRadioProvider} from './context'; -function Radio(props: SpectrumRadioProps, ref: FocusableRef) { +/** + * Radio buttons allow users to select a single option from a list of mutually exclusive options. + * All possible options are exposed up front for users to compare. + */ +export const Radio = forwardRef(function Radio(props: SpectrumRadioProps, ref: FocusableRef) { let { isDisabled, children, @@ -79,11 +83,4 @@ function Radio(props: SpectrumRadioProps, ref: FocusableRef) { )} ); -} - -/** - * Radio buttons allow users to select a single option from a list of mutually exclusive options. - * All possible options are exposed up front for users to compare. - */ -const _Radio = forwardRef(Radio); -export {_Radio as Radio}; +}); diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx index 9e274cf8d23..33c0fcfda37 100644 --- a/packages/@react-spectrum/radio/src/RadioGroup.tsx +++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx @@ -22,7 +22,11 @@ import {useProviderProps} from '@react-spectrum/provider'; import {useRadioGroup} from '@react-aria/radio'; import {useRadioGroupState} from '@react-stately/radio'; -function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef) { +/** + * Radio groups allow users to select a single option from a list of mutually exclusive options. + * All possible options are exposed up front for users to compare. + */ +export const RadioGroup = React.forwardRef(function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef) { props = useProviderProps(props); props = useFormProps(props); let { @@ -63,11 +67,4 @@ function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef) { ); -} - -/** - * Radio groups allow users to select a single option from a list of mutually exclusive options. - * All possible options are exposed up front for users to compare. - */ -const _RadioGroup = React.forwardRef(RadioGroup); -export {_RadioGroup as RadioGroup}; +}); diff --git a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx index a7344615a02..4eb0b2d6f7a 100644 --- a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx @@ -73,39 +73,6 @@ ContextualHelpExample.args = { ) }; -ContextualHelpExample.parameters = { - docs: { - source: { - transform: () => { - return ` - - - What is a segment? - - - - Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more. - - -
- - Learn more about segments - -
- - } - label="Segment" -/>`; - } - } - } -}; - export const TextAreaExample = (args: any) =>