From 02c23a00b470a297b852370b4a9f896d912350b7 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:00:59 -0500 Subject: [PATCH 01/56] ActionBar --- .../@react-spectrum/actionbar/package.json | 1 - .../actionbar/src/ActionBar.tsx | 32 ++++++++++++++-- .../actionbar/src/ActionBarContainer.tsx | 12 ++++-- .../@react-spectrum/actionbar/src/index.ts | 4 +- packages/@react-types/actionbar/package.json | 2 +- .../@react-types/actionbar/src/index.d.ts | 37 +------------------ 6 files changed, 42 insertions(+), 46 deletions(-) diff --git a/packages/@react-spectrum/actionbar/package.json b/packages/@react-spectrum/actionbar/package.json index 79d301db38d..8ad216768b0 100644 --- a/packages/@react-spectrum/actionbar/package.json +++ b/packages/@react-spectrum/actionbar/package.json @@ -51,7 +51,6 @@ "@react-spectrum/text": "^3.5.23", "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", - "@react-types/actionbar": "^3.1.19", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx index 0cb940c29b7..f1ad65bbb7a 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx @@ -15,20 +15,46 @@ import {ActionGroup} from '@react-spectrum/actiongroup'; import {announce} from '@react-aria/live-announcer'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import CrossLarge from '@spectrum-icons/ui/CrossLarge'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, ItemElement, ItemRenderer, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; import {OpenTransition} from '@react-spectrum/overlays'; -import React, {ReactElement, Ref, useEffect, useRef, useState} from 'react'; -import {SpectrumActionBarProps} from '@react-types/actionbar'; +import React, {Key, ReactElement, Ref, useEffect, useRef, useState} from 'react'; import styles from './actionbar.css'; import {Text} from '@react-spectrum/text'; import {useKeyboard} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +interface ActionBarProps { + /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ + children: ItemElement | ItemElement[] | ItemRenderer, + /** A list of items to display as children. Must be used with a function as the sole child. */ + items?: Iterable, + /** A list of keys to disable. */ + disabledKeys?: Iterable, + /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */ + selectedItemCount: number | 'all', + /** Handler that is called when the ActionBar clear button is pressed. */ + onClearSelection: () => void, + /** Whether the ActionBar should be displayed with a emphasized style. */ + isEmphasized?: boolean, + /** Handler that is called when an ActionBar button is pressed. */ + onAction?: (key: Key) => void, + /** + * Defines when the text within the buttons should be hidden and only the icon should be shown. + * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible + * if space is available, and hidden when space is limited. The text is always visible when the item + * is collapsed into a menu. + * @default 'collapse' + */ + buttonLabelBehavior?: 'show' | 'collapse' | 'hide' +} + +export interface SpectrumActionBarProps extends ActionBarProps, DOMProps, StyleProps {} + /** * 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. */ diff --git a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx index ed74c03c882..464a0e91ba4 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx @@ -11,13 +11,19 @@ */ import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React from 'react'; -import {SpectrumActionBarContainerProps} from '@react-types/actionbar'; +import React, {ReactNode} from 'react'; import styles from './actionbar.css'; import {useProviderProps} from '@react-spectrum/provider'; +interface ActionBarContainerProps { + /** The contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with. */ + children: ReactNode +} + +export interface SpectrumActionBarContainerProps extends ActionBarContainerProps, DOMProps, StyleProps {} + /** * ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles * the ActionBar's position with respect to its linked component. diff --git a/packages/@react-spectrum/actionbar/src/index.ts b/packages/@react-spectrum/actionbar/src/index.ts index b07d20e23c2..3bd8a4dccdc 100644 --- a/packages/@react-spectrum/actionbar/src/index.ts +++ b/packages/@react-spectrum/actionbar/src/index.ts @@ -13,5 +13,5 @@ export {ActionBar} from './ActionBar'; export {ActionBarContainer} from './ActionBarContainer'; export {Item} from '@react-stately/collections'; -export type {SpectrumActionBarContainerProps} from '@react-types/actionbar'; -export type {SpectrumActionBarProps} from '@react-types/actionbar'; +export type {SpectrumActionBarContainerProps} from './ActionBarContainer'; +export type {SpectrumActionBarProps} from './ActionBar'; diff --git a/packages/@react-types/actionbar/package.json b/packages/@react-types/actionbar/package.json index e61df1a40f1..4cb504d0b44 100644 --- a/packages/@react-types/actionbar/package.json +++ b/packages/@react-types/actionbar/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/actionbar": "^3.6.15" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/actionbar/src/index.d.ts b/packages/@react-types/actionbar/src/index.d.ts index 2bf07bbb32a..7d1c24040fa 100644 --- a/packages/@react-types/actionbar/src/index.d.ts +++ b/packages/@react-types/actionbar/src/index.d.ts @@ -10,39 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, ItemElement, ItemRenderer, Key, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface ActionBarProps { - /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ - children: ItemElement | ItemElement[] | ItemRenderer, - /** A list of items to display as children. Must be used with a function as the sole child. */ - items?: Iterable, - /** A list of keys to disable. */ - disabledKeys?: Iterable, - /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */ - selectedItemCount: number | 'all', - /** Handler that is called when the ActionBar clear button is pressed. */ - onClearSelection: () => void, - /** Whether the ActionBar should be displayed with a emphasized style. */ - isEmphasized?: boolean, - /** Handler that is called when an ActionBar button is pressed. */ - onAction?: (key: Key) => void, - /** - * Defines when the text within the buttons should be hidden and only the icon should be shown. - * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible - * if space is available, and hidden when space is limited. The text is always visible when the item - * is collapsed into a menu. - * @default 'collapse' - */ - buttonLabelBehavior?: 'show' | 'collapse' | 'hide' -} - -export interface SpectrumActionBarProps extends ActionBarProps, DOMProps, StyleProps {} - -interface ActionBarContainerProps { - /** The contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with. */ - children: ReactNode -} - -export interface SpectrumActionBarContainerProps extends ActionBarContainerProps, DOMProps, StyleProps {} +export {SpectrumActionBarProps as ActionBarProps, SpectrumActionBarProps, SpectrumActionBarContainerProps} from '@react-spectrum/actionbar'; From a67ee9f18cc1ae6f19a54a72e64cf7158560a233 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:09:12 -0500 Subject: [PATCH 02/56] ActionGroup --- packages/@react-aria/actiongroup/package.json | 1 - packages/@react-aria/actiongroup/src/index.ts | 3 +- .../actiongroup/src/useActionGroup.ts | 30 ++++++++- .../@react-spectrum/actiongroup/package.json | 1 - .../actiongroup/src/ActionGroup.tsx | 35 +++++++++- .../@react-spectrum/actiongroup/src/index.ts | 2 +- .../@react-types/actiongroup/package.json | 3 +- .../@react-types/actiongroup/src/index.d.ts | 64 +------------------ 8 files changed, 67 insertions(+), 72 deletions(-) diff --git a/packages/@react-aria/actiongroup/package.json b/packages/@react-aria/actiongroup/package.json index 236eaf7c109..f3841a94461 100644 --- a/packages/@react-aria/actiongroup/package.json +++ b/packages/@react-aria/actiongroup/package.json @@ -31,7 +31,6 @@ "@react-aria/interactions": "^3.26.0", "@react-aria/utils": "^3.32.0", "@react-stately/list": "^3.13.2", - "@react-types/actiongroup": "^3.4.21", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/actiongroup/src/index.ts b/packages/@react-aria/actiongroup/src/index.ts index 5a0f49a27e8..92fe1b7f2d5 100644 --- a/packages/@react-aria/actiongroup/src/index.ts +++ b/packages/@react-aria/actiongroup/src/index.ts @@ -9,8 +9,7 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -export type {ActionGroupAria} from './useActionGroup'; +export type {ActionGroupProps, AriaActionGroupProps, ActionGroupAria} from './useActionGroup'; export {useActionGroup} from './useActionGroup'; export {useActionGroupItem} from './useActionGroupItem'; -export type {AriaActionGroupProps} from '@react-types/actiongroup'; export type {ActionGroupItemAria, AriaActionGroupItemProps} from './useActionGroupItem'; diff --git a/packages/@react-aria/actiongroup/src/useActionGroup.ts b/packages/@react-aria/actiongroup/src/useActionGroup.ts index 336e32ac79d..b72b4ecb884 100644 --- a/packages/@react-aria/actiongroup/src/useActionGroup.ts +++ b/packages/@react-aria/actiongroup/src/useActionGroup.ts @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaActionGroupProps} from '@react-types/actiongroup'; +import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement, ItemElement, ItemRenderer, Key, MultipleSelection, Orientation, RefObject} from '@react-types/shared'; import {createFocusManager} from '@react-aria/focus'; -import {DOMAttributes, FocusableElement, Orientation, RefObject} from '@react-types/shared'; import {filterDOMProps, useLayoutEffect} from '@react-aria/utils'; import {ListState} from '@react-stately/list'; import {useLocale} from '@react-aria/i18n'; @@ -24,6 +23,33 @@ const BUTTON_GROUP_ROLES = { 'multiple': 'toolbar' }; +// Not extending CollectionBase to avoid async loading props +export interface ActionGroupProps extends MultipleSelection { + /** + * The axis the ActionGroup should align with. + * @default 'horizontal' + */ + orientation?: Orientation, + /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ + children: ItemElement | ItemElement[] | ItemRenderer, + /** A list of items to display as children. Must be used with a function as the sole child. */ + items?: Iterable, + /** A list of keys to disable. */ + disabledKeys?: Iterable, + /** + * Whether the ActionGroup is disabled. + * Shows that a selection exists, but is not available in that circumstance. + */ + isDisabled?: boolean, + /** + * Invoked when an action is taken on a child. Especially useful when `selectionMode` is none. + * The sole argument `key` is the key for the item. + */ + onAction?: (key: Key) => void +} + +export interface AriaActionGroupProps extends ActionGroupProps, DOMProps, AriaLabelingProps {} + export interface ActionGroupAria { actionGroupProps: DOMAttributes } diff --git a/packages/@react-spectrum/actiongroup/package.json b/packages/@react-spectrum/actiongroup/package.json index 400ff9f6e2e..a0d089e69ed 100644 --- a/packages/@react-spectrum/actiongroup/package.json +++ b/packages/@react-spectrum/actiongroup/package.json @@ -52,7 +52,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", "@react-stately/list": "^3.13.2", - "@react-types/actiongroup": "^3.4.21", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@spectrum-icons/workflow": "^4.2.26", diff --git a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx index 865a651eaba..a1bafb058e8 100644 --- a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx +++ b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx @@ -32,13 +32,44 @@ import More from '@spectrum-icons/workflow/More'; import {PressResponder, useHover} from '@react-aria/interactions'; import {Provider, useProviderProps} from '@react-spectrum/provider'; import React, {forwardRef, ReactElement, ReactNode, useCallback, useMemo, useRef, useState} from 'react'; -import {SpectrumActionGroupProps} from '@react-types/actiongroup'; import styles from '@adobe/spectrum-css-temp/components/actiongroup/vars.css'; import {Text} from '@react-spectrum/text'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; -import {useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; +import {AriaActionGroupProps, useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumActionGroupProps extends AriaActionGroupProps, StyleProps { + /** Whether the ActionButtons should be displayed with a [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ + isEmphasized?: boolean, + /** + * Sets the amount of space between buttons. + * @default 'regular' + */ + density?: 'compact' | 'regular', + /** Whether the ActionButtons should be justified in their container. */ + isJustified?: boolean, + /** Whether ActionButtons should use the [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + isQuiet?: boolean, + /** The static color style to apply. Useful when the ActionGroup appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * Defines the behavior of the ActionGroup when the buttons do not fit in the available space. + * When set to 'wrap', the items wrap to form a new line. When set to 'collapse', the items that + * do not fit are collapsed into a dropdown menu. + * @default 'wrap' + */ + overflowMode?: 'wrap' | 'collapse', + /** + * Defines when the text within the buttons should be hidden and only the icon should be shown. + * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible + * if space is available, and hidden when space is limited. The text is always visible when the item + * is collapsed into a menu. + * @default 'show' + */ + buttonLabelBehavior?: 'show' | 'collapse' | 'hide', + /** The icon displayed in the dropdown menu button when a selectable ActionGroup is collapsed. */ + summaryIcon?: ReactElement +} /** * An ActionGroup is a grouping of ActionButtons that are related to one another. diff --git a/packages/@react-spectrum/actiongroup/src/index.ts b/packages/@react-spectrum/actiongroup/src/index.ts index a72ca7baf34..598caab70e5 100644 --- a/packages/@react-spectrum/actiongroup/src/index.ts +++ b/packages/@react-spectrum/actiongroup/src/index.ts @@ -12,4 +12,4 @@ /// export {ActionGroup} from './ActionGroup'; export {Item} from '@react-stately/collections'; -export type {SpectrumActionGroupProps} from '@react-types/actiongroup'; +export type {SpectrumActionGroupProps} from './ActionGroup'; diff --git a/packages/@react-types/actiongroup/package.json b/packages/@react-types/actiongroup/package.json index f4ffa5e9e7c..a346d4226e4 100644 --- a/packages/@react-types/actiongroup/package.json +++ b/packages/@react-types/actiongroup/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/actiongroup": "^3.7.22", + "@react-spectrum/actiongroup": "^3.11.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/actiongroup/src/index.d.ts b/packages/@react-types/actiongroup/src/index.d.ts index 92ed5217fb2..f74b7852d41 100644 --- a/packages/@react-types/actiongroup/src/index.d.ts +++ b/packages/@react-types/actiongroup/src/index.d.ts @@ -10,65 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, ItemElement, ItemRenderer, Key, MultipleSelection, Orientation, StyleProps} from '@react-types/shared'; -import {ReactElement} from 'react'; - -// Not extending CollectionBase to avoid async loading props -export interface ActionGroupProps extends MultipleSelection { - /** - * The axis the ActionGroup should align with. - * @default 'horizontal' - */ - orientation?: Orientation, - /** An list of `Item` elements or a function. If the latter, a list of items must be provided using the `items` prop. */ - children: ItemElement | ItemElement[] | ItemRenderer, - /** A list of items to display as children. Must be used with a function as the sole child. */ - items?: Iterable, - /** A list of keys to disable. */ - disabledKeys?: Iterable, - /** - * Whether the ActionGroup is disabled. - * Shows that a selection exists, but is not available in that circumstance. - */ - isDisabled?: boolean, - /** - * Invoked when an action is taken on a child. Especially useful when `selectionMode` is none. - * The sole argument `key` is the key for the item. - */ - onAction?: (key: Key) => void -} - -export interface AriaActionGroupProps extends ActionGroupProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumActionGroupProps extends AriaActionGroupProps, StyleProps { - /** Whether the ActionButtons should be displayed with a [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ - isEmphasized?: boolean, - /** - * Sets the amount of space between buttons. - * @default 'regular' - */ - density?: 'compact' | 'regular', - /** Whether the ActionButtons should be justified in their container. */ - isJustified?: boolean, - /** Whether ActionButtons should use the [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ - isQuiet?: boolean, - /** The static color style to apply. Useful when the ActionGroup appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * Defines the behavior of the ActionGroup when the buttons do not fit in the available space. - * When set to 'wrap', the items wrap to form a new line. When set to 'collapse', the items that - * do not fit are collapsed into a dropdown menu. - * @default 'wrap' - */ - overflowMode?: 'wrap' | 'collapse', - /** - * Defines when the text within the buttons should be hidden and only the icon should be shown. - * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible - * if space is available, and hidden when space is limited. The text is always visible when the item - * is collapsed into a menu. - * @default 'show' - */ - buttonLabelBehavior?: 'show' | 'collapse' | 'hide', - /** The icon displayed in the dropdown menu button when a selectable ActionGroup is collapsed. */ - summaryIcon?: ReactElement -} +export {ActionGroupProps, AriaActionGroupProps} from '@react-aria/actiongroup'; +export {SpectrumActionGroupProps} from '@react-spectrum/actiongroup'; From 0b7ddc6e1e2946b23402f8e681b5096d4c94940f Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:18:55 -0500 Subject: [PATCH 03/56] TextField --- packages/@react-aria/textfield/package.json | 1 - packages/@react-aria/textfield/src/index.ts | 2 +- .../textfield/src/useFormattedTextField.ts | 3 +- .../@react-aria/textfield/src/useTextField.ts | 38 ++++++++++++- .../textfield/src/TextArea.tsx | 9 ++- .../textfield/src/TextField.tsx | 13 ++++- .../textfield/src/TextFieldBase.tsx | 9 ++- .../@react-spectrum/textfield/src/index.ts | 3 +- packages/@react-types/textfield/package.json | 3 +- .../@react-types/textfield/src/index.d.ts | 57 +------------------ 10 files changed, 68 insertions(+), 70 deletions(-) diff --git a/packages/@react-aria/textfield/package.json b/packages/@react-aria/textfield/package.json index 974f34d5c34..44edfee7615 100644 --- a/packages/@react-aria/textfield/package.json +++ b/packages/@react-aria/textfield/package.json @@ -33,7 +33,6 @@ "@react-stately/form": "^3.2.2", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.32.1", - "@react-types/textfield": "^3.12.6", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/textfield/src/index.ts b/packages/@react-aria/textfield/src/index.ts index 17f0fc3ef7b..9d72097722b 100644 --- a/packages/@react-aria/textfield/src/index.ts +++ b/packages/@react-aria/textfield/src/index.ts @@ -13,4 +13,4 @@ export type {TextFieldAria} from './useTextField'; export {useTextField} from './useTextField'; export {useFormattedTextField} from './useFormattedTextField'; export type {AriaTextFieldOptions} from './useTextField'; -export type {AriaTextFieldProps} from '@react-types/textfield'; +export type {TextFieldProps, AriaTextFieldProps} from './useTextField'; diff --git a/packages/@react-aria/textfield/src/useFormattedTextField.ts b/packages/@react-aria/textfield/src/useFormattedTextField.ts index e0d866fd016..d2bcced8402 100644 --- a/packages/@react-aria/textfield/src/useFormattedTextField.ts +++ b/packages/@react-aria/textfield/src/useFormattedTextField.ts @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaTextFieldProps} from '@react-types/textfield'; +import {AriaTextFieldProps, TextFieldAria, useTextField} from './useTextField'; import {mergeProps, useEffectEvent} from '@react-aria/utils'; import {RefObject} from '@react-types/shared'; -import {TextFieldAria, useTextField} from './useTextField'; import {useEffect, useRef} from 'react'; interface FormattedTextFieldState { diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts index 18f2942a90c..fd5d0e39e2e 100644 --- a/packages/@react-aria/textfield/src/useTextField.ts +++ b/packages/@react-aria/textfield/src/useTextField.ts @@ -10,8 +10,21 @@ * governing permissions and limitations under the License. */ -import {AriaTextFieldProps} from '@react-types/textfield'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import { + AriaLabelingProps, + AriaValidationProps, + DOMAttributes, + FocusableDOMProps, + FocusableProps, + HelpTextProps, + InputBase, + LabelableProps, + TextInputBase, + TextInputDOMProps, + Validation, + ValidationResult, + ValueBase +} from '@react-types/shared'; import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils'; import React, { ChangeEvent, @@ -69,6 +82,27 @@ type TextFieldHTMLAttributesType = Pick = TextFieldHTMLAttributesType[T]; +export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase, LabelableProps {} + +export interface AriaTextFieldProps extends TextFieldProps, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps, AriaValidationProps { + // https://www.w3.org/TR/wai-aria-1.2/#textbox + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string, + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both', + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog', + /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ + 'aria-controls'?: string, + /** + * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). + */ + enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' +} + export interface AriaTextFieldOptions extends AriaTextFieldProps { /** * The HTML element used to render the input, e.g. 'input', or 'textarea'. diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx index 2424823560b..3fc9b3190b3 100644 --- a/packages/@react-spectrum/textfield/src/TextArea.tsx +++ b/packages/@react-spectrum/textfield/src/TextArea.tsx @@ -10,14 +10,17 @@ * governing permissions and limitations under the License. */ +import {AriaTextFieldProps, useTextField} from '@react-aria/textfield'; import {chain, useLayoutEffect} from '@react-aria/utils'; import React, {Ref, useCallback, useEffect, useRef} from 'react'; -import {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield'; -import {TextFieldBase} from './TextFieldBase'; +import {SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; +import {SpectrumTextFieldBaseProps, TextFieldBase} from './TextFieldBase'; +import {TextFieldRef} from './TextField'; import {useControlledState} from '@react-stately/utils'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useTextField} from '@react-aria/textfield'; + +export interface SpectrumTextAreaProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, 'isInvalid' | 'validationState' | 'type' | 'pattern'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} /** * TextAreas are multiline text inputs, useful for cases where users have diff --git a/packages/@react-spectrum/textfield/src/TextField.tsx b/packages/@react-spectrum/textfield/src/TextField.tsx index 4381c066d60..9ddad61eddd 100644 --- a/packages/@react-spectrum/textfield/src/TextField.tsx +++ b/packages/@react-spectrum/textfield/src/TextField.tsx @@ -10,12 +10,19 @@ * governing permissions and limitations under the License. */ +import {AriaTextFieldProps, useTextField} from '@react-aria/textfield'; +import {FocusableRefValue, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import React, {forwardRef, Ref, useEffect, useRef} from 'react'; -import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield'; -import {TextFieldBase} from './TextFieldBase'; +import {SpectrumTextFieldBaseProps, TextFieldBase} from './TextFieldBase'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useTextField} from '@react-aria/textfield'; + +export interface SpectrumTextFieldProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} + +export interface TextFieldRef extends FocusableRefValue { + select(): void, + getInputElement(): T | null +} /** * TextFields are text inputs that allow users to input custom text entries diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx index b73670171e6..e1ffb82c4e0 100644 --- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx +++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx @@ -19,12 +19,19 @@ import intlMessages from '../intl/*.json'; import {mergeProps, useId} from '@react-aria/utils'; import {PressEvents, RefObject, ValidationResult} from '@react-types/shared'; import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react'; -import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield'; +import {SpectrumTextFieldProps, TextFieldRef} from './TextField'; import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {useFocusRing} from '@react-aria/focus'; import {useHover} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumTextFieldBaseProps { + /** An icon to display at the start of the input. */ + icon?: ReactElement | null, + /** Whether the input should be displayed with a quiet style. */ + isQuiet?: boolean +} + interface TextFieldBaseProps extends Omit, PressEvents, Partial { wrapperChildren?: ReactElement | ReactElement[], inputClassName?: string, diff --git a/packages/@react-spectrum/textfield/src/index.ts b/packages/@react-spectrum/textfield/src/index.ts index ecc2628bbd7..2b02d14af8c 100644 --- a/packages/@react-spectrum/textfield/src/index.ts +++ b/packages/@react-spectrum/textfield/src/index.ts @@ -15,4 +15,5 @@ export {TextArea} from './TextArea'; export {TextField} from './TextField'; export {TextFieldBase} from './TextFieldBase'; -export type {SpectrumTextFieldProps, SpectrumTextAreaProps} from '@react-types/textfield'; +export type {SpectrumTextFieldProps, TextFieldRef} from './TextField'; +export type {SpectrumTextAreaProps} from './TextArea'; diff --git a/packages/@react-types/textfield/package.json b/packages/@react-types/textfield/package.json index 00c176690ce..96f0a84ab7c 100644 --- a/packages/@react-types/textfield/package.json +++ b/packages/@react-types/textfield/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/textfield": "^3.18.3", + "@react-spectrum/textfield": "^3.14.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/textfield/src/index.d.ts b/packages/@react-types/textfield/src/index.d.ts index 596ee252182..d72c8bd61d8 100644 --- a/packages/@react-types/textfield/src/index.d.ts +++ b/packages/@react-types/textfield/src/index.d.ts @@ -10,58 +10,5 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - FocusableDOMProps, - FocusableProps, - FocusableRefValue, - HelpTextProps, - InputBase, - LabelableProps, - SpectrumFieldValidation, - SpectrumLabelableProps, - SpectrumTextInputBase, - StyleProps, - TextInputBase, - TextInputDOMProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactElement} from 'react'; - -export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase, LabelableProps {} - -export interface AriaTextFieldProps extends TextFieldProps, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps, AriaValidationProps { - // https://www.w3.org/TR/wai-aria-1.2/#textbox - /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ - 'aria-activedescendant'?: string, - /** - * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be - * presented if they are made. - */ - 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both', - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog', - /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ - 'aria-controls'?: string, - /** - * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). - */ - enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' -} - -interface SpectrumTextFieldBaseProps { - /** An icon to display at the start of the input. */ - icon?: ReactElement | null, - /** Whether the input should be displayed with a quiet style. */ - isQuiet?: boolean -} - -export interface SpectrumTextFieldProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} -export interface SpectrumTextAreaProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, 'isInvalid' | 'validationState' | 'type' | 'pattern'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} - -export interface TextFieldRef extends FocusableRefValue { - select(): void, - getInputElement(): T | null -} +export {TextFieldProps, AriaTextFieldProps} from '@react-aria/textfield'; +export {SpectrumTextFieldProps, SpectrumTextAreaProps, TextFieldRef} from '@react-spectrum/textfield'; From 9d45d6b4034154515a81231e29abdc71eb660403 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:26:25 -0500 Subject: [PATCH 04/56] SearchField --- packages/@react-aria/searchfield/package.json | 3 +-- packages/@react-aria/searchfield/src/index.ts | 2 +- .../searchfield/src/useSearchField.ts | 19 +++++++++++--- .../@react-spectrum/searchfield/package.json | 2 +- .../searchfield/src/SearchField.tsx | 9 ++++--- .../@react-spectrum/searchfield/src/index.ts | 2 +- .../@react-stately/searchfield/package.json | 2 +- .../@react-stately/searchfield/src/index.ts | 3 +-- .../searchfield/src/useSearchFieldState.ts | 13 +++++++++- .../@react-types/searchfield/package.json | 5 ++-- .../@react-types/searchfield/src/index.d.ts | 26 +++---------------- 11 files changed, 44 insertions(+), 42 deletions(-) diff --git a/packages/@react-aria/searchfield/package.json b/packages/@react-aria/searchfield/package.json index c9286024f8d..2801fd2a8b7 100644 --- a/packages/@react-aria/searchfield/package.json +++ b/packages/@react-aria/searchfield/package.json @@ -26,12 +26,11 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/i18n": "^3.12.14", "@react-aria/textfield": "^3.18.3", "@react-aria/utils": "^3.32.0", "@react-stately/searchfield": "^3.5.17", - "@react-types/button": "^3.14.1", - "@react-types/searchfield": "^3.6.6", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/searchfield/src/index.ts b/packages/@react-aria/searchfield/src/index.ts index dd49a5e49b5..43fb01477b8 100644 --- a/packages/@react-aria/searchfield/src/index.ts +++ b/packages/@react-aria/searchfield/src/index.ts @@ -10,5 +10,5 @@ * governing permissions and limitations under the License. */ export {useSearchField} from './useSearchField'; -export type {AriaSearchFieldProps} from '@react-types/searchfield'; +export type {AriaSearchFieldProps} from './useSearchField'; export type {SearchFieldAria} from './useSearchField'; diff --git a/packages/@react-aria/searchfield/src/useSearchField.ts b/packages/@react-aria/searchfield/src/useSearchField.ts index 15aae4a1a67..9a83a8f3540 100644 --- a/packages/@react-aria/searchfield/src/useSearchField.ts +++ b/packages/@react-aria/searchfield/src/useSearchField.ts @@ -10,16 +10,27 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaSearchFieldProps} from '@react-types/searchfield'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaTextFieldProps, useTextField} from '@react-aria/textfield'; import {chain} from '@react-aria/utils'; import {DOMAttributes, RefObject, ValidationResult} from '@react-types/shared'; import {InputHTMLAttributes, LabelHTMLAttributes} from 'react'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {SearchFieldState} from '@react-stately/searchfield'; +import {SearchFieldProps, SearchFieldState} from '@react-stately/searchfield'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useTextField} from '@react-aria/textfield'; + +export interface AriaSearchFieldProps extends SearchFieldProps, Omit { + /** + * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). + */ + enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send', + /** + * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). + * @default 'search' + */ + type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}) +} export interface SearchFieldAria extends ValidationResult { /** Props for the text field's visible label element (if any). */ diff --git a/packages/@react-spectrum/searchfield/package.json b/packages/@react-spectrum/searchfield/package.json index beec0eb7f76..6358e94945f 100644 --- a/packages/@react-spectrum/searchfield/package.json +++ b/packages/@react-spectrum/searchfield/package.json @@ -47,7 +47,7 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/searchfield": "^3.5.17", "@react-types/searchfield": "^3.6.6", - "@react-types/textfield": "^3.12.6", + "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx index 9946bf7b00b..fd44ba98da3 100644 --- a/packages/@react-spectrum/searchfield/src/SearchField.tsx +++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx @@ -10,19 +10,20 @@ * governing permissions and limitations under the License. */ +import {AriaSearchFieldProps, useSearchField} from '@react-aria/searchfield'; import {classNames, useSlotProps} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; import Magnifier from '@spectrum-icons/ui/Magnifier'; import React, {forwardRef, ReactElement, Ref, useEffect, useRef} from 'react'; -import {SpectrumSearchFieldProps} from '@react-types/searchfield'; +import {SpectrumTextFieldProps, TextFieldBase, TextFieldRef} from '@react-spectrum/textfield'; +import {SpectrumTextInputBase} from '@react-types/shared'; import styles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {TextFieldBase} from '@react-spectrum/textfield'; -import {TextFieldRef} from '@react-types/textfield'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useSearchField} from '@react-aria/searchfield'; import {useSearchFieldState} from '@react-stately/searchfield'; +export interface SpectrumSearchFieldProps extends SpectrumTextInputBase, Omit, SpectrumTextFieldProps {} + /** * A SearchField is a text field designed for searches. */ diff --git a/packages/@react-spectrum/searchfield/src/index.ts b/packages/@react-spectrum/searchfield/src/index.ts index 1448f7e0780..d8d3097932d 100644 --- a/packages/@react-spectrum/searchfield/src/index.ts +++ b/packages/@react-spectrum/searchfield/src/index.ts @@ -13,4 +13,4 @@ /// export {SearchField} from './SearchField'; -export type {SpectrumSearchFieldProps} from '@react-types/searchfield'; +export type {SpectrumSearchFieldProps} from './SearchField'; diff --git a/packages/@react-stately/searchfield/package.json b/packages/@react-stately/searchfield/package.json index a4f7b13eae0..2215bc2a2b0 100644 --- a/packages/@react-stately/searchfield/package.json +++ b/packages/@react-stately/searchfield/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@react-stately/utils": "^3.11.0", - "@react-types/searchfield": "^3.6.6", + "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/searchfield/src/index.ts b/packages/@react-stately/searchfield/src/index.ts index a868aa5f4c1..5f933185c37 100644 --- a/packages/@react-stately/searchfield/src/index.ts +++ b/packages/@react-stately/searchfield/src/index.ts @@ -12,5 +12,4 @@ export {useSearchFieldState} from './useSearchFieldState'; -export type {SearchFieldProps} from '@react-types/searchfield'; -export type {SearchFieldState} from './useSearchFieldState'; +export type {SearchFieldProps, SearchFieldState} from './useSearchFieldState'; diff --git a/packages/@react-stately/searchfield/src/useSearchFieldState.ts b/packages/@react-stately/searchfield/src/useSearchFieldState.ts index 3a338cf6ef0..cca473f7ac9 100644 --- a/packages/@react-stately/searchfield/src/useSearchFieldState.ts +++ b/packages/@react-stately/searchfield/src/useSearchFieldState.ts @@ -10,9 +10,20 @@ * governing permissions and limitations under the License. */ -import {SearchFieldProps} from '@react-types/searchfield'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {useControlledState} from '@react-stately/utils'; +// Copied here to avoid depending on @react-aria/textfield from stately. +export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase, LabelableProps {} + +export interface SearchFieldProps extends TextFieldProps { + /** Handler that is called when the SearchField is submitted. */ + onSubmit?: (value: string) => void, + + /** Handler that is called when the clear button is pressed. */ + onClear?: () => void +} + export interface SearchFieldState { /** The current value of the search field. */ readonly value: string, diff --git a/packages/@react-types/searchfield/package.json b/packages/@react-types/searchfield/package.json index fcc914cbf0b..aba5352080e 100644 --- a/packages/@react-types/searchfield/package.json +++ b/packages/@react-types/searchfield/package.json @@ -9,8 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1", - "@react-types/textfield": "^3.12.6" + "@react-aria/searchfield": "^3.8.10", + "@react-spectrum/searchfield": "^3.8.24", + "@react-stately/searchfield": "^3.5.17" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/searchfield/src/index.d.ts b/packages/@react-types/searchfield/src/index.d.ts index fd575ce5b04..74ef2b2db37 100644 --- a/packages/@react-types/searchfield/src/index.d.ts +++ b/packages/@react-types/searchfield/src/index.d.ts @@ -10,26 +10,6 @@ * governing permissions and limitations under the License. */ -import {AriaTextFieldProps, SpectrumTextFieldProps, TextFieldProps} from '@react-types/textfield'; -import {SpectrumTextInputBase} from '@react-types/shared'; - -export interface SearchFieldProps extends TextFieldProps { - /** Handler that is called when the SearchField is submitted. */ - onSubmit?: (value: string) => void, - - /** Handler that is called when the clear button is pressed. */ - onClear?: () => void -} - -export interface AriaSearchFieldProps extends SearchFieldProps, Omit { - /** - * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). - */ - enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send', - /** - * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). - * @default 'search' - */ - type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {}) -} -export interface SpectrumSearchFieldProps extends SpectrumTextInputBase, Omit, SpectrumTextFieldProps {} +export {SearchFieldProps} from '@react-stately/searchfield'; +export {AriaSearchFieldProps} from '@react-aria/searchfield'; +export {SpectrumSearchFieldProps} from '@react-spectrum/searchfield'; From d71fe95d2cef8a21892f4bb7ef5c28bcdebb705c Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:34:16 -0500 Subject: [PATCH 05/56] ComboBox --- packages/@react-aria/combobox/package.json | 1 - packages/@react-aria/combobox/src/index.ts | 3 +- .../@react-aria/combobox/src/useComboBox.ts | 10 +- .../@react-spectrum/combobox/package.json | 1 - .../@react-spectrum/combobox/src/ComboBox.tsx | 43 +++++++- .../combobox/src/MobileComboBox.tsx | 5 +- .../@react-spectrum/combobox/src/index.ts | 2 +- packages/@react-stately/combobox/package.json | 1 - packages/@react-stately/combobox/src/index.ts | 2 +- .../combobox/src/useComboBoxState.ts | 41 ++++++- packages/@react-types/combobox/package.json | 4 +- packages/@react-types/combobox/src/index.d.ts | 101 +----------------- 12 files changed, 95 insertions(+), 119 deletions(-) diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json index 8fbf1a90c14..ce25331a3f6 100644 --- a/packages/@react-aria/combobox/package.json +++ b/packages/@react-aria/combobox/package.json @@ -39,7 +39,6 @@ "@react-stately/combobox": "^3.12.1", "@react-stately/form": "^3.2.2", "@react-types/button": "^3.14.1", - "@react-types/combobox": "^3.13.10", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/combobox/src/index.ts b/packages/@react-aria/combobox/src/index.ts index 8e24d45b144..8a242b73597 100644 --- a/packages/@react-aria/combobox/src/index.ts +++ b/packages/@react-aria/combobox/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useComboBox} from './useComboBox'; -export type {AriaComboBoxOptions, ComboBoxAria} from './useComboBox'; -export type {AriaComboBoxProps} from '@react-types/combobox'; +export type {AriaComboBoxProps, AriaComboBoxOptions, ComboBoxAria} from './useComboBox'; diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts index f6c6c9ba03c..5e2ca62a7da 100644 --- a/packages/@react-aria/combobox/src/useComboBox.ts +++ b/packages/@react-aria/combobox/src/useComboBox.ts @@ -12,12 +12,11 @@ import {announce} from '@react-aria/live-announcer'; import {AriaButtonProps} from '@react-types/button'; -import {AriaComboBoxProps} from '@react-types/combobox'; import {ariaHideOutside} from '@react-aria/overlays'; +import {AriaLabelingProps, BaseEvent, DOMAttributes, DOMProps, InputDOMProps, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox'; -import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared'; import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useEvent, useFormReset, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils'; -import {ComboBoxState} from '@react-stately/combobox'; +import {ComboBoxProps, ComboBoxState} from '@react-stately/combobox'; import {dispatchVirtualFocus} from '@react-aria/focus'; import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef} from 'react'; import {getChildNodes, getItemCount} from '@react-stately/collections'; @@ -29,6 +28,11 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMenuTrigger} from '@react-aria/menu'; import {useTextField} from '@react-aria/textfield'; +export interface AriaComboBoxProps extends ComboBoxProps, DOMProps, InputDOMProps, AriaLabelingProps { + /** Whether keyboard navigation is circular. */ + shouldFocusWrap?: boolean +} + export interface AriaComboBoxOptions extends Omit, 'children'> { /** The ref for the input element. */ inputRef: RefObject, diff --git a/packages/@react-spectrum/combobox/package.json b/packages/@react-spectrum/combobox/package.json index 9f665621c50..dceaef56cc3 100644 --- a/packages/@react-spectrum/combobox/package.json +++ b/packages/@react-spectrum/combobox/package.json @@ -60,7 +60,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", "@react-stately/combobox": "^3.12.1", - "@react-types/button": "^3.14.1", "@react-types/combobox": "^3.13.10", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx index 70e78af304a..1806a4c3b81 100644 --- a/packages/@react-spectrum/combobox/src/ComboBox.tsx +++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx @@ -10,7 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaComboBoxProps, useComboBox} from '@react-aria/combobox'; +import {AsyncLoadable, DimensionValue, DOMRefValue, FocusableRef, FocusableRefValue, LoadingState, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; import { classNames, @@ -21,7 +23,7 @@ import { useUnwrapDOMRef } from '@react-spectrum/utils'; import comboboxStyles from './combobox.css'; -import {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared'; +import {ComboBoxValidationValue, MenuTriggerAction, useComboBoxState} from '@react-stately/combobox'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; import {FocusRing} from '@react-aria/focus'; @@ -42,17 +44,48 @@ import React, { useRef, useState } from 'react'; -import {SpectrumComboBoxProps} from '@react-types/combobox'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; -import {useComboBox} from '@react-aria/combobox'; -import {useComboBoxState} from '@react-stately/combobox'; import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useFormProps} from '@react-spectrum/form'; import {useLayoutEffect} from '@react-aria/utils'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumComboBoxProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { + /** + * The interaction required to display the ComboBox menu. Note that this prop has no effect on the mobile ComboBox experience. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction, + /** Whether the ComboBox should be displayed with a quiet style. */ + isQuiet?: boolean, + /** Alignment of the menu relative to the input target. + * @default 'start' + */ + align?: 'start' | 'end', + /** + * Direction the menu will render relative to the ComboBox. + * @default 'bottom' + */ + direction?: 'bottom' | 'top', + /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */ + loadingState?: LoadingState, + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** Width of the menu. By default, matches width of the combobox. Note that the minimum width of the dropdown is always equal to the combobox's width. */ + menuWidth?: DimensionValue, + /** + * Whether the text or key of the selected item is submitted as part of an HTML form. + * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted. + * @default 'text' + */ + formValue?: 'text' | 'key' +} + /** * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. */ diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx index 5954ab301a3..a61c60a9642 100644 --- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx +++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx @@ -11,7 +11,7 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css'; import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; @@ -32,12 +32,11 @@ import {mergeProps, useFormReset, useId, useObjectRef} from '@react-aria/utils'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ForwardedRef, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, useCallback, useEffect, useRef, useState} from 'react'; import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {SpectrumComboBoxProps} from '@react-types/combobox'; +import {SpectrumComboBoxProps} from './ComboBox'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {Tray} from '@react-spectrum/overlays'; -import {useButton} from '@react-aria/button'; import {useComboBox} from '@react-aria/combobox'; import {useDialog} from '@react-aria/dialog'; import {useField} from '@react-aria/label'; diff --git a/packages/@react-spectrum/combobox/src/index.ts b/packages/@react-spectrum/combobox/src/index.ts index 4499d3795c0..3240dde3b4e 100644 --- a/packages/@react-spectrum/combobox/src/index.ts +++ b/packages/@react-spectrum/combobox/src/index.ts @@ -14,4 +14,4 @@ export {ComboBox} from './ComboBox'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumComboBoxProps} from '@react-types/combobox'; +export type {SpectrumComboBoxProps} from './ComboBox'; diff --git a/packages/@react-stately/combobox/package.json b/packages/@react-stately/combobox/package.json index 817ba4a8d97..db0c8a69052 100644 --- a/packages/@react-stately/combobox/package.json +++ b/packages/@react-stately/combobox/package.json @@ -31,7 +31,6 @@ "@react-stately/list": "^3.13.2", "@react-stately/overlays": "^3.6.21", "@react-stately/utils": "^3.11.0", - "@react-types/combobox": "^3.13.10", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/combobox/src/index.ts b/packages/@react-stately/combobox/src/index.ts index afc3f8eacf7..ec58349f709 100644 --- a/packages/@react-stately/combobox/src/index.ts +++ b/packages/@react-stately/combobox/src/index.ts @@ -12,4 +12,4 @@ export {useComboBoxState} from './useComboBoxState'; -export type {ComboBoxStateOptions, ComboBoxState} from './useComboBoxState'; +export type {ComboBoxProps, ComboBoxStateOptions, ComboBoxState, ComboBoxValidationValue, MenuTriggerAction} from './useComboBoxState'; diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts index e2cce7de048..2f76aeb8dc1 100644 --- a/packages/@react-stately/combobox/src/useComboBoxState.ts +++ b/packages/@react-stately/combobox/src/useComboBoxState.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import {Collection, CollectionStateBase, FocusStrategy, Key, Node} from '@react-types/shared'; -import {ComboBoxProps, MenuTriggerAction} from '@react-types/combobox'; +import {Collection, CollectionBase, CollectionStateBase, FocusableProps, FocusStrategy, HelpTextProps, InputBase, Key, LabelableProps, Node, SingleSelection, TextInputBase, Validation} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {getChildNodes} from '@react-stately/collections'; import {ListCollection, SingleSelectListState, useSingleSelectListState} from '@react-stately/list'; @@ -19,6 +18,44 @@ import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overla import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useControlledState} from '@react-stately/utils'; +export type MenuTriggerAction = 'focus' | 'input' | 'manual'; + +export interface ComboBoxValidationValue { + /** The selected key in the ComboBox. */ + selectedKey: Key | null, + /** The value of the ComboBox input. */ + inputValue: string +} + +export interface ComboBoxProps extends CollectionBase, Omit, InputBase, TextInputBase, Validation, FocusableProps, LabelableProps, HelpTextProps { + /** The list of ComboBox items (uncontrolled). */ + defaultItems?: Iterable, + /** The list of ComboBox items (controlled). */ + items?: Iterable, + /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ + onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, + /** Handler that is called when the selection changes. */ + onSelectionChange?: (key: Key | null) => void, + /** The value of the ComboBox input (controlled). */ + inputValue?: string, + /** The default value of the ComboBox input (uncontrolled). */ + defaultInputValue?: string, + /** Handler that is called when the ComboBox input value changes. */ + onInputChange?: (value: string) => void, + /** Whether the ComboBox allows a non-item matching input value to be set. */ + allowsCustomValue?: boolean, + // /** + // * Whether the Combobox should only suggest matching options or autocomplete the field with the nearest matching option. + // * @default 'suggest' + // */ + // completionMode?: 'suggest' | 'complete', + /** + * The interaction required to display the ComboBox menu. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction +} + export interface ComboBoxState extends SingleSelectListState, OverlayTriggerState, FormValidationState { /** The default selected key. */ readonly defaultSelectedKey: Key | null, diff --git a/packages/@react-types/combobox/package.json b/packages/@react-types/combobox/package.json index 06ce0453342..d87f903ad88 100644 --- a/packages/@react-types/combobox/package.json +++ b/packages/@react-types/combobox/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/combobox": "^3.14.1", + "@react-spectrum/combobox": "^3.16.5", + "@react-stately/combobox": "^3.12.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/combobox/src/index.d.ts b/packages/@react-types/combobox/src/index.d.ts index 3558c274dc8..b33eb87bff2 100644 --- a/packages/@react-types/combobox/src/index.d.ts +++ b/packages/@react-types/combobox/src/index.d.ts @@ -10,101 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AsyncLoadable, - CollectionBase, - DimensionValue, - DOMProps, - FocusableProps, - HelpTextProps, - InputBase, - InputDOMProps, - Key, - LabelableProps, - LoadingState, - SingleSelection, - SpectrumFieldValidation, - SpectrumLabelableProps, - SpectrumTextInputBase, - StyleProps, - TextInputBase, - Validation -} from '@react-types/shared'; - -export type MenuTriggerAction = 'focus' | 'input' | 'manual'; - -export interface ComboBoxValidationValue { - /** The selected key in the ComboBox. */ - selectedKey: Key | null, - /** The value of the ComboBox input. */ - inputValue: string -} - -export interface ComboBoxProps extends CollectionBase, Omit, InputBase, TextInputBase, Validation, FocusableProps, LabelableProps, HelpTextProps { - /** The list of ComboBox items (uncontrolled). */ - defaultItems?: Iterable, - /** The list of ComboBox items (controlled). */ - items?: Iterable, - /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ - onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, - /** Handler that is called when the selection changes. */ - onSelectionChange?: (key: Key | null) => void, - /** The value of the ComboBox input (controlled). */ - inputValue?: string, - /** The default value of the ComboBox input (uncontrolled). */ - defaultInputValue?: string, - /** Handler that is called when the ComboBox input value changes. */ - onInputChange?: (value: string) => void, - /** Whether the ComboBox allows a non-item matching input value to be set. */ - allowsCustomValue?: boolean, - // /** - // * Whether the Combobox should only suggest matching options or autocomplete the field with the nearest matching option. - // * @default 'suggest' - // */ - // completionMode?: 'suggest' | 'complete', - /** - * The interaction required to display the ComboBox menu. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction -} - -export interface AriaComboBoxProps extends ComboBoxProps, DOMProps, InputDOMProps, AriaLabelingProps { - /** Whether keyboard navigation is circular. */ - shouldFocusWrap?: boolean -} - -export interface SpectrumComboBoxProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { - /** - * The interaction required to display the ComboBox menu. Note that this prop has no effect on the mobile ComboBox experience. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction, - /** Whether the ComboBox should be displayed with a quiet style. */ - isQuiet?: boolean, - /** Alignment of the menu relative to the input target. - * @default 'start' - */ - align?: 'start' | 'end', - /** - * Direction the menu will render relative to the ComboBox. - * @default 'bottom' - */ - direction?: 'bottom' | 'top', - /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */ - loadingState?: LoadingState, - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** Width of the menu. By default, matches width of the combobox. Note that the minimum width of the dropdown is always equal to the combobox's width. */ - menuWidth?: DimensionValue, - /** - * Whether the text or key of the selected item is submitted as part of an HTML form. - * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted. - * @default 'text' - */ - formValue?: 'text' | 'key' -} +export {MenuTriggerAction, ComboBoxValidationValue, ComboBoxProps} from '@react-stately/combobox'; +export {AriaComboBoxProps} from '@react-aria/combobox'; +export {SpectrumComboBoxProps} from '@react-spectrum/combobox'; From d428996ac8045e0281418c3be359a9e656145a5d Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:39:33 -0500 Subject: [PATCH 06/56] SearchAutocomplete --- .../@react-aria/autocomplete/package.json | 4 +- .../@react-aria/autocomplete/src/index.ts | 3 +- .../autocomplete/src/useSearchAutocomplete.ts | 41 +++++++++-- .../@react-spectrum/autocomplete/package.json | 2 - .../src/MobileSearchAutocomplete.tsx | 5 +- .../autocomplete/src/SearchAutocomplete.tsx | 40 +++++++++-- .../@react-spectrum/autocomplete/src/index.ts | 2 +- .../@react-types/autocomplete/package.json | 5 +- .../@react-types/autocomplete/src/index.d.ts | 68 +------------------ 9 files changed, 81 insertions(+), 89 deletions(-) diff --git a/packages/@react-aria/autocomplete/package.json b/packages/@react-aria/autocomplete/package.json index 4b2c9778299..dd824aee3d5 100644 --- a/packages/@react-aria/autocomplete/package.json +++ b/packages/@react-aria/autocomplete/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/combobox": "^3.14.1", "@react-aria/focus": "^3.21.3", "@react-aria/i18n": "^3.12.14", @@ -36,8 +37,7 @@ "@react-aria/utils": "^3.32.0", "@react-stately/autocomplete": "3.0.0-beta.4", "@react-stately/combobox": "^3.12.1", - "@react-types/autocomplete": "3.0.0-alpha.36", - "@react-types/button": "^3.14.1", + "@react-stately/searchfield": "^3.5.17", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/autocomplete/src/index.ts b/packages/@react-aria/autocomplete/src/index.ts index 30bac8eecac..02a479de862 100644 --- a/packages/@react-aria/autocomplete/src/index.ts +++ b/packages/@react-aria/autocomplete/src/index.ts @@ -12,6 +12,5 @@ export {useSearchAutocomplete} from './useSearchAutocomplete'; export {useAutocomplete} from './useAutocomplete'; -export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete'; -export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete'; +export type {SearchAutocompleteProps, AriaSearchAutocompleteProps, AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete'; export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions, InputProps} from './useAutocomplete'; diff --git a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts index 2c51aaf0a0a..6e55b4d352a 100644 --- a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts @@ -10,15 +10,46 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, Key, KeyboardDelegate, LayoutDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions} from '@react-aria/listbox'; -import {AriaSearchAutocompleteProps} from '@react-types/autocomplete'; -import {ComboBoxState} from '@react-stately/combobox'; -import {DOMAttributes, KeyboardDelegate, LayoutDelegate, RefObject, ValidationResult} from '@react-types/shared'; +import {AriaSearchFieldProps, useSearchField} from '@react-aria/searchfield'; +import {ComboBoxState, MenuTriggerAction} from '@react-stately/combobox'; import {InputHTMLAttributes} from 'react'; import {mergeProps} from '@react-aria/utils'; +import {SearchFieldProps} from '@react-stately/searchfield'; import {useComboBox} from '@react-aria/combobox'; -import {useSearchField} from '@react-aria/searchfield'; + +export interface SearchAutocompleteProps extends CollectionBase, Omit { + /** The list of SearchAutocomplete items (uncontrolled). */ + defaultItems?: Iterable, + /** The list of SearchAutocomplete items (controlled). */ + items?: Iterable, + /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ + onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, + /** The value of the SearchAutocomplete input (controlled). */ + inputValue?: string, + /** The default value of the SearchAutocomplete input (uncontrolled). */ + defaultInputValue?: string, + /** Handler that is called when the SearchAutocomplete input value changes. */ + onInputChange?: (value: string) => void, + /** + * The interaction required to display the SearchAutocomplete menu. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction, + /** Handler that is called when the SearchAutocomplete is submitted. + * + * A `value` will be passed if the submission is a custom value (e.g. a user types then presses enter). + * If the input is a selected item, `value` will be null. + * + * A `key` will be passed if the submission is a selected item (e.g. a user clicks or presses enter on an option). + * If the input is a custom value, `key` will be null. + */ + onSubmit?: (value: string | null, key: Key | null) => void +} + +export interface AriaSearchAutocompleteProps extends SearchAutocompleteProps, Omit, DOMProps, AriaLabelingProps {} export interface SearchAutocompleteAria extends ValidationResult { /** Props for the label element. */ diff --git a/packages/@react-spectrum/autocomplete/package.json b/packages/@react-spectrum/autocomplete/package.json index 08bb8072634..e7bd30e5dc2 100644 --- a/packages/@react-spectrum/autocomplete/package.json +++ b/packages/@react-spectrum/autocomplete/package.json @@ -60,8 +60,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", "@react-stately/combobox": "^3.12.1", - "@react-types/autocomplete": "3.0.0-alpha.36", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx index 242a1e0c91b..8839e84c011 100644 --- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx +++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx @@ -11,7 +11,7 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium'; import {classNames, useFocusableRef} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; @@ -39,12 +39,11 @@ import React, { } from 'react'; import searchAutocompleteStyles from './searchautocomplete.css'; import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; +import {SpectrumSearchAutocompleteProps} from './SearchAutocomplete'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; import {Tray} from '@react-spectrum/overlays'; -import {useButton} from '@react-aria/button'; import {useDialog} from '@react-aria/dialog'; import {useField} from '@react-aria/label'; import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx index 4994ed9bbd4..119ea218db7 100644 --- a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx +++ b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx @@ -9,10 +9,11 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaSearchAutocompleteProps, useSearchAutocomplete} from '@react-aria/autocomplete'; +import {AsyncLoadable, DimensionValue, DOMRefValue, FocusableRef, LoadingState, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import {classNames, dimensionValue, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; -import {DOMRefValue, FocusableRef} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {filterDOMProps, useLayoutEffect} from '@react-aria/utils'; import {FocusRing} from '@react-aria/focus'; @@ -20,6 +21,7 @@ import {FocusRing} from '@react-aria/focus'; import intlMessages from '../intl/*.json'; import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox'; import Magnifier from '@spectrum-icons/ui/Magnifier'; +import {MenuTriggerAction, useComboBoxState} from '@react-stately/combobox'; import {MobileSearchAutocomplete} from './MobileSearchAutocomplete'; import {Popover} from '@react-spectrum/overlays'; import {ProgressCircle} from '@react-spectrum/progress'; @@ -35,16 +37,44 @@ import React, { } from 'react'; import searchAutocompleteStyles from './searchautocomplete.css'; import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css'; -import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css'; -import {useComboBoxState} from '@react-stately/combobox'; import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; -import {useSearchAutocomplete} from '@react-aria/autocomplete'; + +export interface SpectrumSearchAutocompleteProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState' | 'validate'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { + /** + * The interaction required to display the SearchAutocomplete menu. Note that this prop has no effect on the mobile SearchAutocomplete experience. + * @default 'input' + */ + menuTrigger?: MenuTriggerAction, + /** Whether the SearchAutocomplete should be displayed with a quiet style. */ + isQuiet?: boolean, + /** Alignment of the menu relative to the input target. + * @default 'start' + */ + align?: 'start' | 'end', + /** + * Direction the menu will render relative to the SearchAutocomplete. + * @default 'bottom' + */ + direction?: 'bottom' | 'top', + /** The current loading state of the SearchAutocomplete. Determines whether or not the progress circle should be shown. */ + loadingState?: LoadingState, + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ + menuWidth?: DimensionValue, + onLoadMore?: () => void, + /** An icon to display at the start of the input. */ + icon?: ReactElement | null +} function SearchAutocomplete(props: SpectrumSearchAutocompleteProps, ref: FocusableRef) { props = useProviderProps(props); diff --git a/packages/@react-spectrum/autocomplete/src/index.ts b/packages/@react-spectrum/autocomplete/src/index.ts index 113271364ab..5e44bea1aba 100644 --- a/packages/@react-spectrum/autocomplete/src/index.ts +++ b/packages/@react-spectrum/autocomplete/src/index.ts @@ -12,4 +12,4 @@ /// export {SearchAutocomplete} from './SearchAutocomplete'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; +export type {SpectrumSearchAutocompleteProps} from './SearchAutocomplete'; diff --git a/packages/@react-types/autocomplete/package.json b/packages/@react-types/autocomplete/package.json index 90e53088a41..8ad99d70072 100644 --- a/packages/@react-types/autocomplete/package.json +++ b/packages/@react-types/autocomplete/package.json @@ -9,9 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/combobox": "^3.13.10", - "@react-types/searchfield": "^3.6.6", - "@react-types/shared": "^3.32.1" + "@react-aria/autocomplete": "3.0.0-rc.4", + "@react-spectrum/autocomplete": "3.0.0-alpha.51" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/autocomplete/src/index.d.ts b/packages/@react-types/autocomplete/src/index.d.ts index 561dfdf53d4..9343c99728b 100644 --- a/packages/@react-types/autocomplete/src/index.d.ts +++ b/packages/@react-types/autocomplete/src/index.d.ts @@ -10,69 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, CollectionBase, DimensionValue, DOMProps, Key, LoadingState, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; -import {AriaSearchFieldProps, SearchFieldProps} from '@react-types/searchfield'; -import {MenuTriggerAction} from '@react-types/combobox'; -import {ReactElement} from 'react'; - -export interface SearchAutocompleteProps extends CollectionBase, Omit { - /** The list of SearchAutocomplete items (uncontrolled). */ - defaultItems?: Iterable, - /** The list of SearchAutocomplete items (controlled). */ - items?: Iterable, - /** Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. */ - onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void, - /** The value of the SearchAutocomplete input (controlled). */ - inputValue?: string, - /** The default value of the SearchAutocomplete input (uncontrolled). */ - defaultInputValue?: string, - /** Handler that is called when the SearchAutocomplete input value changes. */ - onInputChange?: (value: string) => void, - /** - * The interaction required to display the SearchAutocomplete menu. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction, - /** Handler that is called when the SearchAutocomplete is submitted. - * - * A `value` will be passed if the submission is a custom value (e.g. a user types then presses enter). - * If the input is a selected item, `value` will be null. - * - * A `key` will be passed if the submission is a selected item (e.g. a user clicks or presses enter on an option). - * If the input is a custom value, `key` will be null. - */ - onSubmit?: (value: string | null, key: Key | null) => void -} - -export interface AriaSearchAutocompleteProps extends SearchAutocompleteProps, Omit, DOMProps, AriaLabelingProps {} - -export interface SpectrumSearchAutocompleteProps extends SpectrumTextInputBase, Omit, 'menuTrigger' | 'isInvalid' | 'validationState' | 'validate'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit { - /** - * The interaction required to display the SearchAutocomplete menu. Note that this prop has no effect on the mobile SearchAutocomplete experience. - * @default 'input' - */ - menuTrigger?: MenuTriggerAction, - /** Whether the SearchAutocomplete should be displayed with a quiet style. */ - isQuiet?: boolean, - /** Alignment of the menu relative to the input target. - * @default 'start' - */ - align?: 'start' | 'end', - /** - * Direction the menu will render relative to the SearchAutocomplete. - * @default 'bottom' - */ - direction?: 'bottom' | 'top', - /** The current loading state of the SearchAutocomplete. Determines whether or not the progress circle should be shown. */ - loadingState?: LoadingState, - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ - menuWidth?: DimensionValue, - onLoadMore?: () => void, - /** An icon to display at the start of the input. */ - icon?: ReactElement | null -} +export {SearchAutocompleteProps, AriaSearchAutocompleteProps} from '@react-aria/autocomplete'; +export {SpectrumSearchAutocompleteProps} from '@react-spectrum/autocomplete'; From ea22cd130f1be1f9b2728a6424b42ab3b251b352 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:41:52 -0500 Subject: [PATCH 07/56] Avatar --- .../avatar/chromatic/Avatar.stories.tsx | 3 +- packages/@react-spectrum/avatar/package.json | 1 - .../@react-spectrum/avatar/src/Avatar.tsx | 42 ++++++++++++++++++- packages/@react-spectrum/avatar/src/index.ts | 2 +- .../avatar/stories/Avatar.stories.tsx | 3 +- packages/@react-types/avatar/package.json | 1 + packages/@react-types/avatar/src/index.d.ts | 41 +----------------- 7 files changed, 45 insertions(+), 48 deletions(-) diff --git a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx index cabf4c21403..7cc207cbc7b 100644 --- a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx +++ b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {Avatar} from '../'; +import {Avatar, SpectrumAvatarProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; -import {SpectrumAvatarProps} from '@react-types/avatar'; const SRC_URL_1 = 'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png'; diff --git a/packages/@react-spectrum/avatar/package.json b/packages/@react-spectrum/avatar/package.json index a62378ac2ee..ab7032d34b1 100644 --- a/packages/@react-spectrum/avatar/package.json +++ b/packages/@react-spectrum/avatar/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/avatar": "^3.0.19", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/avatar/src/Avatar.tsx b/packages/@react-spectrum/avatar/src/Avatar.tsx index c3eee993820..f061d34a586 100644 --- a/packages/@react-spectrum/avatar/src/Avatar.tsx +++ b/packages/@react-spectrum/avatar/src/Avatar.tsx @@ -11,16 +11,54 @@ */ import {classNames, dimensionValue, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import React, {forwardRef} from 'react'; -import {SpectrumAvatarProps} from '@react-types/avatar'; import styles from '@adobe/spectrum-css-temp/components/avatar/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; const DEFAULT_SIZE = 'avatar-size-100'; const SIZE_RE = /^size-\d+/; +export interface AvatarProps { + /** + * Text description of the avatar. + * + * @default null + */ + alt?: string, + /** + * The image URL for the avatar. + */ + src: string +} + +export interface SpectrumAvatarProps extends AvatarProps, DOMProps, Omit { + /** + * Whether the avatar is disabled. + */ + isDisabled?: boolean, + /** + * Size of the avatar. Affects both height and width. + * + * @default avatar-size-100 + */ + size?: + | 'avatar-size-50' + | 'avatar-size-75' + | 'avatar-size-100' + | 'avatar-size-200' + | 'avatar-size-300' + | 'avatar-size-400' + | 'avatar-size-500' + | 'avatar-size-600' + | 'avatar-size-700' + // This allows autocomplete to work properly and not collapse the above options into just `string`. + // See https://github.com/microsoft/TypeScript/issues/29729. + | (string & {}) + | number +} + /** * An avatar is a thumbnail representation of an entity, such as a user or an organization. */ diff --git a/packages/@react-spectrum/avatar/src/index.ts b/packages/@react-spectrum/avatar/src/index.ts index c340ea0ebc7..4f79697a718 100644 --- a/packages/@react-spectrum/avatar/src/index.ts +++ b/packages/@react-spectrum/avatar/src/index.ts @@ -11,4 +11,4 @@ */ /// export {Avatar} from './Avatar'; -export type {SpectrumAvatarProps} from '@react-types/avatar'; +export type {AvatarProps, SpectrumAvatarProps} from './Avatar'; diff --git a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx index e4c5bc0273c..49710b43497 100644 --- a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx +++ b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {Avatar} from '../'; +import {Avatar, SpectrumAvatarProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; -import {SpectrumAvatarProps} from '@react-types/avatar'; const SRC_URL_1 = 'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png'; diff --git a/packages/@react-types/avatar/package.json b/packages/@react-types/avatar/package.json index c9cc8aa20d9..8015b76ab55 100644 --- a/packages/@react-types/avatar/package.json +++ b/packages/@react-types/avatar/package.json @@ -9,6 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-spectrum/avatar": "^3.0.27", "@react-types/shared": "^3.32.1" }, "peerDependencies": { diff --git a/packages/@react-types/avatar/src/index.d.ts b/packages/@react-types/avatar/src/index.d.ts index 8d8a13278a5..4f0eb66aa37 100644 --- a/packages/@react-types/avatar/src/index.d.ts +++ b/packages/@react-types/avatar/src/index.d.ts @@ -10,43 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, StyleProps} from '@react-types/shared'; - -export interface AvatarProps { - /** - * Text description of the avatar. - * - * @default null - */ - alt?: string, - /** - * The image URL for the avatar. - */ - src: string -} - -export interface SpectrumAvatarProps extends AvatarProps, DOMProps, Omit { - /** - * Whether the avatar is disabled. - */ - isDisabled?: boolean, - /** - * Size of the avatar. Affects both height and width. - * - * @default avatar-size-100 - */ - size?: - | 'avatar-size-50' - | 'avatar-size-75' - | 'avatar-size-100' - | 'avatar-size-200' - | 'avatar-size-300' - | 'avatar-size-400' - | 'avatar-size-500' - | 'avatar-size-600' - | 'avatar-size-700' - // This allows autocomplete to work properly and not collapse the above options into just `string`. - // See https://github.com/microsoft/TypeScript/issues/29729. - | (string & {}) - | number -} +export {AvatarProps, SpectrumAvatarProps} from '@react-spectrum/avatar'; From 9e1e09ea771290d1758a149c3de378721fc758e2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:43:24 -0500 Subject: [PATCH 08/56] Badge --- packages/@react-spectrum/badge/package.json | 1 - packages/@react-spectrum/badge/src/Badge.tsx | 14 +++++++++++--- packages/@react-spectrum/badge/src/index.ts | 2 +- packages/@react-types/badge/package.json | 2 +- packages/@react-types/badge/src/index.d.ts | 13 +------------ 5 files changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/@react-spectrum/badge/package.json b/packages/@react-spectrum/badge/package.json index fc7d6befe2b..c651dd7476a 100644 --- a/packages/@react-spectrum/badge/package.json +++ b/packages/@react-spectrum/badge/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/text": "^3.5.23", "@react-spectrum/utils": "^3.12.10", - "@react-types/badge": "^3.1.21", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/badge/src/Badge.tsx b/packages/@react-spectrum/badge/src/Badge.tsx index d9d2c8325aa..83c7023596e 100644 --- a/packages/@react-spectrum/badge/src/Badge.tsx +++ b/packages/@react-spectrum/badge/src/Badge.tsx @@ -10,15 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {classNames, ClearSlots, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {SpectrumBadgeProps} from '@react-types/badge'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/badge/vars.css'; import {Text} from '@react-spectrum/text'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumBadgeProps extends DOMProps, StyleProps, AriaLabelingProps { + /** The content to display in the badge. */ + children: ReactNode, + /** + * The variant changes the background color of the badge. + * When badge has a semantic meaning, they should use the variant for semantic colors. + */ + variant: 'neutral' | 'info' | 'positive' | 'negative' | 'indigo' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'seafoam' +} /** * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention. diff --git a/packages/@react-spectrum/badge/src/index.ts b/packages/@react-spectrum/badge/src/index.ts index 5e5a05029eb..4a12d731336 100644 --- a/packages/@react-spectrum/badge/src/index.ts +++ b/packages/@react-spectrum/badge/src/index.ts @@ -13,4 +13,4 @@ /// export {Badge} from './Badge'; -export type {SpectrumBadgeProps} from '@react-types/badge'; +export type {SpectrumBadgeProps} from './Badge'; diff --git a/packages/@react-types/badge/package.json b/packages/@react-types/badge/package.json index a3a6c9bab4c..848a6d18f52 100644 --- a/packages/@react-types/badge/package.json +++ b/packages/@react-types/badge/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/badge": "^3.1.31" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/badge/src/index.d.ts b/packages/@react-types/badge/src/index.d.ts index 58f84c1fb09..e524b8654c0 100644 --- a/packages/@react-types/badge/src/index.d.ts +++ b/packages/@react-types/badge/src/index.d.ts @@ -10,15 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumBadgeProps extends DOMProps, StyleProps, AriaLabelingProps { - /** The content to display in the badge. */ - children: ReactNode, - /** - * The variant changes the background color of the badge. - * When badge has a semantic meaning, they should use the variant for semantic colors. - */ - variant: 'neutral' | 'info' | 'positive' | 'negative' | 'indigo' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'seafoam' -} +export {SpectrumBadgeProps} from '@react-spectrum/badge'; From 0f711c1e4b98c11870df5a96dd4624f912867c81 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:46:53 -0500 Subject: [PATCH 09/56] Link --- packages/@react-aria/link/package.json | 1 - packages/@react-aria/link/src/index.ts | 2 +- packages/@react-aria/link/src/useLink.ts | 7 +++++-- packages/@react-spectrum/link/package.json | 1 - packages/@react-spectrum/link/src/Link.tsx | 18 +++++++++++++++--- packages/@react-spectrum/link/src/index.ts | 2 +- packages/@react-types/link/package.json | 3 ++- packages/@react-types/link/src/index.d.ts | 20 ++------------------ 8 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/@react-aria/link/package.json b/packages/@react-aria/link/package.json index f1e54434e83..cd9222e2092 100644 --- a/packages/@react-aria/link/package.json +++ b/packages/@react-aria/link/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-aria/interactions": "^3.26.0", "@react-aria/utils": "^3.32.0", - "@react-types/link": "^3.6.5", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/link/src/index.ts b/packages/@react-aria/link/src/index.ts index e1f5714dc07..8929df8746d 100644 --- a/packages/@react-aria/link/src/index.ts +++ b/packages/@react-aria/link/src/index.ts @@ -9,5 +9,5 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -export type {AriaLinkOptions, LinkAria} from './useLink'; +export type {LinkProps, AriaLinkProps, AriaLinkOptions, LinkAria} from './useLink'; export {useLink} from './useLink'; diff --git a/packages/@react-aria/link/src/useLink.ts b/packages/@react-aria/link/src/useLink.ts index f4098b25939..1a1143e800f 100644 --- a/packages/@react-aria/link/src/useLink.ts +++ b/packages/@react-aria/link/src/useLink.ts @@ -10,12 +10,15 @@ * governing permissions and limitations under the License. */ -import {AriaLinkProps} from '@react-types/link'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, FocusableElement, FocusableProps, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared'; import {filterDOMProps, handleLinkClick, mergeProps, useLinkProps, useRouter} from '@react-aria/utils'; import React from 'react'; import {useFocusable, usePress} from '@react-aria/interactions'; +export interface LinkProps extends PressEvents, FocusableProps {} + +export interface AriaLinkProps extends LinkProps, LinkDOMProps, AriaLabelingProps { } + export interface AriaLinkOptions extends AriaLinkProps { /** Whether the link is disabled. */ isDisabled?: boolean, diff --git a/packages/@react-spectrum/link/package.json b/packages/@react-spectrum/link/package.json index 0bae889299e..01f9decb99e 100644 --- a/packages/@react-spectrum/link/package.json +++ b/packages/@react-spectrum/link/package.json @@ -45,7 +45,6 @@ "@react-aria/link": "^3.8.7", "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/link": "^3.6.5", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/link/src/Link.tsx b/packages/@react-spectrum/link/src/Link.tsx index 191a1e80b7b..fd98afdb24e 100644 --- a/packages/@react-spectrum/link/src/Link.tsx +++ b/packages/@react-spectrum/link/src/Link.tsx @@ -10,16 +10,28 @@ * governing permissions and limitations under the License. */ +import {AriaLinkProps, useLink} from '@react-aria/link'; import {classNames, getWrappedElement, useSlotProps, useStyleProps} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import {mergeProps, mergeRefs} from '@react-aria/utils'; -import React, {ForwardedRef, JSX, MutableRefObject, useRef} from 'react'; -import {SpectrumLinkProps} from '@react-types/link'; +import React, {ForwardedRef, JSX, MutableRefObject, ReactNode, useRef} from 'react'; +import {StyleProps} from '@react-types/shared'; import styles from '@adobe/spectrum-css-temp/components/link/vars.css'; import {useHover} from '@react-aria/interactions'; -import {useLink} from '@react-aria/link'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumLinkProps extends Omit, StyleProps { + /** The content to display in the link. */ + children: ReactNode, + /** + * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link. + * @default 'primary' + */ + variant?: 'primary' | 'secondary' | 'overBackground', + /** Whether the link should be displayed with a quiet style. */ + isQuiet?: boolean +} + let isOldReact = parseInt(React.version, 10) <= 18; /** * Links allow users to navigate to a different location. diff --git a/packages/@react-spectrum/link/src/index.ts b/packages/@react-spectrum/link/src/index.ts index 4193c3f6ad2..387521378a0 100644 --- a/packages/@react-spectrum/link/src/index.ts +++ b/packages/@react-spectrum/link/src/index.ts @@ -13,4 +13,4 @@ /// export {Link} from './Link'; -export type {SpectrumLinkProps} from '@react-types/link'; +export type {SpectrumLinkProps} from './Link'; diff --git a/packages/@react-types/link/package.json b/packages/@react-types/link/package.json index f137b952023..74187d12d3a 100644 --- a/packages/@react-types/link/package.json +++ b/packages/@react-types/link/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/link": "^3.8.7", + "@react-spectrum/link": "^3.6.23" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/link/src/index.d.ts b/packages/@react-types/link/src/index.d.ts index 83b7ac225bb..ef3dc572f2b 100644 --- a/packages/@react-types/link/src/index.d.ts +++ b/packages/@react-types/link/src/index.d.ts @@ -10,21 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, FocusableProps, LinkDOMProps, PressEvents, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface LinkProps extends PressEvents, FocusableProps {} - -export interface AriaLinkProps extends LinkProps, LinkDOMProps, AriaLabelingProps { } - -export interface SpectrumLinkProps extends Omit, StyleProps { - /** The content to display in the link. */ - children: ReactNode, - /** - * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link. - * @default 'primary' - */ - variant?: 'primary' | 'secondary' | 'overBackground', - /** Whether the link should be displayed with a quiet style. */ - isQuiet?: boolean -} +export {LinkProps, AriaLinkProps} from '@react-aria/link'; +export {SpectrumLinkProps} from '@react-spectrum/link'; From d2e29d4fe5282cdaf3d3a389c6b8d3bdbcf7a778 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 13:50:26 -0500 Subject: [PATCH 10/56] Breadcrumbs --- packages/@react-aria/breadcrumbs/package.json | 1 - packages/@react-aria/breadcrumbs/src/index.ts | 5 +- .../breadcrumbs/src/useBreadcrumbItem.ts | 28 ++++++++-- .../breadcrumbs/src/useBreadcrumbs.ts | 5 +- .../@react-spectrum/breadcrumbs/package.json | 1 - .../breadcrumbs/src/Breadcrumbs.tsx | 29 ++++++++-- .../@react-spectrum/breadcrumbs/src/index.ts | 2 +- .../@react-types/breadcrumbs/package.json | 4 +- .../@react-types/breadcrumbs/src/index.d.ts | 53 ++----------------- 9 files changed, 62 insertions(+), 66 deletions(-) diff --git a/packages/@react-aria/breadcrumbs/package.json b/packages/@react-aria/breadcrumbs/package.json index 0573afd1263..12445e6f17b 100644 --- a/packages/@react-aria/breadcrumbs/package.json +++ b/packages/@react-aria/breadcrumbs/package.json @@ -29,7 +29,6 @@ "@react-aria/i18n": "^3.12.14", "@react-aria/link": "^3.8.7", "@react-aria/utils": "^3.32.0", - "@react-types/breadcrumbs": "^3.7.17", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/breadcrumbs/src/index.ts b/packages/@react-aria/breadcrumbs/src/index.ts index 5e8220708ca..2d2f7f10f07 100644 --- a/packages/@react-aria/breadcrumbs/src/index.ts +++ b/packages/@react-aria/breadcrumbs/src/index.ts @@ -11,6 +11,5 @@ */ export {useBreadcrumbItem} from './useBreadcrumbItem'; export {useBreadcrumbs} from './useBreadcrumbs'; -export type {AriaBreadcrumbItemProps, AriaBreadcrumbsProps} from '@react-types/breadcrumbs'; -export type {BreadcrumbItemAria} from './useBreadcrumbItem'; -export type {BreadcrumbsAria} from './useBreadcrumbs'; +export type {BreadcrumbItemProps, AriaBreadcrumbItemProps, BreadcrumbItemAria} from './useBreadcrumbItem'; +export type {AriaBreadcrumbsProps, BreadcrumbsAria} from './useBreadcrumbs'; diff --git a/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts b/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts index fc791dd1dd3..cdc71467e48 100644 --- a/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts +++ b/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts @@ -10,9 +10,31 @@ * governing permissions and limitations under the License. */ -import {AriaBreadcrumbItemProps} from '@react-types/breadcrumbs'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; -import {useLink} from '@react-aria/link'; +import {AriaLinkProps, useLink} from '@react-aria/link'; +import {DOMAttributes, DOMProps, FocusableElement, LinkDOMProps, RefObject} from '@react-types/shared'; +import {ReactNode} from 'react'; + +export interface BreadcrumbItemProps extends AriaLinkProps, LinkDOMProps { + /** Whether the breadcrumb item represents the current page. */ + isCurrent?: boolean, + /** + * The type of current location the breadcrumb item represents, if `isCurrent` is true. + * @default 'page' + */ + 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false', + /** Whether the breadcrumb item is disabled. */ + isDisabled?: boolean, + /** The contents of the breadcrumb item. */ + children: ReactNode +} + +export interface AriaBreadcrumbItemProps extends BreadcrumbItemProps, DOMProps { + /** + * The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'. + * @default 'a' + */ + elementType?: string +} export interface BreadcrumbItemAria { /** Props for the breadcrumb item link element. */ diff --git a/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts b/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts index dfc4d5dbdfd..d1a69883e22 100644 --- a/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts +++ b/packages/@react-aria/breadcrumbs/src/useBreadcrumbs.ts @@ -10,13 +10,14 @@ * governing permissions and limitations under the License. */ -import {AriaBreadcrumbsProps} from '@react-types/breadcrumbs'; -import {DOMAttributes} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface AriaBreadcrumbsProps extends DOMProps, AriaLabelingProps {} + export interface BreadcrumbsAria { /** Props for the breadcrumbs navigation element. */ navProps: DOMAttributes diff --git a/packages/@react-spectrum/breadcrumbs/package.json b/packages/@react-spectrum/breadcrumbs/package.json index f35af51aeb6..589adc90f46 100644 --- a/packages/@react-spectrum/breadcrumbs/package.json +++ b/packages/@react-spectrum/breadcrumbs/package.json @@ -49,7 +49,6 @@ "@react-spectrum/menu": "^3.22.9", "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", - "@react-types/breadcrumbs": "^3.7.17", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx index e74fafb891d..545be3d15a2 100644 --- a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx @@ -10,18 +10,41 @@ * governing permissions and limitations under the License. */ import {ActionButton} from '@react-spectrum/button'; +import {AriaBreadcrumbsProps, useBreadcrumbs} from '@react-aria/breadcrumbs'; import {BreadcrumbItem} from './BreadcrumbItem'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef, Key} from '@react-types/shared'; +import {DOMRef, ItemProps, Key, StyleProps} from '@react-types/shared'; import FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb'; import {Menu, MenuTrigger} from '@react-spectrum/menu'; import React, {ReactElement, useCallback, useRef} from 'react'; -import {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs'; import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css'; -import {useBreadcrumbs} from '@react-aria/breadcrumbs'; import {useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumBreadcrumbsProps extends AriaBreadcrumbsProps, StyleProps { + /** The breadcrumb items. */ + children: ReactElement> | ReactElement>[], + /** Whether the Breadcrumbs are disabled. */ + isDisabled?: boolean, + /** Called when an item is acted upon (usually selection via press). */ + onAction?: (key: Key) => void, + /** + * Size of the Breadcrumbs including spacing and layout. + * @default 'L' + */ + size?: 'S' | 'M' | 'L', + /** Whether to always show the root item if the items are collapsed. */ + showRoot?: boolean, + /** + * Whether to place the last Breadcrumb item onto a new line. + */ + isMultiline?: boolean, + /** + * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. + */ + autoFocusCurrent?: boolean +} + const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; diff --git a/packages/@react-spectrum/breadcrumbs/src/index.ts b/packages/@react-spectrum/breadcrumbs/src/index.ts index 650e47cee7d..d1ff3e9c773 100644 --- a/packages/@react-spectrum/breadcrumbs/src/index.ts +++ b/packages/@react-spectrum/breadcrumbs/src/index.ts @@ -12,4 +12,4 @@ /// export {Breadcrumbs} from './Breadcrumbs'; export {Item} from '@react-stately/collections'; -export type {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs'; +export type {SpectrumBreadcrumbsProps} from './Breadcrumbs'; diff --git a/packages/@react-types/breadcrumbs/package.json b/packages/@react-types/breadcrumbs/package.json index 54cee297652..9e874c49f55 100644 --- a/packages/@react-types/breadcrumbs/package.json +++ b/packages/@react-types/breadcrumbs/package.json @@ -9,8 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/link": "^3.6.5", - "@react-types/shared": "^3.32.1" + "@react-aria/breadcrumbs": "^3.5.30", + "@react-spectrum/breadcrumbs": "^3.9.25" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/breadcrumbs/src/index.d.ts b/packages/@react-types/breadcrumbs/src/index.d.ts index f3cd7b08064..46da3ba976c 100644 --- a/packages/@react-types/breadcrumbs/src/index.d.ts +++ b/packages/@react-types/breadcrumbs/src/index.d.ts @@ -10,55 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, ItemProps, Key, LinkDOMProps, StyleProps} from '@react-types/shared'; -import {AriaLinkProps} from '@react-types/link'; -import {ReactElement, ReactNode} from 'react'; - -export interface BreadcrumbItemProps extends AriaLinkProps, LinkDOMProps { - /** Whether the breadcrumb item represents the current page. */ - isCurrent?: boolean, - /** - * The type of current location the breadcrumb item represents, if `isCurrent` is true. - * @default 'page' - */ - 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false', - /** Whether the breadcrumb item is disabled. */ - isDisabled?: boolean, - /** The contents of the breadcrumb item. */ - children: ReactNode -} - -export interface AriaBreadcrumbItemProps extends BreadcrumbItemProps, DOMProps { - /** - * The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'. - * @default 'a' - */ - elementType?: string -} +export {BreadcrumbItemProps, AriaBreadcrumbItemProps} from '@react-aria/breadcrumbs'; +export {SpectrumBreadcrumbsProps} from '@react-spectrum/breadcrumbs'; +// Backward compatibility. export interface BreadcrumbsProps {} -export interface AriaBreadcrumbsProps extends BreadcrumbsProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumBreadcrumbsProps extends AriaBreadcrumbsProps, StyleProps { - /** The breadcrumb items. */ - children: ReactElement> | ReactElement>[], - /** Whether the Breadcrumbs are disabled. */ - isDisabled?: boolean, - /** Called when an item is acted upon (usually selection via press). */ - onAction?: (key: Key) => void, - /** - * Size of the Breadcrumbs including spacing and layout. - * @default 'L' - */ - size?: 'S' | 'M' | 'L', - /** Whether to always show the root item if the items are collapsed. */ - showRoot?: boolean, - /** - * Whether to place the last Breadcrumb item onto a new line. - */ - isMultiline?: boolean, - /** - * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. - */ - autoFocusCurrent?: boolean -} From 729ce1d970656abe8d330bcdd383bf6575f57b19 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 14:06:56 -0500 Subject: [PATCH 11/56] Button --- packages/@react-aria/button/package.json | 1 - packages/@react-aria/button/src/index.ts | 4 +- packages/@react-aria/button/src/useButton.ts | 81 ++++++++++- .../@react-aria/button/src/useToggleButton.ts | 14 +- .../button/src/useToggleButtonGroup.ts | 11 +- packages/@react-spectrum/button/package.json | 1 - .../button/src/ActionButton.tsx | 12 +- .../@react-spectrum/button/src/Button.tsx | 25 +++- .../button/src/ClearButton.tsx | 5 +- .../button/src/FieldButton.tsx | 3 +- .../button/src/LogicButton.tsx | 10 +- .../button/src/ToggleButton.tsx | 9 +- packages/@react-spectrum/button/src/index.ts | 5 +- packages/@react-types/button/package.json | 3 +- packages/@react-types/button/src/index.d.ts | 133 +----------------- 15 files changed, 160 insertions(+), 157 deletions(-) diff --git a/packages/@react-aria/button/package.json b/packages/@react-aria/button/package.json index 43082e1c939..c1d50802dd6 100644 --- a/packages/@react-aria/button/package.json +++ b/packages/@react-aria/button/package.json @@ -30,7 +30,6 @@ "@react-aria/toolbar": "3.0.0-beta.22", "@react-aria/utils": "^3.32.0", "@react-stately/toggle": "^3.9.3", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/button/src/index.ts b/packages/@react-aria/button/src/index.ts index dbae2a493f6..e1ec82745ab 100644 --- a/packages/@react-aria/button/src/index.ts +++ b/packages/@react-aria/button/src/index.ts @@ -12,6 +12,6 @@ export {useButton} from './useButton'; export {useToggleButton} from './useToggleButton'; export {useToggleButtonGroup, useToggleButtonGroupItem} from './useToggleButtonGroup'; -export type {AriaButtonOptions, ButtonAria} from './useButton'; -export type {AriaButtonProps, AriaToggleButtonProps} from '@react-types/button'; +export type {ButtonProps, LinkButtonProps, AriaBaseButtonProps, AriaButtonProps, AriaButtonOptions, ButtonAria} from './useButton'; +export type {ToggleButtonProps, AriaToggleButtonProps} from './useToggleButton'; export type {AriaToggleButtonGroupProps, ToggleButtonGroupAria, AriaToggleButtonGroupItemProps} from './useToggleButtonGroup'; diff --git a/packages/@react-aria/button/src/useButton.ts b/packages/@react-aria/button/src/useButton.ts index 163b00c05e6..d1400b2b9bc 100644 --- a/packages/@react-aria/button/src/useButton.ts +++ b/packages/@react-aria/button/src/useButton.ts @@ -16,13 +16,90 @@ import { ElementType, HTMLAttributes, InputHTMLAttributes, + JSXElementConstructor, + ReactNode, RefObject } from 'react'; -import {AriaButtonProps} from '@react-types/button'; -import {DOMAttributes} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, FocusableDOMProps, FocusableProps, PressEvents} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {useFocusable, usePress} from '@react-aria/interactions'; +export interface ButtonProps extends PressEvents, FocusableProps { + /** Whether the button is disabled. */ + isDisabled?: boolean, + /** The content to display in the button. */ + children?: ReactNode +} + +export interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps { + /** Indicates whether the element is disabled to users of assistive technology. */ + 'aria-disabled'?: boolean | 'true' | 'false', + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: boolean | 'true' | 'false', + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false', + /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ + 'aria-controls'?: string, + /** Indicates the current "pressed" state of toggle buttons. */ + 'aria-pressed'?: boolean | 'true' | 'false' | 'mixed', + /** Indicates whether this element represents the current item within a container or set of related elements. */ + 'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time', + /** + * The behavior of the button when used in an HTML form. + * @default 'button' + */ + type?: 'button' | 'submit' | 'reset', + /** + * Whether to prevent focus from moving to the button when pressing it. + * + * Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, + * such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. + */ + preventFocusOnPress?: boolean, + /** + * The `
` element to associate the button with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). + */ + form?: string, + /** + * The URL that processes the information submitted by the button. + * Overrides the action attribute of the button's form owner. + */ + formAction?: string, + /** Indicates how to encode the form data that is submitted. */ + formEncType?: string, + /** Indicates the HTTP method used to submit the form. */ + formMethod?: string, + /** Indicates that the form is not to be validated when it is submitted. */ + formNoValidate?: boolean, + /** Overrides the target attribute of the button's form owner. */ + formTarget?: string, + /** Submitted as a pair with the button's value as part of the form data. */ + name?: string, + /** The value associated with the button's name when it's submitted with the form data. */ + value?: string +} + +export interface AriaButtonElementTypeProps { + /** + * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. + * @default 'button' + */ + elementType?: T | JSXElementConstructor +} + +export interface LinkButtonProps extends AriaButtonElementTypeProps { + /** A URL to link to if elementType="a". */ + href?: string, + /** The target window for the link. */ + target?: string, + /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */ + rel?: string +} + +export interface AriaButtonProps extends ButtonProps, LinkButtonProps, AriaBaseButtonProps {} + export interface AriaButtonOptions extends Omit, 'children'> {} export interface ButtonAria { diff --git a/packages/@react-aria/button/src/useToggleButton.ts b/packages/@react-aria/button/src/useToggleButton.ts index 9ec8d712194..ee6e95a6a38 100644 --- a/packages/@react-aria/button/src/useToggleButton.ts +++ b/packages/@react-aria/button/src/useToggleButton.ts @@ -18,12 +18,22 @@ import { InputHTMLAttributes, RefObject } from 'react'; -import {AriaToggleButtonProps} from '@react-types/button'; -import {ButtonAria, useButton} from './useButton'; +import {AriaBaseButtonProps, AriaButtonElementTypeProps, ButtonAria, ButtonProps, useButton} from './useButton'; import {chain, mergeProps} from '@react-aria/utils'; import {DOMAttributes} from '@react-types/shared'; import {ToggleState} from '@react-stately/toggle'; +export interface ToggleButtonProps extends ButtonProps { + /** Whether the element should be selected (controlled). */ + isSelected?: boolean, + /** Whether the element should be selected (uncontrolled). */ + defaultSelected?: boolean, + /** Handler that is called when the element's selection state changes. */ + onChange?: (isSelected: boolean) => void +} + +export interface AriaToggleButtonProps extends ToggleButtonProps, Omit, AriaButtonElementTypeProps {} + export interface AriaToggleButtonOptions extends Omit, 'children'> {} export interface ToggleButtonAria extends ButtonAria { diff --git a/packages/@react-aria/button/src/useToggleButtonGroup.ts b/packages/@react-aria/button/src/useToggleButtonGroup.ts index 3115b1ade3f..b48ac768d72 100644 --- a/packages/@react-aria/button/src/useToggleButtonGroup.ts +++ b/packages/@react-aria/button/src/useToggleButtonGroup.ts @@ -17,9 +17,8 @@ import { HTMLAttributes, InputHTMLAttributes } from 'react'; -import {AriaLabelingProps, DOMAttributes, Orientation, RefObject} from '@react-types/shared'; -import {AriaToggleButtonGroupItemProps} from '@react-types/button'; -import {ToggleButtonAria, useToggleButton} from './useToggleButton'; +import {AriaLabelingProps, DOMAttributes, Key, Orientation, RefObject} from '@react-types/shared'; +import {AriaToggleButtonProps, ToggleButtonAria, useToggleButton} from './useToggleButton'; import {ToggleGroupProps, ToggleGroupState, ToggleState} from '@react-stately/toggle'; import {useToolbar} from '@react-aria/toolbar'; @@ -51,7 +50,11 @@ export function useToggleButtonGroup(props: AriaToggleButtonGroupProps, state: T }; } -export type {AriaToggleButtonGroupItemProps}; +export interface AriaToggleButtonGroupItemProps extends Omit, 'id' | 'isSelected' | 'defaultSelected' | 'onChange'> { + /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */ + id: Key +} + export interface AriaToggleButtonGroupItemOptions extends Omit, 'children'> {} // Order with overrides is important: 'button' should be default diff --git a/packages/@react-spectrum/button/package.json b/packages/@react-spectrum/button/package.json index 7d31088bad0..02910a2635b 100644 --- a/packages/@react-spectrum/button/package.json +++ b/packages/@react-spectrum/button/package.json @@ -49,7 +49,6 @@ "@react-spectrum/text": "^3.5.23", "@react-spectrum/utils": "^3.12.10", "@react-stately/toggle": "^3.9.3", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/button/src/ActionButton.tsx b/packages/@react-spectrum/button/src/ActionButton.tsx index c7969ddd5b7..aae263eeb57 100644 --- a/packages/@react-spectrum/button/src/ActionButton.tsx +++ b/packages/@react-spectrum/button/src/ActionButton.tsx @@ -10,19 +10,25 @@ * governing permissions and limitations under the License. */ +import {AriaBaseButtonProps, ButtonProps, useButton} from '@react-aria/button'; import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; import CornerTriangle from '@spectrum-icons/ui/CornerTriangle'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; -import {SpectrumActionButtonProps} from '@react-types/button'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; import {Text} from '@react-spectrum/text'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumActionButtonProps extends AriaBaseButtonProps, Omit, StyleProps { + /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + isQuiet?: boolean, + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black' +} + /** * 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. diff --git a/packages/@react-spectrum/button/src/Button.tsx b/packages/@react-spectrum/button/src/Button.tsx index e0c196a2ea2..66bf1f1a374 100644 --- a/packages/@react-spectrum/button/src/Button.tsx +++ b/packages/@react-spectrum/button/src/Button.tsx @@ -10,6 +10,7 @@ * governing permissions and limitations under the License. */ +import {AriaButtonProps, useButton} from '@react-aria/button'; import { classNames, SlotProvider, @@ -18,21 +19,39 @@ import { useSlotProps, useStyleProps } from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; import {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ElementType, ReactElement, useEffect, useState} from 'react'; -import {SpectrumButtonProps} from '@react-types/button'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; import {Text} from '@react-spectrum/text'; -import {useButton} from '@react-aria/button'; import {useFocus, useHover} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +/** @deprecated */ +type LegacyButtonVariant = 'cta' | 'overBackground'; +export interface SpectrumButtonProps extends Omit, 'onClick'>, StyleProps { + /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */ + variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant, + /** The background style of the button. */ + style?: 'fill' | 'outline', + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * Whether to disable events immediately and display a loading spinner after a 1 second delay. + */ + isPending?: boolean, + /** + * Whether the button should be displayed with a quiet style. + * @deprecated + */ + isQuiet?: boolean +} + function disablePendingProps(props) { // Don't allow interaction while isPending is true if (props.isPending) { diff --git a/packages/@react-spectrum/button/src/ClearButton.tsx b/packages/@react-spectrum/button/src/ClearButton.tsx index aed43c43639..cdae8aad15f 100644 --- a/packages/@react-spectrum/button/src/ClearButton.tsx +++ b/packages/@react-spectrum/button/src/ClearButton.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonElementTypeProps, ButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import CrossSmall from '@spectrum-icons/ui/CrossSmall'; import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared'; @@ -18,10 +18,9 @@ import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React, {ElementType} from 'react'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; -interface ClearButtonProps extends ButtonProps, AriaButtonElementTypeProps, DOMProps, StyleProps { +interface ClearButtonProps extends AriaButtonProps, DOMProps, StyleProps { focusClassName?: string, variant?: 'overBackground', excludeFromTabOrder?: boolean, diff --git a/packages/@react-spectrum/button/src/FieldButton.tsx b/packages/@react-spectrum/button/src/FieldButton.tsx index a6070f06ea5..77000c174b9 100644 --- a/packages/@react-spectrum/button/src/FieldButton.tsx +++ b/packages/@react-spectrum/button/src/FieldButton.tsx @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ -import {ButtonProps} from '@react-types/button'; +import {ButtonProps, useButton} from '@react-aria/button'; import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; import {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps { diff --git a/packages/@react-spectrum/button/src/LogicButton.tsx b/packages/@react-spectrum/button/src/LogicButton.tsx index ce04abf7d85..7731a47d376 100644 --- a/packages/@react-spectrum/button/src/LogicButton.tsx +++ b/packages/@react-spectrum/button/src/LogicButton.tsx @@ -10,17 +10,21 @@ * governing permissions and limitations under the License. */ +import {AriaBaseButtonProps, ButtonProps, useButton} from '@react-aria/button'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; -import {SpectrumLogicButtonProps} from '@react-types/button'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumLogicButtonProps extends AriaBaseButtonProps, Omit, StyleProps { + /** The type of boolean sequence to be represented by the LogicButton. */ + variant: 'and' | 'or' +} + /** * A LogicButton displays an operator within a boolean logic sequence. */ diff --git a/packages/@react-spectrum/button/src/ToggleButton.tsx b/packages/@react-spectrum/button/src/ToggleButton.tsx index b5356661919..9b9c0c233c3 100644 --- a/packages/@react-spectrum/button/src/ToggleButton.tsx +++ b/packages/@react-spectrum/button/src/ToggleButton.tsx @@ -15,14 +15,19 @@ import {FocusableRef} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React from 'react'; -import {SpectrumToggleButtonProps} from '@react-types/button'; +import {SpectrumActionButtonProps} from './ActionButton'; import styles from '@adobe/spectrum-css-temp/components/button/vars.css'; import {Text} from '@react-spectrum/text'; +import {ToggleButtonProps, useToggleButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; -import {useToggleButton} from '@react-aria/button'; import {useToggleState} from '@react-stately/toggle'; +export interface SpectrumToggleButtonProps extends Omit, Omit { + /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ + isEmphasized?: boolean +} + /** * ToggleButtons allow users to toggle a selection on or off, for example * switching between two states or modes. diff --git a/packages/@react-spectrum/button/src/index.ts b/packages/@react-spectrum/button/src/index.ts index 00ffe0148e3..1aecab94258 100644 --- a/packages/@react-spectrum/button/src/index.ts +++ b/packages/@react-spectrum/button/src/index.ts @@ -16,4 +16,7 @@ export {FieldButton} from './FieldButton'; export {LogicButton} from './LogicButton'; export {ClearButton} from './ClearButton'; export {ToggleButton} from './ToggleButton'; -export type {SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-types/button'; +export type {SpectrumActionButtonProps} from './ActionButton'; +export type {SpectrumButtonProps} from './Button'; +export type {SpectrumLogicButtonProps} from './LogicButton'; +export type {SpectrumToggleButtonProps} from './ToggleButton'; diff --git a/packages/@react-types/button/package.json b/packages/@react-types/button/package.json index 455a8e666de..c2e87f912ba 100644 --- a/packages/@react-types/button/package.json +++ b/packages/@react-types/button/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/button": "^3.14.3", + "@react-spectrum/button": "^3.17.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/button/src/index.d.ts b/packages/@react-types/button/src/index.d.ts index 53b096a2689..d8d82ae05de 100644 --- a/packages/@react-types/button/src/index.d.ts +++ b/packages/@react-types/button/src/index.d.ts @@ -10,132 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, FocusableDOMProps, FocusableProps, Key, PressEvents, StyleProps} from '@react-types/shared'; -import {ElementType, JSXElementConstructor, ReactNode} from 'react'; +import {AriaButtonProps} from '@react-aria/button'; +import {ElementType} from 'react'; -interface ButtonProps extends PressEvents, FocusableProps { - /** Whether the button is disabled. */ - isDisabled?: boolean, - /** The content to display in the button. */ - children?: ReactNode -} +export {LinkButtonProps, AriaButtonProps, AriaToggleButtonProps, AriaToggleButtonGroupItemProps} from '@react-aria/button'; +export {SpectrumButtonProps, SpectrumActionButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-spectrum/button'; -interface ToggleButtonProps extends ButtonProps { - /** Whether the element should be selected (controlled). */ - isSelected?: boolean, - /** Whether the element should be selected (uncontrolled). */ - defaultSelected?: boolean, - /** Handler that is called when the element's selection state changes. */ - onChange?: (isSelected: boolean) => void -} - -export interface AriaButtonElementTypeProps { - /** - * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. - * @default 'button' - */ - elementType?: T | JSXElementConstructor -} - -export interface LinkButtonProps extends AriaButtonElementTypeProps { - /** A URL to link to if elementType="a". */ - href?: string, - /** The target window for the link. */ - target?: string, - /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */ - rel?: string -} - -interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps { - /** Indicates whether the element is disabled to users of assistive technology. */ - 'aria-disabled'?: boolean | 'true' | 'false', - /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ - 'aria-expanded'?: boolean | 'true' | 'false', - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false', - /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */ - 'aria-controls'?: string, - /** Indicates the current "pressed" state of toggle buttons. */ - 'aria-pressed'?: boolean | 'true' | 'false' | 'mixed', - /** Indicates whether this element represents the current item within a container or set of related elements. */ - 'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time', - /** - * The behavior of the button when used in an HTML form. - * @default 'button' - */ - type?: 'button' | 'submit' | 'reset', - /** - * Whether to prevent focus from moving to the button when pressing it. - * - * Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, - * such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. - */ - preventFocusOnPress?: boolean, - /** - * The `` element to associate the button with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). - */ - form?: string, - /** - * The URL that processes the information submitted by the button. - * Overrides the action attribute of the button's form owner. - */ - formAction?: string, - /** Indicates how to encode the form data that is submitted. */ - formEncType?: string, - /** Indicates the HTTP method used to submit the form. */ - formMethod?: string, - /** Indicates that the form is not to be validated when it is submitted. */ - formNoValidate?: boolean, - /** Overrides the target attribute of the button's form owner. */ - formTarget?: string, - /** Submitted as a pair with the button's value as part of the form data. */ - name?: string, - /** The value associated with the button's name when it's submitted with the form data. */ - value?: string -} - -export interface AriaButtonProps extends ButtonProps, LinkButtonProps, AriaBaseButtonProps {} -export interface AriaToggleButtonProps extends ToggleButtonProps, Omit, AriaButtonElementTypeProps {} -export interface AriaToggleButtonGroupItemProps extends Omit, 'id' | 'isSelected' | 'defaultSelected' | 'onChange'> { - /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */ - id: Key -} - -/** @deprecated */ -type LegacyButtonVariant = 'cta' | 'overBackground'; -export interface SpectrumButtonProps extends AriaBaseButtonProps, Omit, LinkButtonProps, StyleProps { - /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */ - variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant, - /** The background style of the button. */ - style?: 'fill' | 'outline', - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * Whether to disable events immediately and display a loading spinner after a 1 second delay. - */ - isPending?: boolean, - /** - * Whether the button should be displayed with a quiet style. - * @deprecated - */ - isQuiet?: boolean -} - -export interface SpectrumActionButtonProps extends AriaBaseButtonProps, Omit, StyleProps { - /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ - isQuiet?: boolean, - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black' -} - -export interface SpectrumLogicButtonProps extends AriaBaseButtonProps, Omit, StyleProps { - /** The type of boolean sequence to be represented by the LogicButton. */ - variant: 'and' | 'or' -} - -export interface SpectrumToggleButtonProps extends Omit, Omit { - /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ - isEmphasized?: boolean -} +// Backward compatibility. +export type AriaButtonElementTypeProps = Pick, 'elementType'>; From 729307d305f04b6b210b5213b429f06136e01c14 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 14:08:30 -0500 Subject: [PATCH 12/56] ButtonGroup --- .../@react-spectrum/buttongroup/package.json | 1 - .../buttongroup/src/ButtonGroup.tsx | 23 ++++++++++++++++--- .../@react-spectrum/buttongroup/src/index.ts | 2 +- .../@react-types/buttongroup/package.json | 2 +- .../@react-types/buttongroup/src/index.d.ts | 22 +----------------- 5 files changed, 23 insertions(+), 27 deletions(-) diff --git a/packages/@react-spectrum/buttongroup/package.json b/packages/@react-spectrum/buttongroup/package.json index 4052ebaec87..c945cf23053 100644 --- a/packages/@react-spectrum/buttongroup/package.json +++ b/packages/@react-spectrum/buttongroup/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/buttongroup": "^3.3.21", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx index f01e328bb8f..a63ae1b789c 100644 --- a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx +++ b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx @@ -10,6 +10,7 @@ * governing permissions and limitations under the License. */ +import {Alignment, DOMProps, DOMRef, Orientation, StyleProps} from '@react-types/shared'; import { classNames, SlotProvider, @@ -18,13 +19,29 @@ import { useSlotProps, useStyleProps } from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils'; import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider'; -import React, {useCallback, useRef} from 'react'; -import {SpectrumButtonGroupProps} from '@react-types/buttongroup'; +import React, {ReactNode, useCallback, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/buttongroup/vars.css'; +export interface SpectrumButtonGroupProps extends DOMProps, StyleProps { + /** Whether the Buttons in the ButtonGroup are all disabled. */ + isDisabled?: boolean, + /** + * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent + * any switching behaviors between 'vertical' and 'horizontal'. + * @default 'horizontal' + */ + orientation?: Orientation, + /** The Buttons contained within the ButtonGroup. */ + children: ReactNode, + /** + * The alignment of the buttons within the ButtonGroup. + * @default 'start' + */ + align?: Alignment | 'center' +} + /** * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other. */ diff --git a/packages/@react-spectrum/buttongroup/src/index.ts b/packages/@react-spectrum/buttongroup/src/index.ts index 1d1d63d8b0a..fcee470be72 100644 --- a/packages/@react-spectrum/buttongroup/src/index.ts +++ b/packages/@react-spectrum/buttongroup/src/index.ts @@ -11,4 +11,4 @@ */ /// export {ButtonGroup} from './ButtonGroup'; -export type {SpectrumButtonGroupProps} from '@react-types/buttongroup'; +export type {SpectrumButtonGroupProps} from './ButtonGroup'; diff --git a/packages/@react-types/buttongroup/package.json b/packages/@react-types/buttongroup/package.json index 50199c7771b..603c47b524f 100644 --- a/packages/@react-types/buttongroup/package.json +++ b/packages/@react-types/buttongroup/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/buttongroup": "^3.6.27" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/buttongroup/src/index.d.ts b/packages/@react-types/buttongroup/src/index.d.ts index 66afdf16f79..5de007141cf 100644 --- a/packages/@react-types/buttongroup/src/index.d.ts +++ b/packages/@react-types/buttongroup/src/index.d.ts @@ -10,24 +10,4 @@ * governing permissions and limitations under the License. */ - -import {Alignment, DOMProps, Orientation, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumButtonGroupProps extends DOMProps, StyleProps { - /** Whether the Buttons in the ButtonGroup are all disabled. */ - isDisabled?: boolean, - /** - * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent - * any switching behaviors between 'vertical' and 'horizontal'. - * @default 'horizontal' - */ - orientation?: Orientation, - /** The Buttons contained within the ButtonGroup. */ - children: ReactNode, - /** - * The alignment of the buttons within the ButtonGroup. - * @default 'start' - */ - align?: Alignment | 'center' -} +export {SpectrumButtonGroupProps} from '@react-spectrum/buttongroup'; From 0e61fa0a624d29960a4daa2495677215c8d531b0 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 14:21:16 -0500 Subject: [PATCH 13/56] Calendar --- packages/@react-aria/calendar/package.json | 3 +- packages/@react-aria/calendar/src/index.ts | 4 +- .../@react-aria/calendar/src/useCalendar.ts | 6 +- .../calendar/src/useCalendarBase.ts | 5 +- .../calendar/src/useRangeCalendar.ts | 7 +- .../@react-spectrum/calendar/package.json | 3 +- .../@react-spectrum/calendar/src/Calendar.tsx | 24 +++- .../calendar/src/CalendarBase.tsx | 5 +- .../calendar/src/RangeCalendar.tsx | 24 +++- .../@react-spectrum/calendar/src/index.ts | 3 +- packages/@react-stately/calendar/src/index.ts | 6 +- packages/@react-stately/calendar/src/types.ts | 65 +++++++++- .../calendar/src/useCalendarState.ts | 7 +- .../calendar/src/useRangeCalendarState.ts | 14 ++- packages/@react-types/calendar/package.json | 4 +- packages/@react-types/calendar/src/index.d.ts | 112 +----------------- 16 files changed, 144 insertions(+), 148 deletions(-) diff --git a/packages/@react-aria/calendar/package.json b/packages/@react-aria/calendar/package.json index 7447c653449..7e4e70f49d3 100644 --- a/packages/@react-aria/calendar/package.json +++ b/packages/@react-aria/calendar/package.json @@ -27,13 +27,12 @@ }, "dependencies": { "@internationalized/date": "^3.10.1", + "@react-aria/button": "^3.14.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.32.0", "@react-stately/calendar": "^3.9.1", - "@react-types/button": "^3.14.1", - "@react-types/calendar": "^3.8.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/calendar/src/index.ts b/packages/@react-aria/calendar/src/index.ts index 1676e603a42..2f9138f0bc5 100644 --- a/packages/@react-aria/calendar/src/index.ts +++ b/packages/@react-aria/calendar/src/index.ts @@ -15,7 +15,9 @@ export {useRangeCalendar} from './useRangeCalendar'; export {useCalendarGrid} from './useCalendarGrid'; export {useCalendarCell} from './useCalendarCell'; -export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar'; +export type {AriaCalendarProps} from './useCalendar'; +export type {AriaRangeCalendarProps} from './useRangeCalendar'; +export type {CalendarProps, DateValue, RangeCalendarProps} from '@react-stately/calendar'; export type {CalendarAria} from './useCalendarBase'; export type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid'; export type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell'; diff --git a/packages/@react-aria/calendar/src/useCalendar.ts b/packages/@react-aria/calendar/src/useCalendar.ts index 40ac2395117..bc81929f8a0 100644 --- a/packages/@react-aria/calendar/src/useCalendar.ts +++ b/packages/@react-aria/calendar/src/useCalendar.ts @@ -10,9 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaCalendarProps, DateValue} from '@react-types/calendar'; +import {AriaLabelingProps, DOMProps} from '@react-types/shared'; import {CalendarAria, useCalendarBase} from './useCalendarBase'; -import {CalendarState} from '@react-stately/calendar'; +import {CalendarProps, CalendarState, DateValue} from '@react-stately/calendar'; + +export interface AriaCalendarProps extends CalendarProps, DOMProps, AriaLabelingProps {} /** * Provides the behavior and accessibility implementation for a calendar component. diff --git a/packages/@react-aria/calendar/src/useCalendarBase.ts b/packages/@react-aria/calendar/src/useCalendarBase.ts index 7792a307c1c..9ba5f127956 100644 --- a/packages/@react-aria/calendar/src/useCalendarBase.ts +++ b/packages/@react-aria/calendar/src/useCalendarBase.ts @@ -11,10 +11,9 @@ */ import {announce} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; -import {CalendarPropsBase} from '@react-types/calendar'; -import {CalendarState, RangeCalendarState} from '@react-stately/calendar'; +import {CalendarPropsBase, CalendarState, RangeCalendarState} from '@react-stately/calendar'; import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils'; import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils'; // @ts-ignore diff --git a/packages/@react-aria/calendar/src/useRangeCalendar.ts b/packages/@react-aria/calendar/src/useRangeCalendar.ts index 87695d4268d..ecf16b53e8d 100644 --- a/packages/@react-aria/calendar/src/useRangeCalendar.ts +++ b/packages/@react-aria/calendar/src/useRangeCalendar.ts @@ -10,13 +10,14 @@ * governing permissions and limitations under the License. */ -import {AriaRangeCalendarProps, DateValue} from '@react-types/calendar'; +import {AriaLabelingProps, DOMProps, FocusableElement, RefObject} from '@react-types/shared'; import {CalendarAria, useCalendarBase} from './useCalendarBase'; -import {FocusableElement, RefObject} from '@react-types/shared'; -import {RangeCalendarState} from '@react-stately/calendar'; +import {DateValue, RangeCalendarProps, RangeCalendarState} from '@react-stately/calendar'; import {useEvent} from '@react-aria/utils'; import {useRef} from 'react'; +export interface AriaRangeCalendarProps extends RangeCalendarProps, DOMProps, AriaLabelingProps {} + /** * Provides the behavior and accessibility implementation for a range calendar component. * A range calendar displays one or more date grids and allows users to select a contiguous range of dates. diff --git a/packages/@react-spectrum/calendar/package.json b/packages/@react-spectrum/calendar/package.json index 5272c190bb0..771882ea0b0 100644 --- a/packages/@react-spectrum/calendar/package.json +++ b/packages/@react-spectrum/calendar/package.json @@ -41,6 +41,7 @@ }, "dependencies": { "@internationalized/date": "^3.10.1", + "@react-aria/button": "^3.14.3", "@react-aria/calendar": "^3.9.3", "@react-aria/focus": "^3.21.3", "@react-aria/i18n": "^3.12.14", @@ -51,8 +52,6 @@ "@react-spectrum/label": "^3.16.20", "@react-spectrum/utils": "^3.12.10", "@react-stately/calendar": "^3.9.1", - "@react-types/button": "^3.14.1", - "@react-types/calendar": "^3.8.1", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/calendar/src/Calendar.tsx b/packages/@react-spectrum/calendar/src/Calendar.tsx index a7577f795d5..71b10ab3338 100644 --- a/packages/@react-spectrum/calendar/src/Calendar.tsx +++ b/packages/@react-spectrum/calendar/src/Calendar.tsx @@ -10,17 +10,31 @@ * governing permissions and limitations under the License. */ +import {AriaCalendarProps, useCalendar} from '@react-aria/calendar'; import {CalendarBase} from './CalendarBase'; -import {createCalendar} from '@internationalized/date'; +import {CalendarIdentifier, createCalendar, Calendar as ICalendar} from '@internationalized/date'; import {createDOMRef} from '@react-spectrum/utils'; -import {DateValue, SpectrumCalendarProps} from '@react-types/calendar'; -import {FocusableRef} from '@react-types/shared'; +import {DateValue, useCalendarState} from '@react-stately/calendar'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import React, {ReactElement, useImperativeHandle, useMemo, useRef} from 'react'; -import {useCalendar} from '@react-aria/calendar'; -import {useCalendarState} from '@react-stately/calendar'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumCalendarProps extends AriaCalendarProps, StyleProps { + /** + * The number of months to display at once. Up to 3 months are supported. + * @default 1 + */ + visibleMonths?: number, + + /** + * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) + * object for a given calendar identifier. If not provided, the `createCalendar` function + * from `@internationalized/date` will be used. + */ + createCalendar?: (identifier: CalendarIdentifier) => ICalendar +} + /** * Calendars display a grid of days in one or more months and allow users to select a single date. */ diff --git a/packages/@react-spectrum/calendar/src/CalendarBase.tsx b/packages/@react-spectrum/calendar/src/CalendarBase.tsx index 4a7360d94d8..28fadd2650e 100644 --- a/packages/@react-spectrum/calendar/src/CalendarBase.tsx +++ b/packages/@react-spectrum/calendar/src/CalendarBase.tsx @@ -11,11 +11,10 @@ */ import {ActionButton} from '@react-spectrum/button'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {CalendarDate} from '@internationalized/date'; import {CalendarMonth} from './CalendarMonth'; -import {CalendarPropsBase} from '@react-types/calendar'; -import {CalendarState, RangeCalendarState} from '@react-stately/calendar'; +import {CalendarPropsBase, CalendarState, RangeCalendarState} from '@react-stately/calendar'; import ChevronLeft from '@spectrum-icons/ui/ChevronLeftLarge'; import ChevronRight from '@spectrum-icons/ui/ChevronRightLarge'; import {classNames, useStyleProps} from '@react-spectrum/utils'; diff --git a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx index 9959f76813c..bcb632ca1d8 100644 --- a/packages/@react-spectrum/calendar/src/RangeCalendar.tsx +++ b/packages/@react-spectrum/calendar/src/RangeCalendar.tsx @@ -10,16 +10,30 @@ * governing permissions and limitations under the License. */ +import {AriaRangeCalendarProps, useRangeCalendar} from '@react-aria/calendar'; import {CalendarBase} from './CalendarBase'; -import {createCalendar} from '@internationalized/date'; +import {CalendarIdentifier, createCalendar, Calendar as ICalendar} from '@internationalized/date'; import {createDOMRef} from '@react-spectrum/utils'; -import {DateValue, SpectrumRangeCalendarProps} from '@react-types/calendar'; -import {FocusableRef} from '@react-types/shared'; +import {DateValue, useRangeCalendarState} from '@react-stately/calendar'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import React, {ReactElement, useImperativeHandle, useMemo, useRef} from 'react'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -import {useRangeCalendar} from '@react-aria/calendar'; -import {useRangeCalendarState} from '@react-stately/calendar'; + +export interface SpectrumRangeCalendarProps extends AriaRangeCalendarProps, StyleProps { + /** + * The number of months to display at once. Up to 3 months are supported. + * @default 1 + */ + visibleMonths?: number, + + /** + * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) + * object for a given calendar identifier. If not provided, the `createCalendar` function + * from `@internationalized/date` will be used. + */ + createCalendar?: (identifier: CalendarIdentifier) => ICalendar +} /** * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates. diff --git a/packages/@react-spectrum/calendar/src/index.ts b/packages/@react-spectrum/calendar/src/index.ts index 34b2be5dc25..bb71d37d4c6 100644 --- a/packages/@react-spectrum/calendar/src/index.ts +++ b/packages/@react-spectrum/calendar/src/index.ts @@ -14,4 +14,5 @@ export {Calendar} from './Calendar'; export {RangeCalendar} from './RangeCalendar'; -export type {SpectrumCalendarProps, SpectrumRangeCalendarProps} from '@react-types/calendar'; +export type {SpectrumCalendarProps} from './Calendar'; +export type {SpectrumRangeCalendarProps} from './RangeCalendar'; diff --git a/packages/@react-stately/calendar/src/index.ts b/packages/@react-stately/calendar/src/index.ts index dd50969f385..417c7b99688 100644 --- a/packages/@react-stately/calendar/src/index.ts +++ b/packages/@react-stately/calendar/src/index.ts @@ -13,6 +13,6 @@ export {useCalendarState} from './useCalendarState'; export {useRangeCalendarState} from './useRangeCalendarState'; -export type {CalendarStateOptions} from './useCalendarState'; -export type {RangeCalendarStateOptions} from './useRangeCalendarState'; -export type {CalendarState, RangeCalendarState} from './types'; +export type {CalendarProps, CalendarStateOptions} from './useCalendarState'; +export type {DateRange, RangeCalendarProps, RangeCalendarStateOptions} from './useRangeCalendarState'; +export type {CalendarPropsBase, CalendarState, DateValue, PageBehavior, RangeCalendarState} from './types'; diff --git a/packages/@react-stately/calendar/src/types.ts b/packages/@react-stately/calendar/src/types.ts index ec7b26470c6..112885bb5a0 100644 --- a/packages/@react-stately/calendar/src/types.ts +++ b/packages/@react-stately/calendar/src/types.ts @@ -10,9 +10,70 @@ * governing permissions and limitations under the License. */ -import {CalendarDate} from '@internationalized/date'; -import {DateValue} from '@react-types/calendar'; +import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date'; import {RangeValue, ValidationState} from '@react-types/shared'; +import {ReactNode} from 'react'; + +export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; +export type MappedDateValue = + T extends ZonedDateTime ? ZonedDateTime : + T extends CalendarDateTime ? CalendarDateTime : + T extends CalendarDate ? CalendarDate : + never; + +export type PageBehavior = 'single' | 'visible'; +export interface CalendarPropsBase { + /** The minimum allowed date that a user may select. */ + minValue?: DateValue | null, + /** The maximum allowed date that a user may select. */ + maxValue?: DateValue | null, + /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ + isDateUnavailable?: (date: DateValue) => boolean, + /** + * Whether the calendar is disabled. + * @default false + */ + isDisabled?: boolean, + /** + * Whether the calendar value is immutable. + * @default false + */ + isReadOnly?: boolean, + /** + * Whether to automatically focus the calendar when it mounts. + * @default false + */ + autoFocus?: boolean, + /** Controls the currently focused date within the calendar. */ + focusedValue?: DateValue | null, + /** The date that is focused when the calendar first mounts (uncontrolled). */ + defaultFocusedValue?: DateValue | null, + /** Handler that is called when the focused date changes. */ + onFocusChange?: (date: CalendarDate) => void, + /** + * Whether the current selection is valid or invalid according to application logic. + * @deprecated Use `isInvalid` instead. + */ + validationState?: ValidationState, + /** Whether the current selection is invalid according to application logic. */ + isInvalid?: boolean, + /** An error message to display when the selected value is invalid. */ + errorMessage?: ReactNode, + /** + * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. + * @default visible + */ + pageBehavior?: PageBehavior, + /** + * The day that starts the week. + */ + firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat', + /** + * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. + * @default 'center' + */ + selectionAlignment?: 'start' | 'center' | 'end' +} interface CalendarStateBase { /** Whether the calendar is disabled. */ diff --git a/packages/@react-stately/calendar/src/useCalendarState.ts b/packages/@react-stately/calendar/src/useCalendarState.ts index 4d289535a4e..21dfa4671bd 100644 --- a/packages/@react-stately/calendar/src/useCalendarState.ts +++ b/packages/@react-stately/calendar/src/useCalendarState.ts @@ -29,11 +29,12 @@ import { toCalendarDate, today } from '@internationalized/date'; -import {CalendarProps, DateValue, MappedDateValue} from '@react-types/calendar'; -import {CalendarState} from './types'; +import {CalendarPropsBase, CalendarState, DateValue, MappedDateValue} from './types'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; -import {ValidationState} from '@react-types/shared'; +import {ValidationState, ValueBase} from '@react-types/shared'; + +export interface CalendarProps extends CalendarPropsBase, ValueBase> {} export interface CalendarStateOptions extends CalendarProps { /** The locale to display and edit the value according to. */ diff --git a/packages/@react-stately/calendar/src/useRangeCalendarState.ts b/packages/@react-stately/calendar/src/useRangeCalendarState.ts index 284500aa184..68b48488242 100644 --- a/packages/@react-stately/calendar/src/useRangeCalendarState.ts +++ b/packages/@react-stately/calendar/src/useRangeCalendarState.ts @@ -12,13 +12,21 @@ import {alignCenter, constrainValue, isInvalid, previousAvailableDate} from './utils'; import {Calendar, CalendarDate, CalendarIdentifier, DateDuration, GregorianCalendar, isEqualDay, maxDate, minDate, toCalendar, toCalendarDate} from '@internationalized/date'; -import {CalendarState, RangeCalendarState} from './types'; -import {DateValue, MappedDateValue, RangeCalendarProps} from '@react-types/calendar'; -import {RangeValue, ValidationState} from '@react-types/shared'; +import {CalendarPropsBase, CalendarState, DateValue, MappedDateValue, RangeCalendarState} from './types'; +import {RangeValue, ValidationState, ValueBase} from '@react-types/shared'; import {useCalendarState} from './useCalendarState'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useRef, useState} from 'react'; +export type DateRange = RangeValue | null; +export interface RangeCalendarProps extends CalendarPropsBase, ValueBase | null, RangeValue>> { + /** + * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, + * i.e. ranges containing unavailable dates, may be selected. + */ + allowsNonContiguousRanges?: boolean +} + export interface RangeCalendarStateOptions extends RangeCalendarProps { /** The locale to display and edit the value according to. */ locale: string, diff --git a/packages/@react-types/calendar/package.json b/packages/@react-types/calendar/package.json index 4770a44da99..2b424369305 100644 --- a/packages/@react-types/calendar/package.json +++ b/packages/@react-types/calendar/package.json @@ -10,7 +10,9 @@ }, "dependencies": { "@internationalized/date": "^3.10.1", - "@react-types/shared": "^3.32.1" + "@react-aria/calendar": "^3.9.3", + "@react-spectrum/calendar": "^3.7.9", + "@react-stately/calendar": "^3.9.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts index 8d9e1e2381d..a9ad3aedd10 100644 --- a/packages/@react-types/calendar/src/index.d.ts +++ b/packages/@react-types/calendar/src/index.d.ts @@ -10,112 +10,6 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, RangeValue, StyleProps, ValidationState, ValueBase} from '@react-types/shared'; -import type {CalendarDate, CalendarDateTime, CalendarIdentifier, Calendar as ICalendar, ZonedDateTime} from '@internationalized/date'; -import {ReactNode} from 'react'; - -export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; -type MappedDateValue = - T extends ZonedDateTime ? ZonedDateTime : - T extends CalendarDateTime ? CalendarDateTime : - T extends CalendarDate ? CalendarDate : - never; - -export interface CalendarPropsBase { - /** The minimum allowed date that a user may select. */ - minValue?: DateValue | null, - /** The maximum allowed date that a user may select. */ - maxValue?: DateValue | null, - /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ - isDateUnavailable?: (date: DateValue) => boolean, - /** - * Whether the calendar is disabled. - * @default false - */ - isDisabled?: boolean, - /** - * Whether the calendar value is immutable. - * @default false - */ - isReadOnly?: boolean, - /** - * Whether to automatically focus the calendar when it mounts. - * @default false - */ - autoFocus?: boolean, - /** Controls the currently focused date within the calendar. */ - focusedValue?: DateValue | null, - /** The date that is focused when the calendar first mounts (uncontrolled). */ - defaultFocusedValue?: DateValue | null, - /** Handler that is called when the focused date changes. */ - onFocusChange?: (date: CalendarDate) => void, - /** - * Whether the current selection is valid or invalid according to application logic. - * @deprecated Use `isInvalid` instead. - */ - validationState?: ValidationState, - /** Whether the current selection is invalid according to application logic. */ - isInvalid?: boolean, - /** An error message to display when the selected value is invalid. */ - errorMessage?: ReactNode, - /** - * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. - * @default visible - */ - pageBehavior?: PageBehavior, - /** - * The day that starts the week. - */ - firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat', - /** - * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. - * @default 'center' - */ - selectionAlignment?: 'start' | 'center' | 'end' -} - -export type DateRange = RangeValue | null; -export interface CalendarProps extends CalendarPropsBase, ValueBase> {} -export interface RangeCalendarProps extends CalendarPropsBase, ValueBase | null, RangeValue>> { - /** - * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, - * i.e. ranges containing unavailable dates, may be selected. - */ - allowsNonContiguousRanges?: boolean -} - -export interface AriaCalendarProps extends CalendarProps, DOMProps, AriaLabelingProps {} - -export interface AriaRangeCalendarProps extends RangeCalendarProps, DOMProps, AriaLabelingProps {} - -export type PageBehavior = 'single' | 'visible'; - -export interface SpectrumCalendarProps extends AriaCalendarProps, StyleProps { - /** - * The number of months to display at once. Up to 3 months are supported. - * @default 1 - */ - visibleMonths?: number, - - /** - * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) - * object for a given calendar identifier. If not provided, the `createCalendar` function - * from `@internationalized/date` will be used. - */ - createCalendar?: (identifier: CalendarIdentifier) => ICalendar -} - -export interface SpectrumRangeCalendarProps extends AriaRangeCalendarProps, StyleProps { - /** - * The number of months to display at once. Up to 3 months are supported. - * @default 1 - */ - visibleMonths?: number, - - /** - * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) - * object for a given calendar identifier. If not provided, the `createCalendar` function - * from `@internationalized/date` will be used. - */ - createCalendar?: (identifier: CalendarIdentifier) => ICalendar -} +export {DateValue, CalendarPropsBase, CalendarProps, DateRange, PageBehavior, RangeCalendarProps} from '@react-stately/calendar'; +export {AriaCalendarProps, AriaRangeCalendarProps} from '@react-aria/calendar'; +export {SpectrumCalendarProps, SpectrumRangeCalendarProps} from '@react-spectrum/calendar'; From ddd787f01218a95e32b7f7fc4c4de8e2b2070986 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 14:33:41 -0500 Subject: [PATCH 14/56] Checkbox --- packages/@react-aria/checkbox/package.json | 1 - packages/@react-aria/checkbox/src/index.ts | 5 +- .../@react-aria/checkbox/src/useCheckbox.ts | 17 ++- .../checkbox/src/useCheckboxGroup.ts | 7 +- .../checkbox/src/useCheckboxGroupItem.ts | 7 +- packages/@react-aria/toggle/package.json | 1 - packages/@react-aria/toggle/src/index.ts | 3 +- packages/@react-aria/toggle/src/useToggle.ts | 12 +- .../@react-spectrum/checkbox/src/Checkbox.tsx | 18 ++- .../checkbox/src/CheckboxGroup.tsx | 25 ++++- .../@react-spectrum/checkbox/src/index.ts | 3 +- packages/@react-stately/checkbox/package.json | 1 - packages/@react-stately/checkbox/src/index.ts | 3 +- .../checkbox/src/useCheckboxGroupState.ts | 5 +- packages/@react-stately/toggle/package.json | 1 - packages/@react-stately/toggle/src/index.ts | 3 +- .../toggle/src/useToggleState.ts | 30 ++++- packages/@react-types/checkbox/package.json | 6 +- packages/@react-types/checkbox/src/index.d.ts | 106 +----------------- 19 files changed, 115 insertions(+), 139 deletions(-) diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json index 022d528be30..6a7130b0077 100644 --- a/packages/@react-aria/checkbox/package.json +++ b/packages/@react-aria/checkbox/package.json @@ -34,7 +34,6 @@ "@react-stately/checkbox": "^3.7.3", "@react-stately/form": "^3.2.2", "@react-stately/toggle": "^3.9.3", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/checkbox/src/index.ts b/packages/@react-aria/checkbox/src/index.ts index 536cafb0826..68fa3b79fb4 100644 --- a/packages/@react-aria/checkbox/src/index.ts +++ b/packages/@react-aria/checkbox/src/index.ts @@ -13,5 +13,6 @@ export type {CheckboxAria} from './useCheckbox'; export {useCheckbox} from './useCheckbox'; export {useCheckboxGroup} from './useCheckboxGroup'; export {useCheckboxGroupItem} from './useCheckboxGroupItem'; -export type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox'; -export type {CheckboxGroupAria} from './useCheckboxGroup'; +export type {CheckboxProps, AriaCheckboxProps} from './useCheckbox'; +export type {AriaCheckboxGroupProps, CheckboxGroupAria} from './useCheckboxGroup'; +export type {AriaCheckboxGroupItemProps} from './useCheckboxGroupItem'; diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts index 5ef879aeabd..d984bc9b1d4 100644 --- a/packages/@react-aria/checkbox/src/useCheckbox.ts +++ b/packages/@react-aria/checkbox/src/useCheckbox.ts @@ -10,15 +10,24 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxProps} from '@react-types/checkbox'; +import {AriaToggleProps, useToggle} from '@react-aria/toggle'; +import {InputDOMProps, RefObject, ValidationResult} from '@react-types/shared'; import {InputHTMLAttributes, LabelHTMLAttributes, useEffect, useMemo} from 'react'; import {mergeProps} from '@react-aria/utils'; import {privateValidationStateProp, useFormValidationState} from '@react-stately/form'; -import {RefObject, ValidationResult} from '@react-types/shared'; -import {ToggleState} from '@react-stately/toggle'; +import {ToggleProps, ToggleState} from '@react-stately/toggle'; import {useFormValidation} from '@react-aria/form'; import {usePress} from '@react-aria/interactions'; -import {useToggle} from '@react-aria/toggle'; + +export interface CheckboxProps extends ToggleProps { + /** + * Indeterminism is presentational only. + * The indeterminate visual representation remains regardless of user interaction. + */ + isIndeterminate?: boolean +} + +export interface AriaCheckboxProps extends CheckboxProps, InputDOMProps, AriaToggleProps {} export interface CheckboxAria extends ValidationResult { /** Props for the label wrapper element. */ diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts index 0056b9978ba..ec3ffb4d791 100644 --- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts +++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts @@ -10,14 +10,15 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxGroupProps} from '@react-types/checkbox'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, DOMProps, FocusEvents, InputDOMProps, ValidationResult} from '@react-types/shared'; import {checkboxGroupData} from './utils'; -import {CheckboxGroupState} from '@react-stately/checkbox'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import {CheckboxGroupProps, CheckboxGroupState} from '@react-stately/checkbox'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {useField} from '@react-aria/label'; import {useFocusWithin} from '@react-aria/interactions'; +export interface AriaCheckboxGroupProps extends CheckboxGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps, FocusEvents {} + export interface CheckboxGroupAria extends ValidationResult { /** Props for the checkbox group wrapper element. */ groupProps: DOMAttributes, diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts index cc91277bfe3..05a7d335d09 100644 --- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts +++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxGroupItemProps} from '@react-types/checkbox'; -import {CheckboxAria, useCheckbox} from './useCheckbox'; +import {AriaCheckboxProps, CheckboxAria, useCheckbox} from './useCheckbox'; import {checkboxGroupData} from './utils'; import {CheckboxGroupState} from '@react-stately/checkbox'; import {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form'; @@ -19,6 +18,10 @@ import {RefObject, ValidationResult} from '@react-types/shared'; import {useEffect, useRef} from 'react'; import {useToggleState} from '@react-stately/toggle'; +export interface AriaCheckboxGroupItemProps extends Omit { + value: string +} + /** * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group. * Checkbox groups allow users to select multiple items from a list of options. diff --git a/packages/@react-aria/toggle/package.json b/packages/@react-aria/toggle/package.json index cc5ce8db75f..7d0e604be9b 100644 --- a/packages/@react-aria/toggle/package.json +++ b/packages/@react-aria/toggle/package.json @@ -29,7 +29,6 @@ "@react-aria/interactions": "^3.26.0", "@react-aria/utils": "^3.32.0", "@react-stately/toggle": "^3.9.3", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/toggle/src/index.ts b/packages/@react-aria/toggle/src/index.ts index df0eb656be9..9c62483c361 100644 --- a/packages/@react-aria/toggle/src/index.ts +++ b/packages/@react-aria/toggle/src/index.ts @@ -11,5 +11,4 @@ */ export {useToggle} from './useToggle'; -export type {AriaToggleProps} from '@react-types/checkbox'; -export type {ToggleAria} from './useToggle'; +export type {AriaToggleProps, ToggleAria} from './useToggle'; diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts index 788c1b5e00f..5313f8abc82 100644 --- a/packages/@react-aria/toggle/src/useToggle.ts +++ b/packages/@react-aria/toggle/src/useToggle.ts @@ -10,13 +10,19 @@ * governing permissions and limitations under the License. */ -import {AriaToggleProps} from '@react-types/checkbox'; +import {AriaLabelingProps, AriaValidationProps, FocusableDOMProps, InputDOMProps, PressEvents, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils'; import {InputHTMLAttributes, LabelHTMLAttributes} from 'react'; -import {RefObject} from '@react-types/shared'; -import {ToggleState} from '@react-stately/toggle'; +import {ToggleProps, ToggleState} from '@react-stately/toggle'; import {useFocusable, usePress} from '@react-aria/interactions'; +export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents { + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + */ + 'aria-controls'?: string +} + export interface ToggleAria { /** Props to be spread on the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx index 9ce0915c976..c2f5ee5c282 100644 --- a/packages/@react-spectrum/checkbox/src/Checkbox.tsx +++ b/packages/@react-spectrum/checkbox/src/Checkbox.tsx @@ -10,22 +10,34 @@ * governing permissions and limitations under the License. */ +import {AriaCheckboxProps, useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox'; import {CheckboxContext, useContextProps} from 'react-aria-components'; import {CheckboxGroupContext} from './context'; import CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import DashSmall from '@spectrum-icons/ui/DashSmall'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import React, {forwardRef, useContext, useRef} from 'react'; -import {SpectrumCheckboxProps} from '@react-types/checkbox'; import styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css'; -import {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox'; import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; import {useToggleState} from '@react-stately/toggle'; +export interface SpectrumCheckboxProps extends Omit, StyleProps { + /** + * This prop sets the emphasized style which provides visual prominence. + */ + isEmphasized?: boolean, + /** + * A slot name for the component. Slots allow the component to receive props from a parent component. + * An explicit `null` value indicates that the local props completely override all props received from a parent. + * @private + */ + slot?: string | null +} + /** * Checkboxes allow users to select multiple items from a list of individual items, * or to mark one individual item as selected. diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx index 721ab646fff..b3a2229ad02 100644 --- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx @@ -10,18 +10,35 @@ * governing permissions and limitations under the License. */ +import {AriaCheckboxGroupProps, useCheckboxGroup} from '@react-aria/checkbox'; import {CheckboxGroupContext} from './context'; import {classNames, useDOMRef} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, Orientation, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {Provider, useProviderProps} from '@react-spectrum/provider'; -import React from 'react'; -import {SpectrumCheckboxGroupProps} from '@react-types/checkbox'; +import React, {ReactElement} from 'react'; +import {SpectrumCheckboxProps} from '@react-types/checkbox'; import styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css'; -import {useCheckboxGroup} from '@react-aria/checkbox'; import {useCheckboxGroupState} from '@react-stately/checkbox'; import {useFormProps} from '@react-spectrum/form'; +export interface SpectrumCheckboxGroupProps extends AriaCheckboxGroupProps, SpectrumLabelableProps, Validation, StyleProps, SpectrumHelpTextProps { + /** + * The Checkboxes contained within the CheckboxGroup. + */ + children: ReactElement | ReactElement[], + /** + * The axis the checkboxes should align with. + * @default 'vertical' + */ + orientation?: Orientation, + /** + * By default, checkboxes are not emphasized (gray). + * The emphasized (blue) version provides visual prominence. + */ + isEmphasized?: boolean +} + /** * A CheckboxGroup allows users to select one or more items from a list of choices. */ diff --git a/packages/@react-spectrum/checkbox/src/index.ts b/packages/@react-spectrum/checkbox/src/index.ts index c46a38dd276..5b5c87e7b14 100644 --- a/packages/@react-spectrum/checkbox/src/index.ts +++ b/packages/@react-spectrum/checkbox/src/index.ts @@ -12,4 +12,5 @@ /// export {Checkbox} from './Checkbox'; export {CheckboxGroup} from './CheckboxGroup'; -export type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox'; +export type {SpectrumCheckboxProps} from './Checkbox'; +export type {SpectrumCheckboxGroupProps} from './CheckboxGroup'; diff --git a/packages/@react-stately/checkbox/package.json b/packages/@react-stately/checkbox/package.json index 2af3053d6df..27624c40c8c 100644 --- a/packages/@react-stately/checkbox/package.json +++ b/packages/@react-stately/checkbox/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/form": "^3.2.2", "@react-stately/utils": "^3.11.0", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/checkbox/src/index.ts b/packages/@react-stately/checkbox/src/index.ts index ab90bff0661..9e1b002fa5f 100644 --- a/packages/@react-stately/checkbox/src/index.ts +++ b/packages/@react-stately/checkbox/src/index.ts @@ -12,5 +12,4 @@ export {useCheckboxGroupState} from './useCheckboxGroupState'; -export type {CheckboxGroupProps} from '@react-types/checkbox'; -export type {CheckboxGroupState} from './useCheckboxGroupState'; +export type {CheckboxGroupProps, CheckboxGroupState} from './useCheckboxGroupState'; diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts index 3a06fdd83b4..accbdbeaefb 100644 --- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts +++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts @@ -10,11 +10,12 @@ * governing permissions and limitations under the License. */ -import {CheckboxGroupProps} from '@react-types/checkbox'; import {FormValidationState, mergeValidation, useFormValidationState} from '@react-stately/form'; +import {HelpTextProps, InputBase, InputDOMProps, LabelableProps, Validation, ValidationResult, ValidationState, ValueBase} from '@react-types/shared'; import {useControlledState} from '@react-stately/utils'; import {useRef, useState} from 'react'; -import {ValidationResult, ValidationState} from '@react-types/shared'; + +export interface CheckboxGroupProps extends ValueBase, Pick, InputBase, LabelableProps, HelpTextProps, Validation {} export interface CheckboxGroupState extends FormValidationState { /** Current selected values. */ diff --git a/packages/@react-stately/toggle/package.json b/packages/@react-stately/toggle/package.json index 910b739408d..e714a489b0d 100644 --- a/packages/@react-stately/toggle/package.json +++ b/packages/@react-stately/toggle/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/utils": "^3.11.0", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/toggle/src/index.ts b/packages/@react-stately/toggle/src/index.ts index 6a061eaec4e..eb82b5b93e3 100644 --- a/packages/@react-stately/toggle/src/index.ts +++ b/packages/@react-stately/toggle/src/index.ts @@ -13,6 +13,5 @@ export {useToggleState} from './useToggleState'; export {useToggleGroupState} from './useToggleGroupState'; -export type {ToggleProps} from '@react-types/checkbox'; -export type {ToggleState, ToggleStateOptions} from './useToggleState'; +export type {ToggleProps, ToggleState, ToggleStateOptions} from './useToggleState'; export type {ToggleGroupProps, ToggleGroupState} from './useToggleGroupState'; diff --git a/packages/@react-stately/toggle/src/useToggleState.ts b/packages/@react-stately/toggle/src/useToggleState.ts index 3e606ec3951..7478f379567 100644 --- a/packages/@react-stately/toggle/src/useToggleState.ts +++ b/packages/@react-stately/toggle/src/useToggleState.ts @@ -10,11 +10,35 @@ * governing permissions and limitations under the License. */ -import {ToggleStateOptions} from '@react-types/checkbox'; +import {FocusableProps, InputBase, Validation} from '@react-types/shared'; +import {ReactNode, useState} from 'react'; import {useControlledState} from '@react-stately/utils'; -import {useState} from 'react'; -export type {ToggleStateOptions}; +export interface ToggleStateOptions extends InputBase { + /** + * Whether the element should be selected (uncontrolled). + */ + defaultSelected?: boolean, + /** + * Whether the element should be selected (controlled). + */ + isSelected?: boolean, + /** + * Handler that is called when the element's selection state changes. + */ + onChange?: (isSelected: boolean) => void +} + +export interface ToggleProps extends ToggleStateOptions, Validation, FocusableProps { + /** + * The label for the element. + */ + children?: ReactNode, + /** + * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). + */ + value?: string +} export interface ToggleState { /** Whether the toggle is selected. */ diff --git a/packages/@react-types/checkbox/package.json b/packages/@react-types/checkbox/package.json index 68d5d480185..547f9c06dc5 100644 --- a/packages/@react-types/checkbox/package.json +++ b/packages/@react-types/checkbox/package.json @@ -9,7 +9,11 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/checkbox": "^3.16.3", + "@react-aria/toggle": "^3.12.3", + "@react-spectrum/checkbox": "^3.10.5", + "@react-stately/checkbox": "^3.7.3", + "@react-stately/toggle": "^3.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts index da3247a584c..392f4691622 100644 --- a/packages/@react-types/checkbox/src/index.d.ts +++ b/packages/@react-types/checkbox/src/index.d.ts @@ -10,104 +10,8 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - DOMProps, - FocusableDOMProps, - FocusableProps, - FocusEvents, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - Orientation, - PressEvents, - SpectrumHelpTextProps, - SpectrumLabelableProps, - StyleProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactElement, ReactNode} from 'react'; - -export interface ToggleStateOptions extends InputBase { - /** - * Whether the element should be selected (uncontrolled). - */ - defaultSelected?: boolean, - /** - * Whether the element should be selected (controlled). - */ - isSelected?: boolean, - /** - * Handler that is called when the element's selection state changes. - */ - onChange?: (isSelected: boolean) => void -} - -export interface ToggleProps extends ToggleStateOptions, Validation, FocusableProps { - /** - * The label for the element. - */ - children?: ReactNode, - /** - * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). - */ - value?: string -} - -export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents { - /** - * Identifies the element (or elements) whose contents or presence are controlled by the current element. - */ - 'aria-controls'?: string -} - -export interface CheckboxGroupProps extends ValueBase, Pick, InputBase, LabelableProps, HelpTextProps, Validation {} - -export interface CheckboxProps extends ToggleProps { - /** - * Indeterminism is presentational only. - * The indeterminate visual representation remains regardless of user interaction. - */ - isIndeterminate?: boolean -} - -export interface AriaCheckboxProps extends CheckboxProps, InputDOMProps, AriaToggleProps {} - -export interface AriaCheckboxGroupProps extends CheckboxGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps, FocusEvents {} - -export interface AriaCheckboxGroupItemProps extends Omit { - value: string -} - -export interface SpectrumCheckboxProps extends Omit, StyleProps { - /** - * This prop sets the emphasized style which provides visual prominence. - */ - isEmphasized?: boolean, - /** - * A slot name for the component. Slots allow the component to receive props from a parent component. - * An explicit `null` value indicates that the local props completely override all props received from a parent. - * @private - */ - slot?: string | null -} - -export interface SpectrumCheckboxGroupProps extends AriaCheckboxGroupProps, SpectrumLabelableProps, Validation, StyleProps, SpectrumHelpTextProps { - /** - * The Checkboxes contained within the CheckboxGroup. - */ - children: ReactElement | ReactElement[], - /** - * The axis the checkboxes should align with. - * @default 'vertical' - */ - orientation?: Orientation, - /** - * By default, checkboxes are not emphasized (gray). - * The emphasized (blue) version provides visual prominence. - */ - isEmphasized?: boolean -} +export {ToggleStateOptions, ToggleProps} from '@react-stately/toggle'; +export {AriaToggleProps} from '@react-aria/toggle'; +export {CheckboxGroupProps} from '@react-stately/checkbox'; +export {CheckboxProps, AriaCheckboxProps, AriaCheckboxGroupProps, AriaCheckboxGroupItemProps} from '@react-aria/checkbox'; +export {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-spectrum/checkbox'; From bc63607d970654a5c597d7266fafee6a1c9a18de Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 14:45:43 -0500 Subject: [PATCH 15/56] Slider --- packages/@react-aria/slider/package.json | 1 - packages/@react-aria/slider/src/index.ts | 6 +- packages/@react-aria/slider/src/useSlider.ts | 7 +- .../@react-aria/slider/src/useSliderThumb.ts | 27 +++- packages/@react-spectrum/slider/package.json | 1 - .../slider/src/RangeSlider.tsx | 22 ++- .../@react-spectrum/slider/src/Slider.tsx | 25 +++- .../@react-spectrum/slider/src/SliderBase.tsx | 25 +++- .../slider/src/SliderThumb.tsx | 3 +- packages/@react-spectrum/slider/src/index.ts | 4 +- packages/@react-stately/slider/src/index.ts | 3 +- .../slider/src/useSliderState.ts | 31 ++++- packages/@react-types/slider/package.json | 4 +- packages/@react-types/slider/src/index.d.ts | 130 +----------------- 14 files changed, 134 insertions(+), 155 deletions(-) diff --git a/packages/@react-aria/slider/package.json b/packages/@react-aria/slider/package.json index 05935c66327..a7225e825f4 100644 --- a/packages/@react-aria/slider/package.json +++ b/packages/@react-aria/slider/package.json @@ -32,7 +32,6 @@ "@react-aria/utils": "^3.32.0", "@react-stately/slider": "^3.7.3", "@react-types/shared": "^3.32.1", - "@react-types/slider": "^3.8.2", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/slider/src/index.ts b/packages/@react-aria/slider/src/index.ts index b4d966cd3f4..34e09b67693 100644 --- a/packages/@react-aria/slider/src/index.ts +++ b/packages/@react-aria/slider/src/index.ts @@ -11,8 +11,6 @@ */ export {useSlider} from './useSlider'; export {useSliderThumb} from './useSliderThumb'; -export type {AriaSliderProps} from '@react-types/slider'; -export type {SliderAria} from './useSlider'; -export type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb'; -export type {AriaSliderThumbProps} from '@react-types/slider'; +export type {AriaSliderProps, SliderAria} from './useSlider'; +export type {SliderThumbProps, AriaSliderThumbProps, AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb'; export type {Orientation} from '@react-types/shared'; diff --git a/packages/@react-aria/slider/src/useSlider.ts b/packages/@react-aria/slider/src/useSlider.ts index e9c45c18411..b87dc471638 100644 --- a/packages/@react-aria/slider/src/useSlider.ts +++ b/packages/@react-aria/slider/src/useSlider.ts @@ -10,16 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaSliderProps} from '@react-types/slider'; +import {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared'; import {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils'; -import {DOMAttributes, RefObject} from '@react-types/shared'; import {getSliderThumbId, sliderData} from './utils'; import React, {LabelHTMLAttributes, OutputHTMLAttributes, useRef} from 'react'; import {setInteractionModality, useMove} from '@react-aria/interactions'; -import {SliderState} from '@react-stately/slider'; +import {SliderProps, SliderState} from '@react-stately/slider'; import {useLabel} from '@react-aria/label'; import {useLocale} from '@react-aria/i18n'; +export interface AriaSliderProps extends SliderProps, DOMProps, AriaLabelingProps {} + export interface SliderAria { /** Props for the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/slider/src/useSliderThumb.ts b/packages/@react-aria/slider/src/useSliderThumb.ts index 5a609e4f78b..4e8a11a87d0 100644 --- a/packages/@react-aria/slider/src/useSliderThumb.ts +++ b/packages/@react-aria/slider/src/useSliderThumb.ts @@ -1,6 +1,5 @@ -import {AriaSliderThumbProps} from '@react-types/slider'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, DOMProps, FocusableDOMProps, FocusableProps, InputDOMProps, LabelableProps, Orientation, RefObject, ValidationState} from '@react-types/shared'; import {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils'; -import {DOMAttributes, RefObject} from '@react-types/shared'; import {getSliderThumbId, sliderData} from './utils'; import React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, useCallback, useEffect, useRef} from 'react'; import {SliderState} from '@react-stately/slider'; @@ -8,6 +7,30 @@ import {useFocusable, useKeyboard, useMove} from '@react-aria/interactions'; import {useLabel} from '@react-aria/label'; import {useLocale} from '@react-aria/i18n'; +export interface SliderThumbProps extends FocusableProps, LabelableProps { + /** + * The orientation of the Slider. + * @default 'horizontal' + * @deprecated - pass to the slider instead. + */ + orientation?: Orientation, + /** Whether the Thumb is disabled. */ + isDisabled?: boolean, + /** + * Index of the thumb within the slider. + * @default 0 + */ + index?: number, + /** @deprecated */ + isRequired?: boolean, + /** @deprecated */ + isInvalid?: boolean, + /** @deprecated */ + validationState?: ValidationState +} + +export interface AriaSliderThumbProps extends SliderThumbProps, DOMProps, Omit, InputDOMProps, AriaLabelingProps, AriaValidationProps {} + export interface SliderThumbAria { /** Props for the root thumb element; handles the dragging motion. */ thumbProps: DOMAttributes, diff --git a/packages/@react-spectrum/slider/package.json b/packages/@react-spectrum/slider/package.json index d8f0505a9de..cdd907860ff 100644 --- a/packages/@react-spectrum/slider/package.json +++ b/packages/@react-spectrum/slider/package.json @@ -49,7 +49,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/slider": "^3.7.3", "@react-types/shared": "^3.32.1", - "@react-types/slider": "^3.8.2", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/slider/src/RangeSlider.tsx b/packages/@react-spectrum/slider/src/RangeSlider.tsx index d6b59529e3c..7e8e93937f4 100644 --- a/packages/@react-spectrum/slider/src/RangeSlider.tsx +++ b/packages/@react-spectrum/slider/src/RangeSlider.tsx @@ -11,16 +11,32 @@ */ import {classNames} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, RangeValue} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; import React from 'react'; -import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase'; +import {SliderBase, SliderBaseChildArguments, SliderBaseProps, SpectrumBarSliderBase} from './SliderBase'; import {SliderThumb} from './SliderThumb'; -import {SpectrumRangeSliderProps} from '@react-types/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumRangeSliderProps extends SpectrumBarSliderBase> { + /** + * The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + startName?: string, + /** + * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + endName?: string, + /** + * The `` element to associate the slider with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). + */ + form?: string +} + /** * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable. */ diff --git a/packages/@react-spectrum/slider/src/Slider.tsx b/packages/@react-spectrum/slider/src/Slider.tsx index fa531df2a6b..eb9dcc54801 100644 --- a/packages/@react-spectrum/slider/src/Slider.tsx +++ b/packages/@react-spectrum/slider/src/Slider.tsx @@ -12,14 +12,33 @@ import {clamp} from '@react-aria/utils'; import {classNames} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, InputDOMProps} from '@react-types/shared'; import React, {ReactNode} from 'react'; -import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase'; +import {SliderBase, SliderBaseChildArguments, SliderBaseProps, SpectrumBarSliderBase} from './SliderBase'; import {SliderThumb} from './SliderThumb'; -import {SpectrumSliderProps} from '@react-types/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useLocale} from '@react-aria/i18n'; +export interface SpectrumSliderProps extends SpectrumBarSliderBase, InputDOMProps { + /** + * Whether a fill color is shown between the start of the slider and the current value. + * @see https://spectrum.adobe.com/page/slider/#Fill. + */ + isFilled?: boolean, + /** + * The offset from which to start the fill. + * @see https://spectrum.adobe.com/page/slider/#Fill-start. + */ + fillOffset?: number, + /** + * The background of the track, specified as the stops for a CSS background: `linear-gradient(to right/left, ...trackGradient)`. + * @example trackGradient={['red', 'green']} + * @example trackGradient={['red 20%', 'green 40%']} + * @see https://spectrum.adobe.com/page/slider/#Gradient. + */ + trackGradient?: string[] +} + /** * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable. */ diff --git a/packages/@react-spectrum/slider/src/SliderBase.tsx b/packages/@react-spectrum/slider/src/SliderBase.tsx index dd35c53a6de..2b32afaf929 100644 --- a/packages/@react-spectrum/slider/src/SliderBase.tsx +++ b/packages/@react-spectrum/slider/src/SliderBase.tsx @@ -10,15 +10,34 @@ * governing permissions and limitations under the License. */ +import {AriaSliderProps, useSlider} from '@react-aria/slider'; import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef, RefObject} from '@react-types/shared'; +import {FocusableRef, LabelPosition, RefObject, StyleProps, ValueBase} from '@react-types/shared'; import React, {CSSProperties, ReactNode, useRef} from 'react'; import {SliderState, useSliderState} from '@react-stately/slider'; -import {SpectrumBarSliderBase} from '@react-types/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useNumberFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -import {useSlider} from '@react-aria/slider'; + +export interface SpectrumBarSliderBase extends AriaSliderProps, ValueBase, StyleProps { + /** + * The display format of the value label. + */ + formatOptions?: Intl.NumberFormatOptions, + /** + * The label's overall position relative to the element it is labeling. + * @default 'top' + */ + labelPosition?: LabelPosition, + /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */ + showValueLabel?: boolean, + /** A function that returns the content to display as the value's label. Overrides default formatted number. */ + getValueLabel?: (value: T) => string, + /** + * A ContextualHelp element to place next to the label. + */ + contextualHelp?: ReactNode +} export interface SliderBaseChildArguments { inputRef: RefObject, diff --git a/packages/@react-spectrum/slider/src/SliderThumb.tsx b/packages/@react-spectrum/slider/src/SliderThumb.tsx index 53b0c43c57c..892f11430b1 100644 --- a/packages/@react-spectrum/slider/src/SliderThumb.tsx +++ b/packages/@react-spectrum/slider/src/SliderThumb.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaSliderThumbProps} from '@react-types/slider'; +import {AriaSliderThumbProps, useSliderThumb} from '@react-aria/slider'; import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; @@ -19,7 +19,6 @@ import {RefObject} from '@react-types/shared'; import {SliderState} from '@react-stately/slider'; import styles from '@adobe/spectrum-css-temp/components/slider/vars.css'; import {useHover} from '@react-aria/interactions'; -import {useSliderThumb} from '@react-aria/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; interface SliderThumbProps extends AriaSliderThumbProps { diff --git a/packages/@react-spectrum/slider/src/index.ts b/packages/@react-spectrum/slider/src/index.ts index 4f6a9e13265..ae61297f30c 100644 --- a/packages/@react-spectrum/slider/src/index.ts +++ b/packages/@react-spectrum/slider/src/index.ts @@ -14,4 +14,6 @@ export {Slider} from './Slider'; export {RangeSlider} from './RangeSlider'; -export type {SpectrumRangeSliderProps, SpectrumSliderProps} from '@react-types/slider'; +export type {SpectrumSliderProps} from './Slider'; +export type {SpectrumRangeSliderProps} from './RangeSlider'; +export type {SpectrumBarSliderBase} from './SliderBase'; diff --git a/packages/@react-stately/slider/src/index.ts b/packages/@react-stately/slider/src/index.ts index b22d4da68a4..3fcf93c003b 100644 --- a/packages/@react-stately/slider/src/index.ts +++ b/packages/@react-stately/slider/src/index.ts @@ -12,5 +12,4 @@ export {useSliderState} from './useSliderState'; -export type {SliderStateOptions} from './useSliderState'; -export type {SliderState} from './useSliderState'; +export type {SliderProps, SliderStateOptions, SliderState} from './useSliderState'; diff --git a/packages/@react-stately/slider/src/useSliderState.ts b/packages/@react-stately/slider/src/useSliderState.ts index 0f7350fc9a5..5f9a8f23529 100644 --- a/packages/@react-stately/slider/src/useSliderState.ts +++ b/packages/@react-stately/slider/src/useSliderState.ts @@ -11,10 +11,37 @@ */ import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils'; -import {Orientation} from '@react-types/shared'; -import {SliderProps} from '@react-types/slider'; +import {LabelableProps, Orientation, RangeInputBase, ValueBase} from '@react-types/shared'; import {useCallback, useMemo, useRef, useState} from 'react'; +export interface SliderProps extends RangeInputBase, ValueBase, LabelableProps { + /** + * The orientation of the Slider. + * @default 'horizontal' + */ + orientation?: Orientation, + /** Whether the whole Slider is disabled. */ + isDisabled?: boolean, + /** Fired when the slider stops moving, due to being let go. */ + onChangeEnd?: (value: T) => void, + // These are duplicated from ValueBase to define defaults for the docs. + /** + * The slider's minimum value. + * @default 0 + */ + minValue?: number, + /** + * The slider's maximum value. + * @default 100 + */ + maxValue?: number, + /** + * The slider's step value. + * @default 1 + */ + step?: number +} + export interface SliderState { /** * Values managed by the slider by thumb index. diff --git a/packages/@react-types/slider/package.json b/packages/@react-types/slider/package.json index f338c4cb08e..46ae26a859b 100644 --- a/packages/@react-types/slider/package.json +++ b/packages/@react-types/slider/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/slider": "^3.8.3", + "@react-spectrum/slider": "^3.8.3", + "@react-stately/slider": "^3.7.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/slider/src/index.d.ts b/packages/@react-types/slider/src/index.d.ts index 023516f228e..0ad69cd64df 100644 --- a/packages/@react-types/slider/src/index.d.ts +++ b/packages/@react-types/slider/src/index.d.ts @@ -1,127 +1,3 @@ -import { - AriaLabelingProps, - AriaValidationProps, - DOMProps, - FocusableDOMProps, - FocusableProps, - InputDOMProps, - LabelableProps, - LabelPosition, - Orientation, - RangeInputBase, - RangeValue, - StyleProps, - ValidationState, - ValueBase -} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SliderProps extends RangeInputBase, ValueBase, LabelableProps { - /** - * The orientation of the Slider. - * @default 'horizontal' - */ - orientation?: Orientation, - /** Whether the whole Slider is disabled. */ - isDisabled?: boolean, - /** Fired when the slider stops moving, due to being let go. */ - onChangeEnd?: (value: T) => void, - // These are duplicated from ValueBase to define defaults for the docs. - /** - * The slider's minimum value. - * @default 0 - */ - minValue?: number, - /** - * The slider's maximum value. - * @default 100 - */ - maxValue?: number, - /** - * The slider's step value. - * @default 1 - */ - step?: number -} - -export interface SliderThumbProps extends FocusableProps, LabelableProps { - /** - * The orientation of the Slider. - * @default 'horizontal' - * @deprecated - pass to the slider instead. - */ - orientation?: Orientation, - /** Whether the Thumb is disabled. */ - isDisabled?: boolean, - /** - * Index of the thumb within the slider. - * @default 0 - */ - index?: number, - /** @deprecated */ - isRequired?: boolean, - /** @deprecated */ - isInvalid?: boolean, - /** @deprecated */ - validationState?: ValidationState -} - -export interface AriaSliderProps extends SliderProps, DOMProps, AriaLabelingProps {} -export interface AriaSliderThumbProps extends SliderThumbProps, DOMProps, Omit, InputDOMProps, AriaLabelingProps, AriaValidationProps {} - -export interface SpectrumBarSliderBase extends AriaSliderProps, ValueBase, StyleProps { - /** - * The display format of the value label. - */ - formatOptions?: Intl.NumberFormatOptions, - /** - * The label's overall position relative to the element it is labeling. - * @default 'top' - */ - labelPosition?: LabelPosition, - /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */ - showValueLabel?: boolean, - /** A function that returns the content to display as the value's label. Overrides default formatted number. */ - getValueLabel?: (value: T) => string, - /** - * A ContextualHelp element to place next to the label. - */ - contextualHelp?: ReactNode -} - -export interface SpectrumSliderProps extends SpectrumBarSliderBase, InputDOMProps { - /** - * Whether a fill color is shown between the start of the slider and the current value. - * @see https://spectrum.adobe.com/page/slider/#Fill. - */ - isFilled?: boolean, - /** - * The offset from which to start the fill. - * @see https://spectrum.adobe.com/page/slider/#Fill-start. - */ - fillOffset?: number, - /** - * The background of the track, specified as the stops for a CSS background: `linear-gradient(to right/left, ...trackGradient)`. - * @example trackGradient={['red', 'green']} - * @example trackGradient={['red 20%', 'green 40%']} - * @see https://spectrum.adobe.com/page/slider/#Gradient. - */ - trackGradient?: string[] -} - -export interface SpectrumRangeSliderProps extends SpectrumBarSliderBase> { - /** - * The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - startName?: string, - /** - * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - endName?: string, - /** - * The `` element to associate the slider with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). - */ - form?: string -} +export {SliderProps} from '@react-stately/slider'; +export {SliderThumbProps, AriaSliderProps, AriaSliderThumbProps} from '@react-aria/slider'; +export {SpectrumBarSliderBase, SpectrumSliderProps, SpectrumRangeSliderProps} from '@react-spectrum/slider'; From 05d1a6506c794e1a80d30bb2d4589fc773a8730e Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 14:58:38 -0500 Subject: [PATCH 16/56] Color --- packages/@react-aria/color/package.json | 1 - packages/@react-aria/color/src/index.ts | 9 +- .../@react-aria/color/src/useColorArea.ts | 22 +- .../color/src/useColorAreaGradient.ts | 3 +- .../@react-aria/color/src/useColorField.ts | 10 +- .../@react-aria/color/src/useColorSlider.ts | 7 +- .../@react-aria/color/src/useColorSwatch.ts | 3 +- .../@react-aria/color/src/useColorWheel.ts | 7 +- .../color/test/useColorWheel.test.tsx | 3 +- .../color/chromatic/ColorArea.stories.tsx | 3 +- .../color/chromatic/ColorField.stories.tsx | 3 +- .../color/chromatic/ColorSlider.stories.tsx | 3 +- packages/@react-spectrum/color/package.json | 2 - .../@react-spectrum/color/src/ColorArea.tsx | 10 +- .../@react-spectrum/color/src/ColorEditor.tsx | 3 +- .../@react-spectrum/color/src/ColorField.tsx | 24 +- .../@react-spectrum/color/src/ColorSlider.tsx | 14 +- .../@react-spectrum/color/src/ColorSwatch.tsx | 2 +- .../color/src/ColorSwatchPicker.tsx | 2 +- .../@react-spectrum/color/src/ColorThumb.tsx | 2 +- .../@react-spectrum/color/src/ColorWheel.tsx | 10 +- packages/@react-spectrum/color/src/index.ts | 7 +- .../color/stories/ColorArea.stories.tsx | 3 +- .../color/stories/ColorField.stories.tsx | 5 +- packages/@react-stately/color/package.json | 1 - packages/@react-stately/color/src/Color.ts | 2 +- packages/@react-stately/color/src/index.ts | 10 +- packages/@react-stately/color/src/types.ts | 79 +++++++ packages/@react-stately/color/src/useColor.ts | 2 +- .../color/src/useColorAreaState.ts | 21 +- .../color/src/useColorChannelFieldState.ts | 3 +- .../color/src/useColorFieldState.ts | 8 +- .../color/src/useColorPickerState.ts | 2 +- .../color/src/useColorSliderState.ts | 18 +- .../color/src/useColorWheelState.ts | 17 +- .../@react-stately/color/test/Color.test.tsx | 2 +- packages/@react-types/color/package.json | 5 +- packages/@react-types/color/src/index.d.ts | 214 +----------------- 38 files changed, 254 insertions(+), 288 deletions(-) create mode 100644 packages/@react-stately/color/src/types.ts diff --git a/packages/@react-aria/color/package.json b/packages/@react-aria/color/package.json index 13025e279b5..835b6ced3f7 100644 --- a/packages/@react-aria/color/package.json +++ b/packages/@react-aria/color/package.json @@ -36,7 +36,6 @@ "@react-aria/visually-hidden": "^3.8.29", "@react-stately/color": "^3.9.3", "@react-stately/form": "^3.2.2", - "@react-types/color": "^3.1.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/color/src/index.ts b/packages/@react-aria/color/src/index.ts index 8f65cf51bcb..ca379a6a376 100644 --- a/packages/@react-aria/color/src/index.ts +++ b/packages/@react-aria/color/src/index.ts @@ -15,10 +15,9 @@ export {useColorWheel} from './useColorWheel'; export {useColorField} from './useColorField'; export {useColorSwatch} from './useColorSwatch'; export {useColorChannelField} from './useColorChannelField'; -export type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea'; -export type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider'; -export type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel'; -export type {AriaColorAreaProps, AriaColorFieldProps, AriaColorSliderProps} from '@react-types/color'; -export type {ColorFieldAria} from './useColorField'; +export type {AriaColorAreaProps, AriaColorAreaOptions, ColorAreaAria} from './useColorArea'; +export type {AriaColorSliderProps, AriaColorSliderOptions, ColorSliderAria} from './useColorSlider'; +export type {AriaColorWheelProps, AriaColorWheelOptions, ColorWheelAria} from './useColorWheel'; +export type {AriaColorFieldProps, ColorFieldAria} from './useColorField'; export type {AriaColorSwatchProps, ColorSwatchAria} from './useColorSwatch'; export type {AriaColorChannelFieldProps, ColorChannelFieldAria} from './useColorChannelField'; diff --git a/packages/@react-aria/color/src/useColorArea.ts b/packages/@react-aria/color/src/useColorArea.ts index 13d56119eef..8fd6e77b279 100644 --- a/packages/@react-aria/color/src/useColorArea.ts +++ b/packages/@react-aria/color/src/useColorArea.ts @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaColorAreaProps, ColorChannel} from '@react-types/color'; -import {ColorAreaState} from '@react-stately/color'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared'; +import {ColorAreaProps, ColorAreaState, ColorChannel} from '@react-stately/color'; import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -22,6 +21,23 @@ import {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/intera import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; +export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps { + /** + * The name of the x channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + xName?: string, + /** + * The name of the y channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + yName?: string, + /** + * The `` element to associate the ColorArea with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). + */ + form?: string +} + export interface ColorAreaAria { /** Props for the color area container element. */ colorAreaProps: DOMAttributes, diff --git a/packages/@react-aria/color/src/useColorAreaGradient.ts b/packages/@react-aria/color/src/useColorAreaGradient.ts index 1bb231c5ddd..e3c2acf1d8f 100644 --- a/packages/@react-aria/color/src/useColorAreaGradient.ts +++ b/packages/@react-aria/color/src/useColorAreaGradient.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import {Color, ColorChannel} from '@react-types/color'; -import {ColorAreaState, parseColor} from '@react-stately/color'; +import {Color, ColorAreaState, ColorChannel, parseColor} from '@react-stately/color'; import {CSSProperties, useMemo} from 'react'; const hue = (color: Color) => [0, 60, 120, 180, 240, 300, 360].map(hue => color.withChannelValue('hue', hue).toString('css')).join(', '); diff --git a/packages/@react-aria/color/src/useColorField.ts b/packages/@react-aria/color/src/useColorField.ts index b5f00af6a55..c0495edc721 100644 --- a/packages/@react-aria/color/src/useColorField.ts +++ b/packages/@react-aria/color/src/useColorField.ts @@ -10,9 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaColorFieldProps} from '@react-types/color'; -import {ColorFieldState} from '@react-stately/color'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, FocusableDOMProps, TextInputDOMProps, ValidationResult} from '@react-types/shared'; +import {ColorFieldProps, ColorFieldState} from '@react-stately/color'; import { InputHTMLAttributes, LabelHTMLAttributes, @@ -26,6 +25,11 @@ import {useFocusWithin, useScrollWheel} from '@react-aria/interactions'; import {useFormattedTextField} from '@react-aria/textfield'; import {useSpinButton} from '@react-aria/spinbutton'; +export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit, AriaValidationProps { + /** Enables or disables changing the value with scroll. */ + isWheelDisabled?: boolean +} + export interface ColorFieldAria extends ValidationResult { /** Props for the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/color/src/useColorSlider.ts b/packages/@react-aria/color/src/useColorSlider.ts index 804914a983f..18057cb9e62 100644 --- a/packages/@react-aria/color/src/useColorSlider.ts +++ b/packages/@react-aria/color/src/useColorSlider.ts @@ -10,15 +10,16 @@ * governing permissions and limitations under the License. */ -import {AriaColorSliderProps} from '@react-types/color'; -import {ColorSliderState} from '@react-stately/color'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, InputDOMProps, RefObject} from '@react-types/shared'; +import {ColorSliderProps, ColorSliderState} from '@react-stately/color'; import {InputHTMLAttributes} from 'react'; import {mergeProps} from '@react-aria/utils'; import {useLocale} from '@react-aria/i18n'; import {useSlider, useSliderThumb} from '@react-aria/slider'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; +export interface AriaColorSliderProps extends ColorSliderProps, InputDOMProps, DOMProps, AriaLabelingProps {} + export interface AriaColorSliderOptions extends AriaColorSliderProps { /** A ref for the track element. */ trackRef: RefObject, diff --git a/packages/@react-aria/color/src/useColorSwatch.ts b/packages/@react-aria/color/src/useColorSwatch.ts index f80d95e106b..676637ae11d 100644 --- a/packages/@react-aria/color/src/useColorSwatch.ts +++ b/packages/@react-aria/color/src/useColorSwatch.ts @@ -11,12 +11,11 @@ */ import {AriaLabelingProps, DOMProps} from '@react-types/shared'; -import {Color} from '@react-types/color'; +import {Color, parseColor} from '@react-stately/color'; import {filterDOMProps, useId} from '@react-aria/utils'; import {HTMLAttributes, useMemo} from 'react'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {parseColor} from '@react-stately/color'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; export interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps { diff --git a/packages/@react-aria/color/src/useColorWheel.ts b/packages/@react-aria/color/src/useColorWheel.ts index bcfa244cda8..c34bf3728f0 100644 --- a/packages/@react-aria/color/src/useColorWheel.ts +++ b/packages/@react-aria/color/src/useColorWheel.ts @@ -10,15 +10,16 @@ * governing permissions and limitations under the License. */ -import {AriaColorWheelProps} from '@react-types/color'; -import {ColorWheelState} from '@react-stately/color'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, InputDOMProps, RefObject} from '@react-types/shared'; +import {ColorWheelProps, ColorWheelState} from '@react-stately/color'; import {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils'; import React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef} from 'react'; import {useKeyboard, useMove} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; +export interface AriaColorWheelProps extends ColorWheelProps, InputDOMProps, DOMProps, AriaLabelingProps {} + export interface AriaColorWheelOptions extends AriaColorWheelProps { /** The outer radius of the color wheel. */ outerRadius: number, diff --git a/packages/@react-aria/color/test/useColorWheel.test.tsx b/packages/@react-aria/color/test/useColorWheel.test.tsx index 03d343be3f5..9a3acab6738 100644 --- a/packages/@react-aria/color/test/useColorWheel.test.tsx +++ b/packages/@react-aria/color/test/useColorWheel.test.tsx @@ -11,8 +11,7 @@ */ import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal'; -import {ColorWheelProps} from '@react-types/color'; -import {parseColor, useColorWheelState} from '@react-stately/color'; +import {ColorWheelProps, parseColor, useColorWheelState} from '@react-stately/color'; import React, {useRef} from 'react'; import {useColorWheel} from '../'; import userEvent from '@testing-library/user-event'; diff --git a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx index 06b58c828f5..2da76c0064b 100644 --- a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx +++ b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx @@ -10,12 +10,11 @@ * governing permissions and limitations under the License. */ -import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel} from '../'; +import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel, SpectrumColorAreaProps} from '../'; import {Flex} from '@adobe/react-spectrum'; import {Meta, StoryObj} from '@storybook/react'; import {parseColor} from '@react-stately/color'; import React, {JSX, useState} from 'react'; -import {SpectrumColorAreaProps} from '@react-types/color'; const meta: Meta = { title: 'ColorArea', diff --git a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx index 293f3c9ad1b..7f96530a1fb 100644 --- a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx +++ b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorField} from '../'; +import {ColorField, SpectrumColorFieldProps} from '../'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {generatePowerset} from '@react-spectrum/story-utils'; @@ -18,7 +18,6 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumColorFieldProps} from '@react-types/color'; // Ignore read only because it doesn't apply any distingishable visual features let states = [ diff --git a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx index 74b38a6f7c5..3b4ce059f66 100644 --- a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx +++ b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorSlider} from '../'; +import {ColorSlider, SpectrumColorSliderProps} from '../'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {generatePowerset} from '@react-spectrum/story-utils'; @@ -18,7 +18,6 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumColorSliderProps} from '@react-types/color'; let states = [ {isDisabled: true}, diff --git a/packages/@react-spectrum/color/package.json b/packages/@react-spectrum/color/package.json index 70e92e3a029..7a3b8821f58 100644 --- a/packages/@react-spectrum/color/package.json +++ b/packages/@react-spectrum/color/package.json @@ -54,9 +54,7 @@ "@react-spectrum/utils": "^3.12.10", "@react-spectrum/view": "^3.6.24", "@react-stately/color": "^3.9.3", - "@react-types/color": "^3.1.2", "@react-types/shared": "^3.32.1", - "@react-types/textfield": "^3.12.6", "@swc/helpers": "^0.5.0", "react-aria-components": "^1.14.0" }, diff --git a/packages/@react-spectrum/color/src/ColorArea.tsx b/packages/@react-spectrum/color/src/ColorArea.tsx index fbcd2b069dd..fab8387d0bf 100644 --- a/packages/@react-spectrum/color/src/ColorArea.tsx +++ b/packages/@react-spectrum/color/src/ColorArea.tsx @@ -10,19 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaColorAreaProps, useColorArea} from '@react-aria/color'; import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {ColorAreaContext, useContextProps} from 'react-aria-components'; import {ColorThumb} from './ColorThumb'; -import {FocusableRef} from '@react-types/shared'; +import {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import React, {ReactElement, useRef} from 'react'; -import {SpectrumColorAreaProps} from '@react-types/color'; import styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css'; -import {useColorArea} from '@react-aria/color'; import {useColorAreaState} from '@react-stately/color'; import {useFocusRing} from '@react-aria/focus'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorAreaProps extends AriaColorAreaProps, Omit { + /** Size of the Color Area. */ + size?: DimensionValue +} + /** * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background. */ diff --git a/packages/@react-spectrum/color/src/ColorEditor.tsx b/packages/@react-spectrum/color/src/ColorEditor.tsx index b7ce2c39ff5..7a58d8029a5 100644 --- a/packages/@react-spectrum/color/src/ColorEditor.tsx +++ b/packages/@react-spectrum/color/src/ColorEditor.tsx @@ -1,9 +1,8 @@ import {ColorArea} from './ColorArea'; import {ColorField} from './ColorField'; import {ColorSlider} from './ColorSlider'; -import {ColorSpace} from '@react-types/color'; +import {ColorSpace, getColorChannels} from '@react-stately/color'; import {DOMRef} from '@react-types/shared'; -import {getColorChannels} from '@react-stately/color'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Item, Picker} from '@react-spectrum/picker'; diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx index 9cbdfba2618..c0eddf9bb31 100644 --- a/packages/@react-spectrum/color/src/ColorField.tsx +++ b/packages/@react-spectrum/color/src/ColorField.tsx @@ -10,19 +10,33 @@ * governing permissions and limitations under the License. */ +import {AriaColorFieldProps, useColorChannelField, useColorField} from '@react-aria/color'; import {classNames} from '@react-spectrum/utils'; -import {ColorChannel, SpectrumColorFieldProps} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace, useColorChannelFieldState, useColorFieldState} from '@react-stately/color'; import {ColorFieldContext, useContextProps} from 'react-aria-components'; import React, {Ref, useEffect, useRef} from 'react'; +import {SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; import styles from './colorfield.css'; -import {TextFieldBase} from '@react-spectrum/textfield'; -import {TextFieldRef} from '@react-types/textfield'; -import {useColorChannelField, useColorField} from '@react-aria/color'; -import {useColorChannelFieldState, useColorFieldState} from '@react-stately/color'; +import {TextFieldBase, TextFieldRef} from '@react-spectrum/textfield'; import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { + /** + * The color channel that this field edits. If not provided, + * the color is edited as a hex value. + */ + channel?: ColorChannel, + /** + * The color space that the color field operates in if a `channel` prop is provided. + * If no `channel` is provided, the color field always displays the color as an RGB hex value. + */ + colorSpace?: ColorSpace, + /** Whether the ColorField should be displayed with a quiet style. */ + isQuiet?: boolean +} + /** * A color field allows users to edit a hex color or individual color channel value. */ diff --git a/packages/@react-spectrum/color/src/ColorSlider.tsx b/packages/@react-spectrum/color/src/ColorSlider.tsx index f42e5af782c..2b0a0a59092 100644 --- a/packages/@react-spectrum/color/src/ColorSlider.tsx +++ b/packages/@react-spectrum/color/src/ColorSlider.tsx @@ -10,20 +10,26 @@ * governing permissions and limitations under the License. */ +import {AriaColorSliderProps, useColorSlider} from '@react-aria/color'; import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {ColorSliderContext, useContextProps} from 'react-aria-components'; import {ColorThumb} from './ColorThumb'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {Label} from '@react-spectrum/label'; -import React, {useRef, useState} from 'react'; -import {SpectrumColorSliderProps} from '@react-types/color'; +import React, {ReactNode, useRef, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css'; -import {useColorSlider} from '@react-aria/color'; import {useColorSliderState} from '@react-stately/color'; import {useFocus, useFocusVisible} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps { + /** Whether the value label is displayed. True by default if there is a label, false by default if not. */ + showValueLabel?: boolean, + /** A ContextualHelp element to place next to the label. */ + contextualHelp?: ReactNode +} + /** * ColorSliders allow users to adjust an individual channel of a color value. */ diff --git a/packages/@react-spectrum/color/src/ColorSwatch.tsx b/packages/@react-spectrum/color/src/ColorSwatch.tsx index ff7ba8a0484..3adbabc0c89 100644 --- a/packages/@react-spectrum/color/src/ColorSwatch.tsx +++ b/packages/@react-spectrum/color/src/ColorSwatch.tsx @@ -11,7 +11,7 @@ */ import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color'; -import {Color} from '@react-types/color'; +import {Color} from '@react-stately/color'; import {ColorSwatchContext, useContextProps} from 'react-aria-components'; import {DOMRef, StyleProps} from '@react-types/shared'; import React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react'; diff --git a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx index 320e8fb0fdc..b07cf5158d0 100644 --- a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx +++ b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx @@ -11,7 +11,7 @@ */ import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components'; -import {Color} from '@react-types/color'; +import {Color} from '@react-stately/color'; import {DOMRef, StyleProps, ValueBase} from '@react-types/shared'; import React, {forwardRef, ReactElement, ReactNode} from 'react'; import {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch'; diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/packages/@react-spectrum/color/src/ColorThumb.tsx index cdc363a8552..2084f15314b 100644 --- a/packages/@react-spectrum/color/src/ColorThumb.tsx +++ b/packages/@react-spectrum/color/src/ColorThumb.tsx @@ -11,7 +11,7 @@ */ import {classNames} from '@react-spectrum/utils'; -import {Color} from '@react-types/color'; +import {Color} from '@react-stately/color'; import {DOMProps, RefObject} from '@react-types/shared'; import {Overlay} from '@react-spectrum/overlays'; import React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react'; diff --git a/packages/@react-spectrum/color/src/ColorWheel.tsx b/packages/@react-spectrum/color/src/ColorWheel.tsx index 9c92627e5c7..d183ba19a63 100644 --- a/packages/@react-spectrum/color/src/ColorWheel.tsx +++ b/packages/@react-spectrum/color/src/ColorWheel.tsx @@ -10,19 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaColorWheelProps, useColorWheel} from '@react-aria/color'; import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {ColorThumb} from './ColorThumb'; import {ColorWheelContext, useContextProps} from 'react-aria-components'; -import {FocusableRef} from '@react-types/shared'; +import {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared'; import React, {useCallback, useRef, useState} from 'react'; -import {SpectrumColorWheelProps} from '@react-types/color'; import styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css'; -import {useColorWheel} from '@react-aria/color'; import {useColorWheelState} from '@react-stately/color'; import {useFocusRing} from '@react-aria/focus'; import {useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit { + /** The outer diameter of the ColorWheel. */ + size?: DimensionValue +} + const WHEEL_THICKNESS = 24; /** diff --git a/packages/@react-spectrum/color/src/index.ts b/packages/@react-spectrum/color/src/index.ts index 96172309a7a..91c9f55b6dd 100644 --- a/packages/@react-spectrum/color/src/index.ts +++ b/packages/@react-spectrum/color/src/index.ts @@ -20,9 +20,12 @@ export {ColorPicker} from './ColorPicker'; export {ColorEditor} from './ColorEditor'; export {ColorSwatchPicker} from './ColorSwatchPicker'; export {parseColor, getColorChannels} from '@react-stately/color'; -export type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color'; +export type {SpectrumColorAreaProps} from './ColorArea'; +export type {SpectrumColorFieldProps} from './ColorField'; +export type {SpectrumColorSliderProps} from './ColorSlider'; +export type {SpectrumColorWheelProps} from './ColorWheel'; export type {SpectrumColorSwatchProps} from './ColorSwatch'; export type {SpectrumColorPickerProps} from './ColorPicker'; export type {SpectrumColorEditorProps} from './ColorEditor'; export type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker'; -export type {Color, ColorSpace, ColorFormat} from '@react-types/color'; +export type {Color, ColorSpace, ColorFormat} from '@react-stately/color'; diff --git a/packages/@react-spectrum/color/stories/ColorArea.stories.tsx b/packages/@react-spectrum/color/stories/ColorArea.stories.tsx index 73f623fbe60..9202b2a810f 100644 --- a/packages/@react-spectrum/color/stories/ColorArea.stories.tsx +++ b/packages/@react-spectrum/color/stories/ColorArea.stories.tsx @@ -11,12 +11,11 @@ */ import {action} from '@storybook/addon-actions'; -import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel} from '../'; +import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel, SpectrumColorAreaProps} from '../'; import {Flex, Grid, useLocale, View} from '@adobe/react-spectrum'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {parseColor} from '@react-stately/color'; import React, {useState} from 'react'; -import {SpectrumColorAreaProps} from '@react-types/color'; const meta: Meta = { title: 'ColorArea', diff --git a/packages/@react-spectrum/color/stories/ColorField.stories.tsx b/packages/@react-spectrum/color/stories/ColorField.stories.tsx index 14a17047433..7be919aa27f 100644 --- a/packages/@react-spectrum/color/stories/ColorField.stories.tsx +++ b/packages/@react-spectrum/color/stories/ColorField.stories.tsx @@ -11,14 +11,13 @@ */ import {action} from '@storybook/addon-actions'; -import {Color, SpectrumColorFieldProps} from '@react-types/color'; -import {ColorField} from '../'; +import {Color, parseColor} from '@react-stately/color'; +import {ColorField, SpectrumColorFieldProps} from '../'; import {Content, View} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; -import {parseColor} from '@react-stately/color'; import React, {useState} from 'react'; import {useId} from '@react-aria/utils'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-stately/color/package.json b/packages/@react-stately/color/package.json index 1e665ed751f..254fa271f85 100644 --- a/packages/@react-stately/color/package.json +++ b/packages/@react-stately/color/package.json @@ -32,7 +32,6 @@ "@react-stately/numberfield": "^3.10.3", "@react-stately/slider": "^3.7.3", "@react-stately/utils": "^3.11.0", - "@react-types/color": "^3.1.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/color/src/Color.ts b/packages/@react-stately/color/src/Color.ts index bda7629642e..86b2689efa7 100644 --- a/packages/@react-stately/color/src/Color.ts +++ b/packages/@react-stately/color/src/Color.ts @@ -11,7 +11,7 @@ */ import {clamp, toFixedNumber} from '@react-stately/utils'; -import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace, Color as IColor} from '@react-types/color'; +import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace, Color as IColor} from './types'; // @ts-ignore import intlMessages from '../intl/*.json'; import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string'; diff --git a/packages/@react-stately/color/src/index.ts b/packages/@react-stately/color/src/index.ts index c07be85011e..9e4467717f5 100644 --- a/packages/@react-stately/color/src/index.ts +++ b/packages/@react-stately/color/src/index.ts @@ -10,10 +10,10 @@ * governing permissions and limitations under the License. */ -export type {ColorAreaState} from './useColorAreaState'; -export type {ColorSliderState} from './useColorSliderState'; -export type {ColorWheelState} from './useColorWheelState'; -export type {ColorFieldState} from './useColorFieldState'; +export type {ColorAreaProps, ColorAreaState} from './useColorAreaState'; +export type {ColorSliderProps, ColorSliderState} from './useColorSliderState'; +export type {ColorWheelProps, ColorWheelState} from './useColorWheelState'; +export type {ColorFieldProps, ColorFieldState} from './useColorFieldState'; export type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState'; export type {ColorPickerProps, ColorPickerState} from './useColorPickerState'; @@ -25,5 +25,5 @@ export {useColorFieldState} from './useColorFieldState'; export {useColorChannelFieldState} from './useColorChannelFieldState'; export {useColorPickerState} from './useColorPickerState'; -export type {Color, ColorChannel, ColorFormat, ColorSpace, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color'; +export type {Color, ColorChannel, ColorFormat, ColorSpace, ColorAxes, ColorChannelRange} from './types'; export type {ColorSliderStateOptions} from './useColorSliderState'; diff --git a/packages/@react-stately/color/src/types.ts b/packages/@react-stately/color/src/types.ts new file mode 100644 index 00000000000..27b34eb2d4a --- /dev/null +++ b/packages/@react-stately/color/src/types.ts @@ -0,0 +1,79 @@ +/** A list of supported color formats. */ +export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'; + +export type ColorSpace = 'rgb' | 'hsl' | 'hsb'; + +/** A list of color channels. */ +export type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'; + +export type ColorAxes = {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel}; + +export interface ColorChannelRange { + /** The minimum value of the color channel. */ + minValue: number, + /** The maximum value of the color channel. */ + maxValue: number, + /** The step value of the color channel, used when incrementing and decrementing. */ + step: number, + /** The page step value of the color channel, used when incrementing and decrementing. */ + pageSize: number +} + +/** Represents a color value. */ +export interface Color { + /** Converts the color to the given color format, and returns a new Color object. */ + toFormat(format: ColorFormat): Color, + /** Converts the color to a string in the given format. */ + toString(format?: ColorFormat | 'css'): string, + /** Returns a duplicate of the color value. */ + clone(): Color, + /** Converts the color to hex, and returns an integer representation. */ + toHexInt(): number, + /** + * Returns the numeric value for a given channel. + * Throws an error if the channel is unsupported in the current color format. + */ + getChannelValue(channel: ColorChannel): number, + /** + * Sets the numeric value for a given channel, and returns a new Color object. + * Throws an error if the channel is unsupported in the current color format. + */ + withChannelValue(channel: ColorChannel, value: number): Color, + /** + * Returns the minimum, maximum, and step values for a given channel. + */ + getChannelRange(channel: ColorChannel): ColorChannelRange, + /** + * Returns a localized color channel name for a given channel and locale, + * for use in visual or accessibility labels. + */ + getChannelName(channel: ColorChannel, locale: string): string, + /** + * Returns the number formatting options for the given channel. + */ + getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions, + /** + * Formats the numeric value for a given channel for display according to the provided locale. + */ + formatChannelValue(channel: ColorChannel, locale: string): string, + /** + * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color. + */ + getColorSpace(): ColorSpace, + /** + * Returns the color space axes, xChannel, yChannel, zChannel. + */ + getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes, + /** + * Returns an array of the color channels within the current color space space. + */ + getColorChannels(): [ColorChannel, ColorChannel, ColorChannel], + /** + * Returns a localized name for the color, for use in visual or accessibility labels. + */ + getColorName(locale: string): string, + /** + * Returns a localized name for the hue, for use in visual or accessibility labels. + */ + getHueName(locale: string): string +} diff --git a/packages/@react-stately/color/src/useColor.ts b/packages/@react-stately/color/src/useColor.ts index 0f1bd3a6eda..c010d6a602b 100644 --- a/packages/@react-stately/color/src/useColor.ts +++ b/packages/@react-stately/color/src/useColor.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Color} from '@react-types/color'; +import {Color} from './types'; import {parseColor} from './Color'; import {useMemo} from 'react'; diff --git a/packages/@react-stately/color/src/useColorAreaState.ts b/packages/@react-stately/color/src/useColorAreaState.ts index 07884c3a379..a119d1547f2 100644 --- a/packages/@react-stately/color/src/useColorAreaState.ts +++ b/packages/@react-stately/color/src/useColorAreaState.ts @@ -11,9 +11,28 @@ */ import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils'; -import {Color, ColorAreaProps, ColorChannel} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace} from './types'; import {normalizeColor, parseColor} from './Color'; import {useMemo, useRef, useState} from 'react'; +import {ValueBase} from '@react-types/shared'; + +export interface ColorAreaProps extends Omit, 'onChange'> { + /** + * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. + * If not provided, this defaults to the color space of the `color` or `defaultColor` value. + */ + colorSpace?: ColorSpace, + /** Color channel for the horizontal axis. */ + xChannel?: ColorChannel, + /** Color channel for the vertical axis. */ + yChannel?: ColorChannel, + /** Whether the ColorArea is disabled. */ + isDisabled?: boolean, + /** Handler that is called when the value changes, as the user drags. */ + onChange?: (value: Color) => void, + /** Handler that is called when the user stops dragging. */ + onChangeEnd?: (value: Color) => void +} export interface ColorAreaState { /** The current color value displayed by the color area. */ diff --git a/packages/@react-stately/color/src/useColorChannelFieldState.ts b/packages/@react-stately/color/src/useColorChannelFieldState.ts index 05d10d5dd59..9949ea882cc 100644 --- a/packages/@react-stately/color/src/useColorChannelFieldState.ts +++ b/packages/@react-stately/color/src/useColorChannelFieldState.ts @@ -1,4 +1,5 @@ -import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace} from './types'; +import {ColorFieldProps} from './useColorFieldState'; import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield'; import {useColor} from './useColor'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/color/src/useColorFieldState.ts b/packages/@react-stately/color/src/useColorFieldState.ts index 94371a9bf1b..72a5532d5f8 100644 --- a/packages/@react-stately/color/src/useColorFieldState.ts +++ b/packages/@react-stately/color/src/useColorFieldState.ts @@ -10,13 +10,19 @@ * governing permissions and limitations under the License. */ -import {Color, ColorFieldProps} from '@react-types/color'; +import {Color} from './types'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {parseColor} from './Color'; import {useColor} from './useColor'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; +export interface ColorFieldProps extends Omit, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps, HelpTextProps { + /** Handler that is called when the value changes. */ + onChange?: (color: Color | null) => void +} + export interface ColorFieldState extends FormValidationState { /** * The current text value of the input. Updated as the user types, diff --git a/packages/@react-stately/color/src/useColorPickerState.ts b/packages/@react-stately/color/src/useColorPickerState.ts index 6592a513c35..6bc7a8bd7e2 100644 --- a/packages/@react-stately/color/src/useColorPickerState.ts +++ b/packages/@react-stately/color/src/useColorPickerState.ts @@ -1,4 +1,4 @@ -import {Color} from '@react-types/color'; +import {Color} from './types'; import {parseColor} from './Color'; import {useColor} from './useColor'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/color/src/useColorSliderState.ts b/packages/@react-stately/color/src/useColorSliderState.ts index 5c9bbf8feb3..a2ae4ff1d85 100644 --- a/packages/@react-stately/color/src/useColorSliderState.ts +++ b/packages/@react-stately/color/src/useColorSliderState.ts @@ -10,12 +10,26 @@ * governing permissions and limitations under the License. */ -import {Color, ColorSliderProps} from '@react-types/color'; +import {Color, ColorChannel, ColorSpace} from './types'; import {normalizeColor, parseColor} from './Color'; -import {SliderState, useSliderState} from '@react-stately/slider'; +import {SliderProps, SliderState, useSliderState} from '@react-stately/slider'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; +export interface ColorSliderProps extends Omit, 'minValue' | 'maxValue' | 'step' | 'pageSize' | 'onChange' | 'onChangeEnd'> { + /** + * The color space that the slider operates in. The `channel` must be in this color space. + * If not provided, this defaults to the color space of the `color` or `defaultColor` value. + */ + colorSpace?: ColorSpace, + /** The color channel that the slider manipulates. */ + channel: ColorChannel, + /** Handler that is called when the value changes, as the user drags. */ + onChange?: (value: Color) => void, + /** Handler that is called when the user stops dragging. */ + onChangeEnd?: (value: Color) => void +} + export interface ColorSliderState extends SliderState { /** The current color value represented by the color slider. */ readonly value: Color, diff --git a/packages/@react-stately/color/src/useColorWheelState.ts b/packages/@react-stately/color/src/useColorWheelState.ts index 9d9f34bc69e..9e0e3fdca24 100644 --- a/packages/@react-stately/color/src/useColorWheelState.ts +++ b/packages/@react-stately/color/src/useColorWheelState.ts @@ -10,10 +10,25 @@ * governing permissions and limitations under the License. */ -import {Color, ColorWheelProps} from '@react-types/color'; +import {Color} from './types'; import {normalizeColor, parseColor} from './Color'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useRef, useState} from 'react'; +import {ValueBase} from '@react-types/shared'; + +export interface ColorWheelProps extends Omit, 'onChange'> { + /** Whether the ColorWheel is disabled. */ + isDisabled?: boolean, + /** Handler that is called when the value changes, as the user drags. */ + onChange?: (value: Color) => void, + /** Handler that is called when the user stops dragging. */ + onChangeEnd?: (value: Color) => void, + /** + * The default value (uncontrolled). + * @default 'hsl(0, 100%, 50%)' + */ + defaultValue?: string | Color +} export interface ColorWheelState { /** The current color value represented by the color wheel. */ diff --git a/packages/@react-stately/color/test/Color.test.tsx b/packages/@react-stately/color/test/Color.test.tsx index 119fa12c9a3..a0bc03fa694 100644 --- a/packages/@react-stately/color/test/Color.test.tsx +++ b/packages/@react-stately/color/test/Color.test.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorFormat} from '@react-types/color'; +import {ColorFormat} from '@react-stately/color'; import fc from 'fast-check'; import {getDeltaE00} from 'delta-e'; import {parseColor} from '../src/Color'; diff --git a/packages/@react-types/color/package.json b/packages/@react-types/color/package.json index c5e0e8c8790..b92cbb48fe2 100644 --- a/packages/@react-types/color/package.json +++ b/packages/@react-types/color/package.json @@ -9,8 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1", - "@react-types/slider": "^3.8.2" + "@react-aria/color": "^3.1.3", + "@react-spectrum/color": "^3.1.5", + "@react-stately/color": "^3.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/color/src/index.d.ts b/packages/@react-types/color/src/index.d.ts index 51495ca50cc..51bcaf9fb89 100644 --- a/packages/@react-types/color/src/index.d.ts +++ b/packages/@react-types/color/src/index.d.ts @@ -10,214 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - DimensionValue, - DOMProps, - FocusableDOMProps, - FocusableProps, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - SpectrumFieldValidation, - SpectrumLabelableProps, - SpectrumTextInputBase, - StyleProps, - TextInputBase, - TextInputDOMProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactNode} from 'react'; -import {SliderProps} from '@react-types/slider'; - -/** A list of supported color formats. */ -export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'; - -export type ColorSpace = 'rgb' | 'hsl' | 'hsb'; - -/** A list of color channels. */ -export type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'; - -export type ColorAxes = {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel}; - -export interface ColorChannelRange { - /** The minimum value of the color channel. */ - minValue: number, - /** The maximum value of the color channel. */ - maxValue: number, - /** The step value of the color channel, used when incrementing and decrementing. */ - step: number, - /** The page step value of the color channel, used when incrementing and decrementing. */ - pageSize: number -} - -/** Represents a color value. */ -export interface Color { - /** Converts the color to the given color format, and returns a new Color object. */ - toFormat(format: ColorFormat): Color, - /** Converts the color to a string in the given format. */ - toString(format?: ColorFormat | 'css'): string, - /** Returns a duplicate of the color value. */ - clone(): Color, - /** Converts the color to hex, and returns an integer representation. */ - toHexInt(): number, - /** - * Returns the numeric value for a given channel. - * Throws an error if the channel is unsupported in the current color format. - */ - getChannelValue(channel: ColorChannel): number, - /** - * Sets the numeric value for a given channel, and returns a new Color object. - * Throws an error if the channel is unsupported in the current color format. - */ - withChannelValue(channel: ColorChannel, value: number): Color, - /** - * Returns the minimum, maximum, and step values for a given channel. - */ - getChannelRange(channel: ColorChannel): ColorChannelRange, - /** - * Returns a localized color channel name for a given channel and locale, - * for use in visual or accessibility labels. - */ - getChannelName(channel: ColorChannel, locale: string): string, - /** - * Returns the number formatting options for the given channel. - */ - getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions, - /** - * Formats the numeric value for a given channel for display according to the provided locale. - */ - formatChannelValue(channel: ColorChannel, locale: string): string, - /** - * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color. - */ - getColorSpace(): ColorSpace, - /** - * Returns the color space axes, xChannel, yChannel, zChannel. - */ - getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes, - /** - * Returns an array of the color channels within the current color space space. - */ - getColorChannels(): [ColorChannel, ColorChannel, ColorChannel], - /** - * Returns a localized name for the color, for use in visual or accessibility labels. - */ - getColorName(locale: string): string, - /** - * Returns a localized name for the hue, for use in visual or accessibility labels. - */ - getHueName(locale: string): string -} - -export interface ColorFieldProps extends Omit, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps, HelpTextProps { - /** Handler that is called when the value changes. */ - onChange?: (color: Color | null) => void -} - -export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit, AriaValidationProps { - /** Enables or disables changing the value with scroll. */ - isWheelDisabled?: boolean -} - -export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { - /** - * The color channel that this field edits. If not provided, - * the color is edited as a hex value. - */ - channel?: ColorChannel, - /** - * The color space that the color field operates in if a `channel` prop is provided. - * If no `channel` is provided, the color field always displays the color as an RGB hex value. - */ - colorSpace?: ColorSpace, - /** Whether the ColorField should be displayed with a quiet style. */ - isQuiet?: boolean -} - -export interface ColorWheelProps extends Omit, 'onChange'> { - /** Whether the ColorWheel is disabled. */ - isDisabled?: boolean, - /** Handler that is called when the value changes, as the user drags. */ - onChange?: (value: Color) => void, - /** Handler that is called when the user stops dragging. */ - onChangeEnd?: (value: Color) => void, - /** - * The default value (uncontrolled). - * @default 'hsl(0, 100%, 50%)' - */ - defaultValue?: string | Color -} - -export interface AriaColorWheelProps extends ColorWheelProps, InputDOMProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit { - /** The outer diameter of the ColorWheel. */ - size?: DimensionValue -} - -export interface ColorSliderProps extends Omit, 'minValue' | 'maxValue' | 'step' | 'pageSize' | 'onChange' | 'onChangeEnd'> { - /** - * The color space that the slider operates in. The `channel` must be in this color space. - * If not provided, this defaults to the color space of the `color` or `defaultColor` value. - */ - colorSpace?: ColorSpace, - /** The color channel that the slider manipulates. */ - channel: ColorChannel, - /** Handler that is called when the value changes, as the user drags. */ - onChange?: (value: Color) => void, - /** Handler that is called when the user stops dragging. */ - onChangeEnd?: (value: Color) => void -} - -export interface AriaColorSliderProps extends ColorSliderProps, InputDOMProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps { - /** Whether the value label is displayed. True by default if there is a label, false by default if not. */ - showValueLabel?: boolean, - /** A ContextualHelp element to place next to the label. */ - contextualHelp?: ReactNode -} - -export interface ColorAreaProps extends Omit, 'onChange'> { - /** - * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. - * If not provided, this defaults to the color space of the `color` or `defaultColor` value. - */ - colorSpace?: ColorSpace, - /** Color channel for the horizontal axis. */ - xChannel?: ColorChannel, - /** Color channel for the vertical axis. */ - yChannel?: ColorChannel, - /** Whether the ColorArea is disabled. */ - isDisabled?: boolean, - /** Handler that is called when the value changes, as the user drags. */ - onChange?: (value: Color) => void, - /** Handler that is called when the user stops dragging. */ - onChangeEnd?: (value: Color) => void -} - -export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps { - /** - * The name of the x channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - xName?: string, - /** - * The name of the y channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - yName?: string, - /** - * The `` element to associate the ColorArea with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). - */ - form?: string -} - -export interface SpectrumColorAreaProps extends AriaColorAreaProps, Omit { - /** Size of the Color Area. */ - size?: DimensionValue -} +export {ColorFormat, ColorSpace, ColorChannel, ColorAxes, ColorChannelRange, Color, ColorFieldProps, ColorWheelProps, ColorSliderProps, ColorAreaProps} from '@react-stately/color'; +export {AriaColorFieldProps, AriaColorWheelProps, AriaColorSliderProps, AriaColorAreaProps} from '@react-aria/color'; +export {SpectrumColorFieldProps, SpectrumColorWheelProps, SpectrumColorSliderProps, SpectrumColorAreaProps} from '@react-spectrum/color'; From ec0f4a273ecf2e760dd3a0c025f2152e4ae0108e Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 15:07:54 -0500 Subject: [PATCH 17/56] Overlays --- .../overlays/src/calculatePosition.ts | 2 +- packages/@react-aria/overlays/src/index.ts | 3 +- .../overlays/src/useOverlayPosition.ts | 49 ++++++++++++- .../@react-aria/overlays/src/usePopover.ts | 3 +- .../stories/UseOverlayPosition.stories.tsx | 3 +- .../@react-spectrum/menu/src/MenuTrigger.tsx | 2 +- .../menu/src/calculatePosition.ts | 2 +- .../menu/src/useOverlayPosition.ts | 2 +- .../@react-spectrum/menu/src/usePopover.ts | 3 +- .../@react-spectrum/overlays/src/Modal.tsx | 3 +- .../@react-spectrum/overlays/src/Overlay.tsx | 19 ++++- .../@react-spectrum/overlays/src/Tray.tsx | 3 +- .../@react-spectrum/overlays/src/index.ts | 1 + packages/@react-spectrum/s2/package.json | 1 + .../@react-spectrum/s2/src/ContextualHelp.tsx | 2 +- .../@react-spectrum/tooltip/src/context.ts | 2 +- packages/@react-stately/overlays/src/index.ts | 3 +- .../overlays/src/useOverlayTriggerState.ts | 10 ++- packages/@react-types/overlays/package.json | 2 + packages/@react-types/overlays/src/index.d.ts | 72 +++---------------- 20 files changed, 99 insertions(+), 88 deletions(-) diff --git a/packages/@react-aria/overlays/src/calculatePosition.ts b/packages/@react-aria/overlays/src/calculatePosition.ts index e5df4569701..8707092b943 100644 --- a/packages/@react-aria/overlays/src/calculatePosition.ts +++ b/packages/@react-aria/overlays/src/calculatePosition.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays'; +import {Axis, Placement, PlacementAxis, SizeAxis} from './useOverlayPosition'; import {clamp, isWebKit} from '@react-aria/utils'; interface Position { diff --git a/packages/@react-aria/overlays/src/index.ts b/packages/@react-aria/overlays/src/index.ts index cf37e048e7d..bf3f0de6165 100644 --- a/packages/@react-aria/overlays/src/index.ts +++ b/packages/@react-aria/overlays/src/index.ts @@ -21,7 +21,7 @@ export {useModalOverlay} from './useModalOverlay'; export {Overlay, useOverlayFocusContain} from './Overlay'; export {UNSAFE_PortalProvider, useUNSAFE_PortalContext} from './PortalProvider'; -export type {AriaPositionProps, PositionAria} from './useOverlayPosition'; +export type {AriaPositionProps, PositionAria, Placement, PlacementAxis, PositionProps, Axis, SizeAxis} from './useOverlayPosition'; export type {AriaOverlayProps, OverlayAria} from './useOverlay'; export type {OverlayTriggerAria, OverlayTriggerProps} from './useOverlayTrigger'; export type {AriaModalOptions, ModalAria, ModalProviderAria, ModalProviderProps, OverlayContainerProps} from './useModal'; @@ -29,5 +29,4 @@ export type {DismissButtonProps} from './DismissButton'; export type {AriaPopoverProps, PopoverAria} from './usePopover'; export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay'; export type {OverlayProps} from './Overlay'; -export type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays'; export type {PortalProviderProps, PortalProviderContextValue} from './PortalProvider'; diff --git a/packages/@react-aria/overlays/src/useOverlayPosition.ts b/packages/@react-aria/overlays/src/useOverlayPosition.ts index 59c61a08075..659b2304a09 100644 --- a/packages/@react-aria/overlays/src/useOverlayPosition.ts +++ b/packages/@react-aria/overlays/src/useOverlayPosition.ts @@ -12,12 +12,59 @@ import {calculatePosition, getRect, PositionResult} from './calculatePosition'; import {DOMAttributes, RefObject} from '@react-types/shared'; -import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays'; import {useCallback, useEffect, useRef, useState} from 'react'; import {useCloseOnScroll} from './useCloseOnScroll'; import {useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {useLocale} from '@react-aria/i18n'; +export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | + 'top' | 'top left' | 'top right' | 'top start' | 'top end' | + 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | + 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'; + +export type Axis = 'top' | 'bottom' | 'left' | 'right'; +export type SizeAxis = 'width' | 'height'; +export type PlacementAxis = Axis | 'center'; + +export interface PositionProps { + /** + * The placement of the element with respect to its anchor element. + * @default 'bottom' + */ + placement?: Placement, + /** + * The placement padding that should be applied between the element and its + * surrounding container. + * @default 12 + */ + containerPadding?: number, + /** + * The additional offset applied along the main axis between the element and its + * anchor element. + * @default 0 + */ + offset?: number, + /** + * The additional offset applied along the cross axis between the element and its + * anchor element. + * @default 0 + */ + crossOffset?: number, + /** + * Whether the element should flip its orientation (e.g. top to bottom or left to right) when + * there is insufficient room for it to render completely. + * @default true + */ + shouldFlip?: boolean, + // /** + // * The element that should be used as the bounding container when calculating container offset + // * or whether it should flip. + // */ + // boundaryElement?: Element, + /** Whether the element is rendered. */ + isOpen?: boolean +} + export interface AriaPositionProps extends PositionProps { /** * Cross size of the overlay arrow in pixels. diff --git a/packages/@react-aria/overlays/src/usePopover.ts b/packages/@react-aria/overlays/src/usePopover.ts index 3263932e978..05eb84faeee 100644 --- a/packages/@react-aria/overlays/src/usePopover.ts +++ b/packages/@react-aria/overlays/src/usePopover.ts @@ -11,11 +11,10 @@ */ import {ariaHideOutside, keepVisible} from './ariaHideOutside'; -import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition'; +import {AriaPositionProps, PlacementAxis, useOverlayPosition} from './useOverlayPosition'; import {DOMAttributes, RefObject} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import {OverlayTriggerState} from '@react-stately/overlays'; -import {PlacementAxis} from '@react-types/overlays'; import {useEffect} from 'react'; import {useOverlay} from './useOverlay'; import {usePreventScroll} from './usePreventScroll'; diff --git a/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx b/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx index 194b4be09ab..1feec88228b 100644 --- a/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx +++ b/packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx @@ -11,11 +11,10 @@ */ import {mergeProps} from '@react-aria/utils'; -import {Placement} from '@react-types/overlays'; +import {Placement, useOverlayPosition, useOverlayTrigger} from '../src'; import React, {JSX} from 'react'; import ReactDOM from 'react-dom'; import {StoryFn} from '@storybook/react'; -import {useOverlayPosition, useOverlayTrigger} from '../src'; import {useOverlayTriggerState} from '@react-stately/overlays'; function Trigger(props: { diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx index 6f23974af9e..7c50ef81bdc 100644 --- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx +++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx @@ -13,7 +13,7 @@ import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils'; import {DOMRef} from '@react-types/shared'; import {MenuContext} from './context'; -import {Placement} from '@react-types/overlays'; +import {Placement} from '@react-aria/overlays'; import {Popover, Tray} from '@react-spectrum/overlays'; import {PressResponder, useInteractOutside} from '@react-aria/interactions'; import React, {forwardRef, Fragment, useRef} from 'react'; diff --git a/packages/@react-spectrum/menu/src/calculatePosition.ts b/packages/@react-spectrum/menu/src/calculatePosition.ts index ad872c7d7ea..e93e8329394 100644 --- a/packages/@react-spectrum/menu/src/calculatePosition.ts +++ b/packages/@react-spectrum/menu/src/calculatePosition.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays'; +import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-aria/overlays'; import {clamp, isWebKit} from '@react-aria/utils'; interface Position { diff --git a/packages/@react-spectrum/menu/src/useOverlayPosition.ts b/packages/@react-spectrum/menu/src/useOverlayPosition.ts index 59c61a08075..a0e10692037 100644 --- a/packages/@react-spectrum/menu/src/useOverlayPosition.ts +++ b/packages/@react-spectrum/menu/src/useOverlayPosition.ts @@ -12,7 +12,7 @@ import {calculatePosition, getRect, PositionResult} from './calculatePosition'; import {DOMAttributes, RefObject} from '@react-types/shared'; -import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays'; +import {Placement, PlacementAxis, PositionProps} from '@react-aria/overlays'; import {useCallback, useEffect, useRef, useState} from 'react'; import {useCloseOnScroll} from './useCloseOnScroll'; import {useLayoutEffect, useResizeObserver} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/menu/src/usePopover.ts b/packages/@react-spectrum/menu/src/usePopover.ts index 2016a4d7da6..c553693a5d7 100644 --- a/packages/@react-spectrum/menu/src/usePopover.ts +++ b/packages/@react-spectrum/menu/src/usePopover.ts @@ -10,11 +10,10 @@ * governing permissions and limitations under the License. */ -import {ariaHideOutside, AriaPositionProps, useOverlay, usePreventScroll} from '@react-aria/overlays'; +import {ariaHideOutside, AriaPositionProps, PlacementAxis, useOverlay, usePreventScroll} from '@react-aria/overlays'; import {DOMAttributes, RefObject} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import {OverlayTriggerState} from '@react-stately/overlays'; -import {PlacementAxis} from '@react-types/overlays'; import {useEffect} from 'react'; import {useOverlayPosition} from './useOverlayPosition'; diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index 6a8e34450c4..a26c777ceeb 100644 --- a/packages/@react-spectrum/overlays/src/Modal.tsx +++ b/packages/@react-spectrum/overlays/src/Modal.tsx @@ -14,8 +14,7 @@ import {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, RefObject, StyleProps} from '@react-types/shared'; import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css'; -import {Overlay} from './Overlay'; -import {OverlayProps} from '@react-types/overlays'; +import {Overlay, OverlayProps} from './Overlay'; import {OverlayTriggerState} from '@react-stately/overlays'; import overrideStyles from './overlays.css'; import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react'; diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx index 7c43194a04e..6f385536415 100644 --- a/packages/@react-spectrum/overlays/src/Overlay.tsx +++ b/packages/@react-spectrum/overlays/src/Overlay.tsx @@ -12,11 +12,26 @@ import {DOMRef} from '@react-types/shared'; import {OpenTransition} from './OpenTransition'; -import {OverlayProps} from '@react-types/overlays'; import {Provider} from '@react-spectrum/provider'; -import React, {useCallback, useState} from 'react'; +import React, {MutableRefObject, ReactNode, useCallback, useState} from 'react'; import {Overlay as ReactAriaOverlay} from '@react-aria/overlays'; +export interface OverlayProps { + children: ReactNode, + isOpen?: boolean, + container?: Element, + isKeyboardDismissDisabled?: boolean, + onEnter?: () => void, + onEntering?: () => void, + onEntered?: () => void, + onExit?: () => void, + onExiting?: () => void, + onExited?: () => void, + nodeRef: MutableRefObject, + disableFocusManagement?: boolean, + shouldContainFocus?: boolean +} + export const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef) { let { children, diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx index 2d72318d72d..8fd6b6c6576 100644 --- a/packages/@react-spectrum/overlays/src/Tray.tsx +++ b/packages/@react-spectrum/overlays/src/Tray.tsx @@ -13,8 +13,7 @@ import {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, RefObject, StyleProps} from '@react-types/shared'; -import {Overlay} from './Overlay'; -import {OverlayProps} from '@react-types/overlays'; +import {Overlay, OverlayProps} from './Overlay'; import {OverlayTriggerState} from '@react-stately/overlays'; import overrideStyles from './overlays.css'; import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react'; diff --git a/packages/@react-spectrum/overlays/src/index.ts b/packages/@react-spectrum/overlays/src/index.ts index d48ba9c86d3..b574dfd412b 100644 --- a/packages/@react-spectrum/overlays/src/index.ts +++ b/packages/@react-spectrum/overlays/src/index.ts @@ -17,3 +17,4 @@ export {Popover} from './Popover'; export {Modal} from './Modal'; export {Tray} from './Tray'; export {OpenTransition} from './OpenTransition'; +export type {OverlayProps} from './Overlay'; diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 544fb05905a..11b37f6d74d 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -158,6 +158,7 @@ "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", "@react-aria/live-announcer": "^3.4.4", + "@react-aria/overlays": "^3.31.0", "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-stately/layout": "^4.5.2", diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx index 7cd5a31f5e0..3090eda5f71 100644 --- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx @@ -11,7 +11,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeStyles} from '../style/runtime'; -import {Placement} from '@react-types/overlays'; +import {Placement} from 'react-aria'; import {Popover, PopoverDialogProps} from './Popover'; import {space, style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils' with { type: 'macro' }; diff --git a/packages/@react-spectrum/tooltip/src/context.ts b/packages/@react-spectrum/tooltip/src/context.ts index 1dcecea82f3..a680153bf67 100644 --- a/packages/@react-spectrum/tooltip/src/context.ts +++ b/packages/@react-spectrum/tooltip/src/context.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {PlacementAxis} from '@react-types/overlays'; +import {PlacementAxis} from '@react-aria/overlays'; import React, {HTMLAttributes} from 'react'; import {RefObject, StyleProps} from '@react-types/shared'; import {TooltipTriggerState} from '@react-stately/tooltip'; diff --git a/packages/@react-stately/overlays/src/index.ts b/packages/@react-stately/overlays/src/index.ts index c53cf8640cb..bbd0beb17c9 100644 --- a/packages/@react-stately/overlays/src/index.ts +++ b/packages/@react-stately/overlays/src/index.ts @@ -12,5 +12,4 @@ export {useOverlayTriggerState} from './useOverlayTriggerState'; -export type {OverlayTriggerProps} from '@react-types/overlays'; -export type {OverlayTriggerState} from './useOverlayTriggerState'; +export type {OverlayTriggerProps, OverlayTriggerState} from './useOverlayTriggerState'; diff --git a/packages/@react-stately/overlays/src/useOverlayTriggerState.ts b/packages/@react-stately/overlays/src/useOverlayTriggerState.ts index 8e698afeea2..60827f5bf3f 100644 --- a/packages/@react-stately/overlays/src/useOverlayTriggerState.ts +++ b/packages/@react-stately/overlays/src/useOverlayTriggerState.ts @@ -10,10 +10,18 @@ * governing permissions and limitations under the License. */ -import {OverlayTriggerProps} from '@react-types/overlays'; import {useCallback} from 'react'; import {useControlledState} from '@react-stately/utils'; +export interface OverlayTriggerProps { + /** Whether the overlay is open by default (controlled). */ + isOpen?: boolean, + /** Whether the overlay is open by default (uncontrolled). */ + defaultOpen?: boolean, + /** Handler that is called when the overlay's open state changes. */ + onOpenChange?: (isOpen: boolean) => void +} + export interface OverlayTriggerState { /** Whether the overlay is currently open. */ readonly isOpen: boolean, diff --git a/packages/@react-types/overlays/package.json b/packages/@react-types/overlays/package.json index 8ddde4dda60..1de3ca6909e 100644 --- a/packages/@react-types/overlays/package.json +++ b/packages/@react-types/overlays/package.json @@ -9,6 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/overlays": "^3.31.0", + "@react-spectrum/overlays": "^5.9.1", "@react-types/shared": "^3.32.1" }, "peerDependencies": { diff --git a/packages/@react-types/overlays/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts index 89e07151a26..9541a4e8cb1 100644 --- a/packages/@react-types/overlays/src/index.d.ts +++ b/packages/@react-types/overlays/src/index.d.ts @@ -10,73 +10,15 @@ * governing permissions and limitations under the License. */ -import {HTMLAttributes, MutableRefObject, ReactElement, ReactNode} from 'react'; +import {HTMLAttributes, ReactElement, ReactNode} from 'react'; +import {OverlayProps} from '@react-spectrum/overlays'; +import {PlacementAxis} from '@react-aria/overlays'; import {StyleProps} from '@react-types/shared'; -export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | - 'top' | 'top left' | 'top right' | 'top start' | 'top end' | - 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | - 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'; - -export type Axis = 'top' | 'bottom' | 'left' | 'right'; -export type SizeAxis = 'width' | 'height'; -export type PlacementAxis = Axis | 'center'; - -export interface PositionProps { - /** - * The placement of the element with respect to its anchor element. - * @default 'bottom' - */ - placement?: Placement, - /** - * The placement padding that should be applied between the element and its - * surrounding container. - * @default 12 - */ - containerPadding?: number, - /** - * The additional offset applied along the main axis between the element and its - * anchor element. - * @default 0 - */ - offset?: number, - /** - * The additional offset applied along the cross axis between the element and its - * anchor element. - * @default 0 - */ - crossOffset?: number, - /** - * Whether the element should flip its orientation (e.g. top to bottom or left to right) when - * there is insufficient room for it to render completely. - * @default true - */ - shouldFlip?: boolean, - // /** - // * The element that should be used as the bounding container when calculating container offset - // * or whether it should flip. - // */ - // boundaryElement?: Element, - /** Whether the element is rendered. */ - isOpen?: boolean -} - -export interface OverlayProps { - children: ReactNode, - isOpen?: boolean, - container?: Element, - isKeyboardDismissDisabled?: boolean, - onEnter?: () => void, - onEntering?: () => void, - onEntered?: () => void, - onExit?: () => void, - onExiting?: () => void, - onExited?: () => void, - nodeRef: MutableRefObject, - disableFocusManagement?: boolean, - shouldContainFocus?: boolean -} +export {Placement, Axis, SizeAxis, PlacementAxis, PositionProps} from '@react-aria/overlays'; +export {OverlayProps} from '@react-spectrum/overlays'; +// Old and unused. Left for backward compatibility. export interface ModalProps extends StyleProps, Omit { children: ReactElement, isOpen?: boolean, @@ -85,6 +27,7 @@ export interface ModalProps extends StyleProps, Omit { isDismissable?: boolean } +// Old and unused. Left for backward compatibility. export interface PopoverProps extends StyleProps, Omit { children: ReactNode, placement?: PlacementAxis, @@ -97,6 +40,7 @@ export interface PopoverProps extends StyleProps, Omit isDismissable?: boolean } +// Old and unused. Left for backward compatibility. export interface TrayProps extends StyleProps, Omit { children: ReactElement, isOpen?: boolean, From ac444bd4ed5e1f1b4faa1f5ee3497662b960f0ce Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 15:12:14 -0500 Subject: [PATCH 18/56] ContextualHelp --- .../contextualhelp/package.json | 3 ++- .../contextualhelp/src/ContextualHelp.tsx | 22 ++++++++++++++++--- .../contextualhelp/src/index.ts | 2 +- .../@react-types/contextualhelp/package.json | 3 +-- .../contextualhelp/src/index.d.ts | 19 +--------------- packages/@react-types/overlays/package.json | 1 + packages/@react-types/overlays/src/index.d.ts | 10 +-------- 7 files changed, 26 insertions(+), 34 deletions(-) diff --git a/packages/@react-spectrum/contextualhelp/package.json b/packages/@react-spectrum/contextualhelp/package.json index 1fae65896c1..e72cab25618 100644 --- a/packages/@react-spectrum/contextualhelp/package.json +++ b/packages/@react-spectrum/contextualhelp/package.json @@ -41,11 +41,12 @@ }, "dependencies": { "@react-aria/i18n": "^3.12.14", + "@react-aria/overlays": "^3.31.0", "@react-aria/utils": "^3.32.0", "@react-spectrum/button": "^3.17.5", "@react-spectrum/dialog": "^3.9.5", "@react-spectrum/utils": "^3.12.10", - "@react-types/contextualhelp": "^3.2.22", + "@react-stately/overlays": "^3.6.21", "@react-types/shared": "^3.32.1", "@spectrum-icons/workflow": "^4.2.26", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 4d2857e0032..1bac573ca6c 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -11,19 +11,35 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaLabelingProps, DOMProps, FocusableRef, StyleProps} from '@react-types/shared'; import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; -import {FocusableRef} from '@react-types/shared'; import HelpOutline from '@spectrum-icons/workflow/HelpOutline'; import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css'; import InfoOutline from '@spectrum-icons/workflow/InfoOutline'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps, useLabels} from '@react-aria/utils'; -import React from 'react'; -import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; +import {OverlayTriggerProps} from '@react-stately/overlays'; +import {Placement, PositionProps} from '@react-aria/overlays'; +import React, {ReactNode} from 'react'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumContextualHelpProps extends OverlayTriggerProps, PositionProps, StyleProps, DOMProps, AriaLabelingProps { + /** Contents of the Contextual Help popover. */ + children: ReactNode, + /** + * Indicates whether contents are informative or provides helpful guidance. + * @default 'help' + */ + variant?: 'help' | 'info', + /** + * The placement of the popover with respect to the action button. + * @default 'bottom start' + */ + placement?: Placement +} + /** * Contextual help shows a user extra information about the state of an adjacent component, or a total view. */ diff --git a/packages/@react-spectrum/contextualhelp/src/index.ts b/packages/@react-spectrum/contextualhelp/src/index.ts index f7137ca1cbb..0d4589745f0 100644 --- a/packages/@react-spectrum/contextualhelp/src/index.ts +++ b/packages/@react-spectrum/contextualhelp/src/index.ts @@ -11,4 +11,4 @@ */ export {ContextualHelp} from './ContextualHelp'; -export type {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; +export type {SpectrumContextualHelpProps} from './ContextualHelp'; diff --git a/packages/@react-types/contextualhelp/package.json b/packages/@react-types/contextualhelp/package.json index 90791c8656b..3f99a0d0ecc 100644 --- a/packages/@react-types/contextualhelp/package.json +++ b/packages/@react-types/contextualhelp/package.json @@ -9,8 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.2", - "@react-types/shared": "^3.32.1" + "@react-spectrum/contextualhelp": "^3.6.29" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/contextualhelp/src/index.d.ts b/packages/@react-types/contextualhelp/src/index.d.ts index 565966845c4..f980df1442d 100644 --- a/packages/@react-types/contextualhelp/src/index.d.ts +++ b/packages/@react-types/contextualhelp/src/index.d.ts @@ -10,21 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps, Placement, PositionProps} from '@react-types/overlays'; -import {ReactNode} from 'react'; - -export interface SpectrumContextualHelpProps extends OverlayTriggerProps, PositionProps, StyleProps, DOMProps, AriaLabelingProps { - /** Contents of the Contextual Help popover. */ - children: ReactNode, - /** - * Indicates whether contents are informative or provides helpful guidance. - * @default 'help' - */ - variant?: 'help' | 'info', - /** - * The placement of the popover with respect to the action button. - * @default 'bottom start' - */ - placement?: Placement -} +export {SpectrumContextualHelpProps} from '@react-spectrum/contextualhelp'; diff --git a/packages/@react-types/overlays/package.json b/packages/@react-types/overlays/package.json index 1de3ca6909e..1578bfcf2d3 100644 --- a/packages/@react-types/overlays/package.json +++ b/packages/@react-types/overlays/package.json @@ -11,6 +11,7 @@ "dependencies": { "@react-aria/overlays": "^3.31.0", "@react-spectrum/overlays": "^5.9.1", + "@react-stately/overlays": "^3.6.21", "@react-types/shared": "^3.32.1" }, "peerDependencies": { diff --git a/packages/@react-types/overlays/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts index 9541a4e8cb1..4686d4caf59 100644 --- a/packages/@react-types/overlays/src/index.d.ts +++ b/packages/@react-types/overlays/src/index.d.ts @@ -15,6 +15,7 @@ import {OverlayProps} from '@react-spectrum/overlays'; import {PlacementAxis} from '@react-aria/overlays'; import {StyleProps} from '@react-types/shared'; +export {OverlayTriggerProps} from '@react-stately/overlays'; export {Placement, Axis, SizeAxis, PlacementAxis, PositionProps} from '@react-aria/overlays'; export {OverlayProps} from '@react-spectrum/overlays'; @@ -49,12 +50,3 @@ export interface TrayProps extends StyleProps, Omit { isFixedHeight?: boolean, isNonModal?: boolean } - -export interface OverlayTriggerProps { - /** Whether the overlay is open by default (controlled). */ - isOpen?: boolean, - /** Whether the overlay is open by default (uncontrolled). */ - defaultOpen?: boolean, - /** Handler that is called when the overlay's open state changes. */ - onOpenChange?: (isOpen: boolean) => void -} From 9b442f2dbfbd7999046f4512b456502c360be4c1 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 20:47:03 -0500 Subject: [PATCH 19/56] Dialog --- packages/@react-aria/datepicker/package.json | 3 +- .../datepicker/src/useDatePicker.ts | 4 +- .../datepicker/src/useDateRangePicker.ts | 4 +- packages/@react-aria/dialog/package.json | 1 - packages/@react-aria/dialog/src/index.ts | 3 +- packages/@react-aria/dialog/src/useDialog.ts | 11 ++- .../dialog/chromatic/AlertDialog.stories.tsx | 3 +- packages/@react-spectrum/dialog/package.json | 2 - .../dialog/src/AlertDialog.tsx | 36 +++++++- .../@react-spectrum/dialog/src/Dialog.tsx | 18 +++- .../dialog/src/DialogContainer.tsx | 19 +++- .../dialog/src/DialogTrigger.tsx | 32 ++++++- packages/@react-spectrum/dialog/src/index.ts | 5 +- .../dialog/stories/AlertDialog.stories.tsx | 3 +- packages/@react-spectrum/s2/package.json | 1 - .../s2/src/DialogContainer.tsx | 8 +- packages/@react-types/dialog/package.json | 4 +- packages/@react-types/dialog/src/index.d.ts | 92 +------------------ 18 files changed, 122 insertions(+), 127 deletions(-) diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json index 8fa0b397b5b..7087296bfbc 100644 --- a/packages/@react-aria/datepicker/package.json +++ b/packages/@react-aria/datepicker/package.json @@ -29,6 +29,8 @@ "@internationalized/date": "^3.10.1", "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", + "@react-aria/button": "^3.14.3", + "@react-aria/dialog": "^3.5.32", "@react-aria/focus": "^3.21.3", "@react-aria/form": "^3.1.3", "@react-aria/i18n": "^3.12.14", @@ -41,7 +43,6 @@ "@react-types/button": "^3.14.1", "@react-types/calendar": "^3.8.1", "@react-types/datepicker": "^3.13.3", - "@react-types/dialog": "^3.5.22", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts index f768b34df88..0b4363f4a1c 100644 --- a/packages/@react-aria/datepicker/src/useDatePicker.ts +++ b/packages/@react-aria/datepicker/src/useDatePicker.ts @@ -10,9 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaDatePickerProps, DateValue} from '@react-types/datepicker'; -import {AriaDialogProps} from '@react-types/dialog'; +import {AriaDialogProps} from '@react-aria/dialog'; import {CalendarProps} from '@react-types/calendar'; import {createFocusManager} from '@react-aria/focus'; import {DatePickerState} from '@react-stately/datepicker'; diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts index 6e9c748455b..1b6483de79d 100644 --- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts +++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts @@ -10,9 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker'; -import {AriaDialogProps} from '@react-types/dialog'; +import {AriaDialogProps} from '@react-aria/dialog'; import {createFocusManager} from '@react-aria/focus'; import {DateRange, RangeCalendarProps} from '@react-types/calendar'; import {DateRangePickerState} from '@react-stately/datepicker'; diff --git a/packages/@react-aria/dialog/package.json b/packages/@react-aria/dialog/package.json index c8d8899db82..35c7f88e89a 100644 --- a/packages/@react-aria/dialog/package.json +++ b/packages/@react-aria/dialog/package.json @@ -33,7 +33,6 @@ "@react-aria/interactions": "^3.26.0", "@react-aria/overlays": "^3.31.0", "@react-aria/utils": "^3.32.0", - "@react-types/dialog": "^3.5.22", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/dialog/src/index.ts b/packages/@react-aria/dialog/src/index.ts index 814368f58fc..b544f2e8068 100644 --- a/packages/@react-aria/dialog/src/index.ts +++ b/packages/@react-aria/dialog/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useDialog} from './useDialog'; -export type {AriaDialogProps} from '@react-types/dialog'; -export type {DialogAria} from './useDialog'; +export type {AriaDialogProps, DialogAria} from './useDialog'; diff --git a/packages/@react-aria/dialog/src/useDialog.ts b/packages/@react-aria/dialog/src/useDialog.ts index 33c4a144b5a..1fd5d7b9b4f 100644 --- a/packages/@react-aria/dialog/src/useDialog.ts +++ b/packages/@react-aria/dialog/src/useDialog.ts @@ -10,13 +10,20 @@ * governing permissions and limitations under the License. */ -import {AriaDialogProps} from '@react-types/dialog'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement, RefObject} from '@react-types/shared'; import {filterDOMProps, useSlotId} from '@react-aria/utils'; import {focusSafely} from '@react-aria/interactions'; import {useEffect, useRef} from 'react'; import {useOverlayFocusContain} from '@react-aria/overlays'; +export interface AriaDialogProps extends DOMProps, AriaLabelingProps { + /** + * The accessibility role for the dialog. + * @default 'dialog' + */ + role?: 'dialog' | 'alertdialog' +} + export interface DialogAria { /** Props for the dialog container element. */ dialogProps: DOMAttributes, diff --git a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx index 6ba04a79b62..f8a88d11e6c 100644 --- a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx +++ b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx @@ -11,11 +11,10 @@ */ import {ActionButton} from '@react-spectrum/button'; -import {AlertDialog, DialogTrigger} from '../'; +import {AlertDialog, DialogTrigger, SpectrumAlertDialogProps} from '../'; import {Meta, StoryFn} from '@storybook/react'; import React, {JSX} from 'react'; import {singleParagraph} from './Dialog.stories'; -import {SpectrumAlertDialogProps} from '@react-types/dialog'; export default { title: 'Dialog/Alert', diff --git a/packages/@react-spectrum/dialog/package.json b/packages/@react-spectrum/dialog/package.json index e1019b60a63..ec69400edda 100644 --- a/packages/@react-spectrum/dialog/package.json +++ b/packages/@react-spectrum/dialog/package.json @@ -54,8 +54,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-spectrum/view": "^3.6.24", "@react-stately/overlays": "^3.6.21", - "@react-types/button": "^3.14.1", - "@react-types/dialog": "^3.5.22", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx index 307657593fd..767c39762e2 100644 --- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx +++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx @@ -11,7 +11,7 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; -import {Button} from '@react-spectrum/button'; +import {Button, SpectrumButtonProps} from '@react-spectrum/button'; import {ButtonGroup} from '@react-spectrum/buttongroup'; import {chain, filterDOMProps} from '@react-aria/utils'; import {classNames, useStyleProps} from '@react-spectrum/utils'; @@ -19,16 +19,42 @@ import {Content} from '@react-spectrum/view'; import {Dialog} from './Dialog'; import {DialogContext, DialogContextValue} from './context'; import {Divider} from '@react-spectrum/divider'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {Heading} from '@react-spectrum/text'; // @ts-ignore import intlMessages from '../intl/*.json'; -import React, {forwardRef, useContext} from 'react'; -import {SpectrumAlertDialogProps} from '@react-types/dialog'; -import {SpectrumButtonProps} from '@react-types/button'; +import React, {forwardRef, ReactNode, useContext} from 'react'; import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumAlertDialogProps extends DOMProps, StyleProps { + /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */ + variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning', + /** The title of the AlertDialog. */ + title: string, + /** The contents of the AlertDialog. */ + children: ReactNode, + /** The label to display within the cancel button. */ + cancelLabel?: string, + /** The label to display within the confirm button. */ + primaryActionLabel: string, + /** The label to display within the secondary button. */ + secondaryActionLabel?: string, + /** Whether the primary button is disabled. */ + isPrimaryActionDisabled?: boolean, + /** Whether the secondary button is disabled. */ + isSecondaryActionDisabled?: boolean, + /** Handler that is called when the cancel button is pressed. */ + onCancel?: () => void, + /** Handler that is called when the primary button is pressed. */ + onPrimaryAction?: () => void, + /** Handler that is called when the secondary button is pressed. */ + onSecondaryAction?: () => void, + /** Button to focus by default when the dialog opens. */ + autoFocusButton?: 'cancel' | 'primary' | 'secondary' + // allowsKeyboardConfirmation?: boolean, // triggers primary action +} + /** * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge. */ diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 70adf576081..e61d08ea18a 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -11,6 +11,7 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaDialogProps, useDialog} from '@react-aria/dialog'; import { classNames, SlotProvider, @@ -22,17 +23,26 @@ import { } from '@react-spectrum/utils'; import CrossLarge from '@spectrum-icons/ui/CrossLarge'; import {DialogContext, DialogContextValue} from './context'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, StyleProps} from '@react-types/shared'; import {Grid} from '@react-spectrum/layout'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; -import React, {useContext, useMemo, useRef} from 'react'; -import {SpectrumDialogProps} from '@react-types/dialog'; +import React, {ReactNode, useContext, useMemo, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; -import {useDialog} from '@react-aria/dialog'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface SpectrumDialogProps extends AriaDialogProps, StyleProps { + /** The contents of the Dialog. */ + children: ReactNode, + /** The size of the Dialog. Only applies to "modal" type Dialogs. */ + size?: 'S' | 'M' | 'L', + /** Whether the Dialog is dismissable. See the [examples](#examples) for more details. */ + isDismissable?: boolean, + /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ + onDismiss?: () => void +} + let sizeMap = { S: 'small', M: 'medium', diff --git a/packages/@react-spectrum/dialog/src/DialogContainer.tsx b/packages/@react-spectrum/dialog/src/DialogContainer.tsx index e8baa85c408..83286e566ae 100644 --- a/packages/@react-spectrum/dialog/src/DialogContainer.tsx +++ b/packages/@react-spectrum/dialog/src/DialogContainer.tsx @@ -12,10 +12,25 @@ import {DialogContext} from './context'; import {Modal} from '@react-spectrum/overlays'; -import React, {JSX, ReactElement, useState} from 'react'; -import {SpectrumDialogContainerProps} from '@react-types/dialog'; +import React, {JSX, ReactElement, ReactNode, useState} from 'react'; import {useOverlayTriggerState} from '@react-stately/overlays'; +export interface SpectrumDialogContainerProps { + /** The Dialog to display, if any. */ + children: ReactNode, + /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ + onDismiss: () => void, + /** + * The type of Dialog that should be rendered. See the visual options below for examples of each. + * @default 'modal' + */ + type?: 'modal' | 'fullscreen' | 'fullscreenTakeover', + /** Whether the Dialog is dismissable. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */ + isDismissable?: boolean, + /** Whether pressing the escape key to close the dialog should be disabled. */ + isKeyboardDismissDisabled?: boolean +} + /** * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding * it in a modal. Useful in cases where there is no trigger element diff --git a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx index 4639858b389..f66caccc51b 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx @@ -12,12 +12,36 @@ import {DialogContext} from './context'; import {Modal, Popover, Tray} from '@react-spectrum/overlays'; -import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; +import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; +import {PositionProps, useOverlayTrigger} from '@react-aria/overlays'; import {PressResponder} from '@react-aria/interactions'; -import React, {Fragment, JSX, ReactElement, useEffect, useRef} from 'react'; -import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog'; +import React, {Fragment, JSX, ReactElement, RefObject, useEffect, useRef} from 'react'; +import {SpectrumDialogProps} from './Dialog'; import {useIsMobileDevice} from '@react-spectrum/utils'; -import {useOverlayTrigger} from '@react-aria/overlays'; + +export type SpectrumDialogClose = (close: () => void) => ReactElement; + +export interface SpectrumDialogTriggerProps extends OverlayTriggerProps, PositionProps { + /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */ + children: [ReactElement, SpectrumDialogClose | ReactElement], + /** + * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each. + * @default 'modal' + */ + type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover', + /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */ + mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover', + /** + * Whether a popover type Dialog's arrow should be hidden. + */ + hideArrow?: boolean, + /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */ + targetRef?: RefObject, + /** Whether a modal type Dialog should be dismissable. */ + isDismissable?: boolean, + /** Whether pressing the escape key to close the dialog should be disabled. */ + isKeyboardDismissDisabled?: boolean +} function DialogTrigger(props: SpectrumDialogTriggerProps) { let { diff --git a/packages/@react-spectrum/dialog/src/index.ts b/packages/@react-spectrum/dialog/src/index.ts index 0030f4f0397..97b64170545 100644 --- a/packages/@react-spectrum/dialog/src/index.ts +++ b/packages/@react-spectrum/dialog/src/index.ts @@ -18,5 +18,8 @@ export {DialogTrigger} from './DialogTrigger'; export {DialogContainer} from './DialogContainer'; export {useDialogContainer} from './useDialogContainer'; -export type {SpectrumAlertDialogProps, SpectrumDialogProps, SpectrumDialogContainerProps, SpectrumDialogTriggerProps} from '@react-types/dialog'; +export type {SpectrumAlertDialogProps} from './AlertDialog'; +export type {SpectrumDialogProps} from './Dialog'; +export type {SpectrumDialogContainerProps} from './DialogContainer'; +export type {SpectrumDialogTriggerProps, SpectrumDialogClose} from './DialogTrigger'; export type {DialogContainerValue} from './useDialogContainer'; diff --git a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx index 85ff73f35f2..fa1caf04242 100644 --- a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx +++ b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx @@ -11,11 +11,10 @@ */ import {action} from '@storybook/addon-actions'; import {ActionButton} from '@react-spectrum/button'; -import {AlertDialog, DialogTrigger} from '../'; +import {AlertDialog, DialogTrigger, SpectrumAlertDialogProps} from '../'; import {Meta, StoryFn} from '@storybook/react'; import React from 'react'; import {singleParagraph} from './Dialog.stories'; -import {SpectrumAlertDialogProps} from '@react-types/dialog'; export default { title: 'Dialog/Alert' diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 11b37f6d74d..8b012850f36 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -163,7 +163,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/layout": "^4.5.2", "@react-stately/utils": "^3.11.0", - "@react-types/dialog": "^3.5.22", "@react-types/grid": "^3.3.6", "@react-types/overlays": "^3.9.2", "@react-types/provider": "^3.8.13", diff --git a/packages/@react-spectrum/s2/src/DialogContainer.tsx b/packages/@react-spectrum/s2/src/DialogContainer.tsx index ac26bcdc84c..3ba226b01b5 100644 --- a/packages/@react-spectrum/s2/src/DialogContainer.tsx +++ b/packages/@react-spectrum/s2/src/DialogContainer.tsx @@ -12,9 +12,13 @@ import {ModalContext, useSlottedContext} from 'react-aria-components'; import React, {ReactElement, ReactNode, useState} from 'react'; -import {SpectrumDialogContainerProps} from '@react-types/dialog'; -export interface DialogContainerProps extends Omit {} +export interface DialogContainerProps { + /** The Dialog to display, if any. */ + children: ReactNode, + /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ + onDismiss: () => void +} /** * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding diff --git a/packages/@react-types/dialog/package.json b/packages/@react-types/dialog/package.json index 5e05c1ad696..66d47138e3d 100644 --- a/packages/@react-types/dialog/package.json +++ b/packages/@react-types/dialog/package.json @@ -9,8 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.2", - "@react-types/shared": "^3.32.1" + "@react-aria/dialog": "^3.5.32", + "@react-spectrum/dialog": "^3.9.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index d589f5245a8..573c2c468b7 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -10,93 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, RefObject, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps, PositionProps} from '@react-types/overlays'; -import {ReactElement, ReactNode} from 'react'; - -export type SpectrumDialogClose = (close: () => void) => ReactElement; - -export interface SpectrumDialogTriggerProps extends OverlayTriggerProps, PositionProps { - /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */ - children: [ReactElement, SpectrumDialogClose | ReactElement], - /** - * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each. - * @default 'modal' - */ - type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover', - /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */ - mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover', - /** - * Whether a popover type Dialog's arrow should be hidden. - */ - hideArrow?: boolean, - /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */ - targetRef?: RefObject, - /** Whether a modal type Dialog should be dismissable. */ - isDismissable?: boolean, - /** Whether pressing the escape key to close the dialog should be disabled. */ - isKeyboardDismissDisabled?: boolean -} - -export interface SpectrumDialogContainerProps { - /** The Dialog to display, if any. */ - children: ReactNode, - /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ - onDismiss: () => void, - /** - * The type of Dialog that should be rendered. See the visual options below for examples of each. - * @default 'modal' - */ - type?: 'modal' | 'fullscreen' | 'fullscreenTakeover', - /** Whether the Dialog is dismissable. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */ - isDismissable?: boolean, - /** Whether pressing the escape key to close the dialog should be disabled. */ - isKeyboardDismissDisabled?: boolean -} - -export interface AriaDialogProps extends DOMProps, AriaLabelingProps { - /** - * The accessibility role for the dialog. - * @default 'dialog' - */ - role?: 'dialog' | 'alertdialog' -} - -export interface SpectrumDialogProps extends AriaDialogProps, StyleProps { - /** The contents of the Dialog. */ - children: ReactNode, - /** The size of the Dialog. Only applies to "modal" type Dialogs. */ - size?: 'S' | 'M' | 'L', - /** Whether the Dialog is dismissable. See the [examples](#examples) for more details. */ - isDismissable?: boolean, - /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */ - onDismiss?: () => void -} - -export interface SpectrumAlertDialogProps extends DOMProps, StyleProps { - /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */ - variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning', - /** The title of the AlertDialog. */ - title: string, - /** The contents of the AlertDialog. */ - children: ReactNode, - /** The label to display within the cancel button. */ - cancelLabel?: string, - /** The label to display within the confirm button. */ - primaryActionLabel: string, - /** The label to display within the secondary button. */ - secondaryActionLabel?: string, - /** Whether the primary button is disabled. */ - isPrimaryActionDisabled?: boolean, - /** Whether the secondary button is disabled. */ - isSecondaryActionDisabled?: boolean, - /** Handler that is called when the cancel button is pressed. */ - onCancel?: () => void, - /** Handler that is called when the primary button is pressed. */ - onPrimaryAction?: () => void, - /** Handler that is called when the secondary button is pressed. */ - onSecondaryAction?: () => void, - /** Button to focus by default when the dialog opens. */ - autoFocusButton?: 'cancel' | 'primary' | 'secondary' - // allowsKeyboardConfirmation?: boolean, // triggers primary action -} +export {AriaDialogProps} from '@react-aria/dialog'; +export {SpectrumDialogClose, SpectrumDialogTriggerProps, SpectrumDialogContainerProps, SpectrumDialogProps, SpectrumAlertDialogProps} from '@react-spectrum/dialog'; From 121653d65f9872d17ec78775916ac274e5267776 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 20:49:33 -0500 Subject: [PATCH 20/56] Divider --- packages/@react-spectrum/divider/package.json | 1 - .../@react-spectrum/divider/src/Divider.tsx | 23 +++++++++++++++++-- packages/@react-spectrum/divider/src/index.ts | 2 +- packages/@react-types/divider/package.json | 2 +- packages/@react-types/divider/src/index.d.ts | 22 +----------------- 5 files changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/@react-spectrum/divider/package.json b/packages/@react-spectrum/divider/package.json index d0998d7abd7..4633afcb100 100644 --- a/packages/@react-spectrum/divider/package.json +++ b/packages/@react-spectrum/divider/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/separator": "^3.4.14", "@react-spectrum/utils": "^3.12.10", - "@react-types/divider": "^3.3.21", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/divider/src/Divider.tsx b/packages/@react-spectrum/divider/src/Divider.tsx index f86f766777d..16e8454dc44 100644 --- a/packages/@react-spectrum/divider/src/Divider.tsx +++ b/packages/@react-spectrum/divider/src/Divider.tsx @@ -10,13 +10,32 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, Orientation, StyleProps} from '@react-types/shared'; import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import React, {ElementType} from 'react'; -import {SpectrumDividerProps} from '@react-types/divider'; import styles from '@adobe/spectrum-css-temp/components/rule/vars.css'; import {useSeparator} from '@react-aria/separator'; +export interface SpectrumDividerProps extends DOMProps, AriaLabelingProps, StyleProps { + /** + * How thick the Divider should be. + * @default 'L' + */ + size?: 'S' | 'M' | 'L', + + /** + * The axis the Divider should align with. + * @default 'horizontal' + */ + orientation?: Orientation, + + /** + * A slot to place the divider in. + * @default 'divider' + */ + slot?: string +} + let sizeMap = { S: 'small', M: 'medium', diff --git a/packages/@react-spectrum/divider/src/index.ts b/packages/@react-spectrum/divider/src/index.ts index a2b71ac7460..9d9df0ac47c 100644 --- a/packages/@react-spectrum/divider/src/index.ts +++ b/packages/@react-spectrum/divider/src/index.ts @@ -13,4 +13,4 @@ /// export {Divider} from './Divider'; -export type {SpectrumDividerProps} from '@react-types/divider'; +export type {SpectrumDividerProps} from './Divider'; diff --git a/packages/@react-types/divider/package.json b/packages/@react-types/divider/package.json index d5e54bc65b1..86095bb110a 100644 --- a/packages/@react-types/divider/package.json +++ b/packages/@react-types/divider/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/divider": "^3.5.28" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/divider/src/index.d.ts b/packages/@react-types/divider/src/index.d.ts index 0b2473d7857..ee8acb0edf7 100644 --- a/packages/@react-types/divider/src/index.d.ts +++ b/packages/@react-types/divider/src/index.d.ts @@ -10,24 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, Orientation, StyleProps} from '@react-types/shared'; - -export interface SpectrumDividerProps extends DOMProps, AriaLabelingProps, StyleProps { - /** - * How thick the Divider should be. - * @default 'L' - */ - size?: 'S' | 'M' | 'L', - - /** - * The axis the Divider should align with. - * @default 'horizontal' - */ - orientation?: Orientation, - - /** - * A slot to place the divider in. - * @default 'divider' - */ - slot?: string -} +export {SpectrumDividerProps} from '@react-spectrum/divider'; From 449fb774bdcb188c8037cdd9276cb224c0ad907d Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 20:55:29 -0500 Subject: [PATCH 21/56] Form --- .../form/chromatic/Form.stories.tsx | 3 +- .../form/chromatic/FormLongLabel.stories.tsx | 3 +- packages/@react-spectrum/form/package.json | 1 - packages/@react-spectrum/form/src/Form.tsx | 32 ++++++- packages/@react-spectrum/form/src/index.ts | 2 +- packages/@react-types/form/package.json | 1 + packages/@react-types/form/src/index.d.ts | 85 +------------------ packages/@react-types/shared/src/dom.d.ts | 57 +++++++++++++ packages/react-aria-components/package.json | 1 - packages/react-aria-components/src/Form.tsx | 3 +- 10 files changed, 93 insertions(+), 95 deletions(-) diff --git a/packages/@react-spectrum/form/chromatic/Form.stories.tsx b/packages/@react-spectrum/form/chromatic/Form.stories.tsx index bfcc0247983..eb48c85486b 100644 --- a/packages/@react-spectrum/form/chromatic/Form.stories.tsx +++ b/packages/@react-spectrum/form/chromatic/Form.stories.tsx @@ -14,7 +14,7 @@ import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox'; import {ComboBox} from '@react-spectrum/combobox'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; -import {Form} from '../'; +import {Form, SpectrumFormProps} from '../'; import {Heading} from '@react-spectrum/text'; import {Item, Picker} from '@react-spectrum/picker'; import {Meta, StoryObj} from '@storybook/react'; @@ -22,7 +22,6 @@ import {NumberField} from '@react-spectrum/numberfield'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {JSX} from 'react'; import {SearchField} from '@react-spectrum/searchfield'; -import {SpectrumFormProps} from '@react-types/form'; import {TextArea, TextField} from '@react-spectrum/textfield'; const meta: Meta = { diff --git a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx index 07c754eec65..d0b2b7961d6 100644 --- a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx +++ b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx @@ -13,14 +13,13 @@ import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox'; import {ColorField} from '@react-spectrum/color'; import {ComboBox} from '@react-spectrum/combobox'; -import {Form} from '../'; +import {Form, SpectrumFormProps} from '../'; import {Item, Picker} from '@react-spectrum/picker'; import {Meta, StoryObj} from '@storybook/react'; import {NumberField} from '@react-spectrum/numberfield'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {JSX} from 'react'; import {SearchField} from '@react-spectrum/searchfield'; -import {SpectrumFormProps} from '@react-types/form'; import {TextArea, TextField} from '@react-spectrum/textfield'; const meta: Meta = { diff --git a/packages/@react-spectrum/form/package.json b/packages/@react-spectrum/form/package.json index 4d9850b5f62..121c74c9903 100644 --- a/packages/@react-spectrum/form/package.json +++ b/packages/@react-spectrum/form/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-stately/form": "^3.2.2", - "@react-types/form": "^3.7.16", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx index b15d9012d5f..bb3608e181f 100644 --- a/packages/@react-spectrum/form/src/Form.tsx +++ b/packages/@react-spectrum/form/src/Form.tsx @@ -10,15 +10,41 @@ * governing permissions and limitations under the License. */ -import {Alignment, DOMRef, LabelPosition, SpectrumLabelableProps} from '@react-types/shared'; +import {Alignment, DOMProps, DOMRef, FormProps, LabelPosition, SpectrumLabelableProps, StyleProps, ValidationState} from '@react-types/shared'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import {filterDOMProps} from '@react-aria/utils'; import {FormValidationContext} from '@react-stately/form'; import {Provider, useProviderProps} from '@react-spectrum/provider'; -import React, {useContext} from 'react'; -import {SpectrumFormProps} from '@react-types/form'; +import React, {ReactElement, useContext} from 'react'; import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; +export interface SpectrumFormProps extends FormProps, DOMProps, StyleProps, Omit { + /** The contents of the Form. */ + children: ReactElement | ReactElement[], + /** Whether the Form elements are displayed with their quiet style. */ + isQuiet?: boolean, + /** Whether the Form elements are rendered with their emphasized style. */ + isEmphasized?: boolean, + /** Whether the Form elements are disabled. */ + isDisabled?: boolean, + /** Whether user input is required on each of the Form elements before Form submission. */ + isRequired?: boolean, + /** Whether the Form elements can be selected but not changed by the user. */ + isReadOnly?: boolean, + /** + * Whether the Form elements should display their "valid" or "invalid" visual styling. + * @default 'valid' + */ + validationState?: ValidationState, + /** + * Whether to use native HTML form validation to prevent form submission + * when a field value is missing or invalid, or mark fields as required + * or invalid via ARIA. + * @default 'aria' + */ + validationBehavior?: 'aria' | 'native' +} + interface FormContextValue extends SpectrumLabelableProps { validationBehavior?: 'aria' | 'native' } diff --git a/packages/@react-spectrum/form/src/index.ts b/packages/@react-spectrum/form/src/index.ts index 9920465f5d4..f97c5099e9b 100644 --- a/packages/@react-spectrum/form/src/index.ts +++ b/packages/@react-spectrum/form/src/index.ts @@ -13,4 +13,4 @@ /// export {useFormProps, Form} from './Form'; -export type {SpectrumFormProps} from '@react-types/form'; +export type {SpectrumFormProps} from './Form'; diff --git a/packages/@react-types/form/package.json b/packages/@react-types/form/package.json index 3552404c732..06caff3353e 100644 --- a/packages/@react-types/form/package.json +++ b/packages/@react-types/form/package.json @@ -9,6 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-spectrum/form": "^3.7.20", "@react-types/shared": "^3.32.1" }, "peerDependencies": { diff --git a/packages/@react-types/form/src/index.d.ts b/packages/@react-types/form/src/index.d.ts index 888128799b2..ddae11b18f6 100644 --- a/packages/@react-types/form/src/index.d.ts +++ b/packages/@react-types/form/src/index.d.ts @@ -10,86 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, SpectrumLabelableProps, StyleProps, ValidationErrors, ValidationState} from '@react-types/shared'; -import {FormEvent, FormHTMLAttributes, ReactElement} from 'react'; - -export interface FormProps extends AriaLabelingProps { - /** - * Validation errors for the form, typically returned by a server. - * This should be set to an object mapping from input names to errors. - */ - validationErrors?: ValidationErrors, - /** - * Where to send the form-data when the form is submitted. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action). - */ - action?: string | FormHTMLAttributes['action'], - /** - * The enctype attribute specifies how the form-data should be encoded when submitting it to the server. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype). - */ - encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain', - /** - * The HTTP method to submit the form with. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method). - */ - method?: 'get' | 'post' | 'dialog', - /** - * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target). - */ - target?: '_blank' | '_self' | '_parent' | '_top', - /** - * Triggered when a user submits the form. - */ - onSubmit?: (event: FormEvent) => void, - /** - * Triggered when a user resets the form. - */ - onReset?: (event: FormEvent) => void, - /** - * Triggered for each invalid field when a user submits the form. - */ - onInvalid?: (event: FormEvent) => void, - /** - * Indicates whether input elements can by default have their values automatically completed by the browser. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete). - */ - autoComplete?: 'off' | 'on', - /** - * Controls whether inputted text is automatically capitalized and, if so, in what manner. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize). - */ - autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters', - /** - * An ARIA role override to apply to the form element. - */ - role?: 'search' | 'presentation' -} - -export interface SpectrumFormProps extends FormProps, DOMProps, StyleProps, Omit { - /** The contents of the Form. */ - children: ReactElement | ReactElement[], - /** Whether the Form elements are displayed with their quiet style. */ - isQuiet?: boolean, - /** Whether the Form elements are rendered with their emphasized style. */ - isEmphasized?: boolean, - /** Whether the Form elements are disabled. */ - isDisabled?: boolean, - /** Whether user input is required on each of the Form elements before Form submission. */ - isRequired?: boolean, - /** Whether the Form elements can be selected but not changed by the user. */ - isReadOnly?: boolean, - /** - * Whether the Form elements should display their "valid" or "invalid" visual styling. - * @default 'valid' - */ - validationState?: ValidationState, - /** - * Whether to use native HTML form validation to prevent form submission - * when a field value is missing or invalid, or mark fields as required - * or invalid via ARIA. - * @default 'aria' - */ - validationBehavior?: 'aria' | 'native' -} +export {FormProps} from '@react-types/shared'; +export {SpectrumFormProps} from '@react-spectrum/form'; diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts index 5c36c80cd7e..f231d08c45b 100644 --- a/packages/@react-types/shared/src/dom.d.ts +++ b/packages/@react-types/shared/src/dom.d.ts @@ -17,7 +17,9 @@ import { ClipboardEventHandler, CompositionEventHandler, CSSProperties, + FormEvent, FormEventHandler, + FormHTMLAttributes, HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, MouseEventHandler, @@ -29,6 +31,7 @@ import { UIEventHandler, WheelEventHandler } from 'react'; +import {ValidationErrors} from './inputs'; export interface AriaLabelingProps { /** @@ -341,3 +344,57 @@ export interface GlobalDOMEvents { onTransitionStart?: TransitionEventHandler | undefined, onTransitionStartCapture?: TransitionEventHandler | undefined } + +export interface FormProps extends AriaLabelingProps { + /** + * Validation errors for the form, typically returned by a server. + * This should be set to an object mapping from input names to errors. + */ + validationErrors?: ValidationErrors, + /** + * Where to send the form-data when the form is submitted. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action). + */ + action?: string | FormHTMLAttributes['action'], + /** + * The enctype attribute specifies how the form-data should be encoded when submitting it to the server. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype). + */ + encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain', + /** + * The HTTP method to submit the form with. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method). + */ + method?: 'get' | 'post' | 'dialog', + /** + * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target). + */ + target?: '_blank' | '_self' | '_parent' | '_top', + /** + * Triggered when a user submits the form. + */ + onSubmit?: (event: FormEvent) => void, + /** + * Triggered when a user resets the form. + */ + onReset?: (event: FormEvent) => void, + /** + * Triggered for each invalid field when a user submits the form. + */ + onInvalid?: (event: FormEvent) => void, + /** + * Indicates whether input elements can by default have their values automatically completed by the browser. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete). + */ + autoComplete?: 'off' | 'on', + /** + * Controls whether inputted text is automatically capitalized and, if so, in what manner. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize). + */ + autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters', + /** + * An ARIA role override to apply to the form element. + */ + role?: 'search' | 'presentation' +} diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json index 332aebfbe7c..81fcb651351 100644 --- a/packages/react-aria-components/package.json +++ b/packages/react-aria-components/package.json @@ -61,7 +61,6 @@ "@react-stately/table": "^3.15.2", "@react-stately/utils": "^3.11.0", "@react-stately/virtualizer": "^4.4.4", - "@react-types/form": "^3.7.16", "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", diff --git a/packages/react-aria-components/src/Form.tsx b/packages/react-aria-components/src/Form.tsx index 09b8d8f7ef6..0673d3e13dd 100644 --- a/packages/react-aria-components/src/Form.tsx +++ b/packages/react-aria-components/src/Form.tsx @@ -12,9 +12,8 @@ import {ContextValue, DOMProps, useContextProps} from './utils'; import {FormValidationContext} from 'react-stately'; -import {GlobalDOMAttributes} from '@react-types/shared'; +import {GlobalDOMAttributes, FormProps as SharedFormProps} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; -import {FormProps as SharedFormProps} from '@react-types/form'; export interface FormProps extends SharedFormProps, DOMProps, GlobalDOMAttributes { /** From e06d33b55de94230e369a759671e0bc91fe7a6d2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 21:02:39 -0500 Subject: [PATCH 22/56] grid --- packages/@react-aria/grid/package.json | 1 - .../grid/src/GridKeyboardDelegate.ts | 2 +- packages/@react-aria/grid/src/useGrid.ts | 3 +- packages/@react-aria/grid/src/useGridCell.ts | 3 +- packages/@react-aria/grid/src/useGridRow.ts | 3 +- .../grid/src/useGridSelectionCheckbox.ts | 3 +- packages/@react-aria/grid/src/utils.ts | 3 +- packages/@react-aria/table/package.json | 2 +- .../@react-aria/table/src/useTableCell.ts | 2 +- .../table/src/useTableColumnHeader.ts | 2 +- .../table/src/useTableColumnResize.ts | 2 +- packages/@react-aria/table/src/useTableRow.ts | 2 +- packages/@react-spectrum/list/package.json | 2 +- .../@react-spectrum/list/src/DragPreview.tsx | 2 +- packages/@react-spectrum/s2/package.json | 2 +- packages/@react-spectrum/s2/src/TableView.tsx | 2 +- packages/@react-spectrum/table/package.json | 2 +- .../@react-spectrum/table/src/Resizer.tsx | 2 +- .../table/src/TableViewBase.tsx | 2 +- .../table/src/TableViewLayout.ts | 2 +- packages/@react-stately/grid/package.json | 1 - .../@react-stately/grid/src/GridCollection.ts | 31 +++++++++++++++++-- packages/@react-stately/grid/src/index.ts | 1 + .../@react-stately/grid/src/useGridState.ts | 2 +- packages/@react-stately/layout/package.json | 2 +- .../@react-stately/layout/src/TableLayout.ts | 2 +- packages/@react-stately/table/package.json | 1 - packages/@react-stately/table/src/Column.ts | 2 +- .../table/src/TableCollection.ts | 3 +- .../table/src/TableColumnLayout.ts | 2 +- .../table/src/useTableColumnResizeState.ts | 2 +- .../table/src/useTreeGridState.ts | 2 +- packages/@react-types/grid/package.json | 2 +- packages/@react-types/grid/src/index.d.ts | 30 +----------------- packages/@react-types/table/package.json | 2 +- packages/@react-types/table/src/index.d.ts | 2 +- packages/react-aria-components/package.json | 2 +- packages/react-aria-components/src/Table.tsx | 2 +- 38 files changed, 63 insertions(+), 72 deletions(-) diff --git a/packages/@react-aria/grid/package.json b/packages/@react-aria/grid/package.json index 1d118d7f629..acdf7cd1023 100644 --- a/packages/@react-aria/grid/package.json +++ b/packages/@react-aria/grid/package.json @@ -36,7 +36,6 @@ "@react-stately/grid": "^3.11.7", "@react-stately/selection": "^3.20.7", "@react-types/checkbox": "^3.10.2", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts index b1fceaf3cb3..752f085f3fb 100644 --- a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts +++ b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts @@ -13,7 +13,7 @@ import {Direction, DisabledBehavior, Key, KeyboardDelegate, LayoutDelegate, Node, Rect, RefObject, Size} from '@react-types/shared'; import {DOMLayoutDelegate} from '@react-aria/selection'; import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode} from '@react-stately/grid'; export interface GridKeyboardDelegateOptions { collection: C, diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts index 5a8c9935efd..6ca50372ed3 100644 --- a/packages/@react-aria/grid/src/useGrid.ts +++ b/packages/@react-aria/grid/src/useGrid.ts @@ -12,10 +12,9 @@ import {AriaLabelingProps, DOMAttributes, DOMProps, Key, KeyboardDelegate, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useId} from '@react-aria/utils'; -import {GridCollection} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; import {GridKeyboardDelegate} from './GridKeyboardDelegate'; import {gridMap} from './utils'; -import {GridState} from '@react-stately/grid'; import {useCallback, useMemo} from 'react'; import {useCollator, useLocale} from '@react-aria/i18n'; import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement'; diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts index b8e09c29cdd..a2923ae75e0 100644 --- a/packages/@react-aria/grid/src/useGridCell.ts +++ b/packages/@react-aria/grid/src/useGridCell.ts @@ -14,9 +14,8 @@ import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shar import {focusSafely, isFocusVisible} from '@react-aria/interactions'; import {getFocusableTreeWalker} from '@react-aria/focus'; import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode, GridState} from '@react-stately/grid'; import {gridMap} from './utils'; -import {GridState} from '@react-stately/grid'; import {KeyboardEvent as ReactKeyboardEvent, useRef} from 'react'; import {useLocale} from '@react-aria/i18n'; import {useSelectableItem} from '@react-aria/selection'; diff --git a/packages/@react-aria/grid/src/useGridRow.ts b/packages/@react-aria/grid/src/useGridRow.ts index e4907e9c59e..dcb37d9b760 100644 --- a/packages/@react-aria/grid/src/useGridRow.ts +++ b/packages/@react-aria/grid/src/useGridRow.ts @@ -12,9 +12,8 @@ import {chain} from '@react-aria/utils'; import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode, GridState} from '@react-stately/grid'; import {gridMap} from './utils'; -import {GridState} from '@react-stately/grid'; import {SelectableItemStates, useSelectableItem} from '@react-aria/selection'; export interface GridRowProps { diff --git a/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts b/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts index 7326146fb57..2d8e8d5f7a0 100644 --- a/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts +++ b/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts @@ -1,6 +1,5 @@ import {AriaCheckboxProps} from '@react-types/checkbox'; -import {GridCollection} from '@react-types/grid'; -import {GridState} from '@react-stately/grid'; +import {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-aria/grid/src/utils.ts b/packages/@react-aria/grid/src/utils.ts index eb4defb3d47..b3e53410009 100644 --- a/packages/@react-aria/grid/src/utils.ts +++ b/packages/@react-aria/grid/src/utils.ts @@ -10,8 +10,7 @@ * governing permissions and limitations under the License. */ -import type {GridCollection} from '@react-types/grid'; -import type {GridState} from '@react-stately/grid'; +import type {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; import type {Key, KeyboardDelegate} from '@react-types/shared'; interface GridMapShared { diff --git a/packages/@react-aria/table/package.json b/packages/@react-aria/table/package.json index 6e0aef03739..abafefa4f11 100644 --- a/packages/@react-aria/table/package.json +++ b/packages/@react-aria/table/package.json @@ -35,9 +35,9 @@ "@react-aria/visually-hidden": "^3.8.29", "@react-stately/collections": "^3.12.8", "@react-stately/flags": "^3.1.2", + "@react-stately/grid": "^3.11.7", "@react-stately/table": "^3.15.2", "@react-types/checkbox": "^3.10.2", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-aria/table/src/useTableCell.ts b/packages/@react-aria/table/src/useTableCell.ts index 1016cc13297..d11da3d5957 100644 --- a/packages/@react-aria/table/src/useTableCell.ts +++ b/packages/@react-aria/table/src/useTableCell.ts @@ -12,7 +12,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {getCellId} from './utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {TableState} from '@react-stately/table'; import {useGridCell} from '@react-aria/grid'; diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts index e6ac331c1cd..1ee09358d8c 100644 --- a/packages/@react-aria/table/src/useTableColumnHeader.ts +++ b/packages/@react-aria/table/src/useTableColumnHeader.ts @@ -12,7 +12,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {getColumnHeaderId} from './utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {isAndroid, mergeProps, useDescription} from '@react-aria/utils'; diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts index 7d02274c946..4caa6e1232a 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -15,7 +15,7 @@ import {ColumnSize} from '@react-types/table'; import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared'; import {focusSafely, useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions'; import {getColumnHeaderId} from './utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils'; diff --git a/packages/@react-aria/table/src/useTableRow.ts b/packages/@react-aria/table/src/useTableRow.ts index 41556dd6e10..ff71c80b398 100644 --- a/packages/@react-aria/table/src/useTableRow.ts +++ b/packages/@react-aria/table/src/useTableRow.ts @@ -13,7 +13,7 @@ import {FocusableElement, RefObject} from '@react-types/shared'; import {getLastItem} from '@react-stately/collections'; import {getRowLabelledBy} from './utils'; -import type {GridNode} from '@react-types/grid'; +import type {GridNode} from '@react-stately/grid'; import {GridRowAria, GridRowProps, useGridRow} from '@react-aria/grid'; import {HTMLAttributes} from 'react'; import {mergeProps, useSyntheticLinkProps} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/list/package.json b/packages/@react-spectrum/list/package.json index 9c1e32f1a34..a96dea9d518 100644 --- a/packages/@react-spectrum/list/package.json +++ b/packages/@react-spectrum/list/package.json @@ -56,10 +56,10 @@ "@react-spectrum/text": "^3.5.23", "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", + "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", "@react-stately/list": "^3.13.2", "@react-stately/virtualizer": "^4.4.4", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0", diff --git a/packages/@react-spectrum/list/src/DragPreview.tsx b/packages/@react-spectrum/list/src/DragPreview.tsx index 4952ec0006d..d9a96ad3933 100644 --- a/packages/@react-spectrum/list/src/DragPreview.tsx +++ b/packages/@react-spectrum/list/src/DragPreview.tsx @@ -11,7 +11,7 @@ */ import {classNames, SlotProvider} from '@react-spectrum/utils'; import {Grid} from '@react-spectrum/layout'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import listStyles from './styles.css'; import React, {JSX} from 'react'; import type {SpectrumListViewProps} from './ListView'; diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 8b012850f36..3fe1058ee1c 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -161,9 +161,9 @@ "@react-aria/overlays": "^3.31.0", "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", + "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", "@react-stately/utils": "^3.11.0", - "@react-types/grid": "^3.3.6", "@react-types/overlays": "^3.9.2", "@react-types/provider": "^3.8.13", "@react-types/shared": "^3.32.1", diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 58a1ebc837b..e6213a67fcc 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -60,7 +60,7 @@ import {ColumnSize} from '@react-types/table'; import {CustomDialog, DialogContainer} from '..'; import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared'; import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {IconContext} from './Icon'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-spectrum/table/package.json b/packages/@react-spectrum/table/package.json index 3b13e54b150..2d7cf0a50bb 100644 --- a/packages/@react-spectrum/table/package.json +++ b/packages/@react-spectrum/table/package.json @@ -58,10 +58,10 @@ "@react-spectrum/tooltip": "^3.8.0", "@react-spectrum/utils": "^3.12.10", "@react-stately/flags": "^3.1.2", + "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", "@react-stately/table": "^3.15.2", "@react-stately/virtualizer": "^4.4.4", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@spectrum-icons/ui": "^3.6.21", diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index defc24868ea..7aa92376ea7 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -4,7 +4,7 @@ import {ColumnSize} from '@react-types/table'; import eCursor from 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg'; import ewCursor from 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg'; import {FocusRing} from '@react-aria/focus'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {isWebKit, mergeProps, useObjectRef} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/table/src/TableViewBase.tsx b/packages/@react-spectrum/table/src/TableViewBase.tsx index 5934d217e19..41e046cd8d1 100644 --- a/packages/@react-spectrum/table/src/TableViewBase.tsx +++ b/packages/@react-spectrum/table/src/TableViewBase.tsx @@ -29,7 +29,7 @@ import type {DraggableCollectionState, DroppableCollectionState} from '@react-st import type {DraggableItemResult, DropIndicatorAria, DroppableCollectionResult} from '@react-aria/dnd'; import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus'; import {getInteractionModality, HoverProps, isFocusVisible, useHover, usePress} from '@react-aria/interactions'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {InsertionIndicator} from './InsertionIndicator'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-spectrum/table/src/TableViewLayout.ts b/packages/@react-spectrum/table/src/TableViewLayout.ts index 26138c975c1..3e553cdbaf3 100644 --- a/packages/@react-spectrum/table/src/TableViewLayout.ts +++ b/packages/@react-spectrum/table/src/TableViewLayout.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ import {DropTarget} from '@react-types/shared'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {LayoutInfo, Rect} from '@react-stately/virtualizer'; import {LayoutNode, TableLayout} from '@react-stately/layout'; import {TableCollection} from '@react-stately/table'; diff --git a/packages/@react-stately/grid/package.json b/packages/@react-stately/grid/package.json index 8eb426dc587..5ad704c1424 100644 --- a/packages/@react-stately/grid/package.json +++ b/packages/@react-stately/grid/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/collections": "^3.12.8", "@react-stately/selection": "^3.20.7", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/grid/src/GridCollection.ts b/packages/@react-stately/grid/src/GridCollection.ts index cb9714305ba..fa3f2ec46aa 100644 --- a/packages/@react-stately/grid/src/GridCollection.ts +++ b/packages/@react-stately/grid/src/GridCollection.ts @@ -10,8 +10,35 @@ * governing permissions and limitations under the License. */ -import {GridNode, GridRow, GridCollection as IGridCollection} from '@react-types/grid'; -import {Key} from '@react-types/shared'; +import {Collection, Key, Node} from '@react-types/shared'; + +export interface IGridCollection extends Collection> { + /** The number of columns in the grid. */ + columnCount: number, + /** A list of rows in the grid. */ + rows: GridNode[] +} + +export interface GridRow extends Partial> { + key?: Key, + type: string, + childNodes: Iterable> +} + +export interface GridNode extends Node { + column?: GridNode, + /** + * The number of columns spanned by this cell. Use `colSpan` instead. + * @deprecated + */ + colspan?: number, + /** The number of columns spanned by this cell. */ + colSpan?: number | null, + /** The column index of this cell, accounting for any colSpans. */ + colIndex?: number | null, + /** The index of this node within its parent, ignoring sibling nodes that aren't of the same type. */ + indexOfType?: number +} interface GridCollectionOptions { columnCount: number, diff --git a/packages/@react-stately/grid/src/index.ts b/packages/@react-stately/grid/src/index.ts index ed37d6980ed..e468070a434 100644 --- a/packages/@react-stately/grid/src/index.ts +++ b/packages/@react-stately/grid/src/index.ts @@ -14,3 +14,4 @@ export {useGridState} from './useGridState'; export {GridCollection} from './GridCollection'; export type {GridStateOptions, GridState} from './useGridState'; +export type {IGridCollection, GridNode, GridRow} from './GridCollection'; diff --git a/packages/@react-stately/grid/src/useGridState.ts b/packages/@react-stately/grid/src/useGridState.ts index 818c23391cb..46fd89e1c16 100644 --- a/packages/@react-stately/grid/src/useGridState.ts +++ b/packages/@react-stately/grid/src/useGridState.ts @@ -1,5 +1,5 @@ import {getChildNodes, getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {GridCollection, GridNode} from './GridCollection'; import {Key} from '@react-types/shared'; import {MultipleSelectionState, MultipleSelectionStateProps, SelectionManager, useMultipleSelectionState} from '@react-stately/selection'; import {useEffect, useMemo, useRef} from 'react'; diff --git a/packages/@react-stately/layout/package.json b/packages/@react-stately/layout/package.json index 83d34f4aa5a..3d68da410a4 100644 --- a/packages/@react-stately/layout/package.json +++ b/packages/@react-stately/layout/package.json @@ -27,9 +27,9 @@ }, "dependencies": { "@react-stately/collections": "^3.12.8", + "@react-stately/grid": "^3.11.7", "@react-stately/table": "^3.15.2", "@react-stately/virtualizer": "^4.4.4", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index 87d666fd6c5..9f68993b704 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -12,7 +12,7 @@ import {DropTarget, ItemDropTarget, Key} from '@react-types/shared'; import {getChildNodes, getLastItem} from '@react-stately/collections'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer'; import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout'; import {TableCollection} from '@react-types/table'; diff --git a/packages/@react-stately/table/package.json b/packages/@react-stately/table/package.json index 270cbab2acf..3c64442c633 100644 --- a/packages/@react-stately/table/package.json +++ b/packages/@react-stately/table/package.json @@ -31,7 +31,6 @@ "@react-stately/grid": "^3.11.7", "@react-stately/selection": "^3.20.7", "@react-stately/utils": "^3.11.0", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-stately/table/src/Column.ts b/packages/@react-stately/table/src/Column.ts index 6fd872cab19..c39535542a3 100644 --- a/packages/@react-stately/table/src/Column.ts +++ b/packages/@react-stately/table/src/Column.ts @@ -12,7 +12,7 @@ import {CollectionBuilderContext} from './useTableState'; import {ColumnProps} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; diff --git a/packages/@react-stately/table/src/TableCollection.ts b/packages/@react-stately/table/src/TableCollection.ts index 346cd516347..9f30d1c6963 100644 --- a/packages/@react-stately/table/src/TableCollection.ts +++ b/packages/@react-stately/table/src/TableCollection.ts @@ -11,8 +11,7 @@ */ import {getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection} from '@react-stately/grid'; -import {GridNode} from '@react-types/grid'; +import {GridCollection, GridNode} from '@react-stately/grid'; import {TableCollection as ITableCollection} from '@react-types/table'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-stately/table/src/TableColumnLayout.ts b/packages/@react-stately/table/src/TableColumnLayout.ts index 0f9d3ee0223..02fc8a47578 100644 --- a/packages/@react-stately/table/src/TableColumnLayout.ts +++ b/packages/@react-stately/table/src/TableColumnLayout.ts @@ -16,7 +16,7 @@ import { getMinWidth } from './TableUtils'; import {ColumnSize, TableCollection} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; export interface TableColumnLayoutOptions { diff --git a/packages/@react-stately/table/src/useTableColumnResizeState.ts b/packages/@react-stately/table/src/useTableColumnResizeState.ts index 7ba050cb1e8..1598eba2632 100644 --- a/packages/@react-stately/table/src/useTableColumnResizeState.ts +++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts @@ -11,7 +11,7 @@ */ import {ColumnSize} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; import {TableColumnLayout} from './TableColumnLayout'; import {TableState} from './useTableState'; diff --git a/packages/@react-stately/table/src/useTreeGridState.ts b/packages/@react-stately/table/src/useTreeGridState.ts index 3e6e3247927..340942aa42a 100644 --- a/packages/@react-stately/table/src/useTreeGridState.ts +++ b/packages/@react-stately/table/src/useTreeGridState.ts @@ -11,7 +11,7 @@ */ import {CollectionBuilder} from '@react-stately/collections'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; import {ReactElement, useMemo} from 'react'; import {TableCollection} from './TableCollection'; diff --git a/packages/@react-types/grid/package.json b/packages/@react-types/grid/package.json index 14c5e4b1886..9d5ace52e8d 100644 --- a/packages/@react-types/grid/package.json +++ b/packages/@react-types/grid/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-stately/grid": "^3.11.7" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/grid/src/index.d.ts b/packages/@react-types/grid/src/index.d.ts index a5d10fe4277..cef18c52e51 100644 --- a/packages/@react-types/grid/src/index.d.ts +++ b/packages/@react-types/grid/src/index.d.ts @@ -10,32 +10,4 @@ * governing permissions and limitations under the License. */ -import {Collection, Key, Node} from '@react-types/shared'; - -export interface GridCollection extends Collection> { - /** The number of columns in the grid. */ - columnCount: number, - /** A list of rows in the grid. */ - rows: GridNode[] -} - -export interface GridRow extends Partial> { - key?: Key, - type: string, - childNodes: Iterable> -} - -export interface GridNode extends Node { - column?: GridNode, - /** - * The number of columns spanned by this cell. Use `colSpan` instead. - * @deprecated - */ - colspan?: number, - /** The number of columns spanned by this cell. */ - colSpan?: number | null, - /** The column index of this cell, accounting for any colSpans. */ - colIndex?: number | null, - /** The index of this node within its parent, ignoring sibling nodes that aren't of the same type. */ - indexOfType?: number -} +export {GridCollection, GridRow, GridNode} from '@react-stately/grid'; diff --git a/packages/@react-types/table/package.json b/packages/@react-types/table/package.json index 30d203a70f6..4e56f5d47d8 100644 --- a/packages/@react-types/table/package.json +++ b/packages/@react-types/table/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/grid": "^3.3.6", + "@react-stately/grid": "^3.11.7", "@react-types/shared": "^3.32.1" }, "peerDependencies": { diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts index 9a8b69ca8c2..085558a585e 100644 --- a/packages/@react-types/table/src/index.d.ts +++ b/packages/@react-types/table/src/index.d.ts @@ -11,7 +11,7 @@ */ import {AriaLabelingProps, AsyncLoadable, DOMProps, Key, LinkDOMProps, LoadingState, MultipleSelection, Sortable, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; -import {GridCollection, GridNode} from '@react-types/grid'; +import {IGridCollection as GridCollection, GridNode} from '@react-stately/grid'; import {JSX, ReactElement, ReactNode} from 'react'; /** Widths that result in a constant pixel value for the same Table width. */ diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json index 81fcb651351..e84ad29197e 100644 --- a/packages/react-aria-components/package.json +++ b/packages/react-aria-components/package.json @@ -56,12 +56,12 @@ "@react-aria/utils": "^3.32.0", "@react-aria/virtualizer": "^4.1.11", "@react-stately/autocomplete": "3.0.0-beta.4", + "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", "@react-stately/selection": "^3.20.7", "@react-stately/table": "^3.15.2", "@react-stately/utils": "^3.11.0", "@react-stately/virtualizer": "^4.4.4", - "@react-types/grid": "^3.3.6", "@react-types/shared": "^3.32.1", "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0", diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 96836b8f5e8..4b13457c96c 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -23,7 +23,7 @@ import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPers import {DragAndDropHooks} from './useDragAndDrop'; import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria'; import {filterDOMProps, inertValue, isScrollable, LoadMoreSentinelProps, mergeRefs, useLayoutEffect, useLoadMoreSentinel, useObjectRef, useResizeObserver} from '@react-aria/utils'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; From ef4f1cd799627e5098665ba6b4413c325053d8d2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 21:04:03 -0500 Subject: [PATCH 23/56] IllustratedMessage --- .../@react-spectrum/illustratedmessage/package.json | 1 - .../illustratedmessage/src/IllustratedMessage.tsx | 10 +++++++--- .../@react-spectrum/illustratedmessage/src/index.ts | 2 +- packages/@react-types/illustratedmessage/package.json | 2 +- .../@react-types/illustratedmessage/src/index.d.ts | 8 +------- 5 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/@react-spectrum/illustratedmessage/package.json b/packages/@react-spectrum/illustratedmessage/package.json index f2c759ad122..e1cc7ce836d 100644 --- a/packages/@react-spectrum/illustratedmessage/package.json +++ b/packages/@react-spectrum/illustratedmessage/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/layout": "^3.6.20", "@react-spectrum/utils": "^3.12.10", - "@react-types/illustratedmessage": "^3.3.21", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx index 038545fc671..71dcf81845e 100644 --- a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx +++ b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx @@ -11,13 +11,17 @@ */ import {classNames, ClearSlots, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {Flex} from '@react-spectrum/layout'; -import React, {forwardRef} from 'react'; -import {SpectrumIllustratedMessageProps} from '@react-types/illustratedmessage'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/illustratedmessage/vars.css'; +export interface SpectrumIllustratedMessageProps extends DOMProps, StyleProps { + /** The contents of the IllustratedMessage. */ + children: ReactNode +} + /** * An IllustratedMessage displays an illustration and a message, usually * for an empty state or an error page. diff --git a/packages/@react-spectrum/illustratedmessage/src/index.ts b/packages/@react-spectrum/illustratedmessage/src/index.ts index 70b14730819..3ff792cef27 100644 --- a/packages/@react-spectrum/illustratedmessage/src/index.ts +++ b/packages/@react-spectrum/illustratedmessage/src/index.ts @@ -13,4 +13,4 @@ /// export {IllustratedMessage} from './IllustratedMessage'; -export type {SpectrumIllustratedMessageProps} from '@react-types/illustratedmessage'; +export type {SpectrumIllustratedMessageProps} from './IllustratedMessage'; diff --git a/packages/@react-types/illustratedmessage/package.json b/packages/@react-types/illustratedmessage/package.json index b4eba997adc..2bf28f324e4 100644 --- a/packages/@react-types/illustratedmessage/package.json +++ b/packages/@react-types/illustratedmessage/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/illustratedmessage": "^3.5.15" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/illustratedmessage/src/index.d.ts b/packages/@react-types/illustratedmessage/src/index.d.ts index f2f3c68e837..ffa4d7a3374 100644 --- a/packages/@react-types/illustratedmessage/src/index.d.ts +++ b/packages/@react-types/illustratedmessage/src/index.d.ts @@ -10,10 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumIllustratedMessageProps extends DOMProps, StyleProps { - /** The contents of the IllustratedMessage. */ - children: ReactNode -} +export {SpectrumIllustratedMessageProps} from '@react-spectrum/illustratedmessage'; From 020aec326bf055543cdb1eeb750d4175568a86e4 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 21:05:17 -0500 Subject: [PATCH 24/56] Image --- packages/@react-spectrum/image/src/Image.tsx | 41 ++++++++++++++++++-- packages/@react-spectrum/image/src/index.ts | 2 +- packages/@react-types/image/package.json | 2 +- packages/@react-types/image/src/index.d.ts | 39 +------------------ 4 files changed, 41 insertions(+), 43 deletions(-) diff --git a/packages/@react-spectrum/image/src/Image.tsx b/packages/@react-spectrum/image/src/Image.tsx index 5ac5edba02b..119e58ce005 100644 --- a/packages/@react-spectrum/image/src/Image.tsx +++ b/packages/@react-spectrum/image/src/Image.tsx @@ -11,13 +11,48 @@ */ import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React from 'react'; -import {SpectrumImageProps} from '@react-types/image'; +import React, {ReactEventHandler} from 'react'; import styles from '@adobe/spectrum-css-temp/components/image/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; +export interface ImageProps { + /** + * The URL of the image. + */ + src: string, + /** + * Text description of the image. + */ + alt?: string, + /** + * Sets the Image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) style. + */ + objectFit?: any, // move to styleProps for images and type better + /** + * Called if an error occurs while loading or rendering an image, see [Image loading errors](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors). + */ + onError?: ReactEventHandler, + /** + * Called when the image has successfully loaded, see [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event). + */ + onLoad?: ReactEventHandler, + /** + * Indicates if the fetching of the image must be done using a CORS request. + * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). + */ + crossOrigin?: 'anonymous' | 'use-credentials' +} + +export interface SpectrumImageProps extends ImageProps, DOMProps, StyleProps { + /** + * A slot to place the image in. + * @default 'image' + */ + slot?: string +} + /** * Image is used to insert and display an image within a component. */ diff --git a/packages/@react-spectrum/image/src/index.ts b/packages/@react-spectrum/image/src/index.ts index c675668a42c..2ca82c964f5 100644 --- a/packages/@react-spectrum/image/src/index.ts +++ b/packages/@react-spectrum/image/src/index.ts @@ -13,4 +13,4 @@ /// export {Image} from './Image'; -export type {SpectrumImageProps} from '@react-types/image'; +export type {ImageProps, SpectrumImageProps} from './Image'; diff --git a/packages/@react-types/image/package.json b/packages/@react-types/image/package.json index 9209484a8a3..45779b6de6c 100644 --- a/packages/@react-types/image/package.json +++ b/packages/@react-types/image/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/image": "^3.6.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/image/src/index.d.ts b/packages/@react-types/image/src/index.d.ts index de337d97629..600d41a41fb 100644 --- a/packages/@react-types/image/src/index.d.ts +++ b/packages/@react-types/image/src/index.d.ts @@ -10,41 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactEventHandler} from 'react'; - -export interface ImageProps { - /** - * The URL of the image. - */ - src: string, - /** - * Text description of the image. - */ - alt?: string, - /** - * Sets the Image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) style. - */ - objectFit?: any, // move to styleProps for images and type better - /** - * Called if an error occurs while loading or rendering an image, see [Image loading errors](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors). - */ - onError?: ReactEventHandler, - /** - * Called when the image has successfully loaded, see [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event). - */ - onLoad?: ReactEventHandler, - /** - * Indicates if the fetching of the image must be done using a CORS request. - * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). - */ - crossOrigin?: 'anonymous' | 'use-credentials' -} - -export interface SpectrumImageProps extends ImageProps, DOMProps, StyleProps { - /** - * A slot to place the image in. - * @default 'image' - */ - slot?: string -} +export {ImageProps, SpectrumImageProps} from '@react-spectrum/image'; From f4e0fd6f30f96dd4aafa8c9195cabb93145ac173 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Thu, 8 Jan 2026 21:08:20 -0500 Subject: [PATCH 25/56] Label --- packages/@react-spectrum/label/src/Field.tsx | 18 +++++++++--- packages/@react-spectrum/label/src/Label.tsx | 22 ++++++++++++-- packages/@react-spectrum/label/src/index.ts | 2 ++ packages/@react-types/label/package.json | 2 +- packages/@react-types/label/src/index.d.ts | 31 +------------------- 5 files changed, 37 insertions(+), 38 deletions(-) diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx index 45feae08714..4b3bad7cb06 100644 --- a/packages/@react-spectrum/label/src/Field.tsx +++ b/packages/@react-spectrum/label/src/Field.tsx @@ -13,14 +13,24 @@ import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {Flex} from '@react-spectrum/layout'; import {HelpText} from './HelpText'; -import {Label} from './Label'; -import {LabelPosition, RefObject} from '@react-types/shared'; +import {Label, SpectrumLabelPropsBase} from './Label'; +import {LabelPosition, RefObject, SpectrumFieldValidation, SpectrumHelpTextProps, Validation, ValidationResult} from '@react-types/shared'; import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; import {mergeProps, useId} from '@react-aria/utils'; -import React, {ReactNode, Ref} from 'react'; -import {SpectrumFieldProps} from '@react-types/label'; +import React, {HTMLAttributes, LabelHTMLAttributes, ReactElement, ReactNode, Ref} from 'react'; import {useFormProps} from '@react-spectrum/form'; +export interface SpectrumFieldProps extends SpectrumLabelPropsBase, SpectrumHelpTextProps, Omit, 'validationState'>, SpectrumFieldValidation, Partial { + children: ReactElement, + label?: ReactNode, + contextualHelp?: ReactNode, + labelProps?: LabelHTMLAttributes, + descriptionProps?: HTMLAttributes, + errorMessageProps?: HTMLAttributes, + wrapperClassName?: string, + wrapperProps?: HTMLAttributes +} + export const Field = React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref) { let formProps = useFormProps(props); let isInForm = formProps !== props; diff --git a/packages/@react-spectrum/label/src/Label.tsx b/packages/@react-spectrum/label/src/Label.tsx index 8e3a5b5893c..3d2f58ea1c6 100644 --- a/packages/@react-spectrum/label/src/Label.tsx +++ b/packages/@react-spectrum/label/src/Label.tsx @@ -10,18 +10,34 @@ * governing permissions and limitations under the License. */ +import {Alignment, DOMProps, DOMRef, LabelPosition, NecessityIndicator, StyleProps} from '@react-types/shared'; import Asterisk from '@spectrum-icons/ui/Asterisk'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; -import React from 'react'; -import {SpectrumLabelProps} from '@react-types/label'; +import React, {ElementType, HTMLAttributes, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface LabelProps { + children?: ReactNode, + htmlFor?: string, // for compatibility with React + for?: string, + elementType?: ElementType +} + +export interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps { + labelPosition?: LabelPosition, // default top + labelAlign?: Alignment, // default start + isRequired?: boolean, + necessityIndicator?: NecessityIndicator, // default icon + includeNecessityIndicatorInAccessibilityName?: boolean +} + +export interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes {} + export const Label = React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef) { props = useProviderProps(props); let { diff --git a/packages/@react-spectrum/label/src/index.ts b/packages/@react-spectrum/label/src/index.ts index b8a3d89cd2e..293e3882c34 100644 --- a/packages/@react-spectrum/label/src/index.ts +++ b/packages/@react-spectrum/label/src/index.ts @@ -15,3 +15,5 @@ export {Field} from './Field'; export {Label} from './Label'; export {HelpText} from './HelpText'; +export type {LabelProps, SpectrumLabelProps} from './Label'; +export type {SpectrumFieldProps} from './Field'; diff --git a/packages/@react-types/label/package.json b/packages/@react-types/label/package.json index d074f8685d6..50418cff411 100644 --- a/packages/@react-types/label/package.json +++ b/packages/@react-types/label/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/label": "^3.16.20" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/label/src/index.d.ts b/packages/@react-types/label/src/index.d.ts index 887ac7efc2a..59a1da51a51 100644 --- a/packages/@react-types/label/src/index.d.ts +++ b/packages/@react-types/label/src/index.d.ts @@ -10,33 +10,4 @@ * governing permissions and limitations under the License. */ -import {Alignment, DOMProps, LabelPosition, NecessityIndicator, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation, ValidationResult} from '@react-types/shared'; -import {ElementType, HTMLAttributes, LabelHTMLAttributes, ReactElement, ReactNode} from 'react'; - -export interface LabelProps { - children?: ReactNode, - htmlFor?: string, // for compatibility with React - for?: string, - elementType?: ElementType -} - -interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps { - labelPosition?: LabelPosition, // default top - labelAlign?: Alignment, // default start - isRequired?: boolean, - necessityIndicator?: NecessityIndicator, // default icon - includeNecessityIndicatorInAccessibilityName?: boolean -} - -export interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes {} - -export interface SpectrumFieldProps extends SpectrumLabelPropsBase, SpectrumHelpTextProps, Omit, 'validationState'>, SpectrumFieldValidation, Partial { - children: ReactElement, - label?: ReactNode, - contextualHelp?: ReactNode, - labelProps?: LabelHTMLAttributes, - descriptionProps?: HTMLAttributes, - errorMessageProps?: HTMLAttributes, - wrapperClassName?: string, - wrapperProps?: HTMLAttributes -} +export {LabelProps, SpectrumLabelProps, SpectrumFieldProps} from '@react-spectrum/label'; From 56f551edb023b35d614e182824501ddae01bff58 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 11:22:10 -0500 Subject: [PATCH 26/56] ListBox --- packages/@react-aria/listbox/src/index.ts | 3 +- .../@react-aria/listbox/src/useListBox.ts | 40 ++++++++++++++++- .../listbox/chromatic/ListBox.stories.tsx | 3 +- .../@react-spectrum/listbox/src/ListBox.tsx | 3 +- .../listbox/src/ListBoxBase.tsx | 6 ++- packages/@react-spectrum/listbox/src/index.ts | 2 +- packages/@react-types/listbox/package.json | 3 +- packages/@react-types/listbox/src/index.d.ts | 43 +------------------ 8 files changed, 50 insertions(+), 53 deletions(-) diff --git a/packages/@react-aria/listbox/src/index.ts b/packages/@react-aria/listbox/src/index.ts index af34544993e..14134ff6f3a 100644 --- a/packages/@react-aria/listbox/src/index.ts +++ b/packages/@react-aria/listbox/src/index.ts @@ -15,7 +15,6 @@ export {useOption} from './useOption'; export {useListBoxSection} from './useListBoxSection'; export {listData, getItemId} from './utils'; -export type {AriaListBoxProps} from '@react-types/listbox'; -export type {AriaListBoxOptions, ListBoxAria} from './useListBox'; +export type {ListBoxProps, AriaListBoxPropsBase, AriaListBoxProps, AriaListBoxOptions, ListBoxAria} from './useListBox'; export type {AriaOptionProps, OptionAria} from './useOption'; export type {AriaListBoxSectionProps, ListBoxSectionAria} from './useListBoxSection'; diff --git a/packages/@react-aria/listbox/src/useListBox.ts b/packages/@react-aria/listbox/src/useListBox.ts index c5ac0984bbf..764c32e0128 100644 --- a/packages/@react-aria/listbox/src/useListBox.ts +++ b/packages/@react-aria/listbox/src/useListBox.ts @@ -10,15 +10,51 @@ * governing permissions and limitations under the License. */ -import {AriaListBoxProps} from '@react-types/listbox'; -import {DOMAttributes, KeyboardDelegate, LayoutDelegate, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, FocusEvents, FocusStrategy, Key, KeyboardDelegate, LayoutDelegate, MultipleSelection, RefObject, SelectionBehavior} from '@react-types/shared'; import {filterDOMProps, mergeProps, useId} from '@react-aria/utils'; import {listData} from './utils'; import {ListState} from '@react-stately/list'; +import {ReactNode} from 'react'; import {useFocusWithin} from '@react-aria/interactions'; import {useLabel} from '@react-aria/label'; import {useSelectableList} from '@react-aria/selection'; +export interface ListBoxProps extends CollectionBase, MultipleSelection, FocusEvents { + /** Whether to auto focus the listbox or an option. */ + autoFocus?: boolean | FocusStrategy, + /** Whether focus should wrap around when the end/start is reached. */ + shouldFocusWrap?: boolean +} + +export interface AriaListBoxPropsBase extends ListBoxProps, DOMProps, AriaLabelingProps { + /** + * Whether pressing the escape key should clear selection in the listbox or not. + * + * Most experiences should not modify this option as it eliminates a keyboard user's ability to + * easily clear selection. Only use if the escape key is being handled externally or should not + * trigger selection clearing contextually. + * @default 'clearSelection' + */ + escapeKeyBehavior?: 'clearSelection' | 'none' +} +export interface AriaListBoxProps extends AriaListBoxPropsBase { + /** + * An optional visual label for the listbox. + */ + label?: ReactNode, + /** How multiple selection should behave in the collection. */ + selectionBehavior?: SelectionBehavior, + /** Whether selection should occur on press up instead of press down. */ + shouldSelectOnPressUp?: boolean, + /** Whether options should be focused when the user hovers over them. */ + shouldFocusOnHover?: boolean, + /** + * Handler that is called when a user performs an action on an item. The exact user event depends on + * the collection's `selectionBehavior` prop and the interaction modality. + */ + onAction?: (key: Key) => void +} + export interface ListBoxAria { /** Props for the listbox element. */ listBoxProps: DOMAttributes, diff --git a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx index 08873024fc8..a628ea353e4 100644 --- a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx +++ b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx @@ -18,12 +18,11 @@ import Blower from '@spectrum-icons/workflow/Blower'; import Book from '@spectrum-icons/workflow/Book'; import Copy from '@spectrum-icons/workflow/Copy'; import Cut from '@spectrum-icons/workflow/Cut'; -import {Item, ListBox, Section} from '../'; +import {Item, ListBox, Section, SpectrumListBoxProps} from '../'; import {Label} from '@react-spectrum/label'; import {Meta, StoryObj} from '@storybook/react'; import Paste from '@spectrum-icons/workflow/Paste'; import React, {JSX} from 'react'; -import {SpectrumListBoxProps} from '@react-types/listbox'; import {Text} from '@react-spectrum/text'; let iconMap = { diff --git a/packages/@react-spectrum/listbox/src/ListBox.tsx b/packages/@react-spectrum/listbox/src/ListBox.tsx index c17db580ef8..a7f83e23dbe 100644 --- a/packages/@react-spectrum/listbox/src/ListBox.tsx +++ b/packages/@react-spectrum/listbox/src/ListBox.tsx @@ -11,9 +11,8 @@ */ import {DOMRef} from '@react-types/shared'; -import {ListBoxBase, useListBoxLayout} from './ListBoxBase'; +import {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase'; import React, {ReactElement} from 'react'; -import {SpectrumListBoxProps} from '@react-types/listbox'; import {useDOMRef} from '@react-spectrum/utils'; import {useListState} from '@react-stately/list'; diff --git a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx index 372e1ebeba7..4002d501736 100644 --- a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx +++ b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx @@ -10,8 +10,8 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared'; -import {AriaListBoxOptions, useListBox} from '@react-aria/listbox'; +import {AriaLabelingProps, AsyncLoadable, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared'; +import {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from '@react-aria/listbox'; import {classNames, useStyleProps} from '@react-spectrum/utils'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore @@ -30,6 +30,8 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProvider} from '@react-spectrum/provider'; import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer'; +export interface SpectrumListBoxProps extends AriaListBoxPropsBase, AsyncLoadable, StyleProps {} + interface ListBoxBaseProps extends AriaListBoxOptions, DOMProps, AriaLabelingProps, StyleProps { layout: ListBoxLayout, state: ListState, diff --git a/packages/@react-spectrum/listbox/src/index.ts b/packages/@react-spectrum/listbox/src/index.ts index cde0e6831d2..f5759df445c 100644 --- a/packages/@react-spectrum/listbox/src/index.ts +++ b/packages/@react-spectrum/listbox/src/index.ts @@ -15,4 +15,4 @@ export {ListBox} from './ListBox'; export {useListBoxLayout, ListBoxBase} from './ListBoxBase'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumListBoxProps} from '@react-types/listbox'; +export type {SpectrumListBoxProps} from './ListBoxBase'; diff --git a/packages/@react-types/listbox/package.json b/packages/@react-types/listbox/package.json index 92c607d04b0..ded93604b79 100644 --- a/packages/@react-types/listbox/package.json +++ b/packages/@react-types/listbox/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/listbox": "^3.15.1", + "@react-spectrum/listbox": "^3.15.9" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/listbox/src/index.d.ts b/packages/@react-types/listbox/src/index.d.ts index 8391de95287..33c57c0dee0 100644 --- a/packages/@react-types/listbox/src/index.d.ts +++ b/packages/@react-types/listbox/src/index.d.ts @@ -10,44 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusEvents, FocusStrategy, Key, MultipleSelection, SelectionBehavior, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface ListBoxProps extends CollectionBase, MultipleSelection, FocusEvents { - /** Whether to auto focus the listbox or an option. */ - autoFocus?: boolean | FocusStrategy, - /** Whether focus should wrap around when the end/start is reached. */ - shouldFocusWrap?: boolean -} - -interface AriaListBoxPropsBase extends ListBoxProps, DOMProps, AriaLabelingProps { - /** - * Whether pressing the escape key should clear selection in the listbox or not. - * - * Most experiences should not modify this option as it eliminates a keyboard user's ability to - * easily clear selection. Only use if the escape key is being handled externally or should not - * trigger selection clearing contextually. - * @default 'clearSelection' - */ - escapeKeyBehavior?: 'clearSelection' | 'none' -} -export interface AriaListBoxProps extends AriaListBoxPropsBase { - /** - * An optional visual label for the listbox. - */ - label?: ReactNode, - /** How multiple selection should behave in the collection. */ - selectionBehavior?: SelectionBehavior, - /** Whether selection should occur on press up instead of press down. */ - shouldSelectOnPressUp?: boolean, - /** Whether options should be focused when the user hovers over them. */ - shouldFocusOnHover?: boolean, - /** - * Handler that is called when a user performs an action on an item. The exact user event depends on - * the collection's `selectionBehavior` prop and the interaction modality. - */ - onAction?: (key: Key) => void -} - -export interface SpectrumListBoxProps extends AriaListBoxPropsBase, AsyncLoadable, StyleProps { -} +export {ListBoxProps, AriaListBoxProps} from '@react-aria/listbox'; +export {SpectrumListBoxProps} from '@react-spectrum/listbox'; From 450025fed48f5d4ef751cfaabe2a55f6b24fea67 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 11:22:16 -0500 Subject: [PATCH 27/56] Layout --- packages/@react-spectrum/layout/src/Flex.tsx | 10 +++++++--- packages/@react-spectrum/layout/src/Grid.tsx | 10 +++++++--- packages/@react-spectrum/layout/src/index.ts | 3 ++- packages/@react-types/layout/package.json | 2 +- packages/@react-types/layout/src/flex.d.ts | 21 -------------------- packages/@react-types/layout/src/grid.d.ts | 19 ------------------ packages/@react-types/layout/src/index.d.ts | 6 ++++-- 7 files changed, 21 insertions(+), 50 deletions(-) delete mode 100644 packages/@react-types/layout/src/flex.d.ts delete mode 100644 packages/@react-types/layout/src/grid.d.ts diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx index 494a54cded1..c21248b2827 100644 --- a/packages/@react-spectrum/layout/src/Flex.tsx +++ b/packages/@react-spectrum/layout/src/Flex.tsx @@ -11,12 +11,16 @@ */ import {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, FlexStyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {FlexProps} from '@react-types/layout'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; import styles from './flex-gap.css'; +export interface FlexProps extends DOMProps, FlexStyleProps { + /** Children of the flex container. */ + children: ReactNode +} + const flexStyleProps: StyleHandlers = { direction: ['flexDirection', passthroughStyle], wrap: ['flexWrap', flexWrapValue], diff --git a/packages/@react-spectrum/layout/src/Grid.tsx b/packages/@react-spectrum/layout/src/Grid.tsx index b09a89705a4..2848bfd0c53 100644 --- a/packages/@react-spectrum/layout/src/Grid.tsx +++ b/packages/@react-spectrum/layout/src/Grid.tsx @@ -18,10 +18,14 @@ import { useDOMRef, useStyleProps } from '@react-spectrum/utils'; -import {DimensionValue, DOMRef} from '@react-types/shared'; +import {DimensionValue, DOMProps, DOMRef, GridStyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {GridProps} from '@react-types/layout'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface GridProps extends DOMProps, GridStyleProps { + /** Children of the grid container. */ + children: ReactNode +} const gridStyleProps: StyleHandlers = { ...baseStyleProps, diff --git a/packages/@react-spectrum/layout/src/index.ts b/packages/@react-spectrum/layout/src/index.ts index 712fedf5a1b..ea14de79f77 100644 --- a/packages/@react-spectrum/layout/src/index.ts +++ b/packages/@react-spectrum/layout/src/index.ts @@ -15,4 +15,5 @@ export {repeat, minmax, fitContent, Grid} from './Grid'; export {Flex} from './Flex'; export type {DimensionValue} from '@react-types/shared'; -export type {FlexProps, GridProps} from '@react-types/layout'; +export type {FlexProps} from './Flex'; +export type {GridProps} from './Grid'; diff --git a/packages/@react-types/layout/package.json b/packages/@react-types/layout/package.json index e61c487af17..8a00166bf12 100644 --- a/packages/@react-types/layout/package.json +++ b/packages/@react-types/layout/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/layout": "^3.6.20" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/layout/src/flex.d.ts b/packages/@react-types/layout/src/flex.d.ts deleted file mode 100644 index f6bb8274d3e..00000000000 --- a/packages/@react-types/layout/src/flex.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, FlexStyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export type Slots = {[key: string]: any}; - -export interface FlexProps extends DOMProps, FlexStyleProps { - /** Children of the flex container. */ - children: ReactNode -} diff --git a/packages/@react-types/layout/src/grid.d.ts b/packages/@react-types/layout/src/grid.d.ts deleted file mode 100644 index cd21c048b12..00000000000 --- a/packages/@react-types/layout/src/grid.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, GridStyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface GridProps extends DOMProps, GridStyleProps { - /** Children of the grid container. */ - children: ReactNode -} diff --git a/packages/@react-types/layout/src/index.d.ts b/packages/@react-types/layout/src/index.d.ts index bbc3da83565..f3f021b8574 100644 --- a/packages/@react-types/layout/src/index.d.ts +++ b/packages/@react-types/layout/src/index.d.ts @@ -10,5 +10,7 @@ * governing permissions and limitations under the License. */ -export * from './flex'; -export * from './grid'; +export {FlexProps, GridProps} from '@react-spectrum/layout'; + +// Backward compatibility. +export type Slots = {[key: string]: any}; From d3363ecf2f717e15f9fa88f2ca77b507dc61849c Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 11:32:44 -0500 Subject: [PATCH 28/56] Menu --- packages/@react-aria/menu/package.json | 1 - packages/@react-aria/menu/src/index.ts | 3 +- packages/@react-aria/menu/src/useMenu.ts | 26 ++++++- .../@react-aria/menu/src/useMenuTrigger.ts | 3 +- .../menu/chromatic/MenuTrigger.stories.tsx | 3 +- .../menu/chromatic/Submenu.stories.tsx | 3 +- packages/@react-spectrum/menu/package.json | 1 - .../@react-spectrum/menu/src/ActionMenu.tsx | 16 +++- packages/@react-spectrum/menu/src/Menu.tsx | 9 ++- .../@react-spectrum/menu/src/MenuTrigger.tsx | 34 +++++++- packages/@react-spectrum/menu/src/index.ts | 4 +- .../menu/stories/ActionMenu.stories.tsx | 3 +- packages/@react-stately/menu/package.json | 1 - packages/@react-stately/menu/src/index.ts | 3 +- .../menu/src/useMenuTriggerState.ts | 13 +++- packages/@react-types/menu/package.json | 5 +- packages/@react-types/menu/src/index.d.ts | 78 +------------------ 17 files changed, 98 insertions(+), 108 deletions(-) diff --git a/packages/@react-aria/menu/package.json b/packages/@react-aria/menu/package.json index dd3cc732fbd..e59466ac4af 100644 --- a/packages/@react-aria/menu/package.json +++ b/packages/@react-aria/menu/package.json @@ -37,7 +37,6 @@ "@react-stately/selection": "^3.20.7", "@react-stately/tree": "^3.9.4", "@react-types/button": "^3.14.1", - "@react-types/menu": "^3.10.5", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/menu/src/index.ts b/packages/@react-aria/menu/src/index.ts index 7aa44be2fce..452b0827641 100644 --- a/packages/@react-aria/menu/src/index.ts +++ b/packages/@react-aria/menu/src/index.ts @@ -16,9 +16,8 @@ export {useMenuItem} from './useMenuItem'; export {useMenuSection} from './useMenuSection'; export {useSubmenuTrigger} from './useSubmenuTrigger'; -export type {AriaMenuProps} from '@react-types/menu'; export type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger'; -export type {AriaMenuOptions, MenuAria} from './useMenu'; +export type {MenuProps, AriaMenuProps, AriaMenuOptions, MenuAria} from './useMenu'; export type {AriaMenuItemProps, MenuItemAria} from './useMenuItem'; export type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection'; export type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger'; diff --git a/packages/@react-aria/menu/src/useMenu.ts b/packages/@react-aria/menu/src/useMenu.ts index efcb39784e7..ecaabe23cc0 100644 --- a/packages/@react-aria/menu/src/useMenu.ts +++ b/packages/@react-aria/menu/src/useMenu.ts @@ -10,13 +10,35 @@ * governing permissions and limitations under the License. */ -import {AriaMenuProps} from '@react-types/menu'; -import {DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, FocusStrategy, Key, KeyboardDelegate, KeyboardEvents, MultipleSelection, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {menuData} from './utils'; import {TreeState} from '@react-stately/tree'; import {useSelectableList} from '@react-aria/selection'; +export interface MenuProps extends CollectionBase, MultipleSelection { + /** Where the focus should be set. */ + autoFocus?: boolean | FocusStrategy, + /** Whether keyboard navigation is circular. */ + shouldFocusWrap?: boolean, + /** Handler that is called when an item is selected. */ + onAction?: (key: Key) => void, + /** Handler that is called when the menu should close after selecting an item. */ + onClose?: () => void +} + +export interface AriaMenuProps extends MenuProps, DOMProps, AriaLabelingProps { + /** + * Whether pressing the escape key should clear selection in the menu or not. + * + * Most experiences should not modify this option as it eliminates a keyboard user's ability to + * easily clear selection. Only use if the escape key is being handled externally or should not + * trigger selection clearing contextually. + * @default 'clearSelection' + */ + escapeKeyBehavior?: 'clearSelection' | 'none' +} + export interface MenuAria { /** Props for the menu element. */ menuProps: DOMAttributes diff --git a/packages/@react-aria/menu/src/useMenuTrigger.ts b/packages/@react-aria/menu/src/useMenuTrigger.ts index 2d2227276a3..d36dd4c30c4 100644 --- a/packages/@react-aria/menu/src/useMenuTrigger.ts +++ b/packages/@react-aria/menu/src/useMenuTrigger.ts @@ -16,8 +16,7 @@ import {FocusableElement, RefObject} from '@react-types/shared'; import {focusWithoutScrolling, useId} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {MenuTriggerState} from '@react-stately/menu'; -import {MenuTriggerType} from '@react-types/menu'; +import {MenuTriggerState, MenuTriggerType} from '@react-stately/menu'; import {PressProps, useLongPress} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useOverlayTrigger} from '@react-aria/overlays'; diff --git a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx index 418edd08c9a..49b0dba8f38 100644 --- a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx +++ b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx @@ -18,12 +18,11 @@ import Blower from '@spectrum-icons/workflow/Blower'; import Book from '@spectrum-icons/workflow/Book'; import Copy from '@spectrum-icons/workflow/Copy'; import Cut from '@spectrum-icons/workflow/Cut'; -import {Item, Menu, MenuTrigger, Section} from '../'; +import {Item, Menu, MenuTrigger, Section, SpectrumMenuTriggerProps} from '../'; import {Keyboard, Text} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import Paste from '@spectrum-icons/workflow/Paste'; import React, {JSX} from 'react'; -import {SpectrumMenuTriggerProps} from '@react-types/menu'; const meta: Meta = { title: 'MenuTrigger', diff --git a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx index 74ec34977c0..dc90bcaab01 100644 --- a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx +++ b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx @@ -15,11 +15,10 @@ import AlignCenter from '@spectrum-icons/workflow/AlignCenter'; import AlignLeft from '@spectrum-icons/workflow/AlignLeft'; import AlignRight from '@spectrum-icons/workflow/AlignRight'; import AnnotatePen from '@spectrum-icons/workflow/AnnotatePen'; -import {Item, Menu, MenuTrigger, Section, SubmenuTrigger} from '../'; +import {Item, Menu, MenuTrigger, Section, SpectrumMenuTriggerProps, SubmenuTrigger} from '../'; import {Keyboard, Text} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumMenuTriggerProps} from '@react-types/menu'; import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease'; import TextItalics from '@spectrum-icons/workflow/TextItalic'; import {userEvent, within} from '@storybook/test'; diff --git a/packages/@react-spectrum/menu/package.json b/packages/@react-spectrum/menu/package.json index 9acf3846f32..80b02219626 100644 --- a/packages/@react-spectrum/menu/package.json +++ b/packages/@react-spectrum/menu/package.json @@ -56,7 +56,6 @@ "@react-stately/menu": "^3.9.9", "@react-stately/overlays": "^3.6.21", "@react-stately/tree": "^3.9.4", - "@react-types/menu": "^3.10.5", "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", diff --git a/packages/@react-spectrum/menu/src/ActionMenu.tsx b/packages/@react-spectrum/menu/src/ActionMenu.tsx index 4b23d10e1f9..819959d1a64 100644 --- a/packages/@react-spectrum/menu/src/ActionMenu.tsx +++ b/packages/@react-spectrum/menu/src/ActionMenu.tsx @@ -11,18 +11,28 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaLabelingProps, CollectionBase, DOMProps, FocusableRef, Key, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {FocusableRef} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Menu} from './Menu'; -import {MenuTrigger} from './MenuTrigger'; +import {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger'; import More from '@spectrum-icons/workflow/More'; import React, {forwardRef, ReactElement} from 'react'; -import {SpectrumActionMenuProps} from '@react-types/menu'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSlotProps} from '@react-spectrum/utils'; +export interface SpectrumActionMenuProps extends CollectionBase, Omit, StyleProps, DOMProps, AriaLabelingProps { + /** Whether the button is disabled. */ + isDisabled?: boolean, + /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + isQuiet?: boolean, + /** Whether the element should receive focus on render. */ + autoFocus?: boolean, + /** Handler that is called when an item is selected. */ + onAction?: (key: Key) => void +} + /** * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases. */ diff --git a/packages/@react-spectrum/menu/src/Menu.tsx b/packages/@react-spectrum/menu/src/Menu.tsx index 9fbb712d51b..324cbc24066 100644 --- a/packages/@react-spectrum/menu/src/Menu.tsx +++ b/packages/@react-spectrum/menu/src/Menu.tsx @@ -11,11 +11,12 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaMenuProps, useMenu} from '@react-aria/menu'; import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall'; import {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; -import {FocusScope} from '@react-aria/focus'; +import {DOMRef, StyleProps} from '@react-types/shared'; // @ts-ignore +import {FocusScope} from '@react-aria/focus'; import intlMessages from '../intl/*.json'; import {MenuContext, MenuStateContext, useMenuStateContext} from './context'; import {MenuItem} from './MenuItem'; @@ -23,11 +24,11 @@ import {MenuSection} from './MenuSection'; import {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils'; import React, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react'; import {RootMenuTriggerState} from '@react-stately/menu'; -import {SpectrumMenuProps} from '@react-types/menu'; import styles from '@adobe/spectrum-css-temp/components/menu/vars.css'; import {TreeState, useTreeState} from '@react-stately/tree'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useMenu} from '@react-aria/menu'; + +export interface SpectrumMenuProps extends AriaMenuProps, StyleProps {} /** * Menus display a list of actions or options that a user can choose. diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx index 7c50ef81bdc..ab4998f6907 100644 --- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx +++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx @@ -10,17 +10,43 @@ * governing permissions and limitations under the License. */ +import {Alignment, DOMRef} from '@react-types/shared'; import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {MenuContext} from './context'; +import {MenuTriggerProps, useMenuTriggerState} from '@react-stately/menu'; import {Placement} from '@react-aria/overlays'; import {Popover, Tray} from '@react-spectrum/overlays'; import {PressResponder, useInteractOutside} from '@react-aria/interactions'; -import React, {forwardRef, Fragment, useRef} from 'react'; -import {SpectrumMenuTriggerProps} from '@react-types/menu'; +import React, {forwardRef, Fragment, ReactElement, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/menu/vars.css'; import {useMenuTrigger} from '@react-aria/menu'; -import {useMenuTriggerState} from '@react-stately/menu'; + +export interface SpectrumMenuTriggerProps extends MenuTriggerProps { + /** + * The contents of the MenuTrigger - a trigger and a Menu. + */ + children: ReactElement[], + /** + * Alignment of the menu relative to the trigger. + * @default 'start' + */ + align?: Alignment, + /** + * Where the Menu opens relative to its trigger. + * @default 'bottom' + */ + direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end', + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** + * Whether the Menu closes when a selection is made. + * @default true + */ + closeOnSelect?: boolean +} /** * The MenuTrigger serves as a wrapper around a Menu and its associated trigger, diff --git a/packages/@react-spectrum/menu/src/index.ts b/packages/@react-spectrum/menu/src/index.ts index baea74b9b16..66020e584d5 100644 --- a/packages/@react-spectrum/menu/src/index.ts +++ b/packages/@react-spectrum/menu/src/index.ts @@ -18,6 +18,8 @@ export {Menu} from './Menu'; export {ActionMenu} from './ActionMenu'; export {ContextualHelpTrigger} from './ContextualHelpTrigger'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps} from '@react-types/menu'; +export type {SpectrumActionMenuProps} from './ActionMenu'; +export type {SpectrumMenuProps} from './Menu'; +export type {SpectrumMenuTriggerProps} from './MenuTrigger'; export type {SpectrumMenuDialogTriggerProps} from './ContextualHelpTrigger'; export type {SpectrumSubmenuTriggerProps} from './SubmenuTrigger'; diff --git a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx index 25c3760b314..e147a5747ca 100644 --- a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx +++ b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx @@ -15,11 +15,10 @@ import {ActionMenu} from '..'; import {Alignment} from '@react-types/shared'; import {Checkbox} from '@react-spectrum/checkbox'; import {Flex} from '@react-spectrum/layout'; -import {Item} from '../'; +import {Item, SpectrumActionMenuProps} from '../'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {Picker} from '@react-spectrum/picker'; import React, {JSX, useState} from 'react'; -import {SpectrumActionMenuProps} from '@react-types/menu'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; const meta: Meta> = { diff --git a/packages/@react-stately/menu/package.json b/packages/@react-stately/menu/package.json index 3af2bd89200..bd9c91323ae 100644 --- a/packages/@react-stately/menu/package.json +++ b/packages/@react-stately/menu/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/overlays": "^3.6.21", - "@react-types/menu": "^3.10.5", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/menu/src/index.ts b/packages/@react-stately/menu/src/index.ts index e440397d8ff..84be261e994 100644 --- a/packages/@react-stately/menu/src/index.ts +++ b/packages/@react-stately/menu/src/index.ts @@ -13,6 +13,5 @@ export {useMenuTriggerState} from './useMenuTriggerState'; export {useSubmenuTriggerState} from './useSubmenuTriggerState'; -export type {MenuTriggerProps} from '@react-types/menu'; -export type {MenuTriggerState, RootMenuTriggerState} from './useMenuTriggerState'; +export type {MenuTriggerProps, MenuTriggerType, MenuTriggerState, RootMenuTriggerState} from './useMenuTriggerState'; export type {SubmenuTriggerProps, SubmenuTriggerState} from './useSubmenuTriggerState'; diff --git a/packages/@react-stately/menu/src/useMenuTriggerState.ts b/packages/@react-stately/menu/src/useMenuTriggerState.ts index 0901c052323..3be7391c0e6 100644 --- a/packages/@react-stately/menu/src/useMenuTriggerState.ts +++ b/packages/@react-stately/menu/src/useMenuTriggerState.ts @@ -11,10 +11,19 @@ */ import {FocusStrategy, Key} from '@react-types/shared'; -import {MenuTriggerProps} from '@react-types/menu'; -import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; +import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; import {useState} from 'react'; +export type MenuTriggerType = 'press' | 'longPress'; + +export interface MenuTriggerProps extends OverlayTriggerProps { + /** + * How the menu is triggered. + * @default 'press' + */ + trigger?: MenuTriggerType +} + export interface MenuTriggerState extends OverlayTriggerState { /** Controls which item will be auto focused when the menu opens. */ readonly focusStrategy: FocusStrategy | null, diff --git a/packages/@react-types/menu/package.json b/packages/@react-types/menu/package.json index eaca477ad11..d733c05bfb8 100644 --- a/packages/@react-types/menu/package.json +++ b/packages/@react-types/menu/package.json @@ -9,8 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.2", - "@react-types/shared": "^3.32.1" + "@react-aria/menu": "^3.19.4", + "@react-spectrum/menu": "^3.22.9", + "@react-stately/menu": "^3.9.9" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/menu/src/index.d.ts b/packages/@react-types/menu/src/index.d.ts index a3b4ae883eb..e688f20272d 100644 --- a/packages/@react-types/menu/src/index.d.ts +++ b/packages/@react-types/menu/src/index.d.ts @@ -10,78 +10,6 @@ * governing permissions and limitations under the License. */ -import {Alignment, AriaLabelingProps, CollectionBase, DOMProps, FocusStrategy, Key, MultipleSelection, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps} from '@react-types/overlays'; -import {ReactElement} from 'react'; - -export type MenuTriggerType = 'press' | 'longPress'; - -export interface MenuTriggerProps extends OverlayTriggerProps { - /** - * How the menu is triggered. - * @default 'press' - */ - trigger?: MenuTriggerType -} - -export interface SpectrumMenuTriggerProps extends MenuTriggerProps { - /** - * The contents of the MenuTrigger - a trigger and a Menu. - */ - children: ReactElement[], - /** - * Alignment of the menu relative to the trigger. - * @default 'start' - */ - align?: Alignment, - /** - * Where the Menu opens relative to its trigger. - * @default 'bottom' - */ - direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end', - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** - * Whether the Menu closes when a selection is made. - * @default true - */ - closeOnSelect?: boolean -} - -export interface MenuProps extends CollectionBase, MultipleSelection { - /** Where the focus should be set. */ - autoFocus?: boolean | FocusStrategy, - /** Whether keyboard navigation is circular. */ - shouldFocusWrap?: boolean, - /** Handler that is called when an item is selected. */ - onAction?: (key: Key) => void, - /** Handler that is called when the menu should close after selecting an item. */ - onClose?: () => void -} - -export interface AriaMenuProps extends MenuProps, DOMProps, AriaLabelingProps { - /** - * Whether pressing the escape key should clear selection in the menu or not. - * - * Most experiences should not modify this option as it eliminates a keyboard user's ability to - * easily clear selection. Only use if the escape key is being handled externally or should not - * trigger selection clearing contextually. - * @default 'clearSelection' - */ - escapeKeyBehavior?: 'clearSelection' | 'none' -} -export interface SpectrumMenuProps extends AriaMenuProps, StyleProps {} - -export interface SpectrumActionMenuProps extends CollectionBase, Omit, StyleProps, DOMProps, AriaLabelingProps { - /** Whether the button is disabled. */ - isDisabled?: boolean, - /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ - isQuiet?: boolean, - /** Whether the element should receive focus on render. */ - autoFocus?: boolean, - /** Handler that is called when an item is selected. */ - onAction?: (key: Key) => void -} +export {MenuTriggerType, MenuTriggerProps} from '@react-stately/menu'; +export {MenuProps, AriaMenuProps} from '@react-aria/menu'; +export {SpectrumMenuTriggerProps, SpectrumMenuProps, SpectrumActionMenuProps} from '@react-spectrum/menu'; From c0f8de4cd1147f81f5c826419c1ac4d82347c1d5 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 11:47:06 -0500 Subject: [PATCH 29/56] ProgressBar / Meter --- packages/@react-aria/meter/package.json | 1 - packages/@react-aria/meter/src/index.ts | 3 +- packages/@react-aria/meter/src/useMeter.ts | 6 +- packages/@react-aria/progress/package.json | 1 - packages/@react-aria/progress/src/index.ts | 3 +- .../progress/src/useProgressBar.ts | 42 ++++++++- .../meter/chromatic/Meter.stories.tsx | 3 +- packages/@react-spectrum/meter/package.json | 1 - packages/@react-spectrum/meter/src/Meter.tsx | 11 ++- packages/@react-spectrum/meter/src/index.ts | 2 +- .../chromatic/ProgressBar.stories.tsx | 3 +- .../chromatic/ProgressCircle.stories.tsx | 3 +- .../@react-spectrum/progress/package.json | 1 - .../progress/src/ProgressBar.tsx | 3 +- .../progress/src/ProgressBarBase.tsx | 29 +++++- .../progress/src/ProgressCircle.tsx | 41 +++++++- .../@react-spectrum/progress/src/index.ts | 3 +- packages/@react-types/meter/package.json | 3 +- packages/@react-types/meter/src/index.d.ts | 13 +-- packages/@react-types/progress/package.json | 3 +- packages/@react-types/progress/src/index.d.ts | 94 +------------------ 21 files changed, 136 insertions(+), 133 deletions(-) diff --git a/packages/@react-aria/meter/package.json b/packages/@react-aria/meter/package.json index a43f60fe4d5..c9b38bfcc7b 100644 --- a/packages/@react-aria/meter/package.json +++ b/packages/@react-aria/meter/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-aria/progress": "^3.4.28", - "@react-types/meter": "^3.4.13", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/meter/src/index.ts b/packages/@react-aria/meter/src/index.ts index 81807e3bc32..418c4a354b9 100644 --- a/packages/@react-aria/meter/src/index.ts +++ b/packages/@react-aria/meter/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useMeter} from './useMeter'; -export type {AriaMeterProps} from '@react-types/meter'; -export type {MeterAria} from './useMeter'; +export type {MeterProps, AriaMeterProps, MeterAria} from './useMeter'; diff --git a/packages/@react-aria/meter/src/useMeter.ts b/packages/@react-aria/meter/src/useMeter.ts index ddacce2dacb..2dad88c82bb 100644 --- a/packages/@react-aria/meter/src/useMeter.ts +++ b/packages/@react-aria/meter/src/useMeter.ts @@ -10,9 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaMeterProps} from '@react-types/meter'; +import {AriaProgressBarBaseProps, ProgressBarBaseProps, useProgressBar} from '@react-aria/progress'; import {DOMAttributes} from '@react-types/shared'; -import {useProgressBar} from '@react-aria/progress'; + +export type MeterProps = ProgressBarBaseProps; +export interface AriaMeterProps extends AriaProgressBarBaseProps {} export interface MeterAria { /** Props for the meter container element. */ diff --git a/packages/@react-aria/progress/package.json b/packages/@react-aria/progress/package.json index acd01ca0463..56ed4804d03 100644 --- a/packages/@react-aria/progress/package.json +++ b/packages/@react-aria/progress/package.json @@ -29,7 +29,6 @@ "@react-aria/i18n": "^3.12.14", "@react-aria/label": "^3.7.23", "@react-aria/utils": "^3.32.0", - "@react-types/progress": "^3.5.16", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/progress/src/index.ts b/packages/@react-aria/progress/src/index.ts index ac384c94212..e27e7913100 100644 --- a/packages/@react-aria/progress/src/index.ts +++ b/packages/@react-aria/progress/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useProgressBar} from './useProgressBar'; -export type {AriaProgressBarProps} from '@react-types/progress'; -export type {ProgressBarAria} from './useProgressBar'; +export type {ProgressBarProps, ProgressBarBaseProps, AriaProgressBarBaseProps, AriaProgressBarProps, ProgressBarAria} from './useProgressBar'; diff --git a/packages/@react-aria/progress/src/useProgressBar.ts b/packages/@react-aria/progress/src/useProgressBar.ts index e754677366e..124366fdf30 100644 --- a/packages/@react-aria/progress/src/useProgressBar.ts +++ b/packages/@react-aria/progress/src/useProgressBar.ts @@ -10,12 +10,50 @@ * governing permissions and limitations under the License. */ -import {AriaProgressBarProps} from '@react-types/progress'; +import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; import {clamp, filterDOMProps, mergeProps} from '@react-aria/utils'; -import {DOMAttributes} from '@react-types/shared'; +import {ReactNode} from 'react'; import {useLabel} from '@react-aria/label'; import {useNumberFormatter} from '@react-aria/i18n'; +export interface ProgressBarBaseProps { + /** + * The current value (controlled). + * @default 0 + */ + value?: number, + /** + * The smallest value allowed for the input. + * @default 0 + */ + minValue?: number, + /** + * The largest value allowed for the input. + * @default 100 + */ + maxValue?: number, + /** The content to display as the label. */ + label?: ReactNode, + /** + * The display format of the value label. + * @default {style: 'percent'} + */ + formatOptions?: Intl.NumberFormatOptions, + /** The content to display as the value's label (e.g. 1 of 4). */ + valueLabel?: ReactNode +} + +export interface AriaProgressBarBaseProps extends ProgressBarBaseProps, DOMProps, AriaLabelingProps {} + +export interface ProgressBarProps extends ProgressBarBaseProps { + /** + * Whether presentation is indeterminate when progress isn't known. + */ + isIndeterminate?: boolean +} + +export interface AriaProgressBarProps extends ProgressBarProps, DOMProps, AriaLabelingProps {} + export interface ProgressBarAria { /** Props for the progress bar container element. */ progressBarProps: DOMAttributes, diff --git a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx index 10cc07f6dce..dcf5d30a526 100644 --- a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx +++ b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx @@ -11,8 +11,7 @@ */ import {Meta, StoryObj} from '@storybook/react'; -import {Meter} from '../'; -import {SpectrumMeterProps} from '@react-types/meter'; +import {Meter, SpectrumMeterProps} from '../'; const meta: Meta = { title: 'Meter', diff --git a/packages/@react-spectrum/meter/package.json b/packages/@react-spectrum/meter/package.json index 9c85a4022b9..9f132e3c28a 100644 --- a/packages/@react-spectrum/meter/package.json +++ b/packages/@react-spectrum/meter/package.json @@ -43,7 +43,6 @@ "@react-aria/meter": "^3.4.28", "@react-spectrum/progress": "^3.7.21", "@react-spectrum/utils": "^3.12.10", - "@react-types/meter": "^3.4.13", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/meter/src/Meter.tsx b/packages/@react-spectrum/meter/src/Meter.tsx index 5943fd3fcf2..57679c9cd57 100644 --- a/packages/@react-spectrum/meter/src/Meter.tsx +++ b/packages/@react-spectrum/meter/src/Meter.tsx @@ -12,12 +12,19 @@ import {classNames} from '@react-spectrum/utils'; import {DOMRef} from '@react-types/shared'; -import {ProgressBarBase} from '@react-spectrum/progress'; +import {ProgressBarBase, SpectrumProgressBarBaseProps} from '@react-spectrum/progress'; import React from 'react'; -import {SpectrumMeterProps} from '@react-types/meter'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; import {useMeter} from '@react-aria/meter'; +export interface SpectrumMeterProps extends SpectrumProgressBarBaseProps { + /** + * The [visual style](https://spectrum.adobe.com/page/meter/#Options) of the Meter. + * @default 'informative' + */ + variant?: 'informative' | 'positive' | 'warning' | 'critical' +} + /** * Meters are visual representations of a quantity or an achievement. * Their progress is determined by user actions, rather than system actions. diff --git a/packages/@react-spectrum/meter/src/index.ts b/packages/@react-spectrum/meter/src/index.ts index ad64b8dcb56..d434d9c89e1 100644 --- a/packages/@react-spectrum/meter/src/index.ts +++ b/packages/@react-spectrum/meter/src/index.ts @@ -13,4 +13,4 @@ /// export {Meter} from './Meter'; -export type {SpectrumMeterProps} from '@react-types/meter'; +export type {SpectrumMeterProps} from './Meter'; diff --git a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx index 59417e51b8e..b23a90b6c4b 100644 --- a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx +++ b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx @@ -11,9 +11,8 @@ */ import {Meta, StoryObj} from '@storybook/react'; -import {ProgressBar} from '../'; +import {ProgressBar, SpectrumProgressBarProps} from '../'; import React, {CSSProperties} from 'react'; -import {SpectrumProgressBarProps} from '@react-types/progress'; const meta: Meta = { title: 'ProgressBar', diff --git a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx index dec906c6dc9..af0934fc4c7 100644 --- a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx +++ b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx @@ -11,9 +11,8 @@ */ import {Meta, StoryObj} from '@storybook/react'; -import {ProgressCircle} from '../'; +import {ProgressCircle, SpectrumProgressCircleProps} from '../'; import React, {CSSProperties} from 'react'; -import {SpectrumProgressCircleProps} from '@react-types/progress'; const meta: Meta = { title: 'ProgressCircle', diff --git a/packages/@react-spectrum/progress/package.json b/packages/@react-spectrum/progress/package.json index a898e19cc35..29d266ce557 100644 --- a/packages/@react-spectrum/progress/package.json +++ b/packages/@react-spectrum/progress/package.json @@ -43,7 +43,6 @@ "@react-aria/progress": "^3.4.28", "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/progress": "^3.5.16", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/progress/src/ProgressBar.tsx b/packages/@react-spectrum/progress/src/ProgressBar.tsx index 65146a01ea1..7ed998007a3 100644 --- a/packages/@react-spectrum/progress/src/ProgressBar.tsx +++ b/packages/@react-spectrum/progress/src/ProgressBar.tsx @@ -12,9 +12,8 @@ import {classNames} from '@react-spectrum/utils'; import {DOMRef} from '@react-types/shared'; -import {ProgressBarBase} from './ProgressBarBase'; +import {ProgressBarBase, SpectrumProgressBarProps} from './ProgressBarBase'; import React from 'react'; -import {SpectrumProgressBarProps} from '@react-types/progress'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; import {useProgressBar} from '@react-aria/progress'; diff --git a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx index d89c565cdba..ac0a263e75c 100644 --- a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx +++ b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx @@ -10,13 +10,38 @@ * governing permissions and limitations under the License. */ +import {AriaProgressBarBaseProps, ProgressBarProps} from '@react-aria/progress'; import {clamp} from '@react-aria/utils'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; -import {ProgressBarProps, SpectrumProgressBarBaseProps} from '@react-types/progress'; +import {DOMRef, LabelPosition, StyleProps} from '@react-types/shared'; import React, {CSSProperties, HTMLAttributes} from 'react'; import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css'; +export interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps { + /** + * How thick the bar should be. + * @default 'L' + */ + size?: 'S' | 'L', + /** + * The label's overall position relative to the element it is labeling. + * @default 'top' + */ + labelPosition?: LabelPosition, + /** Whether the value's label is displayed. True by default if there's a label, false by default if not. */ + showValueLabel?: boolean +} + +export interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps { + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar. + * @deprecated - use staticColor instead. + */ + variant?: 'overBackground' +} + interface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps { barClassName?: string, barProps?: HTMLAttributes, diff --git a/packages/@react-spectrum/progress/src/ProgressCircle.tsx b/packages/@react-spectrum/progress/src/ProgressCircle.tsx index 134f59d8992..fd5f85d6727 100644 --- a/packages/@react-spectrum/progress/src/ProgressCircle.tsx +++ b/packages/@react-spectrum/progress/src/ProgressCircle.tsx @@ -10,14 +10,51 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {clamp} from '@react-aria/utils'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import React, {CSSProperties} from 'react'; -import {SpectrumProgressCircleProps} from '@react-types/progress'; import styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css'; import {useProgressBar} from '@react-aria/progress'; +export interface ProgressCircleProps { + /** + * The current value (controlled). + * @default 0 + */ + value?: number, + /** + * The smallest value allowed for the input. + * @default 0 + */ + minValue?: number, + /** + * The largest value allowed for the input. + * @default 100 + */ + maxValue?: number, + /** + * Whether presentation is indeterminate when progress isn't known. + */ + isIndeterminate?: boolean +} + +export interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {} +export interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps { + /** + * What the ProgressCircle's diameter should be. + * @default 'M' + */ + size?: 'S' | 'M' | 'L', + /** The static color style to apply. Useful when the button appears over a color background. */ + staticColor?: 'white' | 'black', + /** + * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle. + * + * @deprecated - use staticColor instead. + */ + variant?: 'overBackground' +} /** * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. diff --git a/packages/@react-spectrum/progress/src/index.ts b/packages/@react-spectrum/progress/src/index.ts index 89fee1088cf..268933e9039 100644 --- a/packages/@react-spectrum/progress/src/index.ts +++ b/packages/@react-spectrum/progress/src/index.ts @@ -15,4 +15,5 @@ export {ProgressBar} from './ProgressBar'; export {ProgressCircle} from './ProgressCircle'; export {ProgressBarBase} from './ProgressBarBase'; -export type {SpectrumProgressBarProps, SpectrumProgressCircleProps} from '@react-types/progress'; +export type {SpectrumProgressBarBaseProps, SpectrumProgressBarProps} from './ProgressBarBase'; +export type {SpectrumProgressCircleProps, ProgressCircleProps, AriaProgressCircleProps} from './ProgressCircle'; diff --git a/packages/@react-types/meter/package.json b/packages/@react-types/meter/package.json index 2436039e525..56633987839 100644 --- a/packages/@react-types/meter/package.json +++ b/packages/@react-types/meter/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/progress": "^3.5.16" + "@react-aria/meter": "^3.4.28", + "@react-spectrum/meter": "^3.5.15" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/meter/src/index.d.ts b/packages/@react-types/meter/src/index.d.ts index b36228f0aaf..2ee3e7cf9e6 100644 --- a/packages/@react-types/meter/src/index.d.ts +++ b/packages/@react-types/meter/src/index.d.ts @@ -10,14 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaProgressBarBaseProps, ProgressBarBaseProps, SpectrumProgressBarBaseProps} from '@react-types/progress'; - -export type MeterProps = ProgressBarBaseProps; -export interface AriaMeterProps extends AriaProgressBarBaseProps {} -export interface SpectrumMeterProps extends SpectrumProgressBarBaseProps { - /** - * The [visual style](https://spectrum.adobe.com/page/meter/#Options) of the Meter. - * @default 'informative' - */ - variant?: 'informative' | 'positive' | 'warning' | 'critical' -} +export {MeterProps, AriaMeterProps} from '@react-aria/meter'; +export {SpectrumMeterProps} from '@react-spectrum/meter'; diff --git a/packages/@react-types/progress/package.json b/packages/@react-types/progress/package.json index 663cbed596e..97b137133d1 100644 --- a/packages/@react-types/progress/package.json +++ b/packages/@react-types/progress/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/progress": "^3.4.28", + "@react-spectrum/progress": "^3.7.21" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/progress/src/index.d.ts b/packages/@react-types/progress/src/index.d.ts index 8b7187d63d6..ce97c3256b9 100644 --- a/packages/@react-types/progress/src/index.d.ts +++ b/packages/@react-types/progress/src/index.d.ts @@ -10,95 +10,5 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, LabelPosition, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -interface ProgressBaseProps { - /** - * The current value (controlled). - * @default 0 - */ - value?: number, - /** - * The smallest value allowed for the input. - * @default 0 - */ - minValue?: number, - /** - * The largest value allowed for the input. - * @default 100 - */ - maxValue?: number -} - -export interface ProgressBarBaseProps extends ProgressBaseProps { - /** The content to display as the label. */ - label?: ReactNode, - /** - * The display format of the value label. - * @default {style: 'percent'} - */ - formatOptions?: Intl.NumberFormatOptions, - /** The content to display as the value's label (e.g. 1 of 4). */ - valueLabel?: ReactNode -} - -export interface AriaProgressBarBaseProps extends ProgressBarBaseProps, DOMProps, AriaLabelingProps {} - -export interface ProgressBarProps extends ProgressBarBaseProps { - /** - * Whether presentation is indeterminate when progress isn't known. - */ - isIndeterminate?: boolean -} - -export interface AriaProgressBarProps extends ProgressBarProps, DOMProps, AriaLabelingProps {} - -export interface ProgressCircleProps extends ProgressBaseProps { - /** - * Whether presentation is indeterminate when progress isn't known. - */ - isIndeterminate?: boolean -} - -export interface AriaProgressCircleProps extends ProgressCircleProps, DOMProps, AriaLabelingProps {} -export interface SpectrumProgressCircleProps extends AriaProgressCircleProps, StyleProps { - /** - * What the ProgressCircle's diameter should be. - * @default 'M' - */ - size?: 'S' | 'M' | 'L', - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle. - * - * @deprecated - use staticColor instead. - */ - variant?: 'overBackground' -} - -export interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps, StyleProps { - /** - * How thick the bar should be. - * @default 'L' - */ - size?: 'S' | 'L', - /** - * The label's overall position relative to the element it is labeling. - * @default 'top' - */ - labelPosition?: LabelPosition, - /** Whether the value's label is displayed. True by default if there's a label, false by default if not. */ - showValueLabel?: boolean -} - -export interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps { - /** The static color style to apply. Useful when the button appears over a color background. */ - staticColor?: 'white' | 'black', - /** - * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar. - * @deprecated - use staticColor instead. - */ - variant?: 'overBackground' -} +export {ProgressBarBaseProps, AriaProgressBarBaseProps, AriaProgressBarProps} from '@react-aria/progress'; +export {ProgressCircleProps, AriaProgressCircleProps, SpectrumProgressCircleProps, SpectrumProgressBarBaseProps, SpectrumProgressBarProps} from '@react-spectrum/progress'; From c7f624549d0af592614c07e349f464c81e973f6d Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 11:52:25 -0500 Subject: [PATCH 30/56] NumberField --- packages/@react-aria/numberfield/package.json | 1 - packages/@react-aria/numberfield/src/index.ts | 3 +- .../numberfield/src/useNumberField.ts | 16 +++++-- .../numberfield/test/useNumberField.test.ts | 3 +- .../chromatic/NumberField.stories.tsx | 3 +- .../@react-spectrum/numberfield/package.json | 1 - .../numberfield/src/NumberField.tsx | 15 +++++-- .../@react-spectrum/numberfield/src/index.ts | 2 +- .../@react-stately/numberfield/package.json | 2 +- .../@react-stately/numberfield/src/index.ts | 2 +- .../numberfield/src/useNumberFieldState.ts | 10 ++++- .../@react-types/numberfield/package.json | 4 +- .../@react-types/numberfield/src/index.d.ts | 45 ++----------------- 13 files changed, 46 insertions(+), 61 deletions(-) diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json index 0f59f1cd936..e96b20165d4 100644 --- a/packages/@react-aria/numberfield/package.json +++ b/packages/@react-aria/numberfield/package.json @@ -34,7 +34,6 @@ "@react-stately/form": "^3.2.2", "@react-stately/numberfield": "^3.10.3", "@react-types/button": "^3.14.1", - "@react-types/numberfield": "^3.8.16", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/numberfield/src/index.ts b/packages/@react-aria/numberfield/src/index.ts index 08c0ea848a8..427ac46c5af 100644 --- a/packages/@react-aria/numberfield/src/index.ts +++ b/packages/@react-aria/numberfield/src/index.ts @@ -10,5 +10,4 @@ * governing permissions and limitations under the License. */ export {useNumberField} from './useNumberField'; -export type {AriaNumberFieldProps} from '@react-types/numberfield'; -export type {NumberFieldAria} from './useNumberField'; +export type {AriaNumberFieldProps, NumberFieldAria} from './useNumberField'; diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts index 670d79d69e0..65e61f73378 100644 --- a/packages/@react-aria/numberfield/src/useNumberField.ts +++ b/packages/@react-aria/numberfield/src/useNumberField.ts @@ -11,9 +11,8 @@ */ import {AriaButtonProps} from '@react-types/button'; -import {AriaNumberFieldProps} from '@react-types/numberfield'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, TextInputDOMEvents, TextInputDOMProps, ValidationResult} from '@react-types/shared'; import {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils'; -import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared'; import { InputHTMLAttributes, LabelHTMLAttributes, @@ -24,7 +23,7 @@ import { } from 'react'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {NumberFieldState} from '@react-stately/numberfield'; +import {NumberFieldProps, NumberFieldState} from '@react-stately/numberfield'; import {privateValidationStateProp} from '@react-stately/form'; import {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions'; import {useFormattedTextField} from '@react-aria/textfield'; @@ -34,6 +33,17 @@ import { } from '@react-aria/i18n'; import {useSpinButton} from '@react-aria/spinbutton'; +export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents { + /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */ + decrementAriaLabel?: string, + /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */ + incrementAriaLabel?: string, + /** + * Enables or disables changing the value with scroll. + */ + isWheelDisabled?: boolean +} + export interface NumberFieldAria extends ValidationResult { /** Props for the label element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/numberfield/test/useNumberField.test.ts b/packages/@react-aria/numberfield/test/useNumberField.test.ts index e594001c5b6..39d97c8539a 100644 --- a/packages/@react-aria/numberfield/test/useNumberField.test.ts +++ b/packages/@react-aria/numberfield/test/useNumberField.test.ts @@ -1,8 +1,7 @@ -import {AriaNumberFieldProps} from '@react-types/numberfield'; +import {AriaNumberFieldProps, useNumberField} from '../'; import React from 'react'; import {renderHook} from '@react-spectrum/test-utils-internal'; import {useLocale} from '@react-aria/i18n'; -import {useNumberField} from '../'; import {useNumberFieldState} from '@react-stately/numberfield'; describe('useNumberField hook', () => { diff --git a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx index bbf9e9b338c..c5e75b368e2 100644 --- a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx +++ b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx @@ -18,9 +18,8 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {mergeProps} from '@react-aria/utils'; import {Meta, StoryObj} from '@storybook/react'; -import {NumberField} from '../src'; +import {NumberField, SpectrumNumberFieldProps} from '../src'; import React, {JSX} from 'react'; -import {SpectrumNumberFieldProps} from '@react-types/numberfield'; import stepperStyles from '@adobe/spectrum-css-temp/components/stepper/vars.css'; let states = [ diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json index 0e7e385634e..bb68c568527 100644 --- a/packages/@react-spectrum/numberfield/package.json +++ b/packages/@react-spectrum/numberfield/package.json @@ -52,7 +52,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/numberfield": "^3.10.3", "@react-types/button": "^3.14.1", - "@react-types/numberfield": "^3.8.16", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@spectrum-icons/workflow": "^4.2.26", diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx index 44ace71b7c5..60f8353fb02 100644 --- a/packages/@react-spectrum/numberfield/src/NumberField.tsx +++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx @@ -11,23 +11,32 @@ */ import {AriaButtonProps} from '@react-types/button'; +import {AriaNumberFieldProps, useNumberField} from '@react-aria/numberfield'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {Field} from '@react-spectrum/label'; -import {FocusableRef, RefObject} from '@react-types/shared'; +import {FocusableRef, InputDOMProps, RefObject, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield'; import React, {HTMLAttributes, InputHTMLAttributes, Ref, useRef} from 'react'; -import {SpectrumNumberFieldProps} from '@react-types/numberfield'; import {StepButton} from './StepButton'; import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css'; import {TextFieldBase} from '@react-spectrum/textfield'; import {useFormProps} from '@react-spectrum/form'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; -import {useNumberField} from '@react-aria/numberfield'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumNumberFieldProps extends Omit, SpectrumFieldValidation, InputDOMProps, StyleProps, SpectrumLabelableProps { + /** Whether the numberfield should be displayed with a quiet style. */ + isQuiet?: boolean, + /** + * Whether to hide the increment and decrement buttons. + * @default false + */ + hideStepper?: boolean +} + /** * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons. */ diff --git a/packages/@react-spectrum/numberfield/src/index.ts b/packages/@react-spectrum/numberfield/src/index.ts index e93474e331f..c3cf188f0e3 100644 --- a/packages/@react-spectrum/numberfield/src/index.ts +++ b/packages/@react-spectrum/numberfield/src/index.ts @@ -13,4 +13,4 @@ /// export {NumberField} from './NumberField'; -export type {SpectrumNumberFieldProps} from '@react-types/numberfield'; +export type {SpectrumNumberFieldProps} from './NumberField'; diff --git a/packages/@react-stately/numberfield/package.json b/packages/@react-stately/numberfield/package.json index 3785e58811b..46bc54be128 100644 --- a/packages/@react-stately/numberfield/package.json +++ b/packages/@react-stately/numberfield/package.json @@ -29,7 +29,7 @@ "@internationalized/number": "^3.6.5", "@react-stately/form": "^3.2.2", "@react-stately/utils": "^3.11.0", - "@react-types/numberfield": "^3.8.16", + "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/numberfield/src/index.ts b/packages/@react-stately/numberfield/src/index.ts index 8eb92b68f7f..7f7e9191e19 100644 --- a/packages/@react-stately/numberfield/src/index.ts +++ b/packages/@react-stately/numberfield/src/index.ts @@ -13,4 +13,4 @@ export {useNumberFieldState} from './useNumberFieldState'; export type {NumberFieldStateOptions} from './useNumberFieldState'; -export type {NumberFieldState} from './useNumberFieldState'; +export type {NumberFieldProps, NumberFieldState} from './useNumberFieldState'; diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts index 9902a739c6a..4ff1c9b48e9 100644 --- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts +++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts @@ -11,11 +11,19 @@ */ import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, RangeInputBase, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; -import {NumberFieldProps} from '@react-types/numberfield'; import {NumberFormatter, NumberParser} from '@internationalized/number'; import {useCallback, useMemo, useState} from 'react'; +export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase, RangeInputBase, LabelableProps, HelpTextProps { + /** + * Formatting options for the value displayed in the number field. + * This also affects what characters are allowed to be typed by the user. + */ + formatOptions?: Intl.NumberFormatOptions +} + export interface NumberFieldState extends FormValidationState { /** * The current text value of the input. Updated as the user types, diff --git a/packages/@react-types/numberfield/package.json b/packages/@react-types/numberfield/package.json index d45dcea4b01..0d0319d2621 100644 --- a/packages/@react-types/numberfield/package.json +++ b/packages/@react-types/numberfield/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/numberfield": "^3.12.3", + "@react-spectrum/numberfield": "^3.10.3", + "@react-stately/numberfield": "^3.10.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/numberfield/src/index.d.ts b/packages/@react-types/numberfield/src/index.d.ts index ab27493aa60..70cf7a50861 100644 --- a/packages/@react-types/numberfield/src/index.d.ts +++ b/packages/@react-types/numberfield/src/index.d.ts @@ -10,45 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - DOMProps, - FocusableProps, - HelpTextProps, - InputBase, InputDOMProps, LabelableProps, - RangeInputBase, SpectrumFieldValidation, SpectrumLabelableProps, - StyleProps, - TextInputBase, - TextInputDOMEvents, - Validation, - ValueBase -} from '@react-types/shared'; - -export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase, RangeInputBase, LabelableProps, HelpTextProps { - /** - * Formatting options for the value displayed in the number field. - * This also affects what characters are allowed to be typed by the user. - */ - formatOptions?: Intl.NumberFormatOptions -} - -export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents { - /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */ - decrementAriaLabel?: string, - /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */ - incrementAriaLabel?: string, - /** - * Enables or disables changing the value with scroll. - */ - isWheelDisabled?: boolean -} - -export interface SpectrumNumberFieldProps extends Omit, SpectrumFieldValidation, InputDOMProps, StyleProps, SpectrumLabelableProps { - /** Whether the numberfield should be displayed with a quiet style. */ - isQuiet?: boolean, - /** - * Whether to hide the increment and decrement buttons. - * @default false - */ - hideStepper?: boolean -} +export {NumberFieldProps} from '@react-stately/numberfield'; +export {AriaNumberFieldProps} from '@react-aria/numberfield'; +export {SpectrumNumberFieldProps} from '@react-spectrum/numberfield'; From c40f4c7da4c88ac52ccfad5c61c3aa71a52abab2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 12:02:38 -0500 Subject: [PATCH 31/56] Radio --- packages/@react-aria/radio/package.json | 1 - packages/@react-aria/radio/src/index.ts | 5 +- packages/@react-aria/radio/src/useRadio.ts | 24 ++++++- .../@react-aria/radio/src/useRadioGroup.ts | 7 ++- packages/@react-spectrum/radio/package.json | 1 - packages/@react-spectrum/radio/src/Radio.tsx | 7 ++- .../@react-spectrum/radio/src/RadioGroup.tsx | 19 ++++-- packages/@react-spectrum/radio/src/index.ts | 4 +- packages/@react-stately/radio/package.json | 1 - packages/@react-stately/radio/src/index.ts | 3 +- .../radio/src/useRadioGroupState.ts | 11 +++- packages/@react-types/radio/package.json | 4 +- packages/@react-types/radio/src/index.d.ts | 63 +------------------ 13 files changed, 64 insertions(+), 86 deletions(-) diff --git a/packages/@react-aria/radio/package.json b/packages/@react-aria/radio/package.json index 5fab4cdd7ee..79efe632c5e 100644 --- a/packages/@react-aria/radio/package.json +++ b/packages/@react-aria/radio/package.json @@ -33,7 +33,6 @@ "@react-aria/label": "^3.7.23", "@react-aria/utils": "^3.32.0", "@react-stately/radio": "^3.11.3", - "@react-types/radio": "^3.9.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/radio/src/index.ts b/packages/@react-aria/radio/src/index.ts index 1b82ecdef0f..8834b54010f 100644 --- a/packages/@react-aria/radio/src/index.ts +++ b/packages/@react-aria/radio/src/index.ts @@ -11,7 +11,6 @@ */ export {useRadio} from './useRadio'; export {useRadioGroup} from './useRadioGroup'; -export type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio'; export type {Orientation} from '@react-types/shared'; -export type {RadioAria} from './useRadio'; -export type {RadioGroupAria} from './useRadioGroup'; +export type {RadioProps, AriaRadioProps, RadioAria} from './useRadio'; +export type {AriaRadioGroupProps, RadioGroupAria} from './useRadioGroup'; diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts index 59a7287a1ef..20e39fdeade 100644 --- a/packages/@react-aria/radio/src/useRadio.ts +++ b/packages/@react-aria/radio/src/useRadio.ts @@ -10,15 +10,33 @@ * governing permissions and limitations under the License. */ -import {AriaRadioProps} from '@react-types/radio'; +import {AriaLabelingProps, DOMProps, FocusableProps, PressEvents, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils'; -import {InputHTMLAttributes, LabelHTMLAttributes, useMemo} from 'react'; +import {InputHTMLAttributes, LabelHTMLAttributes, ReactNode, useMemo} from 'react'; import {radioGroupData} from './utils'; import {RadioGroupState} from '@react-stately/radio'; -import {RefObject} from '@react-types/shared'; import {useFocusable, usePress} from '@react-aria/interactions'; import {useFormValidation} from '@react-aria/form'; +export interface RadioProps extends FocusableProps { + /** + * The value of the radio button, used when submitting an HTML form. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value). + */ + value: string, + /** + * The label for the Radio. Accepts any renderable node. + */ + children?: ReactNode, + /** + * Whether the radio button is disabled or not. + * Shows that a selection exists, but is not available in that circumstance. + */ + isDisabled?: boolean +} + +export interface AriaRadioProps extends RadioProps, DOMProps, AriaLabelingProps, PressEvents {} + export interface RadioAria { /** Props for the label wrapper element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-aria/radio/src/useRadioGroup.ts b/packages/@react-aria/radio/src/useRadioGroup.ts index df09b13fe1d..39f62070639 100644 --- a/packages/@react-aria/radio/src/useRadioGroup.ts +++ b/packages/@react-aria/radio/src/useRadioGroup.ts @@ -10,16 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaRadioGroupProps} from '@react-types/radio'; -import {DOMAttributes, ValidationResult} from '@react-types/shared'; +import {AriaLabelingProps, AriaValidationProps, DOMAttributes, DOMProps, InputDOMProps, ValidationResult} from '@react-types/shared'; import {filterDOMProps, getOwnerWindow, mergeProps, useId} from '@react-aria/utils'; import {getFocusableTreeWalker} from '@react-aria/focus'; import {radioGroupData} from './utils'; -import {RadioGroupState} from '@react-stately/radio'; +import {RadioGroupProps, RadioGroupState} from '@react-stately/radio'; import {useField} from '@react-aria/label'; import {useFocusWithin} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; +export interface AriaRadioGroupProps extends RadioGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps {} + export interface RadioGroupAria extends ValidationResult { /** Props for the radio group wrapper element. */ radioGroupProps: DOMAttributes, diff --git a/packages/@react-spectrum/radio/package.json b/packages/@react-spectrum/radio/package.json index 3041671bcbb..78ce63e3194 100644 --- a/packages/@react-spectrum/radio/package.json +++ b/packages/@react-spectrum/radio/package.json @@ -47,7 +47,6 @@ "@react-spectrum/label": "^3.16.20", "@react-spectrum/utils": "^3.12.10", "@react-stately/radio": "^3.11.3", - "@react-types/radio": "^3.9.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/radio/src/Radio.tsx b/packages/@react-spectrum/radio/src/Radio.tsx index a0d586fb4cd..3dd7e3a8906 100644 --- a/packages/@react-spectrum/radio/src/Radio.tsx +++ b/packages/@react-spectrum/radio/src/Radio.tsx @@ -10,16 +10,17 @@ * governing permissions and limitations under the License. */ +import {AriaRadioProps, useRadio} from '@react-aria/radio'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import React, {forwardRef, useRef} from 'react'; -import {SpectrumRadioProps} from '@react-types/radio'; import styles from '@adobe/spectrum-css-temp/components/radio/vars.css'; import {useHover} from '@react-aria/interactions'; -import {useRadio} from '@react-aria/radio'; import {useRadioProvider} from './context'; +export interface SpectrumRadioProps extends Omit, StyleProps {} + /** * 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. diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx index 33c0fcfda37..4c968859de5 100644 --- a/packages/@react-spectrum/radio/src/RadioGroup.tsx +++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx @@ -10,18 +10,29 @@ * governing permissions and limitations under the License. */ +import {AriaRadioGroupProps, RadioProps, useRadioGroup} from '@react-aria/radio'; import {classNames, useDOMRef} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {RadioContext} from './context'; -import React from 'react'; -import {SpectrumRadioGroupProps} from '@react-types/radio'; +import React, {ReactElement} from 'react'; import styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -import {useRadioGroup} from '@react-aria/radio'; import {useRadioGroupState} from '@react-stately/radio'; +export interface SpectrumRadioGroupProps extends AriaRadioGroupProps, SpectrumLabelableProps, StyleProps, SpectrumHelpTextProps { + /** + * The Radio(s) contained within the RadioGroup. + */ + children: ReactElement | ReactElement[], + /** + * By default, radio buttons are not emphasized (gray). + * The emphasized (blue) version provides visual prominence. + */ + isEmphasized?: boolean +} + /** * 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. diff --git a/packages/@react-spectrum/radio/src/index.ts b/packages/@react-spectrum/radio/src/index.ts index 338417acef6..0bff14b3e8f 100644 --- a/packages/@react-spectrum/radio/src/index.ts +++ b/packages/@react-spectrum/radio/src/index.ts @@ -14,5 +14,5 @@ export {Radio} from './Radio'; export {RadioGroup} from './RadioGroup'; -export type {SpectrumRadioProps} from '@react-types/radio'; -export type {SpectrumRadioGroupProps} from '@react-types/radio'; +export type {SpectrumRadioProps} from './Radio'; +export type {SpectrumRadioGroupProps} from './RadioGroup'; diff --git a/packages/@react-stately/radio/package.json b/packages/@react-stately/radio/package.json index a829d400c7d..4cf66f91a38 100644 --- a/packages/@react-stately/radio/package.json +++ b/packages/@react-stately/radio/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/form": "^3.2.2", "@react-stately/utils": "^3.11.0", - "@react-types/radio": "^3.9.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/radio/src/index.ts b/packages/@react-stately/radio/src/index.ts index 01ef2f31152..6bdeb190c72 100644 --- a/packages/@react-stately/radio/src/index.ts +++ b/packages/@react-stately/radio/src/index.ts @@ -12,5 +12,4 @@ export {useRadioGroupState} from './useRadioGroupState'; -export type {RadioGroupProps} from '@react-types/radio'; -export type {RadioGroupState} from './useRadioGroupState'; +export type {RadioGroupProps, RadioGroupState} from './useRadioGroupState'; diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts index 003e9f5e5d9..ade8dfe6d5f 100644 --- a/packages/@react-stately/radio/src/useRadioGroupState.ts +++ b/packages/@react-stately/radio/src/useRadioGroupState.ts @@ -10,11 +10,18 @@ * governing permissions and limitations under the License. */ +import {FocusEvents, HelpTextProps, InputBase, InputDOMProps, LabelableProps, Orientation, Validation, ValidationState, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; -import {RadioGroupProps} from '@react-types/radio'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; -import {ValidationState} from '@react-types/shared'; + +export interface RadioGroupProps extends ValueBase, InputBase, Pick, Validation, LabelableProps, HelpTextProps, FocusEvents { + /** + * The axis the Radio Button(s) should align with. + * @default 'vertical' + */ + orientation?: Orientation +} export interface RadioGroupState extends FormValidationState { /** diff --git a/packages/@react-types/radio/package.json b/packages/@react-types/radio/package.json index ebc04cbf731..babf8f64d55 100644 --- a/packages/@react-types/radio/package.json +++ b/packages/@react-types/radio/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/radio": "^3.12.3", + "@react-spectrum/radio": "^3.7.22", + "@react-stately/radio": "^3.11.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/radio/src/index.d.ts b/packages/@react-types/radio/src/index.d.ts index 383832e8e73..772a39512f8 100644 --- a/packages/@react-types/radio/src/index.d.ts +++ b/packages/@react-types/radio/src/index.d.ts @@ -10,63 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - AriaValidationProps, - DOMProps, - FocusableProps, - FocusEvents, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - Orientation, - PressEvents, - SpectrumHelpTextProps, - SpectrumLabelableProps, - StyleProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {ReactElement, ReactNode} from 'react'; - -export interface RadioGroupProps extends ValueBase, InputBase, Pick, Validation, LabelableProps, HelpTextProps, FocusEvents { - /** - * The axis the Radio Button(s) should align with. - * @default 'vertical' - */ - orientation?: Orientation -} - -export interface RadioProps extends FocusableProps { - /** - * The value of the radio button, used when submitting an HTML form. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value). - */ - value: string, - /** - * The label for the Radio. Accepts any renderable node. - */ - children?: ReactNode, - /** - * Whether the radio button is disabled or not. - * Shows that a selection exists, but is not available in that circumstance. - */ - isDisabled?: boolean -} - -export interface AriaRadioGroupProps extends RadioGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps {} -export interface SpectrumRadioGroupProps extends AriaRadioGroupProps, SpectrumLabelableProps, StyleProps, SpectrumHelpTextProps { - /** - * The Radio(s) contained within the RadioGroup. - */ - children: ReactElement | ReactElement[], - /** - * By default, radio buttons are not emphasized (gray). - * The emphasized (blue) version provides visual prominence. - */ - isEmphasized?: boolean -} - -export interface AriaRadioProps extends RadioProps, DOMProps, AriaLabelingProps, PressEvents {} -export interface SpectrumRadioProps extends Omit, StyleProps {} +export {RadioGroupProps} from '@react-stately/radio'; +export {RadioProps, AriaRadioGroupProps, AriaRadioProps} from '@react-aria/radio'; +export {SpectrumRadioGroupProps, SpectrumRadioProps} from '@react-spectrum/radio'; From b620021fb034eff1c5d948d683300810cd876320 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 12:09:28 -0500 Subject: [PATCH 32/56] Select --- packages/@react-aria/select/package.json | 1 - .../@react-aria/select/src/HiddenSelect.tsx | 3 +- packages/@react-aria/select/src/index.ts | 3 +- packages/@react-aria/select/src/useSelect.ts | 22 ++++- .../chromatic/Picker.Languages.stories.tsx | 3 +- .../picker/chromatic/Picker.stories.tsx | 3 +- packages/@react-spectrum/picker/package.json | 1 - .../@react-spectrum/picker/src/Picker.tsx | 28 +++++- packages/@react-spectrum/picker/src/index.ts | 2 +- packages/@react-spectrum/tabs/package.json | 1 - packages/@react-spectrum/tabs/src/Tabs.tsx | 3 +- packages/@react-stately/select/package.json | 1 - packages/@react-stately/select/src/index.ts | 3 +- .../select/src/useSelectState.ts | 39 +++++++- packages/@react-types/select/package.json | 4 +- packages/@react-types/select/src/index.d.ts | 99 +------------------ 16 files changed, 94 insertions(+), 122 deletions(-) diff --git a/packages/@react-aria/select/package.json b/packages/@react-aria/select/package.json index d6c7a08914d..a068c69a657 100644 --- a/packages/@react-aria/select/package.json +++ b/packages/@react-aria/select/package.json @@ -37,7 +37,6 @@ "@react-aria/visually-hidden": "^3.8.29", "@react-stately/select": "^3.9.0", "@react-types/button": "^3.14.1", - "@react-types/select": "^3.12.0", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx index 61e9455b571..cf95ce87936 100644 --- a/packages/@react-aria/select/src/HiddenSelect.tsx +++ b/packages/@react-aria/select/src/HiddenSelect.tsx @@ -13,8 +13,7 @@ import {FocusableElement, Key, RefObject} from '@react-types/shared'; import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react'; import {selectData} from './useSelect'; -import {SelectionMode} from '@react-types/select'; -import {SelectState} from '@react-stately/select'; +import {SelectionMode, SelectState} from '@react-stately/select'; import {useFormReset} from '@react-aria/utils'; import {useFormValidation} from '@react-aria/form'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/select/src/index.ts b/packages/@react-aria/select/src/index.ts index 3b130c526af..84e538251d3 100644 --- a/packages/@react-aria/select/src/index.ts +++ b/packages/@react-aria/select/src/index.ts @@ -11,6 +11,5 @@ */ export {useSelect} from './useSelect'; export {useHiddenSelect, HiddenSelect} from './HiddenSelect'; -export type {AriaSelectOptions, SelectAria} from './useSelect'; +export type {AriaSelectProps, AriaSelectOptions, SelectAria} from './useSelect'; export type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect'; -export type {AriaSelectProps} from '@react-types/select'; diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts index daebc1d3910..196345f10ab 100644 --- a/packages/@react-aria/select/src/useSelect.ts +++ b/packages/@react-aria/select/src/useSelect.ts @@ -11,19 +11,35 @@ */ import {AriaButtonProps} from '@react-types/button'; +import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableDOMProps, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions} from '@react-aria/listbox'; -import {AriaSelectProps, SelectionMode} from '@react-types/select'; import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils'; -import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {FocusEvent, useMemo} from 'react'; import {HiddenSelectProps} from './HiddenSelect'; import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection'; -import {SelectState} from '@react-stately/select'; +import {SelectionMode, SelectProps, SelectState} from '@react-stately/select'; import {setInteractionModality} from '@react-aria/interactions'; import {useCollator} from '@react-aria/i18n'; import {useField} from '@react-aria/label'; import {useMenuTrigger} from '@react-aria/menu'; +export interface AriaSelectProps extends SelectProps, DOMProps, AriaLabelingProps, FocusableDOMProps { + /** + * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). + */ + autoComplete?: string, + /** + * The name of the input, used when submitting an HTML form. + */ + name?: string, + /** + * The `` element to associate the input with. + * The value of this attribute must be the id of a `` in the same document. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). + */ + form?: string +} + export interface AriaSelectOptions extends Omit, 'children'> { /** * An optional keyboard delegate implementation for type to select, diff --git a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx index c15de9c692f..9bc23ac0738 100644 --- a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx +++ b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {Item, Picker, Section} from '..'; +import {Item, Picker, Section, SpectrumPickerProps} from '..'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; export default { title: 'Languages/Picker', diff --git a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx index ad3d9e3cdfb..06544f98ad7 100644 --- a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx +++ b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx @@ -19,11 +19,10 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp'; import Copy from '@spectrum-icons/workflow/Copy'; import Cut from '@spectrum-icons/workflow/Cut'; import {Heading, Text} from '@react-spectrum/text'; -import {Item, Picker, Section} from '../'; +import {Item, Picker, Section, SpectrumPickerProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import Paste from '@spectrum-icons/workflow/Paste'; import React, {JSX} from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; const meta: Meta> = { title: 'Picker', diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json index 4b79eee16af..65842e56ab2 100644 --- a/packages/@react-spectrum/picker/package.json +++ b/packages/@react-spectrum/picker/package.json @@ -54,7 +54,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", "@react-stately/select": "^3.9.0", - "@react-types/select": "^3.12.0", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx index 8844db3872c..651229d5f00 100644 --- a/packages/@react-spectrum/picker/src/Picker.tsx +++ b/packages/@react-spectrum/picker/src/Picker.tsx @@ -11,6 +11,8 @@ */ import AlertMedium from '@spectrum-icons/ui/AlertMedium'; +import {Alignment, AsyncLoadable, DimensionValue, DOMRef, DOMRefValue, FocusableRefValue, LabelPosition, SingleSelection, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; +import {AriaSelectProps, HiddenSelect, useSelect} from '@react-aria/select'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; import { classNames, @@ -21,10 +23,8 @@ import { useSlotProps, useUnwrapDOMRef } from '@react-spectrum/utils'; -import {DOMRef, DOMRefValue, FocusableRefValue, LabelPosition} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; -import {HiddenSelect, useSelect} from '@react-aria/select'; // @ts-ignore import intlMessages from '../intl/*.json'; import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox'; @@ -33,7 +33,6 @@ import {Popover, Tray} from '@react-spectrum/overlays'; import {PressResponder, useHover} from '@react-aria/interactions'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ReactElement, useCallback, useRef, useState} from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css'; import {Text} from '@react-spectrum/text'; import {useFormProps} from '@react-spectrum/form'; @@ -41,6 +40,29 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; import {useSelectState} from '@react-stately/select'; +export interface SpectrumPickerProps extends Omit, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit, AsyncLoadable, SpectrumLabelableProps, StyleProps { + /** Whether the textfield should be displayed with a quiet style. */ + isQuiet?: boolean, + /** Alignment of the menu relative to the input target. + * @default 'start' + */ + align?: Alignment, + /** + * Direction the menu will render relative to the Picker. + * @default 'bottom' + */ + direction?: 'bottom' | 'top', + /** + * Whether the menu should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ + menuWidth?: DimensionValue, + /** Whether the element should receive focus on render. */ + autoFocus?: boolean +} + /** * Pickers allow users to choose a single option from a collapsible list of options when space is limited. */ diff --git a/packages/@react-spectrum/picker/src/index.ts b/packages/@react-spectrum/picker/src/index.ts index 428ace31e20..9af5f043703 100644 --- a/packages/@react-spectrum/picker/src/index.ts +++ b/packages/@react-spectrum/picker/src/index.ts @@ -14,4 +14,4 @@ export {Picker} from './Picker'; export {Item, Section} from '@react-stately/collections'; -export type {SpectrumPickerProps} from '@react-types/select'; +export type {SpectrumPickerProps} from './Picker'; diff --git a/packages/@react-spectrum/tabs/package.json b/packages/@react-spectrum/tabs/package.json index f71651caee0..c8647d8d0de 100644 --- a/packages/@react-spectrum/tabs/package.json +++ b/packages/@react-spectrum/tabs/package.json @@ -51,7 +51,6 @@ "@react-stately/collections": "^3.12.8", "@react-stately/list": "^3.13.2", "@react-stately/tabs": "^3.8.7", - "@react-types/select": "^3.12.0", "@react-types/shared": "^3.32.1", "@react-types/tabs": "^3.3.20", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx index 4090507353d..5e994bf9f20 100644 --- a/packages/@react-spectrum/tabs/src/Tabs.tsx +++ b/packages/@react-spectrum/tabs/src/Tabs.tsx @@ -15,7 +15,7 @@ import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from ' import {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared'; import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {FocusRing} from '@react-aria/focus'; -import {Item, Picker} from '@react-spectrum/picker'; +import {Item, Picker, SpectrumPickerProps} from '@react-spectrum/picker'; import {ListCollection} from '@react-stately/list'; import React, { CSSProperties, @@ -28,7 +28,6 @@ import React, { useRef, useState } from 'react'; -import {SpectrumPickerProps} from '@react-types/select'; import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css'; import {TabListState, useTabListState} from '@react-stately/tabs'; import {Text} from '@react-spectrum/text'; diff --git a/packages/@react-stately/select/package.json b/packages/@react-stately/select/package.json index 5855b91012f..8de4bbe6e2b 100644 --- a/packages/@react-stately/select/package.json +++ b/packages/@react-stately/select/package.json @@ -30,7 +30,6 @@ "@react-stately/list": "^3.13.2", "@react-stately/overlays": "^3.6.21", "@react-stately/utils": "^3.11.0", - "@react-types/select": "^3.12.0", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/select/src/index.ts b/packages/@react-stately/select/src/index.ts index f48fd45e76e..1916a9d7c44 100644 --- a/packages/@react-stately/select/src/index.ts +++ b/packages/@react-stately/select/src/index.ts @@ -12,5 +12,4 @@ export {useSelectState} from './useSelectState'; -export type {SelectProps} from '@react-types/select'; -export type {SelectState, SelectStateOptions} from './useSelectState'; +export type {SelectProps, SelectState, SelectStateOptions, SelectionMode, ValueType, ChangeValueType} from './useSelectState'; diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts index 2bcf82787a9..a3269814540 100644 --- a/packages/@react-stately/select/src/useSelectState.ts +++ b/packages/@react-stately/select/src/useSelectState.ts @@ -10,14 +10,49 @@ * governing permissions and limitations under the License. */ -import {CollectionStateBase, FocusStrategy, Key, Node, Selection} from '@react-types/shared'; +import {CollectionBase, CollectionStateBase, FocusableProps, FocusStrategy, HelpTextProps, InputBase, Key, LabelableProps, Node, Selection, TextInputBase, Validation, ValueBase} from '@react-types/shared'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {ListState, useListState} from '@react-stately/list'; import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; -import {SelectionMode, SelectProps, ValueType} from '@react-types/select'; import {useControlledState} from '@react-stately/utils'; import {useMemo, useState} from 'react'; +export type SelectionMode = 'single' | 'multiple'; +export type ValueType = M extends 'single' ? Key | null : readonly Key[]; +export type ChangeValueType = M extends 'single' ? Key | null : Key[]; +type ValidationType = M extends 'single' ? Key : Key[]; + +export interface SelectProps extends CollectionBase, Omit, ValueBase, ChangeValueType>, Validation>, HelpTextProps, LabelableProps, TextInputBase, FocusableProps { + /** + * Whether single or multiple selection is enabled. + * @default 'single' + */ + selectionMode?: M, + /** + * The currently selected key in the collection (controlled). + * @deprecated + */ + selectedKey?: Key | null, + /** + * The initial selected key in the collection (uncontrolled). + * @deprecated + */ + defaultSelectedKey?: Key, + /** + * Handler that is called when the selection changes. + * @deprecated + */ + onSelectionChange?: (key: Key | null) => void, + /** Sets the open state of the menu. */ + isOpen?: boolean, + /** Sets the default open state of the menu. */ + defaultOpen?: boolean, + /** Method that is called when the open state of the menu changes. */ + onOpenChange?: (isOpen: boolean) => void, + /** Whether the select should be allowed to be open when the collection is empty. */ + allowsEmptyCollection?: boolean +} + export interface SelectStateOptions extends Omit, 'children'>, CollectionStateBase {} export interface SelectState extends ListState, OverlayTriggerState, FormValidationState { diff --git a/packages/@react-types/select/package.json b/packages/@react-types/select/package.json index 877e5a904a5..7070b71163e 100644 --- a/packages/@react-types/select/package.json +++ b/packages/@react-types/select/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/select": "^3.17.1", + "@react-spectrum/picker": "^3.16.5", + "@react-stately/select": "^3.9.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/select/src/index.d.ts b/packages/@react-types/select/src/index.d.ts index e30db1813cc..f87444fc5d9 100644 --- a/packages/@react-types/select/src/index.d.ts +++ b/packages/@react-types/select/src/index.d.ts @@ -10,99 +10,6 @@ * governing permissions and limitations under the License. */ -import { - Alignment, - AriaLabelingProps, - AsyncLoadable, - CollectionBase, - DimensionValue, - DOMProps, - FocusableDOMProps, - FocusableProps, - HelpTextProps, - InputBase, - Key, - LabelableProps, - SingleSelection, - SpectrumLabelableProps, - StyleProps, - TextInputBase, - Validation, - ValueBase -} from '@react-types/shared'; - -export type SelectionMode = 'single' | 'multiple'; -export type ValueType = M extends 'single' ? Key | null : readonly Key[]; -export type ChangeValueType = M extends 'single' ? Key | null : Key[]; -type ValidationType = M extends 'single' ? Key : Key[]; - -export interface SelectProps extends CollectionBase, Omit, ValueBase, ChangeValueType>, Validation>, HelpTextProps, LabelableProps, TextInputBase, FocusableProps { - /** - * Whether single or multiple selection is enabled. - * @default 'single' - */ - selectionMode?: M, - /** - * The currently selected key in the collection (controlled). - * @deprecated - */ - selectedKey?: Key | null, - /** - * The initial selected key in the collection (uncontrolled). - * @deprecated - */ - defaultSelectedKey?: Key, - /** - * Handler that is called when the selection changes. - * @deprecated - */ - onSelectionChange?: (key: Key | null) => void, - /** Sets the open state of the menu. */ - isOpen?: boolean, - /** Sets the default open state of the menu. */ - defaultOpen?: boolean, - /** Method that is called when the open state of the menu changes. */ - onOpenChange?: (isOpen: boolean) => void, - /** Whether the select should be allowed to be open when the collection is empty. */ - allowsEmptyCollection?: boolean -} - -export interface AriaSelectProps extends SelectProps, DOMProps, AriaLabelingProps, FocusableDOMProps { - /** - * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). - */ - autoComplete?: string, - /** - * The name of the input, used when submitting an HTML form. - */ - name?: string, - /** - * The `` element to associate the input with. - * The value of this attribute must be the id of a `` in the same document. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). - */ - form?: string -} - -export interface SpectrumPickerProps extends Omit, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit, AsyncLoadable, SpectrumLabelableProps, StyleProps { - /** Whether the textfield should be displayed with a quiet style. */ - isQuiet?: boolean, - /** Alignment of the menu relative to the input target. - * @default 'start' - */ - align?: Alignment, - /** - * Direction the menu will render relative to the Picker. - * @default 'bottom' - */ - direction?: 'bottom' | 'top', - /** - * Whether the menu should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */ - menuWidth?: DimensionValue, - /** Whether the element should receive focus on render. */ - autoFocus?: boolean -} +export {SelectionMode, ValueType, ChangeValueType, SelectProps} from '@react-stately/select'; +export {AriaSelectProps} from '@react-aria/select'; +export {SpectrumPickerProps} from '@react-spectrum/picker'; From 1575dc0d904fe441ff4eba6667bac9563473ffac Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 12:11:57 -0500 Subject: [PATCH 33/56] Remove unused sidenav package --- packages/@react-types/sidenav/README.md | 3 -- packages/@react-types/sidenav/package.json | 23 ------------- packages/@react-types/sidenav/src/index.d.ts | 35 -------------------- 3 files changed, 61 deletions(-) delete mode 100644 packages/@react-types/sidenav/README.md delete mode 100644 packages/@react-types/sidenav/package.json delete mode 100644 packages/@react-types/sidenav/src/index.d.ts diff --git a/packages/@react-types/sidenav/README.md b/packages/@react-types/sidenav/README.md deleted file mode 100644 index 588e78738a4..00000000000 --- a/packages/@react-types/sidenav/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @react-types/sidenav - -This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. \ No newline at end of file diff --git a/packages/@react-types/sidenav/package.json b/packages/@react-types/sidenav/package.json deleted file mode 100644 index 46e815247fe..00000000000 --- a/packages/@react-types/sidenav/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "@react-types/sidenav", - "version": "3.0.0-alpha.1", - "description": "Spectrum UI components in React", - "license": "Apache-2.0", - "private": true, - "types": "src/index.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/adobe/react-spectrum" - }, - "dependencies": { - "@react-stately/virtualizer": "^4.0.0", - "@react-types/shared": "^3.1.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", - "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/@react-types/sidenav/src/index.d.ts b/packages/@react-types/sidenav/src/index.d.ts deleted file mode 100644 index ae64a2bd9be..00000000000 --- a/packages/@react-types/sidenav/src/index.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {AriaLabelingProps, CollectionBase, DOMProps, Expandable, MultipleSelection, Node, StyleProps} from '@react-types/shared'; -import {HTMLAttributes, ReactNode} from 'react'; - -export interface SideNavProps extends CollectionBase, Expandable, MultipleSelection { - shouldFocusWrap?: boolean -} - -export interface AriaSideNavProps extends SideNavProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumSideNavProps extends AriaSideNavProps, StyleProps { -} - -export interface SpectrumSideNavItemProps extends HTMLAttributes{ - item: Node -} - -export interface SideNavSectionProps { - layoutInfo: any, - headerLayoutInfo: any, - virtualizer: any, - item: Node, - children?: ReactNode -} From bcd957cb4ac980acda6ae100a3fe09ee3dc57a48 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 12:12:03 -0500 Subject: [PATCH 34/56] StatusLight --- .../chromatic/StatusLight.stories.tsx | 3 +-- .../statuslight/src/StatusLight.tsx | 24 ++++++++++++++++--- .../@react-spectrum/statuslight/src/index.ts | 2 +- .../table/stories/Performance.tsx | 2 +- .../@react-types/statuslight/package.json | 2 +- .../@react-types/statuslight/src/index.d.ts | 21 +--------------- 6 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx index 83d53ed26d2..c131eb35a09 100644 --- a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx +++ b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx @@ -13,8 +13,7 @@ import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumStatusLightProps} from '@react-types/statuslight'; -import {StatusLight} from '../'; +import {StatusLight, SpectrumStatusLightProps} from '../'; import {View} from '@react-spectrum/view'; let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse', 'magenta', 'purple', 'neutral', 'info', 'positive', 'notice', 'negative', 'positive'] as SpectrumStatusLightProps['variant'][]; diff --git a/packages/@react-spectrum/statuslight/src/StatusLight.tsx b/packages/@react-spectrum/statuslight/src/StatusLight.tsx index fd66f8ac948..de2c372c607 100644 --- a/packages/@react-spectrum/statuslight/src/StatusLight.tsx +++ b/packages/@react-spectrum/statuslight/src/StatusLight.tsx @@ -10,14 +10,32 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {SpectrumStatusLightProps} from '@react-types/statuslight'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/statuslight/vars.css'; import {useProviderProps} from '@react-spectrum/provider'; + +export interface SpectrumStatusLightProps extends DOMProps, StyleProps, AriaLabelingProps { + /** The content to display as the label. */ + children?: ReactNode, + /** + * The variant changes the color of the status light. + * When status lights have a semantic meaning, they should use the variant for semantic colors. + */ + variant: 'positive' | 'negative' | 'notice' | 'info' | 'neutral' | 'celery' | 'chartreuse' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'indigo' | 'seafoam', + /** Whether the status light is disabled. */ + isDisabled?: boolean, + /** + * An accessibility role for the status light. Should be set when the status + * can change at runtime, and no more than one status light will update simultaneously. + * For cases where multiple statuses can change at the same time, use a Toast instead. + */ + role?: 'status' +} + /** * Status lights are used to color code categories and labels commonly found in data visualization. * When status lights have a semantic meaning, they should use semantic variant colors. diff --git a/packages/@react-spectrum/statuslight/src/index.ts b/packages/@react-spectrum/statuslight/src/index.ts index 15ddacd3f2a..3eda01164da 100644 --- a/packages/@react-spectrum/statuslight/src/index.ts +++ b/packages/@react-spectrum/statuslight/src/index.ts @@ -13,4 +13,4 @@ /// export {StatusLight} from './StatusLight'; -export type {SpectrumStatusLightProps} from '@react-types/statuslight'; +export type {SpectrumStatusLightProps} from './StatusLight'; diff --git a/packages/@react-spectrum/table/stories/Performance.tsx b/packages/@react-spectrum/table/stories/Performance.tsx index 2331ced338c..68dda45be7a 100644 --- a/packages/@react-spectrum/table/stories/Performance.tsx +++ b/packages/@react-spectrum/table/stories/Performance.tsx @@ -7,7 +7,7 @@ import {Item, TagGroup} from '@react-spectrum/tag'; import {Link} from '@react-spectrum/link'; import {ProgressBar} from '@react-spectrum/progress'; import React, {JSX} from 'react'; -import {SpectrumStatusLightProps} from '@react-types/statuslight'; +import {SpectrumStatusLightProps} from '@react-spectrum/statuslight'; import {Text} from '@react-spectrum/text'; export const DATA_SIZE = 10000; diff --git a/packages/@react-types/statuslight/package.json b/packages/@react-types/statuslight/package.json index 6efb1460a17..b3c9ab034bc 100644 --- a/packages/@react-types/statuslight/package.json +++ b/packages/@react-types/statuslight/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/statuslight": "^3.5.27" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/statuslight/src/index.d.ts b/packages/@react-types/statuslight/src/index.d.ts index 8bc41dbeba5..4846951c029 100644 --- a/packages/@react-types/statuslight/src/index.d.ts +++ b/packages/@react-types/statuslight/src/index.d.ts @@ -10,23 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumStatusLightProps extends DOMProps, StyleProps, AriaLabelingProps { - /** The content to display as the label. */ - children?: ReactNode, - /** - * The variant changes the color of the status light. - * When status lights have a semantic meaning, they should use the variant for semantic colors. - */ - variant: 'positive' | 'negative' | 'notice' | 'info' | 'neutral' | 'celery' | 'chartreuse' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'indigo' | 'seafoam', - /** Whether the status light is disabled. */ - isDisabled?: boolean, - /** - * An accessibility role for the status light. Should be set when the status - * can change at runtime, and no more than one status light will update simultaneously. - * For cases where multiple statuses can change at the same time, use a Toast instead. - */ - role?: 'status' -} +export {SpectrumStatusLightProps} from '@react-spectrum/statuslight'; From b8ee7d694db0d5bb321a5e9ea22cb4a413279216 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 12:15:57 -0500 Subject: [PATCH 35/56] Switch --- packages/@react-aria/switch/package.json | 1 - packages/@react-aria/switch/src/index.ts | 3 +- packages/@react-aria/switch/src/useSwitch.ts | 35 +++++++++++++-- packages/@react-spectrum/switch/package.json | 1 - .../@react-spectrum/switch/src/Switch.tsx | 12 ++++-- packages/@react-spectrum/switch/src/index.ts | 2 +- packages/@react-types/switch/package.json | 3 +- packages/@react-types/switch/src/index.d.ts | 43 +++---------------- 8 files changed, 50 insertions(+), 50 deletions(-) diff --git a/packages/@react-aria/switch/package.json b/packages/@react-aria/switch/package.json index 10941ffba7a..9be217d66e6 100644 --- a/packages/@react-aria/switch/package.json +++ b/packages/@react-aria/switch/package.json @@ -29,7 +29,6 @@ "@react-aria/toggle": "^3.12.3", "@react-stately/toggle": "^3.9.3", "@react-types/shared": "^3.32.1", - "@react-types/switch": "^3.5.15", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/switch/src/index.ts b/packages/@react-aria/switch/src/index.ts index 9b83896dfc5..233be05dea2 100644 --- a/packages/@react-aria/switch/src/index.ts +++ b/packages/@react-aria/switch/src/index.ts @@ -11,5 +11,4 @@ */ export {useSwitch} from './useSwitch'; -export type {AriaSwitchProps} from '@react-types/switch'; -export type {SwitchAria} from './useSwitch'; +export type {SwitchProps, AriaSwitchProps, SwitchAria} from './useSwitch'; diff --git a/packages/@react-aria/switch/src/useSwitch.ts b/packages/@react-aria/switch/src/useSwitch.ts index dd37604088c..6b23449f2a8 100644 --- a/packages/@react-aria/switch/src/useSwitch.ts +++ b/packages/@react-aria/switch/src/useSwitch.ts @@ -10,12 +10,41 @@ * governing permissions and limitations under the License. */ -import {AriaSwitchProps} from '@react-types/switch'; -import {InputHTMLAttributes, LabelHTMLAttributes} from 'react'; -import {RefObject} from '@react-types/shared'; +import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, InputDOMProps, RefObject} from '@react-types/shared'; +import {InputHTMLAttributes, LabelHTMLAttributes, ReactNode} from 'react'; import {ToggleState} from '@react-stately/toggle'; import {useToggle} from '@react-aria/toggle'; +export interface SwitchProps extends InputBase, FocusableProps { + /** + * The content to render as the Switch's label. + */ + children?: ReactNode, + /** + * Whether the Switch should be selected (uncontrolled). + */ + defaultSelected?: boolean, + /** + * Whether the Switch should be selected (controlled). + */ + isSelected?: boolean, + /** + * Handler that is called when the Switch's selection state changes. + */ + onChange?: (isSelected: boolean) => void, + /** + * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). + */ + value?: string +} + +export interface AriaSwitchProps extends SwitchProps, FocusableDOMProps, InputDOMProps, AriaLabelingProps { + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + */ + 'aria-controls'?: string +} + export interface SwitchAria { /** Props for the label wrapper element. */ labelProps: LabelHTMLAttributes, diff --git a/packages/@react-spectrum/switch/package.json b/packages/@react-spectrum/switch/package.json index c82b353f36c..a6995654bcb 100644 --- a/packages/@react-spectrum/switch/package.json +++ b/packages/@react-spectrum/switch/package.json @@ -46,7 +46,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/toggle": "^3.9.3", "@react-types/shared": "^3.32.1", - "@react-types/switch": "^3.5.15", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/switch/src/Switch.tsx b/packages/@react-spectrum/switch/src/Switch.tsx index 949b2e0a50d..fd4f2c794b4 100644 --- a/packages/@react-spectrum/switch/src/Switch.tsx +++ b/packages/@react-spectrum/switch/src/Switch.tsx @@ -10,17 +10,23 @@ * governing permissions and limitations under the License. */ +import {AriaSwitchProps, useSwitch} from '@react-aria/switch'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, StyleProps} from '@react-types/shared'; import {FocusRing} from '@react-aria/focus'; import React, {forwardRef, useRef} from 'react'; -import {SpectrumSwitchProps} from '@react-types/switch'; import styles from '@adobe/spectrum-css-temp/components/toggle/vars.css'; import {useHover} from '@react-aria/interactions'; import {useProviderProps} from '@react-spectrum/provider'; -import {useSwitch} from '@react-aria/switch'; import {useToggleState} from '@react-stately/toggle'; +export interface SpectrumSwitchProps extends AriaSwitchProps, StyleProps { + /** + * This prop sets the emphasized style which provides visual prominence. + */ + isEmphasized?: boolean +} + /** * Switches allow users to turn an individual option on or off. * They are usually used to activate or deactivate a specific setting. diff --git a/packages/@react-spectrum/switch/src/index.ts b/packages/@react-spectrum/switch/src/index.ts index a0b0035a299..3d103b5d785 100644 --- a/packages/@react-spectrum/switch/src/index.ts +++ b/packages/@react-spectrum/switch/src/index.ts @@ -13,4 +13,4 @@ /// export {Switch} from './Switch'; -export type {SpectrumSwitchProps} from '@react-types/switch'; +export type {SpectrumSwitchProps} from './Switch'; diff --git a/packages/@react-types/switch/package.json b/packages/@react-types/switch/package.json index 77e30287369..8c90db852ed 100644 --- a/packages/@react-types/switch/package.json +++ b/packages/@react-types/switch/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/switch": "^3.7.9", + "@react-spectrum/switch": "^3.6.7" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/switch/src/index.d.ts b/packages/@react-types/switch/src/index.d.ts index fc44520e083..1223da3ac30 100644 --- a/packages/@react-types/switch/src/index.d.ts +++ b/packages/@react-types/switch/src/index.d.ts @@ -10,43 +10,10 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, InputDOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; +import {AriaSwitchProps} from '@react-aria/switch'; -interface SwitchBase extends InputBase, FocusableProps { - /** - * The content to render as the Switch's label. - */ - children?: ReactNode, - /** - * Whether the Switch should be selected (uncontrolled). - */ - defaultSelected?: boolean, - /** - * Whether the Switch should be selected (controlled). - */ - isSelected?: boolean, - /** - * Handler that is called when the Switch's selection state changes. - */ - onChange?: (isSelected: boolean) => void, - /** - * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). - */ - value?: string -} -export interface SwitchProps extends SwitchBase {} -export interface AriaSwitchBase extends SwitchBase, FocusableDOMProps, InputDOMProps, AriaLabelingProps { - /** - * Identifies the element (or elements) whose contents or presence are controlled by the current element. - */ - 'aria-controls'?: string -} -export interface AriaSwitchProps extends SwitchProps, AriaSwitchBase {} +export {SwitchProps, AriaSwitchProps} from '@react-aria/switch'; +export {SpectrumSwitchProps} from '@react-spectrum/switch'; -export interface SpectrumSwitchProps extends AriaSwitchProps, StyleProps { - /** - * This prop sets the emphasized style which provides visual prominence. - */ - isEmphasized?: boolean -} +// Backward compatibility. +export type AriaSwitchBase = AriaSwitchProps; From 8de65652cd71004e13ea8a741e134ad62af8c7c7 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 12:45:21 -0500 Subject: [PATCH 36/56] Table --- packages/@react-aria/table/package.json | 1 - .../table/src/TableKeyboardDelegate.ts | 4 +- .../table/src/useTableColumnResize.ts | 3 +- packages/@react-aria/table/src/useTableRow.ts | 5 +- .../stories/example-backwards-compat.tsx | 3 +- .../table/stories/example-docs.tsx | 3 +- .../table/stories/example-resizing.tsx | 3 +- .../@react-aria/table/stories/example.tsx | 3 +- .../table/stories/useTable.stories.tsx | 3 +- packages/@react-spectrum/s2/package.json | 1 - packages/@react-spectrum/s2/src/TableView.tsx | 2 +- packages/@react-spectrum/table/package.json | 1 - .../@react-spectrum/table/src/Resizer.tsx | 3 +- .../table/src/TableViewBase.tsx | 4 +- .../table/src/TableViewWrapper.tsx | 2 +- packages/@react-spectrum/table/src/index.ts | 5 +- packages/@react-spectrum/table/src/types.ts | 32 ++++ .../table/stories/ControllingResize.tsx | 2 +- .../table/test/TableSizing.test.tsx | 2 +- .../@react-stately/grid/src/useGridState.ts | 8 +- packages/@react-stately/layout/package.json | 1 - .../@react-stately/layout/src/TableLayout.ts | 3 +- packages/@react-stately/table/package.json | 1 - packages/@react-stately/table/src/Cell.ts | 16 +- packages/@react-stately/table/src/Column.ts | 41 ++++- packages/@react-stately/table/src/Row.ts | 21 ++- .../@react-stately/table/src/TableBody.ts | 12 +- .../table/src/TableCollection.ts | 17 ++- .../table/src/TableColumnLayout.ts | 2 +- .../@react-stately/table/src/TableHeader.ts | 9 +- .../@react-stately/table/src/TableUtils.ts | 2 +- packages/@react-stately/table/src/index.ts | 9 +- .../table/src/useTableColumnResizeState.ts | 3 +- .../@react-stately/table/src/useTableState.ts | 31 +++- packages/@react-types/table/package.json | 3 +- packages/@react-types/table/src/index.d.ts | 142 +----------------- packages/react-aria-components/package.json | 1 - packages/react-aria-components/src/Table.tsx | 3 +- packages/react-stately/src/index.ts | 2 +- 39 files changed, 207 insertions(+), 202 deletions(-) create mode 100644 packages/@react-spectrum/table/src/types.ts diff --git a/packages/@react-aria/table/package.json b/packages/@react-aria/table/package.json index abafefa4f11..39daeae3ec3 100644 --- a/packages/@react-aria/table/package.json +++ b/packages/@react-aria/table/package.json @@ -39,7 +39,6 @@ "@react-stately/table": "^3.15.2", "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", - "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/table/src/TableKeyboardDelegate.ts b/packages/@react-aria/table/src/TableKeyboardDelegate.ts index 79bda883bf0..ba0abc25b8e 100644 --- a/packages/@react-aria/table/src/TableKeyboardDelegate.ts +++ b/packages/@react-aria/table/src/TableKeyboardDelegate.ts @@ -12,10 +12,10 @@ import {getChildNodes, getFirstItem} from '@react-stately/collections'; import {GridKeyboardDelegate} from '@react-aria/grid'; +import {ITableCollection} from '@react-stately/table'; import {Key, Node} from '@react-types/shared'; -import {TableCollection} from '@react-types/table'; -export class TableKeyboardDelegate extends GridKeyboardDelegate> { +export class TableKeyboardDelegate extends GridKeyboardDelegate> { protected isCell(node: Node): boolean { return node.type === 'cell' || node.type === 'rowheader' || node.type === 'column'; diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts index 4caa6e1232a..d3029c2e1d4 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -11,7 +11,7 @@ */ import {ChangeEvent, useCallback, useEffect, useRef} from 'react'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize, TableColumnResizeState} from '@react-stately/table'; import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared'; import {focusSafely, useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions'; import {getColumnHeaderId} from './utils'; @@ -19,7 +19,6 @@ import {GridNode} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; import {mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils'; -import {TableColumnResizeState} from '@react-stately/table'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useVisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/src/useTableRow.ts b/packages/@react-aria/table/src/useTableRow.ts index ff71c80b398..e5eb7833f3c 100644 --- a/packages/@react-aria/table/src/useTableRow.ts +++ b/packages/@react-aria/table/src/useTableRow.ts @@ -16,10 +16,9 @@ import {getRowLabelledBy} from './utils'; import type {GridNode} from '@react-stately/grid'; import {GridRowAria, GridRowProps, useGridRow} from '@react-aria/grid'; import {HTMLAttributes} from 'react'; +import {ITableCollection, TableState, TreeGridState} from '@react-stately/table'; import {mergeProps, useSyntheticLinkProps} from '@react-aria/utils'; -import {TableCollection} from '@react-types/table'; import {tableNestedRows} from '@react-stately/flags'; -import {TableState, TreeGridState} from '@react-stately/table'; import {useLocale} from '@react-aria/i18n'; const EXPANSION_KEYS = { @@ -40,7 +39,7 @@ const EXPANSION_KEYS = { */ export function useTableRow(props: GridRowProps, state: TableState | TreeGridState, ref: RefObject): GridRowAria { let {node, isVirtualized} = props; - let {rowProps, ...states} = useGridRow, TableState>(props, state, ref); + let {rowProps, ...states} = useGridRow, TableState>(props, state, ref); let {direction} = useLocale(); if (isVirtualized && !(tableNestedRows() && 'expandedKeys' in state)) { diff --git a/packages/@react-aria/table/stories/example-backwards-compat.tsx b/packages/@react-aria/table/stories/example-backwards-compat.tsx index 83c949ee8ec..c45f0cde61b 100644 --- a/packages/@react-aria/table/stories/example-backwards-compat.tsx +++ b/packages/@react-aria/table/stories/example-backwards-compat.tsx @@ -13,7 +13,7 @@ import {mergeProps} from '@react-aria/utils'; import React, {JSX, ReactNode, useRef, useState} from 'react'; import {SelectionBehavior} from '@react-types/shared'; -import {TableProps} from '@react-types/table'; +import {TableProps, useTableState} from '@react-stately/table'; import {useCheckbox} from '@react-aria/checkbox'; import {useFocusRing} from '@react-aria/focus'; import { @@ -25,7 +25,6 @@ import { useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from '../src'; -import {useTableState} from '@react-stately/table'; import {useToggleState} from '@react-stately/toggle'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/stories/example-docs.tsx b/packages/@react-aria/table/stories/example-docs.tsx index 6d528bca5e4..c652cf83f24 100644 --- a/packages/@react-aria/table/stories/example-docs.tsx +++ b/packages/@react-aria/table/stories/example-docs.tsx @@ -14,11 +14,10 @@ import ariaStyles from './docs-example.css'; import {classNames} from '@react-spectrum/utils'; import {mergeProps} from '@react-aria/utils'; import React, {JSX, useCallback, useRef} from 'react'; -import {TableProps} from '@react-types/table'; +import {TableProps, useTableColumnResizeState, useTableState} from '@react-stately/table'; import {useButton} from 'react-aria'; import {useFocusRing} from '@react-aria/focus'; import {useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup} from '@react-aria/table'; -import {useTableColumnResizeState, useTableState} from '@react-stately/table'; export function Table(props: TableProps & { onResizeStart?: (columnKey: string) => void, diff --git a/packages/@react-aria/table/stories/example-resizing.tsx b/packages/@react-aria/table/stories/example-resizing.tsx index 36a0bdad38d..a294f338479 100644 --- a/packages/@react-aria/table/stories/example-resizing.tsx +++ b/packages/@react-aria/table/stories/example-resizing.tsx @@ -24,14 +24,13 @@ import { useTableSelectionCheckbox } from '@react-aria/table'; import {classNames} from '@react-spectrum/utils'; -import {ColumnSize, TableProps} from '@react-types/table'; +import {ColumnSize, TableProps, useTableColumnResizeState, useTableState} from '@react-stately/table'; import {FocusRing, useFocusRing} from '@react-aria/focus'; import {Key} from '@react-types/shared'; import {mergeProps, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import React, {JSX, ReactNode, useCallback, useMemo, useRef, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useCheckbox} from '@react-aria/checkbox'; -import {useTableColumnResizeState, useTableState} from '@react-stately/table'; import {useToggleState} from '@react-stately/toggle'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx index 35d43ac6e09..6065fb22d43 100644 --- a/packages/@react-aria/table/stories/example.tsx +++ b/packages/@react-aria/table/stories/example.tsx @@ -13,11 +13,10 @@ import {Key, SelectionBehavior} from '@react-types/shared'; import {mergeProps} from '@react-aria/utils'; import React, {JSX, ReactNode, useRef, useState} from 'react'; -import {TableProps} from '@react-types/table'; +import {TableProps, useTableState} from '@react-stately/table'; import {useCheckbox} from '@react-aria/checkbox'; import {useFocusRing} from '@react-aria/focus'; import {useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table'; -import {useTableState} from '@react-stately/table'; import {useToggleState} from '@react-stately/toggle'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/table/stories/useTable.stories.tsx b/packages/@react-aria/table/stories/useTable.stories.tsx index d01bad5f9f0..ee47d90906d 100644 --- a/packages/@react-aria/table/stories/useTable.stories.tsx +++ b/packages/@react-aria/table/stories/useTable.stories.tsx @@ -12,8 +12,7 @@ import {action} from '@storybook/addon-actions'; import {Table as BackwardCompatTable} from './example-backwards-compat'; -import {Cell, Column, Row, TableBody, TableHeader} from '@react-stately/table'; -import {ColumnSize} from '@react-types/table'; +import {Cell, Column, ColumnSize, Row, TableBody, TableHeader} from '@react-stately/table'; import {Table as DocsTable} from './example-docs'; import {Key} from '@react-types/shared'; import {Meta, StoryObj} from '@storybook/react'; diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 3fe1058ee1c..ce550f7eb3b 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -167,7 +167,6 @@ "@react-types/overlays": "^3.9.2", "@react-types/provider": "^3.8.13", "@react-types/shared": "^3.32.1", - "@react-types/table": "^3.13.4", "@react-types/textfield": "^3.12.6", "csstype": "^3.0.2", "react-aria": "^3.45.0", diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index e6213a67fcc..32be3fc2fdf 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -56,7 +56,7 @@ import {Checkbox} from './Checkbox'; import Checkmark from '../s2wf-icons/S2_Icon_Checkmark_20_N.svg'; import Chevron from '../ui-icons/Chevron'; import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from 'react-stately'; import {CustomDialog, DialogContainer} from '..'; import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared'; import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/table/package.json b/packages/@react-spectrum/table/package.json index 2d7cf0a50bb..2c5de391f83 100644 --- a/packages/@react-spectrum/table/package.json +++ b/packages/@react-spectrum/table/package.json @@ -63,7 +63,6 @@ "@react-stately/table": "^3.15.2", "@react-stately/virtualizer": "^4.4.4", "@react-types/shared": "^3.32.1", - "@react-types/table": "^3.13.4", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index 7aa92376ea7..7214894d9ef 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -1,6 +1,6 @@ import {classNames} from '@react-spectrum/utils'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize, TableColumnResizeState} from '@react-stately/table'; import eCursor from 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg'; import ewCursor from 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg'; import {FocusRing} from '@react-aria/focus'; @@ -12,7 +12,6 @@ import {Key, RefObject} from '@react-types/shared'; import React, {createContext, ForwardedRef, useContext, useEffect, useState} from 'react'; import ReactDOM from 'react-dom'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; -import {TableColumnResizeState} from '@react-stately/table'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useTableColumnResize} from '@react-aria/table'; import {useTableContext, useVirtualizerContext} from './TableViewBase'; diff --git a/packages/@react-spectrum/table/src/TableViewBase.tsx b/packages/@react-spectrum/table/src/TableViewBase.tsx index 41e046cd8d1..d098045bd32 100644 --- a/packages/@react-spectrum/table/src/TableViewBase.tsx +++ b/packages/@react-spectrum/table/src/TableViewBase.tsx @@ -22,7 +22,7 @@ import { useStyleProps, useUnwrapDOMRef } from '@react-spectrum/utils'; -import {ColumnSize, SpectrumColumnProps, TableCollection} from '@react-types/table'; +import {ColumnSize, ITableCollection as TableCollection, TableState, TreeGridState, useTableColumnResizeState} from '@react-stately/table'; import {DOMRef, DropTarget, FocusableElement, FocusableRef, Key, RefObject} from '@react-types/shared'; import type {DragAndDropHooks} from '@react-spectrum/dnd'; import type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd'; @@ -44,11 +44,11 @@ import {ProgressCircle} from '@react-spectrum/progress'; import React, {DOMAttributes, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; import {Resizer, ResizeStateContext} from './Resizer'; import {RootDropIndicator} from './RootDropIndicator'; +import {SpectrumColumnProps} from './types'; import {DragPreview as SpectrumDragPreview} from './DragPreview'; import {SpectrumTableProps} from './TableViewWrapper'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import stylesOverrides from './table.css'; -import {TableState, TreeGridState, useTableColumnResizeState} from '@react-stately/table'; import {TableViewLayout} from './TableViewLayout'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; import {useButton} from '@react-aria/button'; diff --git a/packages/@react-spectrum/table/src/TableViewWrapper.tsx b/packages/@react-spectrum/table/src/TableViewWrapper.tsx index 2787307ecfe..3c329eda168 100644 --- a/packages/@react-spectrum/table/src/TableViewWrapper.tsx +++ b/packages/@react-spectrum/table/src/TableViewWrapper.tsx @@ -11,7 +11,7 @@ */ import type {AriaLabelingProps, DisabledBehavior, DOMProps, DOMRef, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; -import type {ColumnSize, TableProps} from '@react-types/table'; +import type {ColumnSize, TableProps} from '@react-stately/table'; import type {DragAndDropHooks} from '@react-spectrum/dnd'; import React, {JSX, ReactElement} from 'react'; import {tableNestedRows} from '@react-stately/flags'; diff --git a/packages/@react-spectrum/table/src/index.ts b/packages/@react-spectrum/table/src/index.ts index e365c1368a6..c419fc031e2 100644 --- a/packages/@react-spectrum/table/src/index.ts +++ b/packages/@react-spectrum/table/src/index.ts @@ -15,7 +15,7 @@ export {TableView} from './TableViewWrapper'; import {Column} from '@react-stately/table'; import {JSX} from 'react'; -import {SpectrumColumnProps} from '@react-types/table'; +import {SpectrumColumnProps} from './types'; // Override TS for Column to support spectrum specific props. const SpectrumColumn = Column as (props: SpectrumColumnProps) => JSX.Element; @@ -29,5 +29,6 @@ export { Cell } from '@react-stately/table'; -export type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table'; +export type {SpectrumColumnProps} from './types'; +export type {TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-stately/table'; export type {SpectrumTableProps} from './TableViewWrapper'; diff --git a/packages/@react-spectrum/table/src/types.ts b/packages/@react-spectrum/table/src/types.ts new file mode 100644 index 00000000000..a1b5a983d67 --- /dev/null +++ b/packages/@react-spectrum/table/src/types.ts @@ -0,0 +1,32 @@ + +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {ColumnProps} from '@react-stately/table'; + +export interface SpectrumColumnProps extends ColumnProps { + /** + * The alignment of the column's contents relative to its allotted width. + * @default 'start' + */ + align?: 'start' | 'center' | 'end', + // /** Whether the column should stick to the viewport when scrolling. */ + // isSticky?: boolean, // shouldStick?? Not implemented yet? + /** Whether the column should render a divider between it and the next column. */ + showDivider?: boolean, + /** + * Whether the column should hide its header text. A tooltip with the column's header text + * will be displayed when the column header is focused instead. Note that this prop is specifically for columns + * that contain ActionButtons in place of text content. + */ + hideHeader?: boolean +} diff --git a/packages/@react-spectrum/table/stories/ControllingResize.tsx b/packages/@react-spectrum/table/stories/ControllingResize.tsx index 4bcd4750a7e..7060453a0dc 100644 --- a/packages/@react-spectrum/table/stories/ControllingResize.tsx +++ b/packages/@react-spectrum/table/stories/ControllingResize.tsx @@ -12,7 +12,7 @@ import {Button} from '@react-spectrum/button'; import {Cell, Column, Row, SpectrumColumnProps, TableBody, TableHeader, TableView} from '../'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from '@react-stately/table'; import {Key} from '@react-types/shared'; import React, {JSX, useCallback, useMemo, useState} from 'react'; diff --git a/packages/@react-spectrum/table/test/TableSizing.test.tsx b/packages/@react-spectrum/table/test/TableSizing.test.tsx index 3c82d3a3223..3148e74afce 100644 --- a/packages/@react-spectrum/table/test/TableSizing.test.tsx +++ b/packages/@react-spectrum/table/test/TableSizing.test.tsx @@ -15,7 +15,7 @@ import {act, render as renderComponent, within} from '@testing-library/react'; import {ActionButton} from '@react-spectrum/button'; import Add from '@spectrum-icons/workflow/Add'; import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../'; -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from '@react-stately/table'; import {ControllingResize} from '../stories/ControllingResize'; import {fireEvent, installPointerEvent, pointerMap, simulateDesktop, triggerTouch} from '@react-spectrum/test-utils-internal'; import {HidingColumns} from '../stories/HidingColumns'; diff --git a/packages/@react-stately/grid/src/useGridState.ts b/packages/@react-stately/grid/src/useGridState.ts index 46fd89e1c16..ac9f99f8410 100644 --- a/packages/@react-stately/grid/src/useGridState.ts +++ b/packages/@react-stately/grid/src/useGridState.ts @@ -1,10 +1,10 @@ import {getChildNodes, getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection, GridNode} from './GridCollection'; +import {GridNode, IGridCollection} from './GridCollection'; import {Key} from '@react-types/shared'; import {MultipleSelectionState, MultipleSelectionStateProps, SelectionManager, useMultipleSelectionState} from '@react-stately/selection'; import {useEffect, useMemo, useRef} from 'react'; -export interface GridState> { +export interface GridState> { collection: C, /** A set of keys for rows that are disabled. */ disabledKeys: Set, @@ -14,7 +14,7 @@ export interface GridState> { isKeyboardNavigationDisabled: boolean } -export interface GridStateOptions> extends MultipleSelectionStateProps { +export interface GridStateOptions> extends MultipleSelectionStateProps { collection: C, disabledKeys?: Iterable, focusMode?: 'row' | 'cell', @@ -25,7 +25,7 @@ export interface GridStateOptions> extends Multip /** * Provides state management for a grid component. Handles row selection and focusing a grid cell's focusable child if applicable. */ -export function useGridState>(props: GridStateOptions): GridState { +export function useGridState>(props: GridStateOptions): GridState { let {collection, focusMode} = props; // eslint-disable-next-line react-hooks/rules-of-hooks let selectionState = props.UNSAFE_selectionState || useMultipleSelectionState(props); diff --git a/packages/@react-stately/layout/package.json b/packages/@react-stately/layout/package.json index 3d68da410a4..c0369e7414a 100644 --- a/packages/@react-stately/layout/package.json +++ b/packages/@react-stately/layout/package.json @@ -31,7 +31,6 @@ "@react-stately/table": "^3.15.2", "@react-stately/virtualizer": "^4.4.4", "@react-types/shared": "^3.32.1", - "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index 9f68993b704..69a11d45148 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -15,8 +15,7 @@ import {getChildNodes, getLastItem} from '@react-stately/collections'; import {GridNode} from '@react-stately/grid'; import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer'; import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout'; -import {TableCollection} from '@react-types/table'; -import {TableColumnLayout} from '@react-stately/table'; +import {ITableCollection as TableCollection, TableColumnLayout} from '@react-stately/table'; export interface TableLayoutProps extends ListLayoutOptions { columnWidths?: Map diff --git a/packages/@react-stately/table/package.json b/packages/@react-stately/table/package.json index 3c64442c633..05e5f6d23f9 100644 --- a/packages/@react-stately/table/package.json +++ b/packages/@react-stately/table/package.json @@ -32,7 +32,6 @@ "@react-stately/selection": "^3.20.7", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.32.1", - "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/table/src/Cell.ts b/packages/@react-stately/table/src/Cell.ts index 58a45082d32..54a591f154e 100644 --- a/packages/@react-stately/table/src/Cell.ts +++ b/packages/@react-stately/table/src/Cell.ts @@ -10,10 +10,22 @@ * governing permissions and limitations under the License. */ -import {CellProps} from '@react-types/table'; -import {JSX, ReactElement} from 'react'; +import {JSX, ReactElement, ReactNode} from 'react'; +import {Key} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; +export interface CellProps { + /** The contents of the cell. */ + children: ReactNode, + /** A string representation of the cell's contents, used for features like typeahead. */ + textValue?: string, + /** Indicates how many columns the data cell spans. */ + colSpan?: number +} + +export type CellElement = ReactElement; +export type CellRenderer = (columnKey: Key) => CellElement; + function Cell(props: CellProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; } diff --git a/packages/@react-stately/table/src/Column.ts b/packages/@react-stately/table/src/Column.ts index c39535542a3..b5b3334f28a 100644 --- a/packages/@react-stately/table/src/Column.ts +++ b/packages/@react-stately/table/src/Column.ts @@ -11,10 +11,47 @@ */ import {CollectionBuilderContext} from './useTableState'; -import {ColumnProps} from '@react-types/table'; import {GridNode} from '@react-stately/grid'; import {PartialNode} from '@react-stately/collections'; -import React, {JSX, ReactElement} from 'react'; +import React, {JSX, ReactElement, ReactNode} from 'react'; + +/** Widths that result in a constant pixel value for the same Table width. */ +export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/ +/** + * Widths that change size in relation to the remaining space and in ratio to other dynamic columns. + * All numbers must be integers and greater than 0. + * FR units take up remaining, if any, space in the table. + */ +export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/ +/** All possible sizes a column can be assigned. */ +export type ColumnSize = ColumnStaticSize | ColumnDynamicSize; + +export type ColumnElement = ReactElement>; +export type ColumnRenderer = (item: T) => ColumnElement; +export interface ColumnProps { + /** Rendered contents of the column if `children` contains child columns. */ + title?: ReactNode, + /** Static child columns or content to render as the column header. */ + children: ReactNode | ColumnElement | ColumnElement[], + /** A list of child columns used when dynamically rendering nested child columns. */ + childColumns?: T[], + /** The width of the column. */ + width?: ColumnSize | null, + /** The minimum width of the column. */ + minWidth?: ColumnStaticSize | null, + /** The maximum width of the column. */ + maxWidth?: ColumnStaticSize | null, + /** The default width of the column. */ + defaultWidth?: ColumnSize | null, + /** Whether the column allows resizing. */ + allowsResizing?: boolean, + /** Whether the column allows sorting. */ + allowsSorting?: boolean, + /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */ + isRowHeader?: boolean, + /** A string representation of the column's contents, used for accessibility announcements. */ + textValue?: string +} function Column(props: ColumnProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/Row.ts b/packages/@react-stately/table/src/Row.ts index 9cc5595538f..5c3be2a62ea 100644 --- a/packages/@react-stately/table/src/Row.ts +++ b/packages/@react-stately/table/src/Row.ts @@ -10,10 +10,29 @@ * governing permissions and limitations under the License. */ +import {CellElement, CellRenderer} from './Cell'; import {CollectionBuilderContext} from './useTableState'; +import {LinkDOMProps} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; -import {RowProps} from '@react-types/table'; + +export type RowElement = ReactElement>; +export interface RowProps extends LinkDOMProps { + /** + * A list of child item objects used when dynamically rendering row children. Requires the feature flag to be + * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows. + * @version alpha + * @private + */ + UNSTABLE_childItems?: Iterable, + // TODO: update when async loading is supported for expandable rows + // /** Whether this row has children, even if not loaded yet. */ + // hasChildItems?: boolean, + /** Rendered contents of the row or row child items. */ + children: CellElement | CellElement[] | CellRenderer, + /** A string representation of the row's contents, used for features like typeahead. */ + textValue?: string // ??? +} function Row(props: RowProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/TableBody.ts b/packages/@react-stately/table/src/TableBody.ts index 6355c3326f6..5d732593fe1 100644 --- a/packages/@react-stately/table/src/TableBody.ts +++ b/packages/@react-stately/table/src/TableBody.ts @@ -10,9 +10,19 @@ * governing permissions and limitations under the License. */ +import {AsyncLoadable, LoadingState} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; -import {TableBodyProps} from '@react-types/table'; +import {RowElement} from './Row'; + +export interface TableBodyProps extends Omit { + /** The contents of the table body. Supports static items or a function for dynamic rendering. */ + children: RowElement | RowElement[] | ((item: T) => RowElement), + /** A list of row objects in the table body used when dynamically rendering rows. */ + items?: Iterable, + /** The current loading state of the table. */ + loadingState?: LoadingState +} function TableBody(props: TableBodyProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/TableCollection.ts b/packages/@react-stately/table/src/TableCollection.ts index 9f30d1c6963..258c7976239 100644 --- a/packages/@react-stately/table/src/TableCollection.ts +++ b/packages/@react-stately/table/src/TableCollection.ts @@ -11,10 +11,23 @@ */ import {getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection, GridNode} from '@react-stately/grid'; -import {TableCollection as ITableCollection} from '@react-types/table'; +import {GridCollection, GridNode, IGridCollection} from '@react-stately/grid'; import {Key} from '@react-types/shared'; +export interface ITableCollection extends IGridCollection { + // TODO perhaps elaborate on this? maybe not clear enough, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc) + /** A list of header row nodes in the table. */ + headerRows: GridNode[], + /** A list of column nodes in the table. */ + columns: GridNode[], + /** A set of column keys that serve as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */ + rowHeaderColumnKeys: Set, + /** The node that makes up the header of the table. */ + head?: GridNode, + /** The node that makes up the body of the table. */ + body: GridNode +} + interface GridCollectionOptions { showSelectionCheckboxes?: boolean, showDragButtons?: boolean diff --git a/packages/@react-stately/table/src/TableColumnLayout.ts b/packages/@react-stately/table/src/TableColumnLayout.ts index 02fc8a47578..2b32ea875a9 100644 --- a/packages/@react-stately/table/src/TableColumnLayout.ts +++ b/packages/@react-stately/table/src/TableColumnLayout.ts @@ -15,7 +15,7 @@ import { getMaxWidth, getMinWidth } from './TableUtils'; -import {ColumnSize, TableCollection} from '@react-types/table'; +import {ColumnSize, ITableCollection as TableCollection} from '@react-stately/table'; import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-stately/table/src/TableHeader.ts b/packages/@react-stately/table/src/TableHeader.ts index 70af4722f06..9e6f4af95e3 100644 --- a/packages/@react-stately/table/src/TableHeader.ts +++ b/packages/@react-stately/table/src/TableHeader.ts @@ -11,9 +11,16 @@ */ import {CollectionBuilderContext} from './useTableState'; +import {ColumnElement, ColumnRenderer} from './Column'; import {PartialNode} from '@react-stately/collections'; import React, {JSX, ReactElement} from 'react'; -import {TableHeaderProps} from '@react-types/table'; + +export interface TableHeaderProps { + /** A list of table columns. */ + columns?: T[], + /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */ + children: ColumnElement | ColumnElement[] | ColumnRenderer +} function TableHeader(props: TableHeaderProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars return null; diff --git a/packages/@react-stately/table/src/TableUtils.ts b/packages/@react-stately/table/src/TableUtils.ts index 181b287aac8..8bf5ae7a603 100644 --- a/packages/@react-stately/table/src/TableUtils.ts +++ b/packages/@react-stately/table/src/TableUtils.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from '@react-stately/table'; import {Key} from '@react-types/shared'; // numbers and percents are considered static. *fr units or a lack of units are considered dynamic. diff --git a/packages/@react-stately/table/src/index.ts b/packages/@react-stately/table/src/index.ts index eb8a04ef4f7..16ffd5cd783 100644 --- a/packages/@react-stately/table/src/index.ts +++ b/packages/@react-stately/table/src/index.ts @@ -11,9 +11,14 @@ */ export type {TableColumnResizeState, TableColumnResizeStateProps} from './useTableColumnResizeState'; -export type {TableState, CollectionBuilderContext, TableStateProps} from './useTableState'; -export type {TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps} from '@react-types/table'; +export type {TableProps, TableState, CollectionBuilderContext, TableStateProps} from './useTableState'; export type {TreeGridState, TreeGridStateProps} from './useTreeGridState'; +export type {ColumnProps, ColumnSize, ColumnDynamicSize, ColumnStaticSize, ColumnElement, ColumnRenderer} from './Column'; +export type {TableHeaderProps} from './TableHeader'; +export type {TableBodyProps} from './TableBody'; +export type {RowProps, RowElement} from './Row'; +export type {CellProps, CellElement, CellRenderer} from './Cell'; +export type {ITableCollection} from './TableCollection'; export {useTableColumnResizeState} from './useTableColumnResizeState'; export {useTableState, UNSTABLE_useFilteredTableState} from './useTableState'; diff --git a/packages/@react-stately/table/src/useTableColumnResizeState.ts b/packages/@react-stately/table/src/useTableColumnResizeState.ts index 1598eba2632..d561629f013 100644 --- a/packages/@react-stately/table/src/useTableColumnResizeState.ts +++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColumnSize} from '@react-types/table'; +import {ColumnSize} from './Column'; import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; import {TableColumnLayout} from './TableColumnLayout'; @@ -28,6 +28,7 @@ export interface TableColumnResizeStateProps { /** A function that is called to find the default minWidth for a given column. */ getDefaultMinWidth?: (node: GridNode) => ColumnSize | null | undefined } + export interface TableColumnResizeState { /** * Called to update the state that a resize event has occurred. diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts index d18d173161f..8e37b6735ef 100644 --- a/packages/@react-stately/table/src/useTableState.ts +++ b/packages/@react-stately/table/src/useTableState.ts @@ -11,13 +11,32 @@ */ import {GridState, useGridState} from '@react-stately/grid'; -import {TableCollection as ITableCollection, TableBodyProps, TableHeaderProps} from '@react-types/table'; -import {Key, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared'; +import {ITableCollection, TableCollection} from './TableCollection'; +import {Key, MultipleSelection, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared'; import {MultipleSelectionState, MultipleSelectionStateProps} from '@react-stately/selection'; import {ReactElement, useCallback, useMemo, useState} from 'react'; -import {TableCollection} from './TableCollection'; +import {TableBodyProps} from './TableBody'; +import {TableHeaderProps} from './TableHeader'; import {useCollection} from '@react-stately/collections'; +export interface TableProps extends MultipleSelection, Sortable { + /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ + children?: [ReactElement>, ReactElement>], + /** A list of row keys to disable. */ + disabledKeys?: Iterable, + /** + * Whether pressing the escape key should clear selection in the table or not. + * + * Most experiences should not modify this option as it eliminates a keyboard user's ability to + * easily clear selection. Only use if the escape key is being handled externally or should not + * trigger selection clearing contextually. + * @default 'clearSelection' + */ + escapeKeyBehavior?: 'clearSelection' | 'none', + /** Whether selection should occur on press up instead of press down. */ + shouldSelectOnPressUp?: boolean +} + export interface TableState extends GridState> { /** A collection of rows and columns in the table. */ collection: ITableCollection, @@ -40,11 +59,7 @@ export interface CollectionBuilderContext { columns: Node[] } -export interface TableStateProps extends MultipleSelectionStateProps, Sortable { - /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ - children?: [ReactElement>, ReactElement>], - /** A list of row keys to disable. */ - disabledKeys?: Iterable, +export interface TableStateProps extends TableProps, MultipleSelectionStateProps, Sortable { /** A pre-constructed collection to use instead of building one from items and children. */ collection?: ITableCollection, /** Whether the row selection checkboxes should be displayed. */ diff --git a/packages/@react-types/table/package.json b/packages/@react-types/table/package.json index 4e56f5d47d8..b49237d7b01 100644 --- a/packages/@react-types/table/package.json +++ b/packages/@react-types/table/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-stately/grid": "^3.11.7", + "@react-spectrum/table": "^3.17.9", + "@react-stately/table": "^3.15.2", "@react-types/shared": "^3.32.1" }, "peerDependencies": { diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts index 085558a585e..c72c65d3607 100644 --- a/packages/@react-types/table/src/index.d.ts +++ b/packages/@react-types/table/src/index.d.ts @@ -10,38 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, DOMProps, Key, LinkDOMProps, LoadingState, MultipleSelection, Sortable, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; -import {IGridCollection as GridCollection, GridNode} from '@react-stately/grid'; -import {JSX, ReactElement, ReactNode} from 'react'; +import {AriaLabelingProps, DOMProps, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared'; +import {ColumnSize, TableProps} from '@react-stately/table'; +import {JSX} from 'react'; -/** Widths that result in a constant pixel value for the same Table width. */ -export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/ -/** - * Widths that change size in relation to the remaining space and in ratio to other dynamic columns. - * All numbers must be integers and greater than 0. - * FR units take up remaining, if any, space in the table. - */ -export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/ -/** All possible sizes a column can be assigned. */ -export type ColumnSize = ColumnStaticSize | ColumnDynamicSize; - -export interface TableProps extends MultipleSelection, Sortable { - /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ - children: [ReactElement>, ReactElement>], - /** A list of row keys to disable. */ - disabledKeys?: Iterable, - /** - * Whether pressing the escape key should clear selection in the table or not. - * - * Most experiences should not modify this option as it eliminates a keyboard user's ability to - * easily clear selection. Only use if the escape key is being handled externally or should not - * trigger selection clearing contextually. - * @default 'clearSelection' - */ - escapeKeyBehavior?: 'clearSelection' | 'none', - /** Whether selection should occur on press up instead of press down. */ - shouldSelectOnPressUp?: boolean -} +export {TableProps, ColumnStaticSize, ColumnDynamicSize, ColumnSize, TableHeaderProps, ColumnElement, ColumnRenderer, ColumnProps, RowElement, TableBodyProps, RowProps, CellProps, CellElement, CellRenderer, ITableCollection as TableCollection} from '@react-stately/table'; +export {SpectrumColumnProps} from '@react-spectrum/table'; /** * @deprecated - use SpectrumTableProps from '@adobe/react-spectrum' instead. @@ -79,109 +53,3 @@ export interface SpectrumTableProps extends TableProps, SpectrumSelectionP */ onResizeEnd?: (widths: Map) => void } - -export interface TableHeaderProps { - /** A list of table columns. */ - columns?: T[], - /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */ - children: ColumnElement | ColumnElement[] | ColumnRenderer -} - -type ColumnElement = ReactElement>; -type ColumnRenderer = (item: T) => ColumnElement; -export interface ColumnProps { - /** Rendered contents of the column if `children` contains child columns. */ - title?: ReactNode, - /** Static child columns or content to render as the column header. */ - children: ReactNode | ColumnElement | ColumnElement[], - /** A list of child columns used when dynamically rendering nested child columns. */ - childColumns?: T[], - /** The width of the column. */ - width?: ColumnSize | null, - /** The minimum width of the column. */ - minWidth?: ColumnStaticSize | null, - /** The maximum width of the column. */ - maxWidth?: ColumnStaticSize | null, - /** The default width of the column. */ - defaultWidth?: ColumnSize | null, - /** Whether the column allows resizing. */ - allowsResizing?: boolean, - /** Whether the column allows sorting. */ - allowsSorting?: boolean, - /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */ - isRowHeader?: boolean, - /** A string representation of the column's contents, used for accessibility announcements. */ - textValue?: string -} - -// TODO: how to support these in CollectionBuilder... -export interface SpectrumColumnProps extends ColumnProps { - /** - * The alignment of the column's contents relative to its allotted width. - * @default 'start' - */ - align?: 'start' | 'center' | 'end', - // /** Whether the column should stick to the viewport when scrolling. */ - // isSticky?: boolean, // shouldStick?? Not implemented yet? - /** Whether the column should render a divider between it and the next column. */ - showDivider?: boolean, - /** - * Whether the column should hide its header text. A tooltip with the column's header text - * will be displayed when the column header is focused instead. Note that this prop is specifically for columns - * that contain ActionButtons in place of text content. - */ - hideHeader?: boolean -} - -export type RowElement = ReactElement>; -export interface TableBodyProps extends Omit { - /** The contents of the table body. Supports static items or a function for dynamic rendering. */ - children: RowElement | RowElement[] | ((item: T) => RowElement), - /** A list of row objects in the table body used when dynamically rendering rows. */ - items?: Iterable, - /** The current loading state of the table. */ - loadingState?: LoadingState -} - -export interface RowProps extends LinkDOMProps { - /** - * A list of child item objects used when dynamically rendering row children. Requires the feature flag to be - * enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows. - * @version alpha - * @private - */ - UNSTABLE_childItems?: Iterable, - // TODO: update when async loading is supported for expandable rows - // /** Whether this row has children, even if not loaded yet. */ - // hasChildItems?: boolean, - /** Rendered contents of the row or row child items. */ - children: CellElement | CellElement[] | CellRenderer, - /** A string representation of the row's contents, used for features like typeahead. */ - textValue?: string // ??? -} - -export interface CellProps { - /** The contents of the cell. */ - children: ReactNode, - /** A string representation of the cell's contents, used for features like typeahead. */ - textValue?: string, - /** Indicates how many columns the data cell spans. */ - colSpan?: number -} - -export type CellElement = ReactElement; -export type CellRenderer = (columnKey: Key) => CellElement; - -export interface TableCollection extends GridCollection { - // TODO perhaps elaborate on this? maybe not clear enough, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc) - /** A list of header row nodes in the table. */ - headerRows: GridNode[], - /** A list of column nodes in the table. */ - columns: GridNode[], - /** A set of column keys that serve as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */ - rowHeaderColumnKeys: Set, - /** The node that makes up the header of the table. */ - head?: GridNode, - /** The node that makes up the body of the table. */ - body: GridNode -} diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json index e84ad29197e..7cdc4827445 100644 --- a/packages/react-aria-components/package.json +++ b/packages/react-aria-components/package.json @@ -63,7 +63,6 @@ "@react-stately/utils": "^3.11.0", "@react-stately/virtualizer": "^4.4.4", "@react-types/shared": "^3.32.1", - "@react-types/table": "^3.13.4", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.45.0", diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 4b13457c96c..fba1e887630 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -17,8 +17,7 @@ import { useRenderProps } from './utils'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection'; -import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table'; -import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, MultipleSelectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, UNSTABLE_useFilteredTableState, useMultipleSelectionState, useTableColumnResizeState, useTableState} from 'react-stately'; +import {ColumnSize, ColumnStaticSize, DisabledBehavior, DraggableCollectionState, DroppableCollectionState, ITableCollection, MultipleSelectionState, Node, SelectionBehavior, SelectionMode, TableProps as SharedTableProps, SortDirection, TableState, UNSTABLE_useFilteredTableState, useMultipleSelectionState, useTableColumnResizeState, useTableState} from 'react-stately'; import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop'; import {DragAndDropHooks} from './useDragAndDrop'; import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria'; diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts index cfffea50e21..16d7a070823 100644 --- a/packages/react-stately/src/index.ts +++ b/packages/react-stately/src/index.ts @@ -27,7 +27,7 @@ export type {SelectProps, SelectState, SelectStateOptions} from '@react-stately/ export type {SliderState, SliderStateOptions} from '@react-stately/slider'; export type {MultipleSelectionManager, MultipleSelectionState, SingleSelectionState} from '@react-stately/selection'; export type {NumberFieldState, NumberFieldStateOptions} from '@react-stately/numberfield'; -export type {TableState, TableStateProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, TableColumnResizeState, TableColumnResizeStateProps} from '@react-stately/table'; +export type {TableState, TableStateProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, TableColumnResizeState, TableColumnResizeStateProps, ColumnSize, ColumnStaticSize, ColumnDynamicSize, ITableCollection} from '@react-stately/table'; export type {TabListProps, TabListState} from '@react-stately/tabs'; export type {ToastState, QueuedToast, ToastStateProps, ToastOptions} from '@react-stately/toast'; export type {ToggleProps, ToggleState, ToggleGroupProps, ToggleGroupState} from '@react-stately/toggle'; From a876441be4605bbd69da0093ae6c084c2cfe4a3b Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:05:23 -0500 Subject: [PATCH 37/56] Tabs --- packages/@react-aria/tabs/package.json | 1 - packages/@react-aria/tabs/src/index.ts | 7 +- packages/@react-aria/tabs/src/useTab.ts | 12 ++- packages/@react-aria/tabs/src/useTabList.ts | 18 ++++- packages/@react-aria/tabs/src/useTabPanel.ts | 8 +- .../tabs/chromatic/Tabs.stories.tsx | 3 +- packages/@react-spectrum/tabs/package.json | 1 - packages/@react-spectrum/tabs/src/Tabs.tsx | 44 +++++++++- packages/@react-spectrum/tabs/src/index.ts | 2 +- .../tabs/stories/Tabs.stories.tsx | 3 +- packages/@react-stately/tabs/package.json | 1 - packages/@react-stately/tabs/src/index.ts | 3 +- .../tabs/src/useTabListState.ts | 13 ++- packages/@react-types/tabs/package.json | 4 +- packages/@react-types/tabs/src/index.d.ts | 81 +------------------ 15 files changed, 96 insertions(+), 105 deletions(-) diff --git a/packages/@react-aria/tabs/package.json b/packages/@react-aria/tabs/package.json index 1c4ed0e3093..2a40c16d597 100644 --- a/packages/@react-aria/tabs/package.json +++ b/packages/@react-aria/tabs/package.json @@ -32,7 +32,6 @@ "@react-aria/utils": "^3.32.0", "@react-stately/tabs": "^3.8.7", "@react-types/shared": "^3.32.1", - "@react-types/tabs": "^3.3.20", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/tabs/src/index.ts b/packages/@react-aria/tabs/src/index.ts index e36be83acab..2088e75191b 100644 --- a/packages/@react-aria/tabs/src/index.ts +++ b/packages/@react-aria/tabs/src/index.ts @@ -12,8 +12,7 @@ export {useTab} from './useTab'; export {useTabPanel} from './useTabPanel'; export {useTabList} from './useTabList'; -export type {AriaTabListProps, AriaTabPanelProps, AriaTabProps} from '@react-types/tabs'; export type {Orientation} from '@react-types/shared'; -export type {TabAria} from './useTab'; -export type {TabPanelAria} from './useTabPanel'; -export type {AriaTabListOptions, TabListAria} from './useTabList'; +export type {AriaTabProps, TabAria} from './useTab'; +export type {AriaTabPanelProps, TabPanelAria} from './useTabPanel'; +export type {AriaTabListProps, AriaTabListOptions, TabListAria} from './useTabList'; diff --git a/packages/@react-aria/tabs/src/useTab.ts b/packages/@react-aria/tabs/src/useTab.ts index 57a079eb42d..8404e4a8220 100644 --- a/packages/@react-aria/tabs/src/useTab.ts +++ b/packages/@react-aria/tabs/src/useTab.ts @@ -10,14 +10,22 @@ * governing permissions and limitations under the License. */ -import {AriaTabProps} from '@react-types/tabs'; -import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useLinkProps} from '@react-aria/utils'; import {generateId} from './utils'; import {TabListState} from '@react-stately/tabs'; import {useFocusable} from '@react-aria/focus'; import {useSelectableItem} from '@react-aria/selection'; +export interface AriaTabProps extends AriaLabelingProps { + /** The key of the tab. */ + key: Key, + /** Whether the tab should be disabled. */ + isDisabled?: boolean, + /** Whether the tab selection should occur on press up instead of press down. */ + shouldSelectOnPressUp?: boolean +} + export interface TabAria { /** Props for the tab element. */ tabProps: DOMAttributes, diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts index 04a4b52c8ab..d8c1a910b3e 100644 --- a/packages/@react-aria/tabs/src/useTabList.ts +++ b/packages/@react-aria/tabs/src/useTabList.ts @@ -10,16 +10,28 @@ * governing permissions and limitations under the License. */ -import {AriaTabListProps} from '@react-types/tabs'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, Orientation, RefObject} from '@react-types/shared'; import {mergeProps, useId, useLabels} from '@react-aria/utils'; -import {TabListState} from '@react-stately/tabs'; +import {TabListProps, TabListState} from '@react-stately/tabs'; import {tabsIds} from './utils'; import {TabsKeyboardDelegate} from './TabsKeyboardDelegate'; import {useLocale} from '@react-aria/i18n'; import {useMemo} from 'react'; import {useSelectableCollection} from '@react-aria/selection'; +export interface AriaTabListProps extends TabListProps, DOMProps, AriaLabelingProps { + /** + * Whether tabs are activated automatically on focus or manually. + * @default 'automatic' + */ + keyboardActivation?: 'automatic' | 'manual', + /** + * The orientation of the tabs. + * @default 'horizontal' + */ + orientation?: Orientation +} + export interface AriaTabListOptions extends Omit, 'children'> {} export interface TabListAria { diff --git a/packages/@react-aria/tabs/src/useTabPanel.ts b/packages/@react-aria/tabs/src/useTabPanel.ts index fb2c42cce0e..ae71b89fd32 100644 --- a/packages/@react-aria/tabs/src/useTabPanel.ts +++ b/packages/@react-aria/tabs/src/useTabPanel.ts @@ -10,13 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaTabPanelProps} from '@react-types/tabs'; -import {DOMAttributes, RefObject} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps, Key, RefObject} from '@react-types/shared'; import {generateId} from './utils'; import {mergeProps, useLabels} from '@react-aria/utils'; import {TabListState} from '@react-stately/tabs'; import {useHasTabbableChild} from '@react-aria/focus'; +export interface AriaTabPanelProps extends Omit, AriaLabelingProps { + /** The unique id of the tab. */ + id?: Key +} + export interface TabPanelAria { /** Props for the tab panel element. */ tabPanelProps: DOMAttributes diff --git a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx index 7edb0dc8772..f16029d55b3 100644 --- a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx +++ b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx @@ -11,10 +11,9 @@ */ import {Heading, Text} from '@react-spectrum/text'; -import {Item, TabList, TabPanels, Tabs} from '../'; +import {Item, SpectrumTabsProps, TabList, TabPanels, Tabs} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumTabsProps} from '@react-types/tabs'; const meta: Meta> = { title: 'Tabs', diff --git a/packages/@react-spectrum/tabs/package.json b/packages/@react-spectrum/tabs/package.json index c8647d8d0de..ba660991c9d 100644 --- a/packages/@react-spectrum/tabs/package.json +++ b/packages/@react-spectrum/tabs/package.json @@ -52,7 +52,6 @@ "@react-stately/list": "^3.13.2", "@react-stately/tabs": "^3.8.7", "@react-types/shared": "^3.32.1", - "@react-types/tabs": "^3.3.20", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx index 5e994bf9f20..875aad37ff0 100644 --- a/packages/@react-spectrum/tabs/src/Tabs.tsx +++ b/packages/@react-spectrum/tabs/src/Tabs.tsx @@ -10,9 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs'; +import {AriaLabelingProps, CollectionChildren, DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, SingleSelection, StyleProps} from '@react-types/shared'; +import {AriaTabPanelProps, useTab, useTabList, useTabPanel} from '@react-aria/tabs'; import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared'; import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {FocusRing} from '@react-aria/focus'; import {Item, Picker, SpectrumPickerProps} from '@react-spectrum/picker'; @@ -35,7 +35,35 @@ import {useCollection} from '@react-stately/collections'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; -import {useTab, useTabList, useTabPanel} from '@react-aria/tabs'; + +export interface SpectrumTabsProps extends Omit, AriaLabelingProps, DOMProps, StyleProps { + /** The children of the `` element. Should include `` and `` elements. */ + children: ReactNode, + /** The item objects for each tab, for dynamic collections. */ + items?: Iterable, + /** The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise interacted with. */ + disabledKeys?: Iterable, + /** Whether the Tabs are disabled. */ + isDisabled?: boolean, + /** Whether the tabs are displayed in a quiet style. */ + isQuiet?: boolean, + /** Whether the tabs are displayed in an emphasized style. */ + isEmphasized?: boolean, + /** The amount of space between the tabs. */ + density?: 'compact' | 'regular', + /** Handler that is called when the selection changes. */ + onSelectionChange?: (key: Key) => void, + /** + * Whether tabs are activated automatically on focus or manually. + * @default 'automatic' + */ + keyboardActivation?: 'automatic' | 'manual', + /** + * The orientation of the tabs. + * @default 'horizontal' + */ + orientation?: Orientation +} interface TabsContext { tabProps: SpectrumTabsProps, @@ -256,6 +284,11 @@ function TabLine(props: TabLineProps) { return
; } +export interface SpectrumTabListProps extends DOMProps, StyleProps { + /** The tab items to display. Item keys should match the key of the corresponding `` within the `` element. */ + children: CollectionChildren +} + /** * A TabList is used within Tabs to group tabs that a user can switch between. * The keys of the items within the must match up with a corresponding item inside the . @@ -332,6 +365,11 @@ export function TabList(props: SpectrumTabListProps): ReactElement { } } +export interface SpectrumTabPanelsProps extends DOMProps, StyleProps { + /** The contents of each tab. Item keys should match the key of the corresponding `` within the `` element. */ + children: CollectionChildren +} + /** * TabPanels is used within Tabs as a container for the content of each tab. * The keys of the items within the must match up with a corresponding item inside the . diff --git a/packages/@react-spectrum/tabs/src/index.ts b/packages/@react-spectrum/tabs/src/index.ts index f52aa986edb..7ec60dad619 100644 --- a/packages/@react-spectrum/tabs/src/index.ts +++ b/packages/@react-spectrum/tabs/src/index.ts @@ -14,4 +14,4 @@ export {TabList, TabPanels, Tabs} from './Tabs'; export {Item} from '@react-stately/collections'; -export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs'; +export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from './Tabs'; diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx index a40a80533f3..3d319acb62b 100644 --- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx +++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx @@ -17,13 +17,12 @@ import {Button} from '@react-spectrum/button'; import {ButtonGroup} from '@react-spectrum/buttongroup'; import Calendar from '@spectrum-icons/workflow/Calendar'; import Dashboard from '@spectrum-icons/workflow/Dashboard'; -import {Item, TabList, TabPanels, Tabs} from '..'; +import {Item, SpectrumTabsProps, TabList, TabPanels, Tabs} from '..'; import {Key} from '@react-types/shared'; import {Meta, StoryFn} from '@storybook/react'; import {Picker} from '@react-spectrum/picker'; import React, {ReactNode, useCallback, useState} from 'react'; import {RouterProvider} from '@react-aria/utils'; -import {SpectrumTabsProps} from '@react-types/tabs'; import {TextField} from '@react-spectrum/textfield'; export default { diff --git a/packages/@react-stately/tabs/package.json b/packages/@react-stately/tabs/package.json index f3a13432cb4..f318de1e753 100644 --- a/packages/@react-stately/tabs/package.json +++ b/packages/@react-stately/tabs/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/list": "^3.13.2", "@react-types/shared": "^3.32.1", - "@react-types/tabs": "^3.3.20", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/tabs/src/index.ts b/packages/@react-stately/tabs/src/index.ts index f734b83d87d..14b1dae107a 100644 --- a/packages/@react-stately/tabs/src/index.ts +++ b/packages/@react-stately/tabs/src/index.ts @@ -12,5 +12,4 @@ export {useTabListState} from './useTabListState'; -export type {TabListProps} from '@react-types/tabs'; -export type {TabListStateOptions, TabListState} from './useTabListState'; +export type {TabListProps, TabListStateOptions, TabListState} from './useTabListState'; diff --git a/packages/@react-stately/tabs/src/useTabListState.ts b/packages/@react-stately/tabs/src/useTabListState.ts index 116e39b059f..d4e46b72031 100644 --- a/packages/@react-stately/tabs/src/useTabListState.ts +++ b/packages/@react-stately/tabs/src/useTabListState.ts @@ -10,11 +10,20 @@ * governing permissions and limitations under the License. */ -import {Collection, CollectionStateBase, Key, Node} from '@react-types/shared'; +import {Collection, CollectionBase, CollectionStateBase, Key, Node, SingleSelection} from '@react-types/shared'; import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list'; -import {TabListProps} from '@react-types/tabs'; import {useEffect, useRef} from 'react'; +export interface TabListProps extends CollectionBase, Omit { + /** + * Whether the TabList is disabled. + * Shows that a selection exists, but is not available in that circumstance. + */ + isDisabled?: boolean, + /** Handler that is called when the selection changes. */ + onSelectionChange?: (key: Key) => void +} + export interface TabListStateOptions extends Omit, 'children'>, CollectionStateBase {} export interface TabListState extends SingleSelectListState { diff --git a/packages/@react-types/tabs/package.json b/packages/@react-types/tabs/package.json index ebadc7b1f7f..a17065b92aa 100644 --- a/packages/@react-types/tabs/package.json +++ b/packages/@react-types/tabs/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-aria/tabs": "^3.10.9", + "@react-spectrum/tabs": "^3.8.28", + "@react-stately/tabs": "^3.8.7" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts index 9a20acc7ef9..227ad19658f 100644 --- a/packages/@react-types/tabs/src/index.d.ts +++ b/packages/@react-types/tabs/src/index.d.ts @@ -10,81 +10,6 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, CollectionBase, - CollectionChildren, - DOMProps, - Key, - Orientation, - SingleSelection, - StyleProps -} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface AriaTabProps extends AriaLabelingProps { - /** The key of the tab. */ - key: Key, - /** Whether the tab should be disabled. */ - isDisabled?: boolean, - /** Whether the tab selection should occur on press up instead of press down. */ - shouldSelectOnPressUp?: boolean -} - -export interface TabListProps extends CollectionBase, Omit { - /** - * Whether the TabList is disabled. - * Shows that a selection exists, but is not available in that circumstance. - */ - isDisabled?: boolean, - /** Handler that is called when the selection changes. */ - onSelectionChange?: (key: Key) => void -} - -interface AriaTabListBase extends AriaLabelingProps { - /** - * Whether tabs are activated automatically on focus or manually. - * @default 'automatic' - */ - keyboardActivation?: 'automatic' | 'manual', - /** - * The orientation of the tabs. - * @default 'horizontal' - */ - orientation?: Orientation -} - -export interface AriaTabListProps extends TabListProps, AriaTabListBase, DOMProps, AriaLabelingProps {} - -export interface AriaTabPanelProps extends Omit, AriaLabelingProps { - /** The unique id of the tab. */ - id?: Key -} - -export interface SpectrumTabsProps extends AriaTabListBase, Omit, DOMProps, StyleProps { - /** The children of the `` element. Should include `` and `` elements. */ - children: ReactNode, - /** The item objects for each tab, for dynamic collections. */ - items?: Iterable, - /** The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise interacted with. */ - disabledKeys?: Iterable, - /** Whether the Tabs are disabled. */ - isDisabled?: boolean, - /** Whether the tabs are displayed in a quiet style. */ - isQuiet?: boolean, - /** Whether the tabs are displayed in an emphasized style. */ - isEmphasized?: boolean, - /** The amount of space between the tabs. */ - density?: 'compact' | 'regular', - /** Handler that is called when the selection changes. */ - onSelectionChange?: (key: Key) => void -} - -export interface SpectrumTabListProps extends DOMProps, StyleProps { - /** The tab items to display. Item keys should match the key of the corresponding `` within the `` element. */ - children: CollectionChildren -} - -export interface SpectrumTabPanelsProps extends DOMProps, StyleProps { - /** The contents of each tab. Item keys should match the key of the corresponding `` within the `` element. */ - children: CollectionChildren -} +export {TabListProps} from '@react-stately/tabs'; +export {AriaTabListProps, AriaTabProps, AriaTabPanelProps} from '@react-aria/tabs'; +export {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-spectrum/tabs'; From c47b82643c842082195362c359a87927a88c47a2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:08:02 -0500 Subject: [PATCH 38/56] Text --- packages/@react-spectrum/text/package.json | 1 - packages/@react-spectrum/text/src/Heading.tsx | 22 +++++++++++-- .../@react-spectrum/text/src/Keyboard.tsx | 17 ++++++++-- packages/@react-spectrum/text/src/Text.tsx | 17 ++++++++-- packages/@react-spectrum/text/src/index.ts | 4 ++- packages/@react-types/text/package.json | 2 +- packages/@react-types/text/src/heading.d.ts | 31 ------------------- packages/@react-types/text/src/index.d.ts | 4 +-- packages/@react-types/text/src/keyboard.d.ts | 26 ---------------- packages/@react-types/text/src/text.d.ts | 26 ---------------- 10 files changed, 52 insertions(+), 98 deletions(-) delete mode 100644 packages/@react-types/text/src/heading.d.ts delete mode 100644 packages/@react-types/text/src/keyboard.d.ts delete mode 100644 packages/@react-types/text/src/text.d.ts diff --git a/packages/@react-spectrum/text/package.json b/packages/@react-spectrum/text/package.json index 8d5658eccbe..372a58253fe 100644 --- a/packages/@react-spectrum/text/package.json +++ b/packages/@react-spectrum/text/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-types/shared": "^3.32.1", - "@react-types/text": "^3.3.21", "@swc/helpers": "^0.5.0", "react-aria-components": "^1.14.0" }, diff --git a/packages/@react-spectrum/text/src/Heading.tsx b/packages/@react-spectrum/text/src/Heading.tsx index 610c84048a6..314abb3e927 100644 --- a/packages/@react-spectrum/text/src/Heading.tsx +++ b/packages/@react-spectrum/text/src/Heading.tsx @@ -10,13 +10,29 @@ * governing permissions and limitations under the License. */ -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {HeadingContext, useContextProps} from 'react-aria-components'; -import {HeadingProps} from '@react-types/text'; -import React, {ElementType, forwardRef} from 'react'; +import React, {ElementType, forwardRef, ReactNode} from 'react'; import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; +export interface HeadingProps extends DOMProps, StyleProps { + /** + * Heading content. + */ + children: ReactNode, + /** + * A slot to place the heading in. + * @default 'heading' + */ + slot?: string, + /** + * Sets heading level, h1 through h6. + * @default 3 + */ + level?: 1 | 2 | 3 | 4 | 5 | 6 +} + /** * Heading is used to create various levels of typographic hierarchies. */ diff --git a/packages/@react-spectrum/text/src/Keyboard.tsx b/packages/@react-spectrum/text/src/Keyboard.tsx index bcb4d49c899..e6c7daa9cd9 100644 --- a/packages/@react-spectrum/text/src/Keyboard.tsx +++ b/packages/@react-spectrum/text/src/Keyboard.tsx @@ -10,12 +10,23 @@ * governing permissions and limitations under the License. */ -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {KeyboardProps} from '@react-types/text'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; +export interface KeyboardProps extends DOMProps, StyleProps { + /** + * Keyboard shortcut text. + */ + children: ReactNode, + /** + * A slot to place the keyboard shortcut in. + * @default 'keyboard' + */ + slot?: string +} + /** * Keyboard represents text that specifies a keyboard command. */ diff --git a/packages/@react-spectrum/text/src/Text.tsx b/packages/@react-spectrum/text/src/Text.tsx index 1e763a59d7b..70344a67374 100644 --- a/packages/@react-spectrum/text/src/Text.tsx +++ b/packages/@react-spectrum/text/src/Text.tsx @@ -10,12 +10,23 @@ * governing permissions and limitations under the License. */ -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {TextProps} from '@react-types/text'; +import React, {forwardRef, ReactNode} from 'react'; import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; +export interface TextProps extends DOMProps, StyleProps { + /** + * Text content. + */ + children: ReactNode, + /** + * A slot to place the text in. + * @default 'text' + */ + slot?: string +} + /** * Text represents text with no specific semantic meaning. */ diff --git a/packages/@react-spectrum/text/src/index.ts b/packages/@react-spectrum/text/src/index.ts index 03b3ef5dc94..21d93a06597 100644 --- a/packages/@react-spectrum/text/src/index.ts +++ b/packages/@react-spectrum/text/src/index.ts @@ -15,4 +15,6 @@ export {Text} from './Text'; export {Heading} from './Heading'; export {Keyboard} from './Keyboard'; -export type {HeadingProps, KeyboardProps, TextProps} from '@react-types/text'; +export type {TextProps} from './Text'; +export type {HeadingProps} from './Heading'; +export type {KeyboardProps} from './Keyboard'; diff --git a/packages/@react-types/text/package.json b/packages/@react-types/text/package.json index 2327568df15..22cb6dec569 100644 --- a/packages/@react-types/text/package.json +++ b/packages/@react-types/text/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/text": "^3.5.23" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/text/src/heading.d.ts b/packages/@react-types/text/src/heading.d.ts deleted file mode 100644 index f146ffcca9e..00000000000 --- a/packages/@react-types/text/src/heading.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface HeadingProps extends DOMProps, StyleProps { - /** - * Heading content. - */ - children: ReactNode, - /** - * A slot to place the heading in. - * @default 'heading' - */ - slot?: string, - /** - * Sets heading level, h1 through h6. - * @default 3 - */ - level?: 1 | 2 | 3 | 4 | 5 | 6 -} diff --git a/packages/@react-types/text/src/index.d.ts b/packages/@react-types/text/src/index.d.ts index 06f14a6d789..b06e3c28065 100644 --- a/packages/@react-types/text/src/index.d.ts +++ b/packages/@react-types/text/src/index.d.ts @@ -10,6 +10,4 @@ * governing permissions and limitations under the License. */ -export * from './heading'; -export * from './keyboard'; -export * from './text'; +export {HeadingProps, TextProps, KeyboardProps} from '@react-spectrum/text'; diff --git a/packages/@react-types/text/src/keyboard.d.ts b/packages/@react-types/text/src/keyboard.d.ts deleted file mode 100644 index 0a4fcd8d5e0..00000000000 --- a/packages/@react-types/text/src/keyboard.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface KeyboardProps extends DOMProps, StyleProps { - /** - * Keyboard shortcut text. - */ - children: ReactNode, - /** - * A slot to place the keyboard shortcut in. - * @default 'keyboard' - */ - slot?: string -} diff --git a/packages/@react-types/text/src/text.d.ts b/packages/@react-types/text/src/text.d.ts deleted file mode 100644 index 98f9da0afc3..00000000000 --- a/packages/@react-types/text/src/text.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface TextProps extends DOMProps, StyleProps { - /** - * Text content. - */ - children: ReactNode, - /** - * A slot to place the text in. - * @default 'text' - */ - slot?: string -} From cc10a9c1a77803a93e843c7220a95bce857589c3 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:13:26 -0500 Subject: [PATCH 39/56] Tooltip --- packages/@react-aria/tooltip/package.json | 1 - packages/@react-aria/tooltip/src/index.ts | 4 +- .../@react-aria/tooltip/src/useTooltip.ts | 9 ++- .../tooltip/src/useTooltipTrigger.ts | 3 +- packages/@react-spectrum/tooltip/package.json | 1 - .../@react-spectrum/tooltip/src/Tooltip.tsx | 27 ++++++- .../tooltip/src/TooltipTrigger.tsx | 21 ++++- packages/@react-spectrum/tooltip/src/index.ts | 3 +- .../stories/TooltipTrigger.stories.tsx | 3 +- packages/@react-stately/tooltip/package.json | 1 - packages/@react-stately/tooltip/src/index.ts | 3 +- .../tooltip/src/useTooltipTriggerState.ts | 34 +++++++- packages/@react-types/tooltip/package.json | 5 +- packages/@react-types/tooltip/src/index.d.ts | 79 +------------------ 14 files changed, 93 insertions(+), 101 deletions(-) diff --git a/packages/@react-aria/tooltip/package.json b/packages/@react-aria/tooltip/package.json index 7008f633cef..6cf17424852 100644 --- a/packages/@react-aria/tooltip/package.json +++ b/packages/@react-aria/tooltip/package.json @@ -30,7 +30,6 @@ "@react-aria/utils": "^3.32.0", "@react-stately/tooltip": "^3.5.9", "@react-types/shared": "^3.32.1", - "@react-types/tooltip": "^3.5.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/tooltip/src/index.ts b/packages/@react-aria/tooltip/src/index.ts index 4c7f8648b21..290c820a43b 100644 --- a/packages/@react-aria/tooltip/src/index.ts +++ b/packages/@react-aria/tooltip/src/index.ts @@ -11,6 +11,6 @@ */ export {useTooltip} from './useTooltip'; export {useTooltipTrigger} from './useTooltipTrigger'; -export type {AriaTooltipProps, TooltipTriggerProps} from '@react-types/tooltip'; -export type {TooltipAria} from './useTooltip'; +export type {TooltipTriggerProps} from '@react-stately/tooltip'; +export type {TooltipProps, AriaTooltipProps, TooltipAria} from './useTooltip'; export type {TooltipTriggerAria} from './useTooltipTrigger'; diff --git a/packages/@react-aria/tooltip/src/useTooltip.ts b/packages/@react-aria/tooltip/src/useTooltip.ts index a900c741503..ccb86e9caad 100644 --- a/packages/@react-aria/tooltip/src/useTooltip.ts +++ b/packages/@react-aria/tooltip/src/useTooltip.ts @@ -10,12 +10,17 @@ * governing permissions and limitations under the License. */ -import {AriaTooltipProps} from '@react-types/tooltip'; -import {DOMAttributes} from '@react-types/shared'; +import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {TooltipTriggerState} from '@react-stately/tooltip'; import {useHover} from '@react-aria/interactions'; +export interface TooltipProps { + isOpen?: boolean +} + +export interface AriaTooltipProps extends TooltipProps, DOMProps, AriaLabelingProps {} + export interface TooltipAria { /** * Props for the tooltip element. diff --git a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts index cacef8ec890..f77186196a8 100644 --- a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts +++ b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts @@ -13,8 +13,7 @@ import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {getInteractionModality, isFocusVisible, useFocusable, useHover} from '@react-aria/interactions'; import {mergeProps, useId} from '@react-aria/utils'; -import {TooltipTriggerProps} from '@react-types/tooltip'; -import {TooltipTriggerState} from '@react-stately/tooltip'; +import {TooltipTriggerProps, TooltipTriggerState} from '@react-stately/tooltip'; import {useEffect, useRef} from 'react'; export interface TooltipTriggerAria { diff --git a/packages/@react-spectrum/tooltip/package.json b/packages/@react-spectrum/tooltip/package.json index b4c6a151519..b57890cc617 100644 --- a/packages/@react-spectrum/tooltip/package.json +++ b/packages/@react-spectrum/tooltip/package.json @@ -49,7 +49,6 @@ "@react-stately/tooltip": "^3.5.9", "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", - "@react-types/tooltip": "^3.5.0", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/tooltip/src/Tooltip.tsx b/packages/@react-spectrum/tooltip/src/Tooltip.tsx index 0dfe754ecff..854fcfd3963 100644 --- a/packages/@react-spectrum/tooltip/src/Tooltip.tsx +++ b/packages/@react-spectrum/tooltip/src/Tooltip.tsx @@ -11,16 +11,35 @@ */ import AlertSmall from '@spectrum-icons/ui/AlertSmall'; +import {AriaTooltipProps, useTooltip} from '@react-aria/tooltip'; import {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMRef, StyleProps} from '@react-types/shared'; import InfoSmall from '@spectrum-icons/ui/InfoSmall'; import {mergeProps} from '@react-aria/utils'; -import React, {useContext, useImperativeHandle, useRef} from 'react'; -import {SpectrumTooltipProps} from '@react-types/tooltip'; +import React, {ReactNode, useContext, useImperativeHandle, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css'; import SuccessSmall from '@spectrum-icons/ui/SuccessSmall'; import {TooltipContext} from './context'; -import {useTooltip} from '@react-aria/tooltip'; + +export interface SpectrumTooltipProps extends AriaTooltipProps, StyleProps { + /** + * The [visual style](https://spectrum.adobe.com/page/tooltip/#Semantic-variants) of the Tooltip. + */ + variant?: 'neutral' | 'positive' | 'negative' | 'info', + + /** + * The placement of the element with respect to its anchor element. + * @default 'top' + */ + placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom', + + /** + * Whether the element is rendered. + */ + showIcon?: boolean, + + children: ReactNode +} let iconMap = { info: InfoSmall, diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx index 9530a2404b0..b211e852859 100644 --- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx +++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx @@ -12,13 +12,28 @@ import {FocusableProvider} from '@react-aria/focus'; import {Overlay} from '@react-spectrum/overlays'; +import {Placement, PositionProps, useOverlayPosition} from '@react-aria/overlays'; import React, {JSX, ReactElement, useRef, useState} from 'react'; -import {SpectrumTooltipTriggerProps} from '@react-types/tooltip'; import {TooltipContext} from './context'; +import {TooltipTriggerProps, useTooltipTriggerState} from '@react-stately/tooltip'; import {useLayoutEffect} from '@react-aria/utils'; -import {useOverlayPosition} from '@react-aria/overlays'; import {useTooltipTrigger} from '@react-aria/tooltip'; -import {useTooltipTriggerState} from '@react-stately/tooltip'; + +export interface SpectrumTooltipTriggerProps extends Omit, PositionProps { + children: [ReactElement, ReactElement], + + /** + * The additional offset applied along the main axis between the element and its + * anchor element. + * @default 7 + */ + offset?: number, + /** + * The placement of the tooltip with respect to the trigger. + * @default 'top' + */ + placement?: Placement +} const DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button const DEFAULT_CROSS_OFFSET = 0; diff --git a/packages/@react-spectrum/tooltip/src/index.ts b/packages/@react-spectrum/tooltip/src/index.ts index 3f569454ed2..8903e8e6d44 100644 --- a/packages/@react-spectrum/tooltip/src/index.ts +++ b/packages/@react-spectrum/tooltip/src/index.ts @@ -14,4 +14,5 @@ export {Tooltip} from './Tooltip'; export {TooltipTrigger} from './TooltipTrigger'; -export type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip'; +export type {SpectrumTooltipProps} from './Tooltip'; +export type {SpectrumTooltipTriggerProps} from './TooltipTrigger'; diff --git a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx index bcbdebd4b56..493ba473fd3 100644 --- a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx +++ b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx @@ -19,8 +19,7 @@ import {Link} from '@react-spectrum/link'; import {Meta, StoryObj} from '@storybook/react'; import React, {useState} from 'react'; import SaveTo from '@spectrum-icons/workflow/SaveTo'; -import {SpectrumTooltipTriggerProps} from '@react-types/tooltip'; -import {Tooltip, TooltipTrigger} from '../src'; +import {SpectrumTooltipTriggerProps, Tooltip, TooltipTrigger} from '../src'; interface TooltipTooltipTriggerProps { variant?: 'neutral' | 'positive' | 'negative' | 'info', diff --git a/packages/@react-stately/tooltip/package.json b/packages/@react-stately/tooltip/package.json index bf8ca0c0a87..6bc4c76421c 100644 --- a/packages/@react-stately/tooltip/package.json +++ b/packages/@react-stately/tooltip/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/overlays": "^3.6.21", - "@react-types/tooltip": "^3.5.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/tooltip/src/index.ts b/packages/@react-stately/tooltip/src/index.ts index ecb6d2438d3..aad22047e7a 100644 --- a/packages/@react-stately/tooltip/src/index.ts +++ b/packages/@react-stately/tooltip/src/index.ts @@ -12,5 +12,4 @@ export {useTooltipTriggerState} from './useTooltipTriggerState'; -export type {TooltipTriggerProps} from '@react-types/tooltip'; -export type {TooltipTriggerState} from './useTooltipTriggerState'; +export type {TooltipTriggerProps, TooltipTriggerState} from './useTooltipTriggerState'; diff --git a/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts b/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts index 32227e8ba60..f3442205724 100644 --- a/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts +++ b/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts @@ -10,9 +10,39 @@ * governing permissions and limitations under the License. */ -import {TooltipTriggerProps} from '@react-types/tooltip'; +import {OverlayTriggerProps, useOverlayTriggerState} from '@react-stately/overlays'; import {useEffect, useMemo, useRef} from 'react'; -import {useOverlayTriggerState} from '@react-stately/overlays'; + +export interface TooltipTriggerProps extends OverlayTriggerProps { + /** + * Whether the tooltip should be disabled, independent from the trigger. + */ + isDisabled?: boolean, + + /** + * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance). + * @default 1500 + */ + delay?: number, + + /** + * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown). + * @default 500 + */ + closeDelay?: number, + + /** + * By default, opens for both focus and hover. Can be made to open only for focus. + * @default 'hover' + */ + trigger?: 'hover' | 'focus', + + /** + * Whether the tooltip should close when the trigger is pressed. + * @default true + */ + shouldCloseOnPress?: boolean +} const TOOLTIP_DELAY = 1500; // this seems to be a 1.5 second delay, check with design const TOOLTIP_COOLDOWN = 500; diff --git a/packages/@react-types/tooltip/package.json b/packages/@react-types/tooltip/package.json index abf80497ea6..ef888eac269 100644 --- a/packages/@react-types/tooltip/package.json +++ b/packages/@react-types/tooltip/package.json @@ -9,8 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/overlays": "^3.9.2", - "@react-types/shared": "^3.32.1" + "@react-aria/tooltip": "^3.9.0", + "@react-spectrum/tooltip": "^3.8.0", + "@react-stately/tooltip": "^3.5.9" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/tooltip/src/index.d.ts b/packages/@react-types/tooltip/src/index.d.ts index 5bac687bbb5..2d8cf3d9b54 100644 --- a/packages/@react-types/tooltip/src/index.d.ts +++ b/packages/@react-types/tooltip/src/index.d.ts @@ -10,79 +10,6 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {OverlayTriggerProps, Placement, PositionProps} from '@react-types/overlays'; -import {ReactElement, ReactNode} from 'react'; - -export interface TooltipTriggerProps extends OverlayTriggerProps { - /** - * Whether the tooltip should be disabled, independent from the trigger. - */ - isDisabled?: boolean, - - /** - * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance). - * @default 1500 - */ - delay?: number, - - /** - * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown). - * @default 500 - */ - closeDelay?: number, - - /** - * By default, opens for both focus and hover. Can be made to open only for focus. - * @default 'hover' - */ - trigger?: 'hover' | 'focus', - - /** - * Whether the tooltip should close when the trigger is pressed. - * @default true - */ - shouldCloseOnPress?: boolean -} - -export interface SpectrumTooltipTriggerProps extends Omit, PositionProps { - children: [ReactElement, ReactElement], - - /** - * The additional offset applied along the main axis between the element and its - * anchor element. - * @default 7 - */ - offset?: number, - /** - * The placement of the tooltip with respect to the trigger. - * @default 'top' - */ - placement?: Placement -} - -export interface TooltipProps { - isOpen?: boolean -} - -export interface AriaTooltipProps extends TooltipProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumTooltipProps extends AriaTooltipProps, StyleProps { - /** - * The [visual style](https://spectrum.adobe.com/page/tooltip/#Semantic-variants) of the Tooltip. - */ - variant?: 'neutral' | 'positive' | 'negative' | 'info', - - /** - * The placement of the element with respect to its anchor element. - * @default 'top' - */ - placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom', - - /** - * Whether the element is rendered. - */ - showIcon?: boolean, - - children: ReactNode -} +export {TooltipTriggerProps} from '@react-stately/tooltip'; +export {TooltipProps, AriaTooltipProps} from '@react-aria/tooltip'; +export {SpectrumTooltipTriggerProps, SpectrumTooltipProps} from '@react-spectrum/tooltip'; From 8db9b33a5fbdf6bdf7d01f5576fef4092e4e7094 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:17:00 -0500 Subject: [PATCH 40/56] View --- packages/@react-spectrum/view/package.json | 1 - packages/@react-spectrum/view/src/Content.tsx | 12 ++++++--- packages/@react-spectrum/view/src/Footer.tsx | 12 ++++++--- packages/@react-spectrum/view/src/Header.tsx | 12 ++++++--- packages/@react-spectrum/view/src/View.tsx | 16 +++++++++--- packages/@react-spectrum/view/src/index.ts | 5 +++- packages/@react-types/view/package.json | 2 +- packages/@react-types/view/src/content.d.ts | 21 ---------------- packages/@react-types/view/src/footer.d.ts | 21 ---------------- packages/@react-types/view/src/header.d.ts | 21 ---------------- packages/@react-types/view/src/index.d.ts | 5 +--- packages/@react-types/view/src/view.d.ts | 25 ------------------- 12 files changed, 46 insertions(+), 107 deletions(-) delete mode 100644 packages/@react-types/view/src/content.d.ts delete mode 100644 packages/@react-types/view/src/footer.d.ts delete mode 100644 packages/@react-types/view/src/header.d.ts delete mode 100644 packages/@react-types/view/src/view.d.ts diff --git a/packages/@react-spectrum/view/package.json b/packages/@react-spectrum/view/package.json index f220b6b175d..bd941079ba3 100644 --- a/packages/@react-spectrum/view/package.json +++ b/packages/@react-spectrum/view/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-types/shared": "^3.32.1", - "@react-types/view": "^3.4.21", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/view/src/Content.tsx b/packages/@react-spectrum/view/src/Content.tsx index 9d3ed55fceb..1cb83a5c4e6 100644 --- a/packages/@react-spectrum/view/src/Content.tsx +++ b/packages/@react-spectrum/view/src/Content.tsx @@ -11,10 +11,16 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {ContentProps} from '@react-types/view'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface ContentProps extends DOMProps, StyleProps { + /** + * Content content. + */ + children: ReactNode +} /** * Content represents the primary content within a Spectrum container. diff --git a/packages/@react-spectrum/view/src/Footer.tsx b/packages/@react-spectrum/view/src/Footer.tsx index 63d44e8d512..263ff225f12 100644 --- a/packages/@react-spectrum/view/src/Footer.tsx +++ b/packages/@react-spectrum/view/src/Footer.tsx @@ -11,10 +11,16 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {FooterProps} from '@react-types/view'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface FooterProps extends DOMProps, StyleProps { + /** + * Footer content. + */ + children: ReactNode +} /** * Footer represents a footer within a Spectrum container. diff --git a/packages/@react-spectrum/view/src/Header.tsx b/packages/@react-spectrum/view/src/Header.tsx index 44e81a150ce..0ebc66210c1 100644 --- a/packages/@react-spectrum/view/src/Header.tsx +++ b/packages/@react-spectrum/view/src/Header.tsx @@ -11,10 +11,16 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; +import {DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import {HeaderProps} from '@react-types/view'; -import React, {forwardRef} from 'react'; +import React, {forwardRef, ReactNode} from 'react'; + +export interface HeaderProps extends DOMProps, StyleProps { + /** + * Header content. + */ + children: ReactNode +} /** * Header represents a header within a Spectrum container. diff --git a/packages/@react-spectrum/view/src/View.tsx b/packages/@react-spectrum/view/src/View.tsx index 4eb6e29ff48..42d1e16c266 100644 --- a/packages/@react-spectrum/view/src/View.tsx +++ b/packages/@react-spectrum/view/src/View.tsx @@ -11,10 +11,20 @@ */ import {ClearSlots, useDOMRef, useSlotProps, useStyleProps, viewStyleProps} from '@react-spectrum/utils'; -import {ColorVersion, DOMRef} from '@react-types/shared'; +import {ColorVersion, DOMProps, DOMRef, ViewStyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef, ReactElement} from 'react'; -import {ViewProps} from '@react-types/view'; +import React, {forwardRef, JSXElementConstructor, ReactElement, ReactNode} from 'react'; + +export interface ViewProps extends ViewStyleProps, DOMProps { + /** + * The element to render as the node. + */ + elementType?: string | JSXElementConstructor, + /** + * Children to be displayed in the View. + */ + children?: ReactNode +} /** * View is a general purpose container with no specific semantics that can be used for custom styling purposes. diff --git a/packages/@react-spectrum/view/src/index.ts b/packages/@react-spectrum/view/src/index.ts index 12061ec668f..621a3f536fa 100644 --- a/packages/@react-spectrum/view/src/index.ts +++ b/packages/@react-spectrum/view/src/index.ts @@ -14,4 +14,7 @@ export {View} from './View'; export {Content} from './Content'; export {Footer} from './Footer'; export {Header} from './Header'; -export type {ContentProps, FooterProps, HeaderProps, ViewProps} from '@react-types/view'; +export type {ViewProps} from './View'; +export type {ContentProps} from './Content'; +export type {FooterProps} from './Footer'; +export type {HeaderProps} from './Header'; diff --git a/packages/@react-types/view/package.json b/packages/@react-types/view/package.json index dfe0cc25aed..8b2765d5ef1 100644 --- a/packages/@react-types/view/package.json +++ b/packages/@react-types/view/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/view": "^3.6.24" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/view/src/content.d.ts b/packages/@react-types/view/src/content.d.ts deleted file mode 100644 index 3ba4aca7341..00000000000 --- a/packages/@react-types/view/src/content.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface ContentProps extends DOMProps, StyleProps { - /** - * Content content. - */ - children: ReactNode -} diff --git a/packages/@react-types/view/src/footer.d.ts b/packages/@react-types/view/src/footer.d.ts deleted file mode 100644 index 3c4b2188943..00000000000 --- a/packages/@react-types/view/src/footer.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface FooterProps extends DOMProps, StyleProps { - /** - * Footer content. - */ - children: ReactNode -} diff --git a/packages/@react-types/view/src/header.d.ts b/packages/@react-types/view/src/header.d.ts deleted file mode 100644 index a8a18cf1bb7..00000000000 --- a/packages/@react-types/view/src/header.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface HeaderProps extends DOMProps, StyleProps { - /** - * Header content. - */ - children: ReactNode -} diff --git a/packages/@react-types/view/src/index.d.ts b/packages/@react-types/view/src/index.d.ts index e95edfc771d..17e72598e4c 100644 --- a/packages/@react-types/view/src/index.d.ts +++ b/packages/@react-types/view/src/index.d.ts @@ -10,7 +10,4 @@ * governing permissions and limitations under the License. */ -export * from './content'; -export * from './header'; -export * from './footer'; -export * from './view'; +export {ContentProps, FooterProps, HeaderProps, ViewProps} from '@react-spectrum/view'; diff --git a/packages/@react-types/view/src/view.d.ts b/packages/@react-types/view/src/view.d.ts deleted file mode 100644 index ce74dfdd66b..00000000000 --- a/packages/@react-types/view/src/view.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import {ColorVersion, DOMProps, ViewStyleProps} from '@react-types/shared'; -import {JSXElementConstructor, ReactNode} from 'react'; - -export interface ViewProps extends ViewStyleProps, DOMProps { - /** - * The element to render as the node. - */ - elementType?: string | JSXElementConstructor, - /** - * Children to be displayed in the View. - */ - children?: ReactNode -} From b10be633dd49a9f038c4050b054cee0ffd2f8211 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:18:27 -0500 Subject: [PATCH 41/56] Well --- .../well/chromatic/Well.stories.tsx | 3 +-- packages/@react-spectrum/well/package.json | 1 - packages/@react-spectrum/well/src/Well.tsx | 18 +++++++++++++++--- packages/@react-spectrum/well/src/index.ts | 2 +- packages/@react-types/well/package.json | 2 +- packages/@react-types/well/src/index.d.ts | 16 +--------------- 6 files changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/@react-spectrum/well/chromatic/Well.stories.tsx b/packages/@react-spectrum/well/chromatic/Well.stories.tsx index 2c52bc55579..14c84f51449 100644 --- a/packages/@react-spectrum/well/chromatic/Well.stories.tsx +++ b/packages/@react-spectrum/well/chromatic/Well.stories.tsx @@ -12,8 +12,7 @@ import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumWellProps} from '@react-types/well'; -import {Well} from '../'; +import {SpectrumWellProps, Well} from '../'; const meta: Meta = { title: 'Well', diff --git a/packages/@react-spectrum/well/package.json b/packages/@react-spectrum/well/package.json index 0592c0ae514..48ad590b9c4 100644 --- a/packages/@react-spectrum/well/package.json +++ b/packages/@react-spectrum/well/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-types/shared": "^3.32.1", - "@react-types/well": "^3.3.21", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/well/src/Well.tsx b/packages/@react-spectrum/well/src/Well.tsx index 63159c60206..932fdc095bd 100644 --- a/packages/@react-spectrum/well/src/Well.tsx +++ b/packages/@react-spectrum/well/src/Well.tsx @@ -10,13 +10,25 @@ * governing permissions and limitations under the License. */ +import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; -import {DOMRef} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; -import React, {forwardRef} from 'react'; -import {SpectrumWellProps} from '@react-types/well'; +import React, {forwardRef, ReactNode} from 'react'; import styles from '@adobe/spectrum-css-temp/components/well/vars.css'; +export interface SpectrumWellProps extends DOMProps, AriaLabelingProps, StyleProps { + /** + * The contents of the Well. + */ + children: ReactNode, + /** + * An accessibility role for the well. Use `'region'` when the contents of the well + * is important enough to be included in the page table of contents, and `'group'` otherwise. + * If a role is provided, then an aria-label or aria-labelledby must also be provided. + */ + role?: 'region' | 'group' +} + /** * A Well is a content container that displays non-editable content separate from other content on the screen. * Often this is used to display preformatted text, such as code/markup examples on a documentation page. diff --git a/packages/@react-spectrum/well/src/index.ts b/packages/@react-spectrum/well/src/index.ts index febb9015bf6..27eadb1e788 100644 --- a/packages/@react-spectrum/well/src/index.ts +++ b/packages/@react-spectrum/well/src/index.ts @@ -11,4 +11,4 @@ */ /// export {Well} from './Well'; -export type {SpectrumWellProps} from '@react-types/well'; +export type {SpectrumWellProps} from './Well'; diff --git a/packages/@react-types/well/package.json b/packages/@react-types/well/package.json index 19a04889698..631e6dde57d 100644 --- a/packages/@react-types/well/package.json +++ b/packages/@react-types/well/package.json @@ -9,7 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/shared": "^3.32.1" + "@react-spectrum/well": "^3.4.28" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" diff --git a/packages/@react-types/well/src/index.d.ts b/packages/@react-types/well/src/index.d.ts index 3b65ed36b87..df040f47326 100644 --- a/packages/@react-types/well/src/index.d.ts +++ b/packages/@react-types/well/src/index.d.ts @@ -10,18 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export interface SpectrumWellProps extends DOMProps, AriaLabelingProps, StyleProps { - /** - * The contents of the Well. - */ - children: ReactNode, - /** - * An accessibility role for the well. Use `'region'` when the contents of the well - * is important enough to be included in the page table of contents, and `'group'` otherwise. - * If a role is provided, then an aria-label or aria-labelledby must also be provided. - */ - role?: 'region' | 'group' -} +export {SpectrumWellProps} from '@react-spectrum/well'; From 5807b6d8d86ff1a3c4898d9df6fa044da9566fc3 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:31:44 -0500 Subject: [PATCH 42/56] Update remaining dependencies --- packages/@react-aria/button/stories/useButton.stories.tsx | 3 +-- .../@react-aria/checkbox/test/useCheckboxGroup.test.tsx | 3 +-- packages/@react-aria/combobox/package.json | 1 + packages/@react-aria/combobox/src/useComboBox.ts | 2 +- packages/@react-aria/datepicker/package.json | 2 ++ packages/@react-aria/datepicker/src/useDateRangePicker.ts | 2 +- packages/@react-aria/disclosure/package.json | 1 + packages/@react-aria/disclosure/src/useDisclosure.ts | 2 +- packages/@react-aria/dnd/package.json | 1 + packages/@react-aria/dnd/src/useDrag.ts | 2 +- packages/@react-aria/dnd/src/useDraggableItem.ts | 2 +- packages/@react-aria/dnd/src/useDrop.ts | 2 +- packages/@react-aria/dnd/src/useVirtualDrop.ts | 2 +- packages/@react-aria/grid/package.json | 1 + packages/@react-aria/grid/src/useGridSelectionCheckbox.ts | 2 +- .../@react-aria/interactions/stories/useHover.stories.tsx | 3 +-- packages/@react-aria/menu/package.json | 1 + packages/@react-aria/menu/src/useMenuTrigger.ts | 2 +- packages/@react-aria/numberfield/package.json | 1 + packages/@react-aria/numberfield/src/useNumberField.ts | 2 +- packages/@react-aria/overlays/package.json | 1 + packages/@react-aria/overlays/src/useOverlayTrigger.ts | 2 +- packages/@react-aria/select/package.json | 1 + packages/@react-aria/select/src/useSelect.ts | 2 +- packages/@react-aria/slider/stories/StoryMultiSlider.tsx | 3 +-- packages/@react-aria/slider/stories/StoryRangeSlider.tsx | 3 +-- packages/@react-aria/slider/stories/StorySlider.tsx | 3 +-- packages/@react-aria/spinbutton/package.json | 1 + packages/@react-aria/spinbutton/src/useSpinButton.ts | 2 +- packages/@react-aria/table/package.json | 1 + .../@react-aria/table/src/useTableSelectionCheckbox.ts | 2 +- packages/@react-aria/tag/package.json | 1 + packages/@react-aria/tag/src/useTag.ts | 2 +- packages/@react-aria/toast/package.json | 1 + packages/@react-aria/toast/src/useToast.ts | 2 +- packages/@react-aria/tree/package.json | 1 + packages/@react-aria/tree/src/useTreeItem.ts | 2 +- .../autocomplete/chromatic/SearchAutocomplete.stories.tsx | 3 +-- .../@react-spectrum/badge/chromatic/Badge.stories.tsx | 3 +-- packages/@react-spectrum/breadcrumbs/package.json | 1 + .../@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx | 3 +-- .../@react-spectrum/button/stories/Button.stories.tsx | 3 +-- packages/@react-spectrum/calendar/package.json | 1 + packages/@react-spectrum/calendar/src/CalendarMonth.tsx | 3 +-- .../@react-spectrum/calendar/stories/Calendar.stories.tsx | 2 +- .../calendar/stories/RangeCalendar.stories.tsx | 2 +- packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx | 2 +- .../checkbox/stories/CheckboxGroup.stories.tsx | 3 +-- .../combobox/chromatic/ComboBox.stories.tsx | 3 +-- .../datepicker/stories/DatePicker.stories.tsx | 2 +- .../datepicker/stories/DateRangePicker.stories.tsx | 2 +- .../@react-spectrum/label/stories/HelpText.stories.tsx | 3 +-- packages/@react-spectrum/link/chromatic/Link.stories.tsx | 3 +-- packages/@react-spectrum/link/stories/Link.stories.tsx | 3 +-- packages/@react-spectrum/numberfield/src/NumberField.tsx | 2 +- packages/@react-spectrum/numberfield/src/StepButton.tsx | 3 +-- packages/@react-spectrum/s2/package.json | 1 + packages/@react-spectrum/s2/src/ColorField.tsx | 2 +- packages/@react-spectrum/s2/src/ComboBox.tsx | 2 +- packages/@react-spectrum/s2/src/NumberField.tsx | 2 +- packages/@react-spectrum/s2/src/SearchField.tsx | 2 +- packages/@react-spectrum/s2/src/TextField.tsx | 8 ++++++-- packages/@react-spectrum/s2/src/index.ts | 2 +- .../slider/chromatic/RangeSlider.stories.tsx | 3 +-- .../@react-spectrum/slider/chromatic/Slider.stories.tsx | 3 +-- .../slider/stories/RangeSlider.stories.tsx | 3 +-- .../@react-spectrum/slider/stories/Slider.stories.tsx | 3 +-- packages/@react-stately/calendar/src/utils.ts | 2 +- packages/@react-types/datepicker/package.json | 2 ++ packages/@react-types/datepicker/src/index.d.ts | 4 ++-- packages/dev/s2-docs/pages/s2/home/Mobile.tsx | 3 +-- packages/dev/s2-docs/src/SearchMenu.tsx | 3 +-- .../react-aria-components/test/RangeCalendar.test.tsx | 2 +- 73 files changed, 81 insertions(+), 80 deletions(-) diff --git a/packages/@react-aria/button/stories/useButton.stories.tsx b/packages/@react-aria/button/stories/useButton.stories.tsx index e5bdb154f4f..fae53d3229f 100644 --- a/packages/@react-aria/button/stories/useButton.stories.tsx +++ b/packages/@react-aria/button/stories/useButton.stories.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '../'; import React, {JSX, useRef} from 'react'; import {StoryObj} from '@storybook/react'; -import {useButton} from '../'; export default { title: 'useButton' diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx index 7d904b87cab..c09e04f901f 100644 --- a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx +++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx @@ -10,11 +10,10 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps} from '@react-types/checkbox'; +import {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, useCheckboxGroup, useCheckboxGroupItem} from '../'; import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox'; import {pointerMap, render} from '@react-spectrum/test-utils-internal'; import React, {useRef} from 'react'; -import {useCheckboxGroup, useCheckboxGroupItem} from '../'; import userEvent from '@testing-library/user-event'; function Checkbox({checkboxGroupState, ...props}: AriaCheckboxGroupItemProps & { checkboxGroupState: CheckboxGroupState }) { diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json index ce25331a3f6..7d836a1445f 100644 --- a/packages/@react-aria/combobox/package.json +++ b/packages/@react-aria/combobox/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/focus": "^3.21.3", "@react-aria/i18n": "^3.12.14", "@react-aria/listbox": "^3.15.1", diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts index 5e2ca62a7da..7a1a3ce65cd 100644 --- a/packages/@react-aria/combobox/src/useComboBox.ts +++ b/packages/@react-aria/combobox/src/useComboBox.ts @@ -11,7 +11,7 @@ */ import {announce} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {ariaHideOutside} from '@react-aria/overlays'; import {AriaLabelingProps, BaseEvent, DOMAttributes, DOMProps, InputDOMProps, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox'; diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json index 7087296bfbc..2f2e2eab774 100644 --- a/packages/@react-aria/datepicker/package.json +++ b/packages/@react-aria/datepicker/package.json @@ -30,6 +30,7 @@ "@internationalized/number": "^3.6.5", "@internationalized/string": "^3.2.7", "@react-aria/button": "^3.14.3", + "@react-aria/calendar": "^3.9.3", "@react-aria/dialog": "^3.5.32", "@react-aria/focus": "^3.21.3", "@react-aria/form": "^3.1.3", @@ -38,6 +39,7 @@ "@react-aria/label": "^3.7.23", "@react-aria/spinbutton": "^3.7.0", "@react-aria/utils": "^3.32.0", + "@react-stately/calendar": "^3.9.1", "@react-stately/datepicker": "^3.15.3", "@react-stately/form": "^3.2.2", "@react-types/button": "^3.14.1", diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts index 1b6483de79d..826b8ccd381 100644 --- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts +++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts @@ -14,7 +14,7 @@ import {AriaButtonProps} from '@react-aria/button'; import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker'; import {AriaDialogProps} from '@react-aria/dialog'; import {createFocusManager} from '@react-aria/focus'; -import {DateRange, RangeCalendarProps} from '@react-types/calendar'; +import {DateRange, RangeCalendarProps} from '@react-stately/calendar'; import {DateRangePickerState} from '@react-stately/datepicker'; import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form'; import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; diff --git a/packages/@react-aria/disclosure/package.json b/packages/@react-aria/disclosure/package.json index 1b61d315a74..bc4e537f243 100644 --- a/packages/@react-aria/disclosure/package.json +++ b/packages/@react-aria/disclosure/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.32.0", "@react-stately/disclosure": "^3.0.9", diff --git a/packages/@react-aria/disclosure/src/useDisclosure.ts b/packages/@react-aria/disclosure/src/useDisclosure.ts index 34b254afce6..207390926d7 100644 --- a/packages/@react-aria/disclosure/src/useDisclosure.ts +++ b/packages/@react-aria/disclosure/src/useDisclosure.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DisclosureState} from '@react-stately/disclosure'; import {flushSync} from 'react-dom'; import {HTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react'; diff --git a/packages/@react-aria/dnd/package.json b/packages/@react-aria/dnd/package.json index 316f9afbd30..5b5f886305a 100644 --- a/packages/@react-aria/dnd/package.json +++ b/packages/@react-aria/dnd/package.json @@ -27,6 +27,7 @@ }, "dependencies": { "@internationalized/string": "^3.2.7", + "@react-aria/button": "^3.14.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", "@react-aria/live-announcer": "^3.4.4", diff --git a/packages/@react-aria/dnd/src/useDrag.ts b/packages/@react-aria/dnd/src/useDrag.ts index 6cfbb9be7b1..346ec88ccd6 100644 --- a/packages/@react-aria/dnd/src/useDrag.ts +++ b/packages/@react-aria/dnd/src/useDrag.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent, RefObject} from '@react-types/shared'; import {DragEvent, HTMLAttributes, version as ReactVersion, useEffect, useRef, useState} from 'react'; import * as DragManager from './DragManager'; diff --git a/packages/@react-aria/dnd/src/useDraggableItem.ts b/packages/@react-aria/dnd/src/useDraggableItem.ts index 6d5781ddeaa..a783a555da0 100644 --- a/packages/@react-aria/dnd/src/useDraggableItem.ts +++ b/packages/@react-aria/dnd/src/useDraggableItem.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {clearGlobalDnDState, isInternalDropOperation, setDraggingKeys, useDragModality} from './utils'; import {DraggableCollectionState} from '@react-stately/dnd'; import {HTMLAttributes} from 'react'; diff --git a/packages/@react-aria/dnd/src/useDrop.ts b/packages/@react-aria/dnd/src/useDrop.ts index 31b2204546b..99e16043da9 100644 --- a/packages/@react-aria/dnd/src/useDrop.ts +++ b/packages/@react-aria/dnd/src/useDrop.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, FocusableElement, DragTypes as IDragTypes, RefObject} from '@react-types/shared'; import {DragEvent, useRef, useState} from 'react'; import * as DragManager from './DragManager'; diff --git a/packages/@react-aria/dnd/src/useVirtualDrop.ts b/packages/@react-aria/dnd/src/useVirtualDrop.ts index b74897d3cba..2d109de049e 100644 --- a/packages/@react-aria/dnd/src/useVirtualDrop.ts +++ b/packages/@react-aria/dnd/src/useVirtualDrop.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes} from 'react'; import * as DragManager from './DragManager'; // @ts-ignore diff --git a/packages/@react-aria/grid/package.json b/packages/@react-aria/grid/package.json index acdf7cd1023..6ce480ec7eb 100644 --- a/packages/@react-aria/grid/package.json +++ b/packages/@react-aria/grid/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/checkbox": "^3.16.3", "@react-aria/focus": "^3.21.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", diff --git a/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts b/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts index 2d8e8d5f7a0..21e73a33f2a 100644 --- a/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts +++ b/packages/@react-aria/grid/src/useGridSelectionCheckbox.ts @@ -1,4 +1,4 @@ -import {AriaCheckboxProps} from '@react-types/checkbox'; +import {AriaCheckboxProps} from '@react-aria/checkbox'; import {IGridCollection as GridCollection, GridState} from '@react-stately/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-aria/interactions/stories/useHover.stories.tsx b/packages/@react-aria/interactions/stories/useHover.stories.tsx index 471850b1d0d..f87122193d4 100644 --- a/packages/@react-aria/interactions/stories/useHover.stories.tsx +++ b/packages/@react-aria/interactions/stories/useHover.stories.tsx @@ -9,12 +9,11 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import {classNames} from '@react-spectrum/utils'; import {mergeProps} from '@react-aria/utils'; import React, {JSX, useRef, useState} from 'react'; import {StoryObj} from '@storybook/react'; -import {useButton} from '@react-aria/button'; import {useHover} from '../'; export default { diff --git a/packages/@react-aria/menu/package.json b/packages/@react-aria/menu/package.json index e59466ac4af..96936b25e1c 100644 --- a/packages/@react-aria/menu/package.json +++ b/packages/@react-aria/menu/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/focus": "^3.21.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", diff --git a/packages/@react-aria/menu/src/useMenuTrigger.ts b/packages/@react-aria/menu/src/useMenuTrigger.ts index d36dd4c30c4..c2ac3b1a573 100644 --- a/packages/@react-aria/menu/src/useMenuTrigger.ts +++ b/packages/@react-aria/menu/src/useMenuTrigger.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaMenuOptions} from './useMenu'; import {FocusableElement, RefObject} from '@react-types/shared'; import {focusWithoutScrolling, useId} from '@react-aria/utils'; diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json index e96b20165d4..d55be5d38ca 100644 --- a/packages/@react-aria/numberfield/package.json +++ b/packages/@react-aria/numberfield/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", "@react-aria/spinbutton": "^3.7.0", diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts index 65e61f73378..597ff4fa859 100644 --- a/packages/@react-aria/numberfield/src/useNumberField.ts +++ b/packages/@react-aria/numberfield/src/useNumberField.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, TextInputDOMEvents, TextInputDOMProps, ValidationResult} from '@react-types/shared'; import {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils'; import { diff --git a/packages/@react-aria/overlays/package.json b/packages/@react-aria/overlays/package.json index f1a7c48aa5e..2a6e458c408 100644 --- a/packages/@react-aria/overlays/package.json +++ b/packages/@react-aria/overlays/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/focus": "^3.21.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", diff --git a/packages/@react-aria/overlays/src/useOverlayTrigger.ts b/packages/@react-aria/overlays/src/useOverlayTrigger.ts index 0608b368470..ce0d515213a 100644 --- a/packages/@react-aria/overlays/src/useOverlayTrigger.ts +++ b/packages/@react-aria/overlays/src/useOverlayTrigger.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMProps, RefObject} from '@react-types/shared'; import {onCloseMap} from './useCloseOnScroll'; import {OverlayTriggerState} from '@react-stately/overlays'; diff --git a/packages/@react-aria/select/package.json b/packages/@react-aria/select/package.json index a068c69a657..8a13f316201 100644 --- a/packages/@react-aria/select/package.json +++ b/packages/@react-aria/select/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/form": "^3.1.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts index 196345f10ab..0e76ebd6b0f 100644 --- a/packages/@react-aria/select/src/useSelect.ts +++ b/packages/@react-aria/select/src/useSelect.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableDOMProps, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared'; import {AriaListBoxOptions} from '@react-aria/listbox'; import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils'; diff --git a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx index f925c5aadfc..88cf54dcc55 100644 --- a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx @@ -13,8 +13,7 @@ import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; -import {SliderProps, SliderThumbProps} from '@react-types/slider'; -import {SliderState, useSliderState} from '@react-stately/slider'; +import {SliderProps, SliderState, SliderThumbProps, useSliderState} from '@react-stately/slider'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; import {useSlider, useSliderThumb} from '@react-aria/slider'; diff --git a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx index 1e4e3c0ef5a..f1a30a58f0f 100644 --- a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx @@ -1,10 +1,9 @@ -import {AriaSliderProps} from '@react-types/slider'; +import {AriaSliderProps, useSliderState} from '@react-stately/slider'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; import {useSlider, useSliderThumb} from '@react-aria/slider'; -import {useSliderState} from '@react-stately/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/slider/stories/StorySlider.tsx b/packages/@react-aria/slider/stories/StorySlider.tsx index 0884247501c..dfdce22de19 100644 --- a/packages/@react-aria/slider/stories/StorySlider.tsx +++ b/packages/@react-aria/slider/stories/StorySlider.tsx @@ -10,13 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaSliderProps} from '@react-types/slider'; +import {AriaSliderProps, useSliderState} from '@react-stately/slider'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; import {useSlider, useSliderThumb} from '@react-aria/slider'; -import {useSliderState} from '@react-stately/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; interface StorySliderProps extends AriaSliderProps { diff --git a/packages/@react-aria/spinbutton/package.json b/packages/@react-aria/spinbutton/package.json index 75cee01a0ac..cdc785698cf 100644 --- a/packages/@react-aria/spinbutton/package.json +++ b/packages/@react-aria/spinbutton/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/i18n": "^3.12.14", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.32.0", diff --git a/packages/@react-aria/spinbutton/src/useSpinButton.ts b/packages/@react-aria/spinbutton/src/useSpinButton.ts index 1bca57bc77b..3eecfcdcc8b 100644 --- a/packages/@react-aria/spinbutton/src/useSpinButton.ts +++ b/packages/@react-aria/spinbutton/src/useSpinButton.ts @@ -11,7 +11,7 @@ */ import {announce, clearAnnouncer} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes, InputBase, RangeInputBase, Validation, ValueBase} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-aria/table/package.json b/packages/@react-aria/table/package.json index 39daeae3ec3..2067509e41b 100644 --- a/packages/@react-aria/table/package.json +++ b/packages/@react-aria/table/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/checkbox": "^3.16.3", "@react-aria/focus": "^3.21.3", "@react-aria/grid": "^3.14.6", "@react-aria/i18n": "^3.12.14", diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts index d9cd021532a..cabc1bec042 100644 --- a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts +++ b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaCheckboxProps} from '@react-types/checkbox'; +import {AriaCheckboxProps} from '@react-aria/checkbox'; import {getRowLabelledBy} from './utils'; // @ts-ignore import intlMessages from '../intl/*.json'; diff --git a/packages/@react-aria/tag/package.json b/packages/@react-aria/tag/package.json index dea80584cf5..5799360073c 100644 --- a/packages/@react-aria/tag/package.json +++ b/packages/@react-aria/tag/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/gridlist": "^3.14.2", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index 9a084031ff6..9297ef07076 100644 --- a/packages/@react-aria/tag/src/useTag.ts +++ b/packages/@react-aria/tag/src/useTag.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared'; import {filterDOMProps, mergeProps, useDescription, useId, useSyntheticLinkProps} from '@react-aria/utils'; import {hookData} from './useTagGroup'; diff --git a/packages/@react-aria/toast/package.json b/packages/@react-aria/toast/package.json index 33d70ae2c8d..1df53f4d94c 100644 --- a/packages/@react-aria/toast/package.json +++ b/packages/@react-aria/toast/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/i18n": "^3.12.14", "@react-aria/interactions": "^3.26.0", "@react-aria/landmark": "^3.0.8", diff --git a/packages/@react-aria/toast/src/useToast.ts b/packages/@react-aria/toast/src/useToast.ts index 33c408606db..13d468fa3f8 100644 --- a/packages/@react-aria/toast/src/useToast.ts +++ b/packages/@react-aria/toast/src/useToast.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared'; import {filterDOMProps, useId, useLayoutEffect, useSlotId} from '@react-aria/utils'; // @ts-ignore diff --git a/packages/@react-aria/tree/package.json b/packages/@react-aria/tree/package.json index d7b88985e94..d7eb0f5fedf 100644 --- a/packages/@react-aria/tree/package.json +++ b/packages/@react-aria/tree/package.json @@ -26,6 +26,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-aria/button": "^3.14.3", "@react-aria/gridlist": "^3.14.2", "@react-aria/i18n": "^3.12.14", "@react-aria/selection": "^3.27.0", diff --git a/packages/@react-aria/tree/src/useTreeItem.ts b/packages/@react-aria/tree/src/useTreeItem.ts index f16c2d8b43c..a28c5e2b910 100644 --- a/packages/@react-aria/tree/src/useTreeItem.ts +++ b/packages/@react-aria/tree/src/useTreeItem.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaGridListItemOptions, GridListItemAria, useGridListItem} from '@react-aria/gridlist'; import {DOMAttributes, FocusableElement, Node, RefObject} from '@react-types/shared'; // @ts-ignore diff --git a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx index 32ae901e755..a981b098632 100644 --- a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx +++ b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx @@ -13,10 +13,9 @@ import Filter from '@spectrum-icons/workflow/Filter'; import {generatePowerset} from '@react-spectrum/story-utils'; import {Grid, repeat} from '@react-spectrum/layout'; -import {Item, SearchAutocomplete} from '../'; +import {Item, SearchAutocomplete, SpectrumSearchAutocompleteProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete'; // Skipping focus styles because don't have a way of applying it via classnames // No controlled open state also means no menu diff --git a/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx b/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx index e03d1f24782..6add660b202 100644 --- a/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx +++ b/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx @@ -10,12 +10,11 @@ * governing permissions and limitations under the License. */ -import {Badge} from '../'; +import {Badge, SpectrumBadgeProps} from '../'; import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle'; import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumBadgeProps} from '@react-types/badge'; import {Text} from '@react-spectrum/text'; let variants: SpectrumBadgeProps['variant'][] = diff --git a/packages/@react-spectrum/breadcrumbs/package.json b/packages/@react-spectrum/breadcrumbs/package.json index 589adc90f46..f35af51aeb6 100644 --- a/packages/@react-spectrum/breadcrumbs/package.json +++ b/packages/@react-spectrum/breadcrumbs/package.json @@ -49,6 +49,7 @@ "@react-spectrum/menu": "^3.22.9", "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", + "@react-types/breadcrumbs": "^3.7.17", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx b/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx index 371895042e8..a47df98f5cc 100644 --- a/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx +++ b/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ -import {BreadcrumbItemProps} from '@react-types/breadcrumbs'; +import {BreadcrumbItemProps, useBreadcrumbItem} from '@react-aria/breadcrumbs'; import ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall'; import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import {mergeProps} from '@react-aria/utils'; import React, {Fragment, JSX, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css'; -import {useBreadcrumbItem} from '@react-aria/breadcrumbs'; import {useHover} from '@react-aria/interactions'; import {useLocale} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx index f78b53c236e..df9d33cafb3 100644 --- a/packages/@react-spectrum/button/stories/Button.stories.tsx +++ b/packages/@react-spectrum/button/stories/Button.stories.tsx @@ -13,12 +13,11 @@ import {action} from '@storybook/addon-actions'; import {BackgroundColorValue} from '@react-types/shared'; import Bell from '@spectrum-icons/workflow/Bell'; -import {Button} from '../'; +import {Button, SpectrumButtonProps} from '../'; import {Flex} from '@react-spectrum/layout'; import {Form} from '@react-spectrum/form'; import {Meta, StoryObj} from '@storybook/react'; import React, {ElementType, useState} from 'react'; -import {SpectrumButtonProps} from '@react-types/button'; import {Text} from '@react-spectrum/text'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; import {View} from '@react-spectrum/view'; diff --git a/packages/@react-spectrum/calendar/package.json b/packages/@react-spectrum/calendar/package.json index 771882ea0b0..8112e174c12 100644 --- a/packages/@react-spectrum/calendar/package.json +++ b/packages/@react-spectrum/calendar/package.json @@ -52,6 +52,7 @@ "@react-spectrum/label": "^3.16.20", "@react-spectrum/utils": "^3.12.10", "@react-stately/calendar": "^3.9.1", + "@react-types/calendar": "^3.8.1", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/calendar/src/CalendarMonth.tsx b/packages/@react-spectrum/calendar/src/CalendarMonth.tsx index c8e03affda5..5efcbd85150 100644 --- a/packages/@react-spectrum/calendar/src/CalendarMonth.tsx +++ b/packages/@react-spectrum/calendar/src/CalendarMonth.tsx @@ -12,8 +12,7 @@ import {CalendarCell} from './CalendarCell'; import {CalendarDate, endOfMonth} from '@internationalized/date'; -import {CalendarPropsBase} from '@react-types/calendar'; -import {CalendarState, RangeCalendarState} from '@react-stately/calendar'; +import {CalendarPropsBase, CalendarState, RangeCalendarState} from '@react-stately/calendar'; import {classNames} from '@react-spectrum/utils'; import {DOMProps, StyleProps} from '@react-types/shared'; import React, {JSX} from 'react'; diff --git a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx index 341afa93dda..2a03d839aab 100644 --- a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx +++ b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx @@ -14,7 +14,7 @@ import {ActionButton} from '@react-spectrum/button'; import {Calendar} from '../'; import {CalendarDate, CalendarDateTime, getLocalTimeZone, parseZonedDateTime, today, ZonedDateTime} from '@internationalized/date'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Item, Picker, Section} from '@react-spectrum/picker'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx index 80c54f6553e..ed3c28f29a3 100644 --- a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx +++ b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx @@ -13,7 +13,7 @@ import {action} from '@storybook/addon-actions'; import {CalendarDate, CalendarDateTime, getLocalTimeZone, isWeekend, parseZonedDateTime, today} from '@internationalized/date'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import {RangeCalendar} from '../'; diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx index b3a2229ad02..287d6cf5d80 100644 --- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx @@ -17,7 +17,7 @@ import {DOMRef, Orientation, SpectrumHelpTextProps, SpectrumLabelableProps, Styl import {Field} from '@react-spectrum/label'; import {Provider, useProviderProps} from '@react-spectrum/provider'; import React, {ReactElement} from 'react'; -import {SpectrumCheckboxProps} from '@react-types/checkbox'; +import {SpectrumCheckboxProps} from './Checkbox'; import styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css'; import {useCheckboxGroupState} from '@react-stately/checkbox'; import {useFormProps} from '@react-spectrum/form'; diff --git a/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx index 9b0e77a950d..ccbb3b380d4 100644 --- a/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx +++ b/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx @@ -11,11 +11,10 @@ */ import {action} from '@storybook/addon-actions'; -import {Checkbox, CheckboxGroup} from '../'; +import {Checkbox, CheckboxGroup, SpectrumCheckboxGroupProps} from '../'; import {Content, ContextualHelp, Flex, Heading} from '@adobe/react-spectrum'; import {Meta, StoryObj} from '@storybook/react'; import React, {useState} from 'react'; -import {SpectrumCheckboxGroupProps} from '@react-types/checkbox'; export type CheckboxGroupStory = StoryObj; diff --git a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx index 52e2e33b95a..5e5ebe00201 100644 --- a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ComboBox, Item} from '../'; +import {ComboBox, Item, SpectrumComboBoxProps} from '../'; import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {generatePowerset} from '@react-spectrum/story-utils'; @@ -18,7 +18,6 @@ import {Grid, repeat} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX} from 'react'; -import {SpectrumComboBoxProps} from '@react-types/combobox'; // Skipping focus styles because don't have a way of applying it via classnames // No controlled open state also means no menu diff --git a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx index 8bbf74979de..e36dbdf1c29 100644 --- a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx +++ b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx @@ -18,7 +18,7 @@ import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; import {DatePicker} from '../'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Item, Picker, Section} from '@react-spectrum/picker'; diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx index e89d49ea9be..365e6d1477d 100644 --- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx +++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx @@ -17,7 +17,7 @@ import {chain} from '@react-aria/utils'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; import {DateRange} from '@react-types/datepicker'; import {DateRangePicker} from '../'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; import {Item, Picker, Section} from '@react-spectrum/picker'; import {Key} from '@react-types/shared'; diff --git a/packages/@react-spectrum/label/stories/HelpText.stories.tsx b/packages/@react-spectrum/label/stories/HelpText.stories.tsx index 91d733168e6..fd07e94fd4a 100644 --- a/packages/@react-spectrum/label/stories/HelpText.stories.tsx +++ b/packages/@react-spectrum/label/stories/HelpText.stories.tsx @@ -13,8 +13,7 @@ import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {useState} from 'react'; -import {SpectrumTextFieldProps} from '@react-types/textfield'; -import {TextField} from '@react-spectrum/textfield'; +import {SpectrumTextFieldProps, TextField} from '@react-spectrum/textfield'; const argTypes = { label: { diff --git a/packages/@react-spectrum/link/chromatic/Link.stories.tsx b/packages/@react-spectrum/link/chromatic/Link.stories.tsx index b6f1b19bb7e..27440ed3539 100644 --- a/packages/@react-spectrum/link/chromatic/Link.stories.tsx +++ b/packages/@react-spectrum/link/chromatic/Link.stories.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {Link} from '../'; +import {Link, SpectrumLinkProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {SpectrumLinkProps} from '@react-types/link'; const meta: Meta = { title: 'Link', diff --git a/packages/@react-spectrum/link/stories/Link.stories.tsx b/packages/@react-spectrum/link/stories/Link.stories.tsx index fed2ee539bd..b2278ebb02f 100644 --- a/packages/@react-spectrum/link/stories/Link.stories.tsx +++ b/packages/@react-spectrum/link/stories/Link.stories.tsx @@ -11,9 +11,8 @@ */ import {ArgTypes, Meta, StoryObj} from '@storybook/react'; -import {Link} from '../'; +import {Link, SpectrumLinkProps} from '../'; import React from 'react'; -import {SpectrumLinkProps} from '@react-types/link'; type LinkStory = StoryObj; diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx index 60f8353fb02..087dbabab43 100644 --- a/packages/@react-spectrum/numberfield/src/NumberField.tsx +++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps} from '@react-aria/button'; import {AriaNumberFieldProps, useNumberField} from '@react-aria/numberfield'; import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils'; import {Field} from '@react-spectrum/label'; diff --git a/packages/@react-spectrum/numberfield/src/StepButton.tsx b/packages/@react-spectrum/numberfield/src/StepButton.tsx index fe48c536ce5..2e20c4ed2b1 100644 --- a/packages/@react-spectrum/numberfield/src/StepButton.tsx +++ b/packages/@react-spectrum/numberfield/src/StepButton.tsx @@ -11,7 +11,7 @@ */ import Add from '@spectrum-icons/workflow/Add'; -import {AriaButtonProps} from '@react-types/button'; +import {AriaButtonProps, useButton} from '@react-aria/button'; import ChevronDownSmall from '@spectrum-icons/ui/ChevronDownSmall'; import ChevronUpSmall from '@spectrum-icons/ui/ChevronUpSmall'; import {classNames, useFocusableRef} from '@react-spectrum/utils'; @@ -21,7 +21,6 @@ import {mergeProps} from '@react-aria/utils'; import React, {ReactElement} from 'react'; import Remove from '@spectrum-icons/workflow/Remove'; import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css'; -import {useButton} from '@react-aria/button'; import {useHover} from '@react-aria/interactions'; import {useProvider, useProviderProps} from '@react-spectrum/provider'; diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index ce550f7eb3b..9c65d9c96cd 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -160,6 +160,7 @@ "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.31.0", "@react-aria/utils": "^3.32.0", + "@react-spectrum/textfield": "^3.14.3", "@react-spectrum/utils": "^3.12.10", "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx index 1addb1c9f65..c98fe260e9a 100644 --- a/packages/@react-spectrum/s2/src/ColorField.tsx +++ b/packages/@react-spectrum/s2/src/ColorField.tsx @@ -23,7 +23,7 @@ import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {style} from '../style' with {type: 'macro'}; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorFieldProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick { diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx index ab2348328b6..45cfa244eec 100644 --- a/packages/@react-spectrum/s2/src/ComboBox.tsx +++ b/packages/@react-spectrum/s2/src/ComboBox.tsx @@ -65,7 +65,7 @@ import {Placement} from 'react-aria'; import {Popover} from './Popover'; import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useScale} from './utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index 8a9a189d2a3..4a59bfe4163 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -32,7 +32,7 @@ import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils'; import {FormContext, useFormProps} from './Form'; import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared'; import {pressScale} from './pressScale'; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useButton, useFocusRing, useHover} from 'react-aria'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx index 0d6965299db..acf3c710686 100644 --- a/packages/@react-spectrum/s2/src/SearchField.tsx +++ b/packages/@react-spectrum/s2/src/SearchField.tsx @@ -29,7 +29,7 @@ import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react import {IconContext} from './Icon'; import {raw} from '../style/style-macro' with {type: 'macro'}; import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg'; -import {TextFieldRef} from '@react-types/textfield'; +import {TextFieldRef} from './TextField'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface SearchFieldProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick { diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx index b82705b2ae2..65cf1e5c4bd 100644 --- a/packages/@react-spectrum/s2/src/TextField.tsx +++ b/packages/@react-spectrum/s2/src/TextField.tsx @@ -25,14 +25,18 @@ import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react'; import {createFocusableRef} from '@react-spectrum/utils'; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; +import {FocusableRefValue, GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; -import {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared'; import {mergeRefs} from '@react-aria/utils'; import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; -import {TextFieldRef} from '@react-types/textfield'; import {useSpectrumContextProps} from './useSpectrumContextProps'; +export interface TextFieldRef extends FocusableRefValue { + select(): void, + getInputElement(): T | null +} + export interface TextFieldProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick { /** * The size of the text field. diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index 0865c16c0cb..d47447066a5 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -159,7 +159,7 @@ export type {SwitchProps} from './Switch'; export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './TableView'; export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs'; export type {TagGroupProps, TagProps} from './TagGroup'; -export type {TextFieldProps, TextAreaProps} from './TextField'; +export type {TextFieldProps, TextAreaProps, TextFieldRef} from './TextField'; export type {TimeFieldProps} from './TimeField'; export type {ToastOptions, ToastContainerProps} from './Toast'; export type {ToggleButtonProps} from './ToggleButton'; diff --git a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx index c2de34fa927..960a1eb1fe1 100644 --- a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx +++ b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx @@ -14,9 +14,8 @@ import {Content} from '@react-spectrum/view'; import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; -import {RangeSlider} from '../'; +import {RangeSlider, SpectrumRangeSliderProps} from '../'; import React from 'react'; -import {SpectrumRangeSliderProps} from '@react-types/slider'; const meta: Meta = { title: 'RangeSlider', diff --git a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx index d73825a7bef..7bbf37ddf1b 100644 --- a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx +++ b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx @@ -15,8 +15,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {Slider} from '../'; -import {SpectrumSliderProps} from '@react-types/slider'; +import {Slider, SpectrumSliderProps} from '../'; const meta: Meta = { title: 'Slider', diff --git a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx index 7534099fd56..f2e0bbce680 100644 --- a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx +++ b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx @@ -16,9 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp'; import {ErrorBoundary} from '@react-spectrum/story-utils'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryFn} from '@storybook/react'; -import {RangeSlider} from '../'; +import {RangeSlider, SpectrumRangeSliderProps} from '../'; import React from 'react'; -import {SpectrumRangeSliderProps} from '@react-types/slider'; let message = 'Your browser may not support this set of format options.'; diff --git a/packages/@react-spectrum/slider/stories/Slider.stories.tsx b/packages/@react-spectrum/slider/stories/Slider.stories.tsx index eb484d3128f..88a4cac0f53 100644 --- a/packages/@react-spectrum/slider/stories/Slider.stories.tsx +++ b/packages/@react-spectrum/slider/stories/Slider.stories.tsx @@ -18,8 +18,7 @@ import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Meta, StoryFn} from '@storybook/react'; import React from 'react'; -import {Slider} from '../'; -import {SpectrumSliderProps} from '@react-types/slider'; +import {Slider, SpectrumSliderProps} from '../'; let message = 'Your browser may not support this set of format options.'; diff --git a/packages/@react-stately/calendar/src/utils.ts b/packages/@react-stately/calendar/src/utils.ts index d9bcdeee614..36408bd6257 100644 --- a/packages/@react-stately/calendar/src/utils.ts +++ b/packages/@react-stately/calendar/src/utils.ts @@ -19,7 +19,7 @@ import { startOfYear, toCalendarDate } from '@internationalized/date'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from './types'; export function isInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null): boolean { return (minValue != null && date.compare(minValue) < 0) || diff --git a/packages/@react-types/datepicker/package.json b/packages/@react-types/datepicker/package.json index 4aef0957060..38c3905cb3f 100644 --- a/packages/@react-types/datepicker/package.json +++ b/packages/@react-types/datepicker/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@internationalized/date": "^3.10.1", + "@react-stately/calendar": "^3.9.1", + "@react-stately/overlays": "^3.6.21", "@react-types/calendar": "^3.8.1", "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1" diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts index 1f7950072f6..890ea7ae732 100644 --- a/packages/@react-types/datepicker/src/index.d.ts +++ b/packages/@react-types/datepicker/src/index.d.ts @@ -26,8 +26,8 @@ import { ValueBase } from '@react-types/shared'; import {CalendarDate, CalendarDateTime, CalendarIdentifier, Calendar as ICalendar, Time, ZonedDateTime} from '@internationalized/date'; -import {OverlayTriggerProps} from '@react-types/overlays'; -import {PageBehavior} from '@react-types/calendar'; +import {OverlayTriggerProps} from '@react-stately/overlays'; +import {PageBehavior} from '@react-stately/calendar'; export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; type MappedDateValue = diff --git a/packages/dev/s2-docs/pages/s2/home/Mobile.tsx b/packages/dev/s2-docs/pages/s2/home/Mobile.tsx index 8116ebe34b8..ad2663bdbb2 100644 --- a/packages/dev/s2-docs/pages/s2/home/Mobile.tsx +++ b/packages/dev/s2-docs/pages/s2/home/Mobile.tsx @@ -8,14 +8,13 @@ import iphone from 'url:@react-spectrum/docs/pages/assets/iphone-frame.webp'; // @ts-ignore import iphoneMask from 'url:@react-spectrum/docs/pages/assets/iphone-mask.webp'; import {WifiIcon} from 'lucide-react'; -import { Avatar, Button, Form, TextField } from '@react-spectrum/s2'; +import { Avatar, Button, Form, TextField, TextFieldRef } from '@react-spectrum/s2'; import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger'; import Search from '@react-spectrum/s2/icons/Search'; import More from '@react-spectrum/s2/icons/More'; // @ts-ignore import {AdobeLogo} from '../../../src/icons/AdobeLogo'; import {animate, useIntersectionObserver} from '@react-spectrum/docs/pages/react-aria/home/utils'; -import {TextFieldRef} from '@react-types/textfield'; import {FocusableRefValue} from '@react-types/shared'; const translate = (x: number, y: number) => `translate(${x}px, ${y}px)`; diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx index f8390175028..2dc2de29c93 100644 --- a/packages/dev/s2-docs/src/SearchMenu.tsx +++ b/packages/dev/s2-docs/src/SearchMenu.tsx @@ -1,6 +1,6 @@ 'use client'; -import {ActionButton, SearchField} from '@react-spectrum/s2'; +import {ActionButton, SearchField, TextFieldRef} from '@react-spectrum/s2'; import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider} from 'react-aria-components'; import Close from '@react-spectrum/s2/icons/Close'; import {ComponentCardView} from './ComponentCardView'; @@ -16,7 +16,6 @@ import React, {CSSProperties, Suspense, useCallback, useEffect, useRef, useState import {SearchTagGroups} from './SearchTagGroups'; import {style} from '@react-spectrum/s2/style' with { type: 'macro' }; import {Tab, TabList, TabPanel, Tabs} from './Tabs'; -import {TextFieldRef} from '@react-types/textfield'; import {useRouter} from './Router'; import './SearchMenu.css'; import {preloadComponentImages} from './ComponentCard'; diff --git a/packages/react-aria-components/test/RangeCalendar.test.tsx b/packages/react-aria-components/test/RangeCalendar.test.tsx index 03877e4bb47..79ecada775a 100644 --- a/packages/react-aria-components/test/RangeCalendar.test.tsx +++ b/packages/react-aria-components/test/RangeCalendar.test.tsx @@ -13,7 +13,7 @@ import {act, pointerMap, render, within} from '@react-spectrum/test-utils-internal'; import {Button, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Heading, RangeCalendar, RangeCalendarContext} from 'react-aria-components'; import {CalendarDate, getLocalTimeZone, startOfMonth, startOfWeek, today} from '@internationalized/date'; -import {DateValue} from '@react-types/calendar'; +import {DateValue} from '@react-stately/calendar'; import {RangeValue} from '@react-types/shared'; import React from 'react'; import userEvent from '@testing-library/user-event'; From fc3dd44452b5cc15da413976c015100bd2a8f840 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 13:39:47 -0500 Subject: [PATCH 43/56] Card --- .../card/chromatic-fc/CardView.stories.tsx | 3 +- .../card/chromatic/CardView.stories.tsx | 3 +- packages/@react-spectrum/card/package.json | 1 - packages/@react-spectrum/card/src/Card.tsx | 2 +- .../@react-spectrum/card/src/CardBase.tsx | 2 +- .../@react-spectrum/card/src/CardView.tsx | 2 +- packages/@react-spectrum/card/src/index.ts | 2 +- packages/@react-spectrum/card/src/types.ts | 67 +++++++++++++++++++ .../card/stories/Card.stories.tsx | 3 +- .../card/stories/GalleryCardView.stories.tsx | 3 +- .../card/stories/GridCardView.stories.tsx | 3 +- .../stories/WaterfallCardView.stories.tsx | 3 +- packages/@react-types/card/package.json | 4 +- packages/@react-types/card/src/index.d.ts | 56 +--------------- 14 files changed, 79 insertions(+), 75 deletions(-) create mode 100644 packages/@react-spectrum/card/src/types.ts diff --git a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx index d074fc8dd6a..91d2c8a14f2 100644 --- a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx +++ b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx @@ -11,10 +11,9 @@ * governing permissions and limitations under the License. */ -import {CardView} from '../'; +import {CardView, SpectrumCardViewProps} from '../'; import {DefaultGrid as DefaultGridStory} from '../chromatic/CardView.stories'; import {Meta, StoryObj} from '@storybook/react'; -import {SpectrumCardViewProps} from '@react-types/card'; const meta: Meta> = { title: 'CardView' diff --git a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx index 50d06991528..30da9f6e430 100644 --- a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx +++ b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx @@ -11,13 +11,12 @@ * governing permissions and limitations under the License. */ -import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout} from '..'; +import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout, SpectrumCardViewProps} from '..'; import {Content} from '@react-spectrum/view'; import {Heading, Text} from '@react-spectrum/text'; import {Image} from '@react-spectrum/image'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX, useMemo} from 'react'; -import {SpectrumCardViewProps} from '@react-types/card'; import {useCollator} from '@react-aria/i18n'; const meta: Meta> = { diff --git a/packages/@react-spectrum/card/package.json b/packages/@react-spectrum/card/package.json index e2a1e50d304..df19303c8f5 100644 --- a/packages/@react-spectrum/card/package.json +++ b/packages/@react-spectrum/card/package.json @@ -53,7 +53,6 @@ "@react-stately/grid": "^3.11.7", "@react-stately/list": "^3.13.2", "@react-stately/virtualizer": "^4.4.4", - "@react-types/card": "3.0.0-alpha.41", "@react-types/provider": "^3.8.13", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/card/src/Card.tsx b/packages/@react-spectrum/card/src/Card.tsx index bfe6b3db1ed..a080421a9ff 100644 --- a/packages/@react-spectrum/card/src/Card.tsx +++ b/packages/@react-spectrum/card/src/Card.tsx @@ -15,7 +15,7 @@ import {CardBase} from './CardBase'; import {DOMRef, DOMRefValue, ItemProps} from '@react-types/shared'; import {PartialNode} from '@react-stately/collections'; import React, {forwardRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes} from 'react'; -import {SpectrumCardProps} from '@react-types/card'; +import {SpectrumCardProps} from './types'; import {useCardViewContext} from './CardViewContext'; diff --git a/packages/@react-spectrum/card/src/CardBase.tsx b/packages/@react-spectrum/card/src/CardBase.tsx index bada5ea8d4e..7ea467e7477 100644 --- a/packages/@react-spectrum/card/src/CardBase.tsx +++ b/packages/@react-spectrum/card/src/CardBase.tsx @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -import {AriaCardProps, SpectrumCardProps} from '@react-types/card'; +import {AriaCardProps, SpectrumCardProps} from './types'; import {Checkbox} from '@react-spectrum/checkbox'; import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, Node} from '@react-types/shared'; diff --git a/packages/@react-spectrum/card/src/CardView.tsx b/packages/@react-spectrum/card/src/CardView.tsx index e060a2e84a4..fa897c458cf 100644 --- a/packages/@react-spectrum/card/src/CardView.tsx +++ b/packages/@react-spectrum/card/src/CardView.tsx @@ -22,7 +22,7 @@ import {mergeProps} from '@react-aria/utils'; import {ProgressCircle} from '@react-spectrum/progress'; import React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react'; import {ReusableView} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; +import {SpectrumCardViewProps} from './types'; import styles from '@adobe/spectrum-css-temp/components/card/vars.css'; import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useGrid, useGridCell, useGridRow} from '@react-aria/grid'; diff --git a/packages/@react-spectrum/card/src/index.ts b/packages/@react-spectrum/card/src/index.ts index 3b993a1f4f1..720414c4fb3 100644 --- a/packages/@react-spectrum/card/src/index.ts +++ b/packages/@react-spectrum/card/src/index.ts @@ -21,4 +21,4 @@ export {GalleryLayout} from './GalleryLayout'; export {GridLayout} from './GridLayout'; export {WaterfallLayout} from './WaterfallLayout'; export {Card} from './Card'; -export type {SpectrumCardViewProps} from '@react-types/card'; +export type {SpectrumCardProps, AriaCardViewProps, SpectrumCardViewProps} from './types'; diff --git a/packages/@react-spectrum/card/src/types.ts b/packages/@react-spectrum/card/src/types.ts new file mode 100644 index 00000000000..fcfd925216b --- /dev/null +++ b/packages/@react-spectrum/card/src/types.ts @@ -0,0 +1,67 @@ +/* + * Copyright 2021 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {AriaLabelingProps, AsyncLoadable, Collection, CollectionBase, Direction, DOMProps, KeyboardDelegate, LoadingState, MultipleSelection, Node, Orientation, StyleProps} from '@react-types/shared'; +import {Layout} from '@react-stately/virtualizer'; +import {ReactNode} from 'react'; +import {Scale} from '@react-types/provider'; + +interface AriaCardProps extends AriaLabelingProps {} + +export interface SpectrumCardProps extends AriaCardProps, StyleProps, DOMProps { + children: ReactNode, + isQuiet?: boolean, + layout?: 'grid' | 'waterfall' | 'gallery', + // TODO: readd size when we get updated designs from spectrum + // size?: 'S' | 'M' | 'L', + orientation?: Orientation +} + +interface LayoutOptions { + // cardSize?: 'S' | 'M' | 'L', + cardOrientation?: Orientation, + collator?: Intl.Collator, + // TODO: is this valid or is scale a spectrum specific thing that should be left out of the layouts? + // Added here so we can keep the default item padding options within the layouts instead of having to + // do extra work in CardView to accommodate different sizing for scales + scale?: Scale +} + +// TODO: double check if this is the best way to type the layout provided to the CardView +interface CardViewLayout extends Layout>, KeyboardDelegate { + collection: Collection>, + disabledKeys: any, + isLoading: boolean, + direction: Direction, + layoutType: string, + margin?: number +} + +export interface CardViewLayoutConstructor { + new (options?: LayoutOptions): CardViewLayout +} + +interface CardViewProps extends CollectionBase, MultipleSelection, Omit { + // TODO: Does LayoutConstructor and Layout give enough info for a user to know what to put in their own custom layout? + // Replaced with CardViewLayout so that they know they need to have keyboardDelegate stuff as well as collection, disabledKeys, etc + layout: CardViewLayoutConstructor | CardViewLayout, + // TODO: readd size when we get updated designs from spectrum + // cardSize?: 'S' | 'M' | 'L', + cardOrientation?: Orientation, + isQuiet?: boolean, + renderEmptyState?: () => ReactNode, + loadingState?: LoadingState +} + +export interface AriaCardViewProps extends CardViewProps, DOMProps, AriaLabelingProps {} + +export interface SpectrumCardViewProps extends AriaCardViewProps, StyleProps {} diff --git a/packages/@react-spectrum/card/stories/Card.stories.tsx b/packages/@react-spectrum/card/stories/Card.stories.tsx index 5466af33b00..7820f4d9dc5 100644 --- a/packages/@react-spectrum/card/stories/Card.stories.tsx +++ b/packages/@react-spectrum/card/stories/Card.stories.tsx @@ -12,7 +12,7 @@ */ import {Avatar} from '@react-spectrum/avatar'; -import {Card} from '..'; +import {Card, SpectrumCardProps} from '..'; import {CardBase} from '../src/CardBase'; import {CardViewContext} from '../src/CardViewContext'; import {Content} from '@react-spectrum/view'; @@ -21,7 +21,6 @@ import {Heading, Text} from '@react-spectrum/text'; import {Image} from '@react-spectrum/image'; import {Meta, StoryObj} from '@storybook/react'; import React, {Dispatch, SetStateAction, useState} from 'react'; -import {SpectrumCardProps} from '@react-types/card'; import {usePress} from '@react-aria/interactions'; import {useProvider} from '@react-spectrum/provider'; diff --git a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx index 6040270db5a..36d8d0a8a98 100644 --- a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx @@ -29,12 +29,11 @@ import { StaticCards, StaticCardViewStory } from './GridCardView.stories'; -import {CardView, GalleryLayout} from '../'; +import {CardView, GalleryLayout, SpectrumCardViewProps} from '../'; import {GalleryLayoutOptions} from '../src/GalleryLayout'; import {Meta, StoryObj} from '@storybook/react'; import React, {JSX, useMemo} from 'react'; import {Size} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; import {useCollator} from '@react-aria/i18n'; let itemsLowVariance = [ diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx index bfc35331cba..d408ed4be95 100644 --- a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx @@ -13,7 +13,7 @@ import {action} from '@storybook/addon-actions'; import {ActionButton} from '@react-spectrum/button'; -import {Card, CardView, GridLayout} from '../'; +import {Card, CardView, GridLayout, SpectrumCardViewProps} from '../'; import {Content, View} from '@react-spectrum/view'; import {Flex} from '@react-spectrum/layout'; import {getImageFullData} from './utils'; @@ -26,7 +26,6 @@ import {Key} from '@react-types/shared'; import {Link} from '@react-spectrum/link'; import React, {useMemo, useState} from 'react'; import {Size} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; import {TextField} from '@react-spectrum/textfield'; import {useAsyncList} from '@react-stately/data'; import {useCollator} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx index efc990d05c9..bd4679ac514 100644 --- a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx @@ -29,11 +29,10 @@ import { StaticCards, StaticCardViewStory } from './GridCardView.stories'; -import {CardView, WaterfallLayout} from '../'; +import {CardView, WaterfallLayout, SpectrumCardViewProps} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {useMemo} from 'react'; import {Size} from '@react-stately/virtualizer'; -import {SpectrumCardViewProps} from '@react-types/card'; import {useCollator} from '@react-aria/i18n'; import {WaterfallLayoutOptions} from '../src/WaterfallLayout'; diff --git a/packages/@react-types/card/package.json b/packages/@react-types/card/package.json index e892f228ca7..898f991ae33 100644 --- a/packages/@react-types/card/package.json +++ b/packages/@react-types/card/package.json @@ -9,9 +9,7 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-stately/virtualizer": "^4.4.4", - "@react-types/provider": "^3.8.13", - "@react-types/shared": "^3.32.1" + "@react-spectrum/card": "3.0.0-alpha.51" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", diff --git a/packages/@react-types/card/src/index.d.ts b/packages/@react-types/card/src/index.d.ts index ebd945b6887..b8d6d6aed7b 100644 --- a/packages/@react-types/card/src/index.d.ts +++ b/packages/@react-types/card/src/index.d.ts @@ -10,58 +10,4 @@ * governing permissions and limitations under the License. */ -import {AriaLabelingProps, AsyncLoadable, Collection, CollectionBase, Direction, DOMProps, KeyboardDelegate, LoadingState, MultipleSelection, Node, Orientation, StyleProps} from '@react-types/shared'; -import {Layout} from '@react-stately/virtualizer'; -import {ReactNode} from 'react'; -import {Scale} from '@react-types/provider'; - -interface AriaCardProps extends AriaLabelingProps {} - -interface SpectrumCardProps extends AriaCardProps, StyleProps, DOMProps { - children: ReactNode, - isQuiet?: boolean, - layout?: 'grid' | 'waterfall' | 'gallery', - // TODO: readd size when we get updated designs from spectrum - // size?: 'S' | 'M' | 'L', - orientation?: Orientation -} - -interface LayoutOptions { - // cardSize?: 'S' | 'M' | 'L', - cardOrientation?: Orientation, - collator?: Intl.Collator, - // TODO: is this valid or is scale a spectrum specific thing that should be left out of the layouts? - // Added here so we can keep the default item padding options within the layouts instead of having to - // do extra work in CardView to accommodate different sizing for scales - scale?: Scale -} - -// TODO: double check if this is the best way to type the layout provided to the CardView -interface CardViewLayout extends Layout>, KeyboardDelegate { - collection: Collection>, - disabledKeys: any, - isLoading: boolean, - direction: Direction, - layoutType: string, - margin?: number -} - -export interface CardViewLayoutConstructor { - new (options?: LayoutOptions): CardViewLayout -} - -interface CardViewProps extends CollectionBase, MultipleSelection, Omit { - // TODO: Does LayoutConstructor and Layout give enough info for a user to know what to put in their own custom layout? - // Replaced with CardViewLayout so that they know they need to have keyboardDelegate stuff as well as collection, disabledKeys, etc - layout: CardViewLayoutConstructor | CardViewLayout, - // TODO: readd size when we get updated designs from spectrum - // cardSize?: 'S' | 'M' | 'L', - cardOrientation?: Orientation, - isQuiet?: boolean, - renderEmptyState?: () => ReactNode, - loadingState?: LoadingState -} - -export interface AriaCardViewProps extends CardViewProps, DOMProps, AriaLabelingProps {} - -export interface SpectrumCardViewProps extends AriaCardViewProps, StyleProps {} +export {AriaCardViewProps, SpectrumCardProps, SpectrumCardViewProps} from '@react-spectrum/card'; From 8309e8867df25f1b568943c46f6b1f0c9cad5d4d Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 14:08:06 -0500 Subject: [PATCH 44/56] DatePicker --- packages/@react-aria/datepicker/package.json | 1 - packages/@react-aria/datepicker/src/index.ts | 9 +- .../datepicker/src/useDateField.ts | 16 +- .../datepicker/src/useDatePicker.ts | 14 +- .../datepicker/src/useDateRangePicker.ts | 8 +- .../@react-spectrum/datepicker/package.json | 1 - .../datepicker/src/DateField.tsx | 22 ++- .../datepicker/src/DatePicker.tsx | 36 +++- .../datepicker/src/DatePickerField.tsx | 4 +- .../datepicker/src/DatePickerSegment.tsx | 5 +- .../datepicker/src/DateRangePicker.tsx | 8 +- .../datepicker/src/TimeField.tsx | 15 +- .../@react-spectrum/datepicker/src/index.ts | 5 +- .../@react-spectrum/datepicker/src/utils.tsx | 2 +- .../stories/DateRangePicker.stories.tsx | 2 +- .../@react-stately/datepicker/package.json | 2 +- .../@react-stately/datepicker/src/index.ts | 1 + .../@react-stately/datepicker/src/types.ts | 115 +++++++++++ .../datepicker/src/useDateFieldState.ts | 2 +- .../datepicker/src/useDatePickerState.ts | 2 +- .../datepicker/src/useDateRangePickerState.ts | 2 +- .../datepicker/src/useTimeFieldState.ts | 2 +- .../@react-stately/datepicker/src/utils.ts | 2 +- packages/@react-types/datepicker/package.json | 9 +- .../@react-types/datepicker/src/index.d.ts | 185 +----------------- 25 files changed, 236 insertions(+), 234 deletions(-) create mode 100644 packages/@react-stately/datepicker/src/types.ts diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json index 2f2e2eab774..3326da5ebae 100644 --- a/packages/@react-aria/datepicker/package.json +++ b/packages/@react-aria/datepicker/package.json @@ -44,7 +44,6 @@ "@react-stately/form": "^3.2.2", "@react-types/button": "^3.14.1", "@react-types/calendar": "^3.8.1", - "@react-types/datepicker": "^3.13.3", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/datepicker/src/index.ts b/packages/@react-aria/datepicker/src/index.ts index 5db0fc7368a..6a052e3f81a 100644 --- a/packages/@react-aria/datepicker/src/index.ts +++ b/packages/@react-aria/datepicker/src/index.ts @@ -16,9 +16,8 @@ export {useDateField, useTimeField} from './useDateField'; export {useDateRangePicker} from './useDateRangePicker'; export {useDisplayNames} from './useDisplayNames'; -export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker'; -export type {AriaDateFieldOptions, DateFieldAria} from './useDateField'; -export type {DatePickerAria} from './useDatePicker'; -export type {DateRangePickerAria} from './useDateRangePicker'; +export type {DateRange, DateValue, TimeValue} from '@react-stately/datepicker'; +export type {AriaDateFieldProps, AriaDateFieldOptions, DateFieldAria, AriaTimeFieldProps} from './useDateField'; +export type {AriaDatePickerProps, DatePickerAria} from './useDatePicker'; +export type {AriaDateRangePickerProps, DateRangePickerAria} from './useDateRangePicker'; export type {DateSegmentAria} from './useDateSegment'; -export type {AriaTimeFieldProps} from '@react-types/datepicker'; diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts index 5a04a465421..bf94a90918e 100644 --- a/packages/@react-aria/datepicker/src/useDateField.ts +++ b/packages/@react-aria/datepicker/src/useDateField.ts @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, InputDOMProps, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; import {createFocusManager, FocusManager} from '@react-aria/focus'; -import {DateFieldState, TimeFieldState} from '@react-stately/datepicker'; -import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; +import {DateFieldProps, DateFieldState, DateValue, TimeFieldState, TimePickerProps, TimeValue} from '@react-stately/datepicker'; import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils'; import {InputHTMLAttributes, useEffect, useMemo, useRef} from 'react'; // @ts-ignore @@ -24,8 +23,15 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useFormValidation} from '@react-aria/form'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +export interface AriaDateFieldProps extends DateFieldProps, AriaLabelingProps, DOMProps, InputDOMProps { + /** + * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). + */ + autoComplete?: string +} + // Allows this hook to also be used with TimeField -export interface AriaDateFieldOptions extends Omit, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> { +export interface AriaDateFieldOptions extends Omit, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> { /** A ref for the hidden input element for HTML form submission. */ inputRef?: RefObject } @@ -196,6 +202,8 @@ export function useDateField(props: AriaDateFieldOptions }; } +export interface AriaTimeFieldProps extends TimePickerProps, AriaLabelingProps, DOMProps, InputDOMProps {} + export interface AriaTimeFieldOptions extends AriaTimeFieldProps { /** A ref for the hidden input element for HTML form submission. */ inputRef?: RefObject diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts index 0b4363f4a1c..46403bb98ff 100644 --- a/packages/@react-aria/datepicker/src/useDatePicker.ts +++ b/packages/@react-aria/datepicker/src/useDatePicker.ts @@ -11,12 +11,11 @@ */ import {AriaButtonProps} from '@react-aria/button'; -import {AriaDatePickerProps, DateValue} from '@react-types/datepicker'; import {AriaDialogProps} from '@react-aria/dialog'; -import {CalendarProps} from '@react-types/calendar'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, InputDOMProps, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; +import {CalendarProps} from '@react-stately/calendar'; import {createFocusManager} from '@react-aria/focus'; -import {DatePickerState} from '@react-stately/datepicker'; -import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; +import {DatePickerProps, DatePickerState, DateValue} from '@react-stately/datepicker'; import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -28,6 +27,13 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMemo, useRef} from 'react'; +export interface AriaDatePickerProps extends DatePickerProps, AriaLabelingProps, InputDOMProps, DOMProps, InputDOMProps { + /** + * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). + */ + autoComplete?: string +} + export interface DatePickerAria extends ValidationResult { /** Props for the date picker's visible label element, if any. */ labelProps: DOMAttributes, diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts index 826b8ccd381..ae1aa2158e4 100644 --- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts +++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts @@ -11,13 +11,13 @@ */ import {AriaButtonProps} from '@react-aria/button'; -import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker'; +import {AriaDatePickerProps} from './useDatePicker'; import {AriaDialogProps} from '@react-aria/dialog'; +import {AriaLabelingProps, DOMAttributes, DOMProps, GroupDOMAttributes, InputDOMProps, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; import {createFocusManager} from '@react-aria/focus'; import {DateRange, RangeCalendarProps} from '@react-stately/calendar'; -import {DateRangePickerState} from '@react-stately/datepicker'; +import {DateRangePickerProps, DateRangePickerState, DateValue} from '@react-stately/datepicker'; import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form'; -import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils'; import {focusManagerSymbol, roleSymbol} from './useDateField'; // @ts-ignore @@ -28,6 +28,8 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMemo, useRef} from 'react'; +export interface AriaDateRangePickerProps extends DateRangePickerProps, AriaLabelingProps, InputDOMProps, DOMProps {} + export interface DateRangePickerAria extends ValidationResult { /** Props for the date range picker's visible label element, if any. */ labelProps: DOMAttributes, diff --git a/packages/@react-spectrum/datepicker/package.json b/packages/@react-spectrum/datepicker/package.json index a11d27be238..6c2a9058497 100644 --- a/packages/@react-spectrum/datepicker/package.json +++ b/packages/@react-spectrum/datepicker/package.json @@ -55,7 +55,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-spectrum/view": "^3.6.24", "@react-stately/datepicker": "^3.15.3", - "@react-types/datepicker": "^3.13.3", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@spectrum-icons/workflow": "^4.2.26", diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx index 8d281711bc1..58465f41a90 100644 --- a/packages/@react-spectrum/datepicker/src/DateField.tsx +++ b/packages/@react-spectrum/datepicker/src/DateField.tsx @@ -10,22 +10,36 @@ * governing permissions and limitations under the License. */ +import {AriaDateFieldProps, useDateField} from '@react-aria/datepicker'; import {classNames} from '@react-spectrum/utils'; import {createCalendar} from '@internationalized/date'; import {DatePickerSegment} from './DatePickerSegment'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDateFieldProps} from '@react-types/datepicker'; +import {DateValue, MappedDateValue, useDateFieldState} from '@react-stately/datepicker'; import {Field} from '@react-spectrum/label'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, HelpTextProps, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Input} from './Input'; import React, {ReactElement, useRef} from 'react'; -import {useDateField} from '@react-aria/datepicker'; -import {useDateFieldState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils'; import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation>, StyleProps { + /** + * Whether the date picker should be displayed with a quiet style. + * @default false + */ + isQuiet?: boolean, + /** + * Whether to show the localized date format as help text below the field. + * @default false + */ + showFormatHelpText?: boolean +} + +export interface SpectrumDateFieldProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDateFieldBase {} + /** * 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. diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx index 711e2cd5a24..667e911dcc5 100644 --- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx @@ -10,27 +10,28 @@ * governing permissions and limitations under the License. */ +import {AriaDatePickerProps, useDatePicker} from '@react-aria/datepicker'; import {Calendar} from '@react-spectrum/calendar'; import CalendarIcon from '@spectrum-icons/workflow/Calendar'; +import {CalendarIdentifier, Calendar as ICalendar} from '@internationalized/date'; import {classNames} from '@react-spectrum/utils'; import {Content} from '@react-spectrum/view'; import {DatePickerField} from './DatePickerField'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker'; +import {DateValue, useDatePickerState} from '@react-stately/datepicker'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; -import {FocusableRef} from '@react-types/shared'; -import {Input} from './Input'; +import {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; // @ts-ignore -import intlMessages from '../intl/*.json'; +import {Input} from './Input'; +import intlMessages from '../intl/*.json'; // HACK: must be included BEFORE inputgroup import {mergeProps} from '@react-aria/utils'; import React, {ReactElement, useRef} from 'react'; -import '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup +import '@adobe/spectrum-css-temp/components/textfield/vars.css'; +import {SpectrumDateFieldBase} from './DateField'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TimeField} from './TimeField'; -import {useDatePicker} from '@react-aria/datepicker'; -import {useDatePickerState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils'; import {useFocusRing} from '@react-aria/focus'; import {useFormProps} from '@react-spectrum/form'; @@ -38,6 +39,27 @@ import {useHover} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelableProps, StyleProps { + /** + * The maximum number of months to display at once in the calendar popover, if screen space permits. + * @default 1 + */ + maxVisibleMonths?: number, + /** + * Whether the calendar popover should automatically flip direction when space is limited. + * @default true + */ + shouldFlip?: boolean, + /** + * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) + * object for a given calendar identifier. This will be used for the popover calendar. If not provided, the + * `createCalendar` function from `@internationalized/date` will be used. + */ + createCalendar?: (identifier: CalendarIdentifier) => ICalendar +} + +export interface SpectrumDatePickerProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDatePickerBase {} + /** * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value. */ diff --git a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx index 116567974f0..89f97a7850c 100644 --- a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx @@ -14,10 +14,10 @@ import {classNames} from '@react-spectrum/utils'; import {createCalendar} from '@internationalized/date'; import {DatePickerSegment} from './DatePickerSegment'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker'; +import {DateValue, useDateFieldState} from '@react-stately/datepicker'; import React, {JSX, useRef} from 'react'; +import {SpectrumDatePickerProps} from './DatePicker'; import {useDateField} from '@react-aria/datepicker'; -import {useDateFieldState} from '@react-stately/datepicker'; import {useLocale} from '@react-aria/i18n'; interface DatePickerFieldProps extends SpectrumDatePickerProps { diff --git a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx index 05597611dc5..b820dc568ac 100644 --- a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx @@ -10,14 +10,13 @@ * governing permissions and limitations under the License. */ +import {AriaDatePickerProps, useDateSegment} from '@react-aria/datepicker'; import {classNames} from '@react-spectrum/utils'; import {DateFieldState, DateSegment} from '@react-stately/datepicker'; -import {DatePickerBase, DateValue} from '@react-types/datepicker'; import React, {JSX, useRef} from 'react'; import styles from './styles.css'; -import {useDateSegment} from '@react-aria/datepicker'; -interface DatePickerSegmentProps extends DatePickerBase { +interface DatePickerSegmentProps extends AriaDatePickerProps { segment: DateSegment, state: DateFieldState } diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx index dc1f9eec342..949376acbb3 100644 --- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx @@ -10,12 +10,13 @@ * governing permissions and limitations under the License. */ +import {AriaDateRangePickerProps, useDateRangePicker} from '@react-aria/datepicker'; import CalendarIcon from '@spectrum-icons/workflow/Calendar'; import {classNames} from '@react-spectrum/utils'; import {Content} from '@react-spectrum/view'; import {DatePickerField} from './DatePickerField'; import datepickerStyles from './styles.css'; -import {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker'; +import {DateValue, useDateRangePickerState} from '@react-stately/datepicker'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; @@ -27,10 +28,9 @@ import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; import {RangeCalendar} from '@react-spectrum/calendar'; import React, {ReactElement, useRef} from 'react'; +import {SpectrumDatePickerBase} from './DatePicker'; import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; import {TimeField} from './TimeField'; -import {useDateRangePicker} from '@react-aria/datepicker'; -import {useDateRangePickerState} from '@react-stately/datepicker'; import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils'; import {useFocusRing} from '@react-aria/focus'; import {useFormProps} from '@react-spectrum/form'; @@ -38,6 +38,8 @@ import {useHover} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; +export interface SpectrumDateRangePickerProps extends Omit, 'isInvalid' | 'validationState'>, Omit, 'validate'> {} + /** * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users * to enter or select a date and time range. diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx index 9f831b35194..2ba221f5c09 100644 --- a/packages/@react-spectrum/datepicker/src/TimeField.tsx +++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx @@ -10,20 +10,27 @@ * governing permissions and limitations under the License. */ +import {AriaTimeFieldProps, useTimeField} from '@react-aria/datepicker'; import {classNames} from '@react-spectrum/utils'; import {DatePickerSegment} from './DatePickerSegment'; import datepickerStyles from './styles.css'; import {Field} from '@react-spectrum/label'; -import {FocusableRef} from '@react-types/shared'; +import {FocusableRef, InputDOMProps, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Input} from './Input'; +import {MappedTimeValue, TimeValue, useTimeFieldState} from '@react-stately/datepicker'; import React, {ReactElement, useRef} from 'react'; -import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker'; import {useFocusManagerRef, useFormattedDateWidth} from './utils'; import {useFormProps} from '@react-spectrum/form'; import {useLocale} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; -import {useTimeField} from '@react-aria/datepicker'; -import {useTimeFieldState} from '@react-stately/datepicker'; + +export interface SpectrumTimeFieldProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumFieldValidation>, SpectrumLabelableProps, StyleProps, InputDOMProps { + /** + * Whether the time field should be displayed with a quiet style. + * @default false + */ + isQuiet?: boolean +} /** * TimeFields allow users to enter and edit time values using a keyboard. diff --git a/packages/@react-spectrum/datepicker/src/index.ts b/packages/@react-spectrum/datepicker/src/index.ts index 612874b37cb..77cbca04d25 100644 --- a/packages/@react-spectrum/datepicker/src/index.ts +++ b/packages/@react-spectrum/datepicker/src/index.ts @@ -16,4 +16,7 @@ export {DatePicker} from './DatePicker'; export {DateRangePicker} from './DateRangePicker'; export {TimeField} from './TimeField'; export {DateField} from './DateField'; -export type {SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps} from '@react-types/datepicker'; +export type {SpectrumDateFieldProps} from './DateField'; +export type {SpectrumDatePickerProps} from './DatePicker'; +export type {SpectrumDateRangePickerProps} from './DateRangePicker'; +export type {SpectrumTimeFieldProps} from './TimeField'; diff --git a/packages/@react-spectrum/datepicker/src/utils.tsx b/packages/@react-spectrum/datepicker/src/utils.tsx index e64da65dc39..49508c1d60b 100644 --- a/packages/@react-spectrum/datepicker/src/utils.tsx +++ b/packages/@react-spectrum/datepicker/src/utils.tsx @@ -15,7 +15,7 @@ import {DateFormatter, useDateFormatter, useLocale} from '@react-aria/i18n'; import {FocusableRef} from '@react-types/shared'; import {FormatterOptions} from '@react-stately/datepicker'; import React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import {SpectrumDatePickerBase} from '@react-types/datepicker'; +import {SpectrumDatePickerBase} from './DatePicker'; import {useDisplayNames} from '@react-aria/datepicker'; import {useLayoutEffect} from '@react-aria/utils'; import {useProvider} from '@react-spectrum/provider'; diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx index 365e6d1477d..8cc19b175ea 100644 --- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx +++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx @@ -15,7 +15,7 @@ import {ActionButton} from '@react-spectrum/button'; import {CalendarDate, getLocalTimeZone, isWeekend, parseDate, today, toZoned} from '@internationalized/date'; import {chain} from '@react-aria/utils'; import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl'; -import {DateRange} from '@react-types/datepicker'; +import {DateRange} from '@react-stately/datepicker'; import {DateRangePicker} from '../'; import {DateValue} from '@react-stately/calendar'; import {Flex} from '@react-spectrum/layout'; diff --git a/packages/@react-stately/datepicker/package.json b/packages/@react-stately/datepicker/package.json index 5dce97dd379..7a49d2a81d2 100644 --- a/packages/@react-stately/datepicker/package.json +++ b/packages/@react-stately/datepicker/package.json @@ -28,10 +28,10 @@ "dependencies": { "@internationalized/date": "^3.10.1", "@internationalized/string": "^3.2.7", + "@react-stately/calendar": "^3.9.1", "@react-stately/form": "^3.2.2", "@react-stately/overlays": "^3.6.21", "@react-stately/utils": "^3.11.0", - "@react-types/datepicker": "^3.13.3", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/datepicker/src/index.ts b/packages/@react-stately/datepicker/src/index.ts index 73547827b59..a8059e8bcb6 100644 --- a/packages/@react-stately/datepicker/src/index.ts +++ b/packages/@react-stately/datepicker/src/index.ts @@ -20,3 +20,4 @@ export type {DatePickerStateOptions, DatePickerState} from './useDatePickerState export type {DateRangePickerStateOptions, DateRangePickerState} from './useDateRangePickerState'; export type {TimeFieldStateOptions, TimeFieldState} from './useTimeFieldState'; export type {FormatterOptions} from './utils'; +export type {DateFieldProps, DatePickerProps, DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, MappedTimeValue, TimePickerProps, TimeValue} from './types'; diff --git a/packages/@react-stately/datepicker/src/types.ts b/packages/@react-stately/datepicker/src/types.ts new file mode 100644 index 00000000000..463f60dcfa4 --- /dev/null +++ b/packages/@react-stately/datepicker/src/types.ts @@ -0,0 +1,115 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date'; +import {FocusableProps, HelpTextProps, InputBase, LabelableProps, RangeValue, Validation, ValueBase} from '@react-types/shared'; +import {OverlayTriggerProps} from '@react-stately/overlays'; +import {PageBehavior} from '@react-stately/calendar'; + +export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; +export type DateRange = RangeValue; +export type MappedDateValue = + T extends ZonedDateTime ? ZonedDateTime : + T extends CalendarDateTime ? CalendarDateTime : + T extends CalendarDate ? CalendarDate : + never; + +export type TimeValue = Time | CalendarDateTime | ZonedDateTime; +export type MappedTimeValue = + T extends ZonedDateTime ? ZonedDateTime : + T extends CalendarDateTime ? CalendarDateTime : + T extends Time ? Time : + never; + +export type Granularity = 'day' | 'hour' | 'minute' | 'second'; +interface DateFieldBase extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps { + /** The minimum allowed date that a user may select. */ + minValue?: DateValue | null, + /** The maximum allowed date that a user may select. */ + maxValue?: DateValue | null, + /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ + isDateUnavailable?: (date: DateValue) => boolean, + /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */ + placeholderValue?: T | null, + /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ + hourCycle?: 12 | 24, + /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */ + granularity?: Granularity, + /** + * Whether to hide the time zone abbreviation. + * @default false + */ + hideTimeZone?: boolean, + /** + * Whether to always show leading zeros in the month, day, and hour fields. + * By default, this is determined by the user's locale. + */ + shouldForceLeadingZeros?: boolean +} + +export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} + +interface DatePickerBase extends DateFieldBase, OverlayTriggerProps { + /** + * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. + * @default visible + */ + pageBehavior?: PageBehavior, + /** + * The day that starts the week. + */ + firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' +} + +export interface DatePickerProps extends DatePickerBase, ValueBase | null> {} + +export interface DateRangePickerProps extends Omit, 'validate'>, Validation>>, ValueBase | null, RangeValue> | null> { + /** + * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, + * i.e. ranges containing unavailable dates, may be selected. + */ + allowsNonContiguousRanges?: boolean, + /** + * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + startName?: string, + /** + * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). + */ + endName?: string +} + +export interface TimePickerProps extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps, ValueBase | null> { + /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ + hourCycle?: 12 | 24, + /** + * Determines the smallest unit that is displayed in the time picker. + * @default 'minute' + */ + granularity?: 'hour' | 'minute' | 'second', + /** Whether to hide the time zone abbreviation. */ + hideTimeZone?: boolean, + /** + * Whether to always show leading zeros in the hour field. + * By default, this is determined by the user's locale. + */ + shouldForceLeadingZeros?: boolean, + /** + * A placeholder time that influences the format of the placeholder shown when no value is selected. + * Defaults to 12:00 AM or 00:00 depending on the hour cycle. + */ + placeholderValue?: T, + /** The minimum allowed time that a user may select. */ + minValue?: TimeValue | null, + /** The maximum allowed time that a user may select. */ + maxValue?: TimeValue | null +} diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts index 2bf28053575..4171ba66499 100644 --- a/packages/@react-stately/datepicker/src/useDateFieldState.ts +++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts @@ -12,7 +12,7 @@ import {Calendar, CalendarIdentifier, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, isEqualCalendar, toCalendar} from '@internationalized/date'; import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils'; -import {DatePickerProps, DateValue, Granularity, MappedDateValue} from '@react-types/datepicker'; +import {DatePickerProps, DateValue, Granularity, MappedDateValue} from './types'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {getPlaceholder} from './placeholders'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts index ad1506bebf4..8da57a4d418 100644 --- a/packages/@react-stately/datepicker/src/useDatePickerState.ts +++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts @@ -11,7 +11,7 @@ */ import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; -import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker'; +import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from './types'; import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts index 18b1231491d..614f8f29a42 100644 --- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts +++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts @@ -12,7 +12,7 @@ import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; -import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker'; +import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from './types'; import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils'; import {FormValidationState, useFormValidationState} from '@react-stately/form'; import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; diff --git a/packages/@react-stately/datepicker/src/useTimeFieldState.ts b/packages/@react-stately/datepicker/src/useTimeFieldState.ts index f3c393a8202..a72ed77dd2e 100644 --- a/packages/@react-stately/datepicker/src/useTimeFieldState.ts +++ b/packages/@react-stately/datepicker/src/useTimeFieldState.ts @@ -11,7 +11,7 @@ */ import {DateFieldState, useDateFieldState} from '.'; -import {DateValue, MappedTimeValue, TimePickerProps, TimeValue} from '@react-types/datepicker'; +import {DateValue, MappedTimeValue, TimePickerProps, TimeValue} from './types'; import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date'; import {useCallback, useMemo} from 'react'; import {useControlledState} from '@react-stately/utils'; diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts index fda08dcd123..642a85cb262 100644 --- a/packages/@react-stately/datepicker/src/utils.ts +++ b/packages/@react-stately/datepicker/src/utils.ts @@ -11,7 +11,7 @@ */ import {Calendar, DateFormatter, getLocalTimeZone, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; -import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker'; +import {DatePickerProps, DateValue, Granularity, TimeValue} from './types'; // @ts-ignore import i18nMessages from '../intl/*.json'; import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string'; diff --git a/packages/@react-types/datepicker/package.json b/packages/@react-types/datepicker/package.json index 38c3905cb3f..93008e7cae9 100644 --- a/packages/@react-types/datepicker/package.json +++ b/packages/@react-types/datepicker/package.json @@ -9,12 +9,9 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@internationalized/date": "^3.10.1", - "@react-stately/calendar": "^3.9.1", - "@react-stately/overlays": "^3.6.21", - "@react-types/calendar": "^3.8.1", - "@react-types/overlays": "^3.9.2", - "@react-types/shared": "^3.32.1" + "@react-aria/datepicker": "^3.15.3", + "@react-spectrum/datepicker": "^3.14.9", + "@react-stately/datepicker": "^3.15.3" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts index 890ea7ae732..ed88aaaa4be 100644 --- a/packages/@react-types/datepicker/src/index.d.ts +++ b/packages/@react-types/datepicker/src/index.d.ts @@ -10,185 +10,14 @@ * governing permissions and limitations under the License. */ -import { - AriaLabelingProps, - DOMProps, - FocusableProps, - HelpTextProps, - InputBase, - InputDOMProps, - LabelableProps, - RangeValue, - SpectrumFieldValidation, - SpectrumLabelableProps, - StyleProps, - Validation, - ValueBase -} from '@react-types/shared'; -import {CalendarDate, CalendarDateTime, CalendarIdentifier, Calendar as ICalendar, Time, ZonedDateTime} from '@internationalized/date'; -import {OverlayTriggerProps} from '@react-stately/overlays'; -import {PageBehavior} from '@react-stately/calendar'; +import {AriaDatePickerProps} from '@react-aria/datepicker'; +import {DateValue, TimeValue} from '@react-stately/datepicker'; +import {SpectrumTimeFieldProps} from '@react-spectrum/datepicker'; -export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; -type MappedDateValue = - T extends ZonedDateTime ? ZonedDateTime : - T extends CalendarDateTime ? CalendarDateTime : - T extends CalendarDate ? CalendarDate : - never; - -export type Granularity = 'day' | 'hour' | 'minute' | 'second'; -interface DateFieldBase extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps { - /** The minimum allowed date that a user may select. */ - minValue?: DateValue | null, - /** The maximum allowed date that a user may select. */ - maxValue?: DateValue | null, - /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ - isDateUnavailable?: (date: DateValue) => boolean, - /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */ - placeholderValue?: T | null, - /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ - hourCycle?: 12 | 24, - /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */ - granularity?: Granularity, - /** - * Whether to hide the time zone abbreviation. - * @default false - */ - hideTimeZone?: boolean, - /** - * Whether to always show leading zeros in the month, day, and hour fields. - * By default, this is determined by the user's locale. - */ - shouldForceLeadingZeros?: boolean -} - -interface AriaDateFieldBaseProps extends DateFieldBase, AriaLabelingProps, DOMProps {} -export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} -export interface AriaDateFieldProps extends DateFieldProps, AriaDateFieldBaseProps, InputDOMProps { - /** - * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). - */ - autoComplete?: string -} - -interface DatePickerBase extends DateFieldBase, OverlayTriggerProps { - /** - * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. - * @default visible - */ - pageBehavior?: PageBehavior, - /** - * The day that starts the week. - */ - firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' -} -export interface AriaDatePickerBaseProps extends DatePickerBase, AriaLabelingProps, InputDOMProps, DOMProps {} - -export interface DatePickerProps extends DatePickerBase, ValueBase | null> {} -export interface AriaDatePickerProps extends DatePickerProps, AriaDatePickerBaseProps, InputDOMProps { - /** - * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). - */ - autoComplete?: string -} - -export type DateRange = RangeValue; -export interface DateRangePickerProps extends Omit, 'validate'>, Validation>>, ValueBase | null, RangeValue> | null> { - /** - * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, - * i.e. ranges containing unavailable dates, may be selected. - */ - allowsNonContiguousRanges?: boolean, - /** - * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - startName?: string, - /** - * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). - */ - endName?: string -} - -export interface AriaDateRangePickerProps extends Omit, 'validate' | 'name'>, DateRangePickerProps {} - -interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation>, StyleProps { - /** - * Whether the date picker should be displayed with a quiet style. - * @default false - */ - isQuiet?: boolean, - /** - * Whether to show the localized date format as help text below the field. - * @default false - */ - showFormatHelpText?: boolean -} - -interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelableProps, StyleProps { - /** - * The maximum number of months to display at once in the calendar popover, if screen space permits. - * @default 1 - */ - maxVisibleMonths?: number, - /** - * Whether the calendar popover should automatically flip direction when space is limited. - * @default true - */ - shouldFlip?: boolean, - /** - * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) - * object for a given calendar identifier. This will be used for the popover calendar. If not provided, the - * `createCalendar` function from `@internationalized/date` will be used. - */ - createCalendar?: (identifier: CalendarIdentifier) => ICalendar -} - -export interface SpectrumDatePickerProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDatePickerBase {} -export interface SpectrumDateRangePickerProps extends Omit, 'isInvalid' | 'validationState'>, Omit, 'validate'> {} -export interface SpectrumDateFieldProps extends Omit, 'isInvalid' | 'validationState' | 'autoComplete'>, SpectrumDateFieldBase {} - -export type TimeValue = Time | CalendarDateTime | ZonedDateTime; -type MappedTimeValue = - T extends ZonedDateTime ? ZonedDateTime : - T extends CalendarDateTime ? CalendarDateTime : - T extends Time ? Time : - never; - -export interface TimePickerProps extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps, ValueBase | null> { - /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ - hourCycle?: 12 | 24, - /** - * Determines the smallest unit that is displayed in the time picker. - * @default 'minute' - */ - granularity?: 'hour' | 'minute' | 'second', - /** Whether to hide the time zone abbreviation. */ - hideTimeZone?: boolean, - /** - * Whether to always show leading zeros in the hour field. - * By default, this is determined by the user's locale. - */ - shouldForceLeadingZeros?: boolean, - /** - * A placeholder time that influences the format of the placeholder shown when no value is selected. - * Defaults to 12:00 AM or 00:00 depending on the hour cycle. - */ - placeholderValue?: T, - /** The minimum allowed time that a user may select. */ - minValue?: TimeValue | null, - /** The maximum allowed time that a user may select. */ - maxValue?: TimeValue | null -} - -export interface AriaTimeFieldProps extends TimePickerProps, AriaLabelingProps, DOMProps, InputDOMProps {} - -export interface SpectrumTimeFieldProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumFieldValidation>, SpectrumLabelableProps, StyleProps, InputDOMProps { - /** - * Whether the time field should be displayed with a quiet style. - * @default false - */ - isQuiet?: boolean -} +export {DateValue, DateRange, TimeValue, MappedDateValue, MappedTimeValue, Granularity, DateFieldProps, DatePickerProps, DateRangePickerProps, TimePickerProps} from '@react-stately/datepicker'; +export {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, AriaTimeFieldProps} from '@react-aria/datepicker'; +export {SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumDateFieldProps, SpectrumTimeFieldProps} from '@react-spectrum/datepicker'; // backward compatibility +export type AriaDatePickerBaseProps = AriaDatePickerProps; export type SpectrumTimePickerProps = SpectrumTimeFieldProps; From 58f2e7d212c0aeec0acee452158bd5f7ce9e575a Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 14:18:23 -0500 Subject: [PATCH 45/56] Provider --- examples/rsp-next-ts-17/pages/_app.tsx | 2 +- examples/rsp-next-ts/pages/_app.tsx | 2 +- packages/@adobe/react-spectrum/src/index.ts | 2 +- packages/@react-spectrum/card/package.json | 1 - .../@react-spectrum/card/src/BaseLayout.tsx | 2 +- packages/@react-spectrum/card/src/types.ts | 2 +- .../menu/test/SubMenuTrigger.test.tsx | 3 +- .../provider/chromatic/Provider.stories.tsx | 3 +- .../@react-spectrum/provider/package.json | 1 - .../@react-spectrum/provider/src/Provider.tsx | 2 +- .../@react-spectrum/provider/src/context.ts | 2 +- .../@react-spectrum/provider/src/index.ts | 3 +- .../provider/src/mediaQueries.ts | 2 +- .../@react-spectrum/provider/src/types.ts | 124 ++++++++++++++++++ packages/@react-spectrum/s2/package.json | 1 - packages/@react-spectrum/s2/src/Provider.tsx | 9 +- packages/@react-spectrum/s2/src/Tooltip.tsx | 3 +- .../table/test/TableSizing.test.tsx | 3 +- .../table/test/TreeGridTable.test.tsx | 3 +- .../@react-spectrum/theme-dark/package.json | 2 +- .../@react-spectrum/theme-dark/src/index.ts | 2 +- .../theme-default/package.json | 2 +- .../theme-default/src/index.ts | 2 +- .../theme-express/package.json | 2 +- .../theme-express/src/index.ts | 2 +- .../@react-spectrum/theme-light/package.json | 2 +- .../@react-spectrum/theme-light/src/index.ts | 2 +- packages/@react-types/provider/package.json | 5 +- packages/@react-types/provider/src/index.d.ts | 113 +--------------- 29 files changed, 156 insertions(+), 148 deletions(-) create mode 100644 packages/@react-spectrum/provider/src/types.ts diff --git a/examples/rsp-next-ts-17/pages/_app.tsx b/examples/rsp-next-ts-17/pages/_app.tsx index d5a7ef8d618..3d87e2c78b2 100644 --- a/examples/rsp-next-ts-17/pages/_app.tsx +++ b/examples/rsp-next-ts-17/pages/_app.tsx @@ -8,8 +8,8 @@ import { Flex, Grid, View, + ColorScheme, } from "@adobe/react-spectrum"; -import { ColorScheme } from "@react-types/provider"; import { useState } from "react"; import Moon from "@spectrum-icons/workflow/Moon"; import Light from "@spectrum-icons/workflow/Light"; diff --git a/examples/rsp-next-ts/pages/_app.tsx b/examples/rsp-next-ts/pages/_app.tsx index d791494cdf9..db3f8aacb4c 100644 --- a/examples/rsp-next-ts/pages/_app.tsx +++ b/examples/rsp-next-ts/pages/_app.tsx @@ -7,8 +7,8 @@ import { Flex, Grid, View, + ColorScheme, } from "@adobe/react-spectrum"; -import { ColorScheme } from "@react-types/provider"; import { useState } from "react"; import Moon from "@spectrum-icons/workflow/Moon"; import Light from "@spectrum-icons/workflow/Light"; diff --git a/packages/@adobe/react-spectrum/src/index.ts b/packages/@adobe/react-spectrum/src/index.ts index c9085766e5d..d868b789ade 100644 --- a/packages/@adobe/react-spectrum/src/index.ts +++ b/packages/@adobe/react-spectrum/src/index.ts @@ -106,7 +106,7 @@ export type {SpectrumMeterProps} from '@react-spectrum/meter'; export type {SpectrumNumberFieldProps} from '@react-spectrum/numberfield'; export type {SpectrumPickerProps} from '@react-spectrum/picker'; export type {SpectrumProgressBarProps, SpectrumProgressCircleProps} from '@react-spectrum/progress'; -export type {ProviderContext, ProviderProps} from '@react-spectrum/provider'; +export type {ProviderContext, ProviderProps, ColorScheme, Scale, Theme} from '@react-spectrum/provider'; export type {SpectrumRadioGroupProps, SpectrumRadioProps} from '@react-spectrum/radio'; export type {SpectrumRangeSliderProps, SpectrumSliderProps} from '@react-spectrum/slider'; export type {SpectrumSearchFieldProps} from '@react-spectrum/searchfield'; diff --git a/packages/@react-spectrum/card/package.json b/packages/@react-spectrum/card/package.json index df19303c8f5..c35fbf67ad4 100644 --- a/packages/@react-spectrum/card/package.json +++ b/packages/@react-spectrum/card/package.json @@ -53,7 +53,6 @@ "@react-stately/grid": "^3.11.7", "@react-stately/list": "^3.13.2", "@react-stately/virtualizer": "^4.4.4", - "@react-types/provider": "^3.8.13", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/card/src/BaseLayout.tsx b/packages/@react-spectrum/card/src/BaseLayout.tsx index 03e85fe0135..989158d14d6 100644 --- a/packages/@react-spectrum/card/src/BaseLayout.tsx +++ b/packages/@react-spectrum/card/src/BaseLayout.tsx @@ -15,7 +15,7 @@ import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared'; import {getChildNodes, getFirstItem} from '@react-stately/collections'; import {GridCollection} from '@react-stately/grid'; import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer'; -import {Scale} from '@react-types/provider'; +import {Scale} from '@react-spectrum/provider'; export interface BaseLayoutOptions { collator?: Intl.Collator, diff --git a/packages/@react-spectrum/card/src/types.ts b/packages/@react-spectrum/card/src/types.ts index fcfd925216b..e017d759c5f 100644 --- a/packages/@react-spectrum/card/src/types.ts +++ b/packages/@react-spectrum/card/src/types.ts @@ -13,7 +13,7 @@ import {AriaLabelingProps, AsyncLoadable, Collection, CollectionBase, Direction, DOMProps, KeyboardDelegate, LoadingState, MultipleSelection, Node, Orientation, StyleProps} from '@react-types/shared'; import {Layout} from '@react-stately/virtualizer'; import {ReactNode} from 'react'; -import {Scale} from '@react-types/provider'; +import {Scale} from '@react-spectrum/provider'; interface AriaCardProps extends AriaLabelingProps {} diff --git a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx index 0fa0a94378b..ebc60312155 100644 --- a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx +++ b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx @@ -12,9 +12,8 @@ import {act, fireEvent, installPointerEvent, pointerMap, render as renderComponent, triggerTouch, within} from '@react-spectrum/test-utils-internal'; import {ComplexRender as Complex, SubmenuDynamicRender as SubmenuDynamic, SubmenuStaticRender as SubmenuStatic, TabBehaviorRender as TabBehaviorStory} from '../stories/Submenu.stories'; -import {Provider} from '@react-spectrum/provider'; +import {Provider, Scale} from '@react-spectrum/provider'; import React from 'react'; -import type {Scale} from '@react-types/provider'; import {theme} from '@react-spectrum/theme-default'; import userEvent from '@testing-library/user-event'; diff --git a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx index bd12e7c7184..10c2137d75e 100644 --- a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx +++ b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx @@ -18,8 +18,7 @@ import {Flex} from '@react-spectrum/layout'; import {Form} from '@react-spectrum/form'; import {Meta, StoryFn, StoryObj} from '@storybook/react'; import {NumberField} from '@react-spectrum/numberfield'; -import {Provider} from '../'; -import {ProviderProps} from '@react-types/provider'; +import {Provider, ProviderProps} from '../'; import {Radio, RadioGroup} from '@react-spectrum/radio'; import React, {JSX} from 'react'; import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; diff --git a/packages/@react-spectrum/provider/package.json b/packages/@react-spectrum/provider/package.json index d5699dd4058..9c365139df2 100644 --- a/packages/@react-spectrum/provider/package.json +++ b/packages/@react-spectrum/provider/package.json @@ -44,7 +44,6 @@ "@react-aria/overlays": "^3.31.0", "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/provider": "^3.8.13", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0", "clsx": "^2.0.0" diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/packages/@react-spectrum/provider/src/Provider.tsx index 53fde2faf3c..9b6aded9552 100644 --- a/packages/@react-spectrum/provider/src/Provider.tsx +++ b/packages/@react-spectrum/provider/src/Provider.tsx @@ -23,7 +23,7 @@ import {DOMRef} from '@react-types/shared'; import {filterDOMProps, RouterProvider} from '@react-aria/utils'; import {I18nProvider, useLocale} from '@react-aria/i18n'; import {ModalProvider, useModalProvider} from '@react-aria/overlays'; -import {ProviderContext, ProviderProps} from '@react-types/provider'; +import {ProviderContext, ProviderProps} from './types'; import React, {useContext, useEffect, useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/page/vars.css'; import typographyStyles from '@adobe/spectrum-css-temp/components/typography/index.css'; diff --git a/packages/@react-spectrum/provider/src/context.ts b/packages/@react-spectrum/provider/src/context.ts index 2c104719b04..6255e252bd2 100644 --- a/packages/@react-spectrum/provider/src/context.ts +++ b/packages/@react-spectrum/provider/src/context.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ProviderContext} from '@react-types/provider'; +import {ProviderContext} from './types'; import React from 'react'; // Context is placed in a separate file to avoid fast refresh issue where the old provider context values diff --git a/packages/@react-spectrum/provider/src/index.ts b/packages/@react-spectrum/provider/src/index.ts index 31a2ed296bc..34d38719dfd 100644 --- a/packages/@react-spectrum/provider/src/index.ts +++ b/packages/@react-spectrum/provider/src/index.ts @@ -13,5 +13,4 @@ /// export {Provider, useProvider, useProviderProps} from './Provider'; -export type {ProviderContext} from '@react-types/provider'; -export type {ProviderProps} from '@react-types/provider'; +export type {ProviderContext, ProviderProps, ColorScheme, Scale, Theme, Breakpoints, CSSModule} from './types'; diff --git a/packages/@react-spectrum/provider/src/mediaQueries.ts b/packages/@react-spectrum/provider/src/mediaQueries.ts index f01180c368e..39453cbeb1a 100644 --- a/packages/@react-spectrum/provider/src/mediaQueries.ts +++ b/packages/@react-spectrum/provider/src/mediaQueries.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {ColorScheme, Scale, Theme} from '@react-types/provider'; +import {ColorScheme, Scale, Theme} from './types'; import {useMediaQuery} from '@react-spectrum/utils'; export function useColorScheme(theme: Theme, defaultColorScheme: ColorScheme): ColorScheme { diff --git a/packages/@react-spectrum/provider/src/types.ts b/packages/@react-spectrum/provider/src/types.ts new file mode 100644 index 00000000000..9e54d05c218 --- /dev/null +++ b/packages/@react-spectrum/provider/src/types.ts @@ -0,0 +1,124 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {DOMProps, Href, RouterOptions, StyleProps, ValidationState} from '@react-types/shared'; +import {ReactNode} from 'react'; + +export type ColorScheme = 'light' | 'dark'; +export type Scale = 'medium' | 'large'; +export interface Breakpoints { + S?: number, + M?: number, + L?: number, + // Currently, it only deals with pixels, but we need to fix it to accept em or rem as well. + [custom: string]: number | undefined +} + +export type CSSModule = { + [className: string]: string +}; + +/** A theme object defines CSS variables for a theme, across multiple color schemes and scales. */ +export interface Theme { + /** CSS module defining the global variables, which do not change between color schemes/scales. */ + global?: CSSModule, + /** CSS module defining the variables for the light color scheme. */ + light?: CSSModule, + /** CSS module defining the variables for the dark color scheme. */ + dark?: CSSModule, + /** CSS module defining the variables for the medium scale. */ + medium?: CSSModule, + /** CSS module defining the variables for the large scale. */ + large?: CSSModule +} + +interface ContextProps { + /** Whether descendants should be displayed with the quiet style. */ + isQuiet?: boolean, + /** Whether descendants should be displayed with the emphasized style. */ + isEmphasized?: boolean, + /** Whether descendants should be disabled. */ + isDisabled?: boolean, + /** Whether descendants should be displayed with the required style. */ + isRequired?: boolean, + /** Whether descendants should be read only. */ + isReadOnly?: boolean, + /** Whether descendants should be displayed with the validation state style. */ + validationState?: ValidationState +} + +interface Router { + navigate: (path: string, routerOptions: RouterOptions | undefined) => void, + useHref?: (href: Href) => string +} + +export interface ProviderProps extends ContextProps, DOMProps, StyleProps { + /** The content of the Provider. */ + children: ReactNode, + /** + * The theme for your application. + */ + theme?: Theme, + /** + * The color scheme for your application. + * Defaults to operating system preferences. + */ + colorScheme?: ColorScheme, + /** + * The default color scheme if no operating system setting is available. + * @default 'light' + */ + defaultColorScheme?: ColorScheme, + /** + * Sets the scale for your applications. Defaults based on device pointer type. + */ + scale?: Scale, + /** + * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. + * Defaults to the browser/OS language setting. + * @default 'en-US' + */ + locale?: string, + /** + * The breakpoints for styleProps. + * Do not use `base` property. + * @default {S:380,M:768,L:1024} + */ + breakpoints?: Breakpoints, + /** + * Provides a client side router to all nested React Spectrum links to enable client side navigation. + */ + router?: Router +} + +export interface ProviderContext extends ContextProps { + /** + * The package version number of the nearest parent Provider. + */ + version: string, + /** + * The theme of the nearest parent Provider. + */ + theme: Theme, + /** + * The color scheme of the nearest parent Provider. + */ + colorScheme: ColorScheme, + /** + * The scale of the nearest parent Provider. + */ + scale: Scale, + /** + * The breakpoints of the nearest parent Provider used for styleProps. + */ + breakpoints: Breakpoints +} diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 9c65d9c96cd..23b75fff0cd 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -166,7 +166,6 @@ "@react-stately/layout": "^4.5.2", "@react-stately/utils": "^3.11.0", "@react-types/overlays": "^3.9.2", - "@react-types/provider": "^3.8.13", "@react-types/shared": "^3.32.1", "@react-types/textfield": "^3.12.6", "csstype": "^3.0.2", diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx index 704519dc913..6a1917dd569 100644 --- a/packages/@react-spectrum/s2/src/Provider.tsx +++ b/packages/@react-spectrum/s2/src/Provider.tsx @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import type {ColorScheme, Router} from '@react-types/provider'; import {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {createContext, JSX, ReactNode, useContext} from 'react'; -import {DOMProps} from '@react-types/shared'; +import {DOMProps, Href, RouterOptions} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {Fonts} from './Fonts'; import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'}; @@ -22,6 +21,12 @@ import {mergeStyles} from '../style/runtime'; import {style} from '../style' with {type: 'macro'}; import {StyleString} from '../style/types'; +export type ColorScheme = 'light' | 'dark'; +interface Router { + navigate: (path: string, routerOptions: RouterOptions | undefined) => void, + useHref?: (href: Href) => string +} + export interface ProviderProps extends UnsafeStyles, DOMProps { /** The content of the Provider. */ children: ReactNode, diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index 504cba97f73..27143793d14 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -20,8 +20,7 @@ import { useLocale } from 'react-aria-components'; import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'}; -import {ColorScheme} from '@react-types/provider'; -import {ColorSchemeContext} from './Provider'; +import {ColorScheme, ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react'; import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared'; import {style} from '../style' with {type: 'macro'}; diff --git a/packages/@react-spectrum/table/test/TableSizing.test.tsx b/packages/@react-spectrum/table/test/TableSizing.test.tsx index 3148e74afce..f081cbb242b 100644 --- a/packages/@react-spectrum/table/test/TableSizing.test.tsx +++ b/packages/@react-spectrum/table/test/TableSizing.test.tsx @@ -20,10 +20,9 @@ import {ControllingResize} from '../stories/ControllingResize'; import {fireEvent, installPointerEvent, pointerMap, simulateDesktop, triggerTouch} from '@react-spectrum/test-utils-internal'; import {HidingColumns} from '../stories/HidingColumns'; import {Key} from '@react-types/shared'; -import {Provider} from '@react-spectrum/provider'; +import {Provider, Scale} from '@react-spectrum/provider'; import React, {useRef} from 'react'; import {resizingTests} from '../../../@react-aria/table/test/tableResizingTests'; -import {Scale} from '@react-types/provider'; import {setInteractionModality} from '@react-aria/interactions'; import {theme} from '@react-spectrum/theme-default'; import {UNSAFE_PortalProvider} from '@react-aria/overlays'; diff --git a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx index 7b5eb4b1914..5ac137b428b 100644 --- a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx +++ b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx @@ -30,9 +30,8 @@ import { UserSetRowHeaderRender as UserSetRowHeaderTable } from '../stories/TreeGridTable.stories'; import {enableTableNestedRows} from '@react-stately/flags'; -import {Provider} from '@react-spectrum/provider'; +import {Provider, Scale} from '@react-spectrum/provider'; import React from 'react'; -import {Scale} from '@react-types/provider'; import {scrollIntoView} from '@react-aria/utils'; import {theme} from '@react-spectrum/theme-default'; import userEvent from '@testing-library/user-event'; diff --git a/packages/@react-spectrum/theme-dark/package.json b/packages/@react-spectrum/theme-dark/package.json index 9c250547db2..88b00972e0e 100644 --- a/packages/@react-spectrum/theme-dark/package.json +++ b/packages/@react-spectrum/theme-dark/package.json @@ -40,7 +40,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/provider": "^3.8.13", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -50,6 +49,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.12", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-dark/src/index.ts b/packages/@react-spectrum/theme-dark/src/index.ts index 6013c41b012..a8469c3dad2 100644 --- a/packages/@react-spectrum/theme-dark/src/index.ts +++ b/packages/@react-spectrum/theme-dark/src/index.ts @@ -17,7 +17,7 @@ import darkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css'; import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css'; import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { global, diff --git a/packages/@react-spectrum/theme-default/package.json b/packages/@react-spectrum/theme-default/package.json index 0b66a589f41..d75ca028a4e 100644 --- a/packages/@react-spectrum/theme-default/package.json +++ b/packages/@react-spectrum/theme-default/package.json @@ -40,7 +40,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/provider": "^3.8.13", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -50,6 +49,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.12", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-default/src/index.ts b/packages/@react-spectrum/theme-default/src/index.ts index 39ce13f51ff..60756dc88a2 100644 --- a/packages/@react-spectrum/theme-default/src/index.ts +++ b/packages/@react-spectrum/theme-default/src/index.ts @@ -17,7 +17,7 @@ import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css'; import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; import light from '@adobe/spectrum-css-temp/vars/spectrum-light.css'; import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { global, diff --git a/packages/@react-spectrum/theme-express/package.json b/packages/@react-spectrum/theme-express/package.json index cf9a5153270..5be007f0229 100644 --- a/packages/@react-spectrum/theme-express/package.json +++ b/packages/@react-spectrum/theme-express/package.json @@ -41,7 +41,6 @@ }, "dependencies": { "@react-spectrum/theme-default": "^3.5.22", - "@react-types/provider": "^3.8.13", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -51,6 +50,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.12", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-express/src/index.ts b/packages/@react-spectrum/theme-express/src/index.ts index 4c73b931185..6030746685b 100644 --- a/packages/@react-spectrum/theme-express/src/index.ts +++ b/packages/@react-spectrum/theme-express/src/index.ts @@ -14,7 +14,7 @@ import {theme as defaultTheme} from '@react-spectrum/theme-default'; import express from '@adobe/spectrum-css-temp/vars/express.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { ...defaultTheme, diff --git a/packages/@react-spectrum/theme-light/package.json b/packages/@react-spectrum/theme-light/package.json index cf77cd9041b..764d721bfb9 100644 --- a/packages/@react-spectrum/theme-light/package.json +++ b/packages/@react-spectrum/theme-light/package.json @@ -40,7 +40,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/provider": "^3.8.13", "@swc/helpers": "^0.5.0" }, "devDependencies": { @@ -50,6 +49,7 @@ "access": "public" }, "peerDependencies": { + "@react-spectrum/provider": "^3.10.12", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-spectrum/theme-light/src/index.ts b/packages/@react-spectrum/theme-light/src/index.ts index e745342da6c..127f019a67c 100644 --- a/packages/@react-spectrum/theme-light/src/index.ts +++ b/packages/@react-spectrum/theme-light/src/index.ts @@ -17,7 +17,7 @@ import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css'; import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css'; import lightest from '@adobe/spectrum-css-temp/vars/spectrum-lightest.css'; import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css'; -import {Theme} from '@react-types/provider'; +import {Theme} from '@react-spectrum/provider'; export let theme: Theme = { global, diff --git a/packages/@react-types/provider/package.json b/packages/@react-types/provider/package.json index af4186dd289..6cb824337ba 100644 --- a/packages/@react-types/provider/package.json +++ b/packages/@react-types/provider/package.json @@ -8,10 +8,9 @@ "type": "git", "url": "https://github.com/adobe/react-spectrum" }, - "dependencies": { - "@react-types/shared": "^3.32.1" - }, + "dependencies": {}, "peerDependencies": { + "@react-spectrum/provider": "^3.10.12", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/provider/src/index.d.ts b/packages/@react-types/provider/src/index.d.ts index 9e54d05c218..cc0ffc0b9d9 100644 --- a/packages/@react-types/provider/src/index.d.ts +++ b/packages/@react-types/provider/src/index.d.ts @@ -10,115 +10,4 @@ * governing permissions and limitations under the License. */ -import {DOMProps, Href, RouterOptions, StyleProps, ValidationState} from '@react-types/shared'; -import {ReactNode} from 'react'; - -export type ColorScheme = 'light' | 'dark'; -export type Scale = 'medium' | 'large'; -export interface Breakpoints { - S?: number, - M?: number, - L?: number, - // Currently, it only deals with pixels, but we need to fix it to accept em or rem as well. - [custom: string]: number | undefined -} - -export type CSSModule = { - [className: string]: string -}; - -/** A theme object defines CSS variables for a theme, across multiple color schemes and scales. */ -export interface Theme { - /** CSS module defining the global variables, which do not change between color schemes/scales. */ - global?: CSSModule, - /** CSS module defining the variables for the light color scheme. */ - light?: CSSModule, - /** CSS module defining the variables for the dark color scheme. */ - dark?: CSSModule, - /** CSS module defining the variables for the medium scale. */ - medium?: CSSModule, - /** CSS module defining the variables for the large scale. */ - large?: CSSModule -} - -interface ContextProps { - /** Whether descendants should be displayed with the quiet style. */ - isQuiet?: boolean, - /** Whether descendants should be displayed with the emphasized style. */ - isEmphasized?: boolean, - /** Whether descendants should be disabled. */ - isDisabled?: boolean, - /** Whether descendants should be displayed with the required style. */ - isRequired?: boolean, - /** Whether descendants should be read only. */ - isReadOnly?: boolean, - /** Whether descendants should be displayed with the validation state style. */ - validationState?: ValidationState -} - -interface Router { - navigate: (path: string, routerOptions: RouterOptions | undefined) => void, - useHref?: (href: Href) => string -} - -export interface ProviderProps extends ContextProps, DOMProps, StyleProps { - /** The content of the Provider. */ - children: ReactNode, - /** - * The theme for your application. - */ - theme?: Theme, - /** - * The color scheme for your application. - * Defaults to operating system preferences. - */ - colorScheme?: ColorScheme, - /** - * The default color scheme if no operating system setting is available. - * @default 'light' - */ - defaultColorScheme?: ColorScheme, - /** - * Sets the scale for your applications. Defaults based on device pointer type. - */ - scale?: Scale, - /** - * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. - * Defaults to the browser/OS language setting. - * @default 'en-US' - */ - locale?: string, - /** - * The breakpoints for styleProps. - * Do not use `base` property. - * @default {S:380,M:768,L:1024} - */ - breakpoints?: Breakpoints, - /** - * Provides a client side router to all nested React Spectrum links to enable client side navigation. - */ - router?: Router -} - -export interface ProviderContext extends ContextProps { - /** - * The package version number of the nearest parent Provider. - */ - version: string, - /** - * The theme of the nearest parent Provider. - */ - theme: Theme, - /** - * The color scheme of the nearest parent Provider. - */ - colorScheme: ColorScheme, - /** - * The scale of the nearest parent Provider. - */ - scale: Scale, - /** - * The breakpoints of the nearest parent Provider used for styleProps. - */ - breakpoints: Breakpoints -} +export {ColorScheme, Scale, Breakpoints, CSSModule, Theme, ProviderProps, ProviderContext} from '@react-spectrum/provider'; From b71d35e45896ccfe548cc9f7583b89ae793da68f Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 14:25:07 -0500 Subject: [PATCH 46/56] Remove unused dependencies --- packages/@react-aria/combobox/package.json | 1 - packages/@react-aria/datepicker/package.json | 2 -- packages/@react-aria/disclosure/package.json | 1 - packages/@react-aria/dnd/package.json | 1 - packages/@react-aria/grid/package.json | 1 - packages/@react-aria/listbox/package.json | 1 - packages/@react-aria/menu/package.json | 1 - packages/@react-aria/numberfield/package.json | 1 - packages/@react-aria/overlays/package.json | 2 -- packages/@react-aria/select/package.json | 1 - packages/@react-aria/spinbutton/package.json | 1 - packages/@react-aria/table/package.json | 1 - packages/@react-aria/tag/package.json | 1 - packages/@react-aria/toast/package.json | 1 - packages/@react-aria/tree/package.json | 1 - packages/@react-spectrum/breadcrumbs/package.json | 1 - packages/@react-spectrum/calendar/package.json | 1 - packages/@react-spectrum/checkbox/package.json | 1 - packages/@react-spectrum/combobox/package.json | 1 - packages/@react-spectrum/image/package.json | 1 - packages/@react-spectrum/label/package.json | 1 - packages/@react-spectrum/layout/package.json | 1 - packages/@react-spectrum/listbox/package.json | 1 - packages/@react-spectrum/menu/package.json | 1 - packages/@react-spectrum/numberfield/package.json | 1 - packages/@react-spectrum/overlays/package.json | 1 - packages/@react-spectrum/s2/package.json | 2 -- packages/@react-spectrum/searchfield/package.json | 1 - packages/@react-spectrum/statuslight/package.json | 1 - packages/@react-spectrum/textfield/package.json | 1 - packages/@react-spectrum/tooltip/package.json | 1 - packages/@react-stately/calendar/package.json | 1 - packages/@react-stately/overlays/package.json | 1 - packages/@react-stately/slider/package.json | 1 - packages/dev/s2-docs/package.json | 1 - 35 files changed, 38 deletions(-) diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json index 7d836a1445f..124d0198094 100644 --- a/packages/@react-aria/combobox/package.json +++ b/packages/@react-aria/combobox/package.json @@ -39,7 +39,6 @@ "@react-stately/collections": "^3.12.8", "@react-stately/combobox": "^3.12.1", "@react-stately/form": "^3.2.2", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json index 3326da5ebae..7446778411e 100644 --- a/packages/@react-aria/datepicker/package.json +++ b/packages/@react-aria/datepicker/package.json @@ -42,8 +42,6 @@ "@react-stately/calendar": "^3.9.1", "@react-stately/datepicker": "^3.15.3", "@react-stately/form": "^3.2.2", - "@react-types/button": "^3.14.1", - "@react-types/calendar": "^3.8.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/disclosure/package.json b/packages/@react-aria/disclosure/package.json index bc4e537f243..f8a0484eb8b 100644 --- a/packages/@react-aria/disclosure/package.json +++ b/packages/@react-aria/disclosure/package.json @@ -30,7 +30,6 @@ "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.32.0", "@react-stately/disclosure": "^3.0.9", - "@react-types/button": "^3.14.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-aria/dnd/package.json b/packages/@react-aria/dnd/package.json index 5b5f886305a..028ea4e3e2b 100644 --- a/packages/@react-aria/dnd/package.json +++ b/packages/@react-aria/dnd/package.json @@ -35,7 +35,6 @@ "@react-aria/utils": "^3.32.0", "@react-stately/collections": "^3.12.8", "@react-stately/dnd": "^3.7.2", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/grid/package.json b/packages/@react-aria/grid/package.json index 6ce480ec7eb..365b5d07cbe 100644 --- a/packages/@react-aria/grid/package.json +++ b/packages/@react-aria/grid/package.json @@ -36,7 +36,6 @@ "@react-stately/collections": "^3.12.8", "@react-stately/grid": "^3.11.7", "@react-stately/selection": "^3.20.7", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/listbox/package.json b/packages/@react-aria/listbox/package.json index 22650df6a5a..6c93bc3c7ad 100644 --- a/packages/@react-aria/listbox/package.json +++ b/packages/@react-aria/listbox/package.json @@ -32,7 +32,6 @@ "@react-aria/utils": "^3.32.0", "@react-stately/collections": "^3.12.8", "@react-stately/list": "^3.13.2", - "@react-types/listbox": "^3.7.4", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/menu/package.json b/packages/@react-aria/menu/package.json index 96936b25e1c..e1e08f40f31 100644 --- a/packages/@react-aria/menu/package.json +++ b/packages/@react-aria/menu/package.json @@ -37,7 +37,6 @@ "@react-stately/menu": "^3.9.9", "@react-stately/selection": "^3.20.7", "@react-stately/tree": "^3.9.4", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json index d55be5d38ca..71ad6ad5e15 100644 --- a/packages/@react-aria/numberfield/package.json +++ b/packages/@react-aria/numberfield/package.json @@ -34,7 +34,6 @@ "@react-aria/utils": "^3.32.0", "@react-stately/form": "^3.2.2", "@react-stately/numberfield": "^3.10.3", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/overlays/package.json b/packages/@react-aria/overlays/package.json index 2a6e458c408..958d54c1c72 100644 --- a/packages/@react-aria/overlays/package.json +++ b/packages/@react-aria/overlays/package.json @@ -34,8 +34,6 @@ "@react-aria/utils": "^3.32.0", "@react-aria/visually-hidden": "^3.8.29", "@react-stately/overlays": "^3.6.21", - "@react-types/button": "^3.14.1", - "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/select/package.json b/packages/@react-aria/select/package.json index 8a13f316201..9f4561dd7a4 100644 --- a/packages/@react-aria/select/package.json +++ b/packages/@react-aria/select/package.json @@ -37,7 +37,6 @@ "@react-aria/utils": "^3.32.0", "@react-aria/visually-hidden": "^3.8.29", "@react-stately/select": "^3.9.0", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/spinbutton/package.json b/packages/@react-aria/spinbutton/package.json index cdc785698cf..19a913406c3 100644 --- a/packages/@react-aria/spinbutton/package.json +++ b/packages/@react-aria/spinbutton/package.json @@ -30,7 +30,6 @@ "@react-aria/i18n": "^3.12.14", "@react-aria/live-announcer": "^3.4.4", "@react-aria/utils": "^3.32.0", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/table/package.json b/packages/@react-aria/table/package.json index 2067509e41b..d86dd9ff8c0 100644 --- a/packages/@react-aria/table/package.json +++ b/packages/@react-aria/table/package.json @@ -38,7 +38,6 @@ "@react-stately/flags": "^3.1.2", "@react-stately/grid": "^3.11.7", "@react-stately/table": "^3.15.2", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/tag/package.json b/packages/@react-aria/tag/package.json index 5799360073c..032487b566e 100644 --- a/packages/@react-aria/tag/package.json +++ b/packages/@react-aria/tag/package.json @@ -34,7 +34,6 @@ "@react-aria/selection": "^3.27.0", "@react-aria/utils": "^3.32.0", "@react-stately/list": "^3.13.2", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/toast/package.json b/packages/@react-aria/toast/package.json index 1df53f4d94c..25d27fb1e56 100644 --- a/packages/@react-aria/toast/package.json +++ b/packages/@react-aria/toast/package.json @@ -32,7 +32,6 @@ "@react-aria/landmark": "^3.0.8", "@react-aria/utils": "^3.32.0", "@react-stately/toast": "^3.1.2", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-aria/tree/package.json b/packages/@react-aria/tree/package.json index d7eb0f5fedf..7de4955f0d1 100644 --- a/packages/@react-aria/tree/package.json +++ b/packages/@react-aria/tree/package.json @@ -32,7 +32,6 @@ "@react-aria/selection": "^3.27.0", "@react-aria/utils": "^3.32.0", "@react-stately/tree": "^3.9.4", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/breadcrumbs/package.json b/packages/@react-spectrum/breadcrumbs/package.json index f35af51aeb6..589adc90f46 100644 --- a/packages/@react-spectrum/breadcrumbs/package.json +++ b/packages/@react-spectrum/breadcrumbs/package.json @@ -49,7 +49,6 @@ "@react-spectrum/menu": "^3.22.9", "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", - "@react-types/breadcrumbs": "^3.7.17", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/calendar/package.json b/packages/@react-spectrum/calendar/package.json index 8112e174c12..771882ea0b0 100644 --- a/packages/@react-spectrum/calendar/package.json +++ b/packages/@react-spectrum/calendar/package.json @@ -52,7 +52,6 @@ "@react-spectrum/label": "^3.16.20", "@react-spectrum/utils": "^3.12.10", "@react-stately/calendar": "^3.9.1", - "@react-types/calendar": "^3.8.1", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/checkbox/package.json b/packages/@react-spectrum/checkbox/package.json index 394ad473cd5..149a80dff31 100644 --- a/packages/@react-spectrum/checkbox/package.json +++ b/packages/@react-spectrum/checkbox/package.json @@ -48,7 +48,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/checkbox": "^3.7.3", "@react-stately/toggle": "^3.9.3", - "@react-types/checkbox": "^3.10.2", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0", diff --git a/packages/@react-spectrum/combobox/package.json b/packages/@react-spectrum/combobox/package.json index dceaef56cc3..c51c260a67e 100644 --- a/packages/@react-spectrum/combobox/package.json +++ b/packages/@react-spectrum/combobox/package.json @@ -60,7 +60,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/collections": "^3.12.8", "@react-stately/combobox": "^3.12.1", - "@react-types/combobox": "^3.13.10", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/image/package.json b/packages/@react-spectrum/image/package.json index 15b558d3920..fff266cc1da 100644 --- a/packages/@react-spectrum/image/package.json +++ b/packages/@react-spectrum/image/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/image": "^3.5.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/label/package.json b/packages/@react-spectrum/label/package.json index f5d931502d0..ed5d86803d5 100644 --- a/packages/@react-spectrum/label/package.json +++ b/packages/@react-spectrum/label/package.json @@ -45,7 +45,6 @@ "@react-spectrum/form": "^3.7.20", "@react-spectrum/layout": "^3.6.20", "@react-spectrum/utils": "^3.12.10", - "@react-types/label": "^3.9.15", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/layout/package.json b/packages/@react-spectrum/layout/package.json index b601f1aef0c..9226daeafd3 100644 --- a/packages/@react-spectrum/layout/package.json +++ b/packages/@react-spectrum/layout/package.json @@ -42,7 +42,6 @@ "dependencies": { "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", - "@react-types/layout": "^3.3.27", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/listbox/package.json b/packages/@react-spectrum/listbox/package.json index 5a7b5e6b314..5b7f1256ba9 100644 --- a/packages/@react-spectrum/listbox/package.json +++ b/packages/@react-spectrum/listbox/package.json @@ -54,7 +54,6 @@ "@react-stately/layout": "^4.5.2", "@react-stately/list": "^3.13.2", "@react-stately/virtualizer": "^4.4.4", - "@react-types/listbox": "^3.7.4", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/menu/package.json b/packages/@react-spectrum/menu/package.json index 80b02219626..a1081cfa093 100644 --- a/packages/@react-spectrum/menu/package.json +++ b/packages/@react-spectrum/menu/package.json @@ -56,7 +56,6 @@ "@react-stately/menu": "^3.9.9", "@react-stately/overlays": "^3.6.21", "@react-stately/tree": "^3.9.4", - "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@spectrum-icons/workflow": "^4.2.26", diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json index bb68c568527..a4a9fa4caec 100644 --- a/packages/@react-spectrum/numberfield/package.json +++ b/packages/@react-spectrum/numberfield/package.json @@ -51,7 +51,6 @@ "@react-spectrum/textfield": "^3.14.3", "@react-spectrum/utils": "^3.12.10", "@react-stately/numberfield": "^3.10.3", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@spectrum-icons/workflow": "^4.2.26", diff --git a/packages/@react-spectrum/overlays/package.json b/packages/@react-spectrum/overlays/package.json index a651c3de34e..c7cbc57d857 100644 --- a/packages/@react-spectrum/overlays/package.json +++ b/packages/@react-spectrum/overlays/package.json @@ -45,7 +45,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-stately/overlays": "^3.6.21", - "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0", "react-transition-group": "^4.4.5" diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 23b75fff0cd..b53e6414902 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -165,9 +165,7 @@ "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", "@react-stately/utils": "^3.11.0", - "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", - "@react-types/textfield": "^3.12.6", "csstype": "^3.0.2", "react-aria": "^3.45.0", "react-aria-components": "^1.14.0", diff --git a/packages/@react-spectrum/searchfield/package.json b/packages/@react-spectrum/searchfield/package.json index 6358e94945f..3d74213afbb 100644 --- a/packages/@react-spectrum/searchfield/package.json +++ b/packages/@react-spectrum/searchfield/package.json @@ -46,7 +46,6 @@ "@react-spectrum/textfield": "^3.14.3", "@react-spectrum/utils": "^3.12.10", "@react-stately/searchfield": "^3.5.17", - "@react-types/searchfield": "^3.6.6", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-spectrum/statuslight/package.json b/packages/@react-spectrum/statuslight/package.json index a51f0759020..d7a03dc6380 100644 --- a/packages/@react-spectrum/statuslight/package.json +++ b/packages/@react-spectrum/statuslight/package.json @@ -43,7 +43,6 @@ "@react-aria/utils": "^3.32.0", "@react-spectrum/utils": "^3.12.10", "@react-types/shared": "^3.32.1", - "@react-types/statuslight": "^3.3.21", "@swc/helpers": "^0.5.0" }, "devDependencies": { diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json index 50681164fbc..381c73ca1c1 100644 --- a/packages/@react-spectrum/textfield/package.json +++ b/packages/@react-spectrum/textfield/package.json @@ -50,7 +50,6 @@ "@react-spectrum/utils": "^3.12.10", "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.32.1", - "@react-types/textfield": "^3.12.6", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/tooltip/package.json b/packages/@react-spectrum/tooltip/package.json index b57890cc617..4eea9eec1ba 100644 --- a/packages/@react-spectrum/tooltip/package.json +++ b/packages/@react-spectrum/tooltip/package.json @@ -47,7 +47,6 @@ "@react-spectrum/overlays": "^5.9.1", "@react-spectrum/utils": "^3.12.10", "@react-stately/tooltip": "^3.5.9", - "@react-types/overlays": "^3.9.2", "@react-types/shared": "^3.32.1", "@spectrum-icons/ui": "^3.6.21", "@swc/helpers": "^0.5.0" diff --git a/packages/@react-stately/calendar/package.json b/packages/@react-stately/calendar/package.json index b09d7185e2e..c5c41238db6 100644 --- a/packages/@react-stately/calendar/package.json +++ b/packages/@react-stately/calendar/package.json @@ -28,7 +28,6 @@ "dependencies": { "@internationalized/date": "^3.10.1", "@react-stately/utils": "^3.11.0", - "@react-types/calendar": "^3.8.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-stately/overlays/package.json b/packages/@react-stately/overlays/package.json index 937797f13e4..9ac561e9c41 100644 --- a/packages/@react-stately/overlays/package.json +++ b/packages/@react-stately/overlays/package.json @@ -27,7 +27,6 @@ }, "dependencies": { "@react-stately/utils": "^3.11.0", - "@react-types/overlays": "^3.9.2", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/@react-stately/slider/package.json b/packages/@react-stately/slider/package.json index b05d8273529..e45da7da7f1 100644 --- a/packages/@react-stately/slider/package.json +++ b/packages/@react-stately/slider/package.json @@ -28,7 +28,6 @@ "dependencies": { "@react-stately/utils": "^3.11.0", "@react-types/shared": "^3.32.1", - "@react-types/slider": "^3.8.2", "@swc/helpers": "^0.5.0" }, "peerDependencies": { diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json index 1c5b8f2d3da..823974e1e5e 100644 --- a/packages/dev/s2-docs/package.json +++ b/packages/dev/s2-docs/package.json @@ -41,7 +41,6 @@ "@react-spectrum/s2": "^1.0.0", "@react-spectrum/utils": "^3.12.6", "@react-types/shared": "^3.30.0", - "@react-types/textfield": "^3.12.3", "emojibase-data": "^16.0.3", "fast-glob": "^3.3.3", "globals-docs": "^2.4.1", From 3f5d35ba24eb4c9bf8e10db8b1de8a15dc3d4c17 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 14:30:20 -0500 Subject: [PATCH 47/56] Don't depend on v3 from S2 --- packages/@react-spectrum/s2/package.json | 3 +- packages/@react-spectrum/s2/src/Accordion.tsx | 2 +- packages/@react-spectrum/s2/src/ActionBar.tsx | 2 +- .../@react-spectrum/s2/src/ActionButton.tsx | 2 +- packages/@react-spectrum/s2/src/Avatar.tsx | 2 +- .../@react-spectrum/s2/src/AvatarGroup.tsx | 2 +- packages/@react-spectrum/s2/src/Badge.tsx | 2 +- .../@react-spectrum/s2/src/Breadcrumbs.tsx | 4 +- packages/@react-spectrum/s2/src/Button.tsx | 2 +- .../@react-spectrum/s2/src/ButtonGroup.tsx | 7 +-- packages/@react-spectrum/s2/src/Card.tsx | 2 +- packages/@react-spectrum/s2/src/CardView.tsx | 2 +- packages/@react-spectrum/s2/src/Checkbox.tsx | 2 +- .../@react-spectrum/s2/src/CheckboxGroup.tsx | 2 +- .../@react-spectrum/s2/src/ClearButton.tsx | 2 +- .../@react-spectrum/s2/src/CloseButton.tsx | 2 +- packages/@react-spectrum/s2/src/ColorArea.tsx | 2 +- .../@react-spectrum/s2/src/ColorField.tsx | 2 +- .../@react-spectrum/s2/src/ColorSlider.tsx | 2 +- .../@react-spectrum/s2/src/ColorSwatch.tsx | 2 +- .../s2/src/ColorSwatchPicker.tsx | 2 +- .../@react-spectrum/s2/src/ColorWheel.tsx | 2 +- packages/@react-spectrum/s2/src/ComboBox.tsx | 2 +- packages/@react-spectrum/s2/src/Content.tsx | 2 +- .../@react-spectrum/s2/src/CustomDialog.tsx | 2 +- packages/@react-spectrum/s2/src/Dialog.tsx | 2 +- .../@react-spectrum/s2/src/Disclosure.tsx | 2 +- packages/@react-spectrum/s2/src/Divider.tsx | 2 +- packages/@react-spectrum/s2/src/DropZone.tsx | 2 +- packages/@react-spectrum/s2/src/Field.tsx | 2 +- packages/@react-spectrum/s2/src/Form.tsx | 2 +- .../s2/src/FullscreenDialog.tsx | 2 +- .../s2/src/IllustratedMessage.tsx | 2 +- .../@react-spectrum/s2/src/InlineAlert.tsx | 2 +- packages/@react-spectrum/s2/src/Link.tsx | 2 +- packages/@react-spectrum/s2/src/Meter.tsx | 2 +- packages/@react-spectrum/s2/src/Modal.tsx | 2 +- .../s2/src/NotificationBadge.tsx | 2 +- .../@react-spectrum/s2/src/NumberField.tsx | 2 +- packages/@react-spectrum/s2/src/Picker.tsx | 2 +- packages/@react-spectrum/s2/src/Popover.tsx | 2 +- .../@react-spectrum/s2/src/ProgressBar.tsx | 2 +- .../@react-spectrum/s2/src/ProgressCircle.tsx | 2 +- packages/@react-spectrum/s2/src/Radio.tsx | 2 +- .../@react-spectrum/s2/src/RadioGroup.tsx | 2 +- .../@react-spectrum/s2/src/RangeSlider.tsx | 2 +- .../@react-spectrum/s2/src/SearchField.tsx | 2 +- .../s2/src/SegmentedControl.tsx | 2 +- packages/@react-spectrum/s2/src/Skeleton.tsx | 2 +- packages/@react-spectrum/s2/src/Slider.tsx | 2 +- .../@react-spectrum/s2/src/StatusLight.tsx | 2 +- packages/@react-spectrum/s2/src/Switch.tsx | 2 +- packages/@react-spectrum/s2/src/TableView.tsx | 3 +- packages/@react-spectrum/s2/src/Tabs.tsx | 2 +- .../@react-spectrum/s2/src/TabsPicker.tsx | 2 +- packages/@react-spectrum/s2/src/TagGroup.tsx | 2 +- packages/@react-spectrum/s2/src/TextField.tsx | 2 +- packages/@react-spectrum/s2/src/Toast.tsx | 2 +- .../@react-spectrum/s2/src/ToggleButton.tsx | 2 +- packages/@react-spectrum/s2/src/Tooltip.tsx | 2 +- packages/@react-spectrum/s2/src/TreeView.tsx | 2 +- packages/@react-spectrum/s2/src/useDOMRef.ts | 57 +++++++++++++++++++ .../@react-spectrum/s2/src/useMediaQuery.ts | 44 ++++++++++++++ packages/@react-spectrum/s2/src/utils.ts | 2 +- packages/@react-types/provider/package.json | 1 - 65 files changed, 166 insertions(+), 69 deletions(-) create mode 100644 packages/@react-spectrum/s2/src/useDOMRef.ts create mode 100644 packages/@react-spectrum/s2/src/useMediaQuery.ts diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index b53e6414902..0830e39f8c7 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -159,9 +159,8 @@ "@react-aria/interactions": "^3.26.0", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.31.0", + "@react-aria/ssr": "^3.9.10", "@react-aria/utils": "^3.32.0", - "@react-spectrum/textfield": "^3.14.3", - "@react-spectrum/utils": "^3.12.10", "@react-stately/grid": "^3.11.7", "@react-stately/layout": "^4.5.2", "@react-stately/utils": "^3.11.0", diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx index 03c9373946a..9a790fc5a67 100644 --- a/packages/@react-spectrum/s2/src/Accordion.tsx +++ b/packages/@react-spectrum/s2/src/Accordion.tsx @@ -22,7 +22,7 @@ import { import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' }; import React, {createContext, forwardRef, ReactNode} from 'react'; import {style} from '../style' with { type: 'macro' }; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps { diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx index b73d0669a9c..05f00b939c1 100644 --- a/packages/@react-spectrum/s2/src/ActionBar.tsx +++ b/packages/@react-spectrum/s2/src/ActionBar.tsx @@ -22,7 +22,7 @@ import intlMessages from '../intl/*.json'; import {lightDark, style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils' with { type: 'macro' }; import {useControlledState} from '@react-stately/utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx index 4ed24b9e0d9..a055c637992 100644 --- a/packages/@react-spectrum/s2/src/ActionButton.tsx +++ b/packages/@react-spectrum/s2/src/ActionButton.tsx @@ -27,7 +27,7 @@ import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import {SkeletonContext} from './Skeleton'; import {Text, TextContext} from './Content'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {usePendingState} from './Button'; diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx index 19935ea2488..76662f37550 100644 --- a/packages/@react-spectrum/s2/src/Avatar.tsx +++ b/packages/@react-spectrum/s2/src/Avatar.tsx @@ -19,7 +19,7 @@ import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style import {Image} from './Image'; import {isDocsEnv} from './macros' with {type: 'macro'}; import {style} from '../style' with { type: 'macro' }; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps { diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx index 2bba0fa7b4b..47331274ea7 100644 --- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx +++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx @@ -17,7 +17,7 @@ import {createContext, CSSProperties, forwardRef, ReactNode} from 'react'; import {filterDOMProps} from '@react-aria/utils'; import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLabel} from 'react-aria'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx index 8766942111c..19db9d14970 100644 --- a/packages/@react-spectrum/s2/src/Badge.tsx +++ b/packages/@react-spectrum/s2/src/Badge.tsx @@ -20,7 +20,7 @@ import {IconContext} from './Icon'; import React, {createContext, forwardRef, ReactNode} from 'react'; import {SkeletonWrapper} from './Skeleton'; import {Text, TextContext} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface BadgeStyleProps { diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx index 033fa2fa295..9d7fb76c14f 100644 --- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx +++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx @@ -33,12 +33,12 @@ import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, // @ts-ignore import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg'; import {forwardRefType} from './types'; -import {inertValue, useLayoutEffect} from '@react-aria/utils'; +import {inertValue, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; import {Menu, MenuItem, MenuTrigger} from './Menu'; import {Text} from './Content'; -import {useDOMRef, useResizeObserver} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale} from 'react-aria'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx index a9b9db869ec..3928f583208 100644 --- a/packages/@react-spectrum/s2/src/Button.tsx +++ b/packages/@react-spectrum/s2/src/Button.tsx @@ -24,7 +24,7 @@ import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import {SkeletonContext} from './Skeleton'; import {Text, TextContext} from './Content'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx index 318302ea473..56729db4e64 100644 --- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx +++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx @@ -14,13 +14,10 @@ import {ButtonContext, LinkButtonContext} from './Button'; import {ContextValue, Provider, SlotProps} from 'react-aria-components'; import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react'; import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; -import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils'; +import {filterDOMProps, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import { - useDOMRef, - useResizeObserver -} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface ButtonGroupStyleProps { diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx index 7ad9aeaf49e..39d3f9abab2 100644 --- a/packages/@react-spectrum/s2/src/Card.tsx +++ b/packages/@react-spectrum/s2/src/Card.tsx @@ -28,7 +28,7 @@ import {ImageCoordinator} from './ImageCoordinator'; import {mergeStyles} from '../style/runtime'; import {pressScale} from './pressScale'; import {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface CardRenderProps { diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx index 2023a8c0d95..64d82a3cf43 100644 --- a/packages/@react-spectrum/s2/src/CardView.tsx +++ b/packages/@react-spectrum/s2/src/CardView.tsx @@ -30,7 +30,7 @@ import {focusRing, style} from '../style' with {type: 'macro'}; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {ImageCoordinator} from './ImageCoordinator'; import {useActionBarContainer} from './ActionBar'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx index 6d00cf24917..2144e4387f0 100644 --- a/packages/@react-spectrum/s2/src/Checkbox.tsx +++ b/packages/@react-spectrum/s2/src/Checkbox.tsx @@ -20,7 +20,7 @@ import DashIcon from '../ui-icons/Dash'; import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface CheckboxStyleProps { diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx index 94e8d1edb1b..3997578fe56 100644 --- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx +++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx @@ -22,7 +22,7 @@ import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: import {FieldLabel, HelpText} from './Field'; import {FormContext, useFormProps} from './Form'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface CheckboxGroupProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps { diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx index f562f9e2d84..868806c6802 100644 --- a/packages/@react-spectrum/s2/src/ClearButton.tsx +++ b/packages/@react-spectrum/s2/src/ClearButton.tsx @@ -21,7 +21,7 @@ import {FocusableRef} from '@react-types/shared'; import {focusRing, style} from '../style' with {type: 'macro'}; import {forwardRef} from 'react'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; interface ClearButtonStyleProps { /** * The size of the ClearButton. diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx index abd796e779e..b85b0c30bce 100644 --- a/packages/@react-spectrum/s2/src/CloseButton.tsx +++ b/packages/@react-spectrum/s2/src/CloseButton.tsx @@ -19,7 +19,7 @@ import {FocusableRef, FocusableRefValue} from '@react-types/shared'; // @ts-ignore import intlMessages from '../intl/*.json'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx index 6c401b3efa8..c19f61a8cf2 100644 --- a/packages/@react-spectrum/s2/src/ColorArea.tsx +++ b/packages/@react-spectrum/s2/src/ColorArea.tsx @@ -21,7 +21,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorAreaProps extends Omit, StyleProps {} diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx index c98fe260e9a..c641478d998 100644 --- a/packages/@react-spectrum/s2/src/ColorField.tsx +++ b/packages/@react-spectrum/s2/src/ColorField.tsx @@ -17,7 +17,7 @@ import { InputProps } from 'react-aria-components'; import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx index d9a78172a0e..fa3fcae7934 100644 --- a/packages/@react-spectrum/s2/src/ColorSlider.tsx +++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx @@ -24,7 +24,7 @@ import {createContext, forwardRef, useRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared'; import {FieldLabel} from './Field'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorSliderProps extends Omit, Pick, StyleProps { diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx index 99a38464f9d..9ed06aeaa7f 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx @@ -21,7 +21,7 @@ import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorSwatchProps extends Omit, UnsafeStyles { diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx index c0f095e8545..75322ed4060 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx @@ -16,7 +16,7 @@ import {createContext, forwardRef, ReactElement, ReactNode} from 'react'; import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared'; import {focusRing, space, style} from '../style' with {type: 'macro'}; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorSwatchPickerProps extends ValueBase, StyleProps, SlotProps { diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx index 57d63dec7ff..827031ce63b 100644 --- a/packages/@react-spectrum/s2/src/ColorWheel.tsx +++ b/packages/@react-spectrum/s2/src/ColorWheel.tsx @@ -21,7 +21,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface ColorWheelProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx index 45cfa244eec..52343c8f25a 100644 --- a/packages/@react-spectrum/s2/src/ComboBox.tsx +++ b/packages/@react-spectrum/s2/src/ComboBox.tsx @@ -50,7 +50,7 @@ import { import CheckmarkIcon from '../ui-icons/Checkmark'; import ChevronIcon from '../ui-icons/Chevron'; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'}; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx index 662dff0a2a2..93575b8f908 100644 --- a/packages/@react-spectrum/s2/src/Content.tsx +++ b/packages/@react-spectrum/s2/src/Content.tsx @@ -16,7 +16,7 @@ import {DOMRef, DOMRefValue} from '@react-types/shared'; import {inertValue} from '@react-aria/utils'; import {StyleString} from '../style/types'; import {UnsafeStyles} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useIsSkeleton, useSkeletonText} from './Skeleton'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/CustomDialog.tsx b/packages/@react-spectrum/s2/src/CustomDialog.tsx index 3520f8d730b..1af2ad9907d 100644 --- a/packages/@react-spectrum/s2/src/CustomDialog.tsx +++ b/packages/@react-spectrum/s2/src/CustomDialog.tsx @@ -16,7 +16,7 @@ import {forwardRef} from 'react'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {Modal} from './Modal'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; export interface CustomDialogProps extends Omit, StyleProps { /** diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx index 0a2cd84ddf9..fb8d83630f8 100644 --- a/packages/@react-spectrum/s2/src/Dialog.tsx +++ b/packages/@react-spectrum/s2/src/Dialog.tsx @@ -20,7 +20,7 @@ import {ImageContext} from './Image'; import {Modal} from './Modal'; import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; // TODO: what style overrides should be allowed? export interface DialogProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx index 2c93b4c95d6..cd014d342b1 100644 --- a/packages/@react-spectrum/s2/src/Disclosure.tsx +++ b/packages/@react-spectrum/s2/src/Disclosure.tsx @@ -19,7 +19,7 @@ import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './st import Chevron from '../ui-icons/Chevron'; import {filterDOMProps} from '@react-aria/utils'; import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface DisclosureProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx index ce33d027e63..7652b2098df 100644 --- a/packages/@react-spectrum/s2/src/Divider.tsx +++ b/packages/@react-spectrum/s2/src/Divider.tsx @@ -15,7 +15,7 @@ import {createContext, forwardRef} from 'react'; import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'}; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; /* diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx index 65fc602491d..91887b20d0c 100644 --- a/packages/@react-spectrum/s2/src/DropZone.tsx +++ b/packages/@react-spectrum/s2/src/DropZone.tsx @@ -18,7 +18,7 @@ import {IllustratedMessageContext} from './IllustratedMessage'; // @ts-ignore import intlMessages from '../intl/*.json'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx index 38c9dfda58e..a20f42bdba6 100644 --- a/packages/@react-spectrum/s2/src/Field.tsx +++ b/packages/@react-spectrum/s2/src/Field.tsx @@ -24,7 +24,7 @@ import {IconContext} from './Icon'; import intlMessages from '../intl/*.json'; import {mergeStyles} from '../style/runtime'; import {StyleString} from '../style/types'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useId} from '@react-aria/utils'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx index 3cc39c3b48a..0a61d601372 100644 --- a/packages/@react-spectrum/s2/src/Form.tsx +++ b/packages/@react-spectrum/s2/src/Form.tsx @@ -15,7 +15,7 @@ import {DOMRef, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useIsSkeleton} from './Skeleton'; interface FormStyleProps extends Omit { diff --git a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx index cf293ee72a5..57ffc21d590 100644 --- a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx +++ b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx @@ -18,7 +18,7 @@ import {forwardRef} from 'react'; import {Modal} from './Modal'; import {style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; // TODO: what style overrides should be allowed? export interface FullscreenDialogProps extends Omit, StyleProps { diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx index a7de53690e9..98a02aeb25b 100644 --- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx +++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx @@ -19,7 +19,7 @@ import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {IllustrationContext} from './Icon'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface IllustratedMessageStyleProps { diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx index e2340cff0bb..625d5c27682 100644 --- a/packages/@react-spectrum/s2/src/InlineAlert.tsx +++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx @@ -24,7 +24,7 @@ import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // @ts-ignore import intlMessages from '../intl/*.json'; import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useFocusRing} from 'react-aria'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx index f3f73977ada..1abf11c77b7 100644 --- a/packages/@react-spectrum/s2/src/Link.tsx +++ b/packages/@react-spectrum/s2/src/Link.tsx @@ -16,7 +16,7 @@ import {createContext, forwardRef, ReactNode, useContext} from 'react'; import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'}; import {SkeletonContext, useSkeletonText} from './Skeleton'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLayoutEffect} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx index 0c95b7e5b64..4c11af9011f 100644 --- a/packages/@react-spectrum/s2/src/Meter.tsx +++ b/packages/@react-spectrum/s2/src/Meter.tsx @@ -23,7 +23,7 @@ import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with { import {lightDark, style} from '../style' with {type: 'macro'}; import {SkeletonWrapper} from './Skeleton'; import {Text} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface MeterStyleProps { diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx index ad55a2b3b24..04573896450 100644 --- a/packages/@react-spectrum/s2/src/Modal.tsx +++ b/packages/@react-spectrum/s2/src/Modal.tsx @@ -16,7 +16,7 @@ import {DOMRef, GlobalDOMAttributes} from '@react-types/shared'; import {forwardRef, MutableRefObject, useCallback, useContext} from 'react'; import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; interface ModalProps extends Omit { /** diff --git a/packages/@react-spectrum/s2/src/NotificationBadge.tsx b/packages/@react-spectrum/s2/src/NotificationBadge.tsx index a2d86d8ef90..b89dd893dee 100644 --- a/packages/@react-spectrum/s2/src/NotificationBadge.tsx +++ b/packages/@react-spectrum/s2/src/NotificationBadge.tsx @@ -19,7 +19,7 @@ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro import intlMessages from '../intl/*.json'; import {NumberFormatter} from '@internationalized/number'; import React, {createContext, forwardRef} from 'react'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index 4a59bfe4163..599279c0d3c 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -25,7 +25,7 @@ import { import {baseColor, space, style} from '../style' with {type: 'macro'}; import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import Dash from '../ui-icons/Dash'; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils'; diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index 4db143d221d..7e499ff9d3d 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/packages/@react-spectrum/s2/src/Picker.tsx @@ -77,7 +77,7 @@ import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import {raw} from '../style/style-macro' with {type: 'macro'}; import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useGlobalListeners, useSlotId} from '@react-aria/utils'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useScale} from './utils'; diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index e18bc565322..079fc9a4de5 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -28,7 +28,7 @@ import {lightDark, style} from '../style' with {type: 'macro'}; import {mergeRefs} from '@react-aria/utils'; import {mergeStyles} from '../style/runtime'; import {StyleString} from '../style/types' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface PopoverProps extends UnsafeStyles, Omit (px / 16) + 'rem'; diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx index ea4c535d9c1..6c5c77199b7 100644 --- a/packages/@react-spectrum/s2/src/Radio.tsx +++ b/packages/@react-spectrum/s2/src/Radio.tsx @@ -22,7 +22,7 @@ import {FocusableRef, GlobalDOMAttributes} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; import {forwardRef, ReactNode, useContext, useRef} from 'react'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; export interface RadioProps extends Omit, StyleProps { /** diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx index 2d979c3a350..9772a1db70a 100644 --- a/packages/@react-spectrum/s2/src/RadioGroup.tsx +++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx @@ -21,7 +21,7 @@ import {FieldLabel, HelpText} from './Field'; import {FormContext, useFormProps} from './Form'; import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface RadioGroupProps extends Omit, StyleProps, SpectrumLabelableProps, HelpTextProps { diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx index 6792d3d6843..491743a5d8c 100644 --- a/packages/@react-spectrum/s2/src/RangeSlider.tsx +++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx @@ -22,7 +22,7 @@ import {FormContext, useFormProps} from './Form'; // @ts-ignore import intlMessages from '../intl/*.json'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx index acf3c710686..7ce31041963 100644 --- a/packages/@react-spectrum/s2/src/SearchField.tsx +++ b/packages/@react-spectrum/s2/src/SearchField.tsx @@ -21,7 +21,7 @@ import {baseColor, fontRelative, style} from '../style' with {type: 'macro'}; import {centerBaseline} from './CenterBaseline'; import {ClearButton} from './ClearButton'; import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx index 8009d75134b..a06ca907b15 100644 --- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx +++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx @@ -19,7 +19,7 @@ import {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} f import {IconContext} from './Icon'; import {pressScale} from './pressScale'; import {Text, TextContext} from './Content'; -import {useDOMRef, useFocusableRef} from '@react-spectrum/utils'; +import {useDOMRef, useFocusableRef} from './useDOMRef'; import {useLayoutEffect} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx index 1cc218bb3d6..5c61ad33595 100644 --- a/packages/@react-spectrum/s2/src/Skeleton.tsx +++ b/packages/@react-spectrum/s2/src/Skeleton.tsx @@ -16,7 +16,7 @@ import {inertValue, mergeRefs} from '@react-aria/utils'; import {mergeStyles} from '../style/runtime'; import {raw} from '../style/style-macro' with {type: 'macro'}; import {StyleString} from '../style/types'; -import {useMediaQuery} from '@react-spectrum/utils'; +import {useMediaQuery} from './useMediaQuery'; export function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void { let animationRef = useRef(null); diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx index 8b8c140e759..83461b65894 100644 --- a/packages/@react-spectrum/s2/src/Slider.tsx +++ b/packages/@react-spectrum/s2/src/Slider.tsx @@ -28,7 +28,7 @@ import {focusRing, style} from '../style' with {type: 'macro'}; import {FormContext, useFormProps} from './Form'; import {mergeStyles} from '../style/runtime'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useLocale, useNumberFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx index ee0b46aa718..7e1d2160897 100644 --- a/packages/@react-spectrum/s2/src/StatusLight.tsx +++ b/packages/@react-spectrum/s2/src/StatusLight.tsx @@ -18,7 +18,7 @@ import {createContext, forwardRef, ReactNode} from 'react'; import {filterDOMProps} from '@react-aria/utils'; import {style} from '../style' with {type: 'macro'}; import {Text} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useIsSkeleton} from './Skeleton'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx index f194a23533d..9cde1cd3902 100644 --- a/packages/@react-spectrum/s2/src/Switch.tsx +++ b/packages/@react-spectrum/s2/src/Switch.tsx @@ -24,7 +24,7 @@ import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react'; import {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; import {pressScale} from './pressScale'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useSpectrumContextProps} from './useSpectrumContextProps'; interface SwitchStyleProps { diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 32be3fc2fdf..6f9a55d5bc0 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -74,8 +74,9 @@ import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg'; import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg'; import {Button as SpectrumButton} from './Button'; import {useActionBarContainer} from './ActionBar'; -import {useDOMRef, useMediaQuery} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +import {useMediaQuery} from './useMediaQuery'; import {useScale} from './utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; import {VisuallyHidden} from 'react-aria'; diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx index b69c13b05f8..f97dd82033f 100644 --- a/packages/@react-spectrum/s2/src/Tabs.tsx +++ b/packages/@react-spectrum/s2/src/Tabs.tsx @@ -37,7 +37,7 @@ import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResize import {Picker, PickerItem} from './TabsPicker'; import {Text, TextContext} from './Content'; import {useControlledState} from '@react-stately/utils'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useHasTabbableChild} from '@react-aria/focus'; import {useLocale} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx index 418cf01ea34..36241873c4a 100644 --- a/packages/@react-spectrum/s2/src/TabsPicker.tsx +++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx @@ -51,7 +51,7 @@ import {PressResponder} from '@react-aria/interactions'; import {pressScale} from './pressScale'; import {raw} from '../style/style-macro' with {type: 'macro'}; import React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useGlobalListeners} from '@react-aria/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx index 7b039822c43..ce9e4f763a4 100644 --- a/packages/@react-spectrum/s2/src/TagGroup.tsx +++ b/packages/@react-spectrum/s2/src/TagGroup.tsx @@ -47,7 +47,7 @@ import {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} f import intlMessages from '../intl/*.json'; import {pressScale} from './pressScale'; import {Text, TextContext} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx index 65cf1e5c4bd..da01c5b0062 100644 --- a/packages/@react-spectrum/s2/src/TextField.tsx +++ b/packages/@react-spectrum/s2/src/TextField.tsx @@ -23,7 +23,7 @@ import { } from 'react-aria-components'; import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react'; -import {createFocusableRef} from '@react-spectrum/utils'; +import {createFocusableRef} from './useDOMRef'; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FocusableRefValue, GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared'; import {FormContext, useFormProps} from './Form'; diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx index ad54fe3dc63..222c02fea6d 100644 --- a/packages/@react-spectrum/s2/src/Toast.tsx +++ b/packages/@react-spectrum/s2/src/Toast.tsx @@ -30,7 +30,7 @@ import {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_Toast import {Text} from './Content'; import toastCss from './Toast.module.css'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useMediaQuery} from '@react-spectrum/utils'; +import {useMediaQuery} from './useMediaQuery'; import {useOverlayTriggerState} from 'react-stately'; export type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end'; diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx index c681aabc3d7..c7b5b8ede53 100644 --- a/packages/@react-spectrum/s2/src/ToggleButton.tsx +++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx @@ -22,7 +22,7 @@ import {SkeletonContext} from './Skeleton'; import {StyleProps} from './style-utils'; import {Text, TextContext} from './Content'; import {ToggleButtonGroupContext} from './ToggleButtonGroup'; -import {useFocusableRef} from '@react-spectrum/utils'; +import {useFocusableRef} from './useDOMRef'; import {useFormProps} from './Form'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index 27143793d14..d37e936d50a 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -24,7 +24,7 @@ import {ColorScheme, ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react'; import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared'; import {style} from '../style' with {type: 'macro'}; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; export interface TooltipTriggerProps extends Omit, Pick { /** The content of the tooltip. */ diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx index e539806b8b9..04a06ebf49e 100644 --- a/packages/@react-spectrum/s2/src/TreeView.tsx +++ b/packages/@react-spectrum/s2/src/TreeView.tsx @@ -41,7 +41,7 @@ import {ProgressCircle} from './ProgressCircle'; import {raw} from '../style/style-macro' with {type: 'macro'}; import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react'; import {Text, TextContext} from './Content'; -import {useDOMRef} from '@react-spectrum/utils'; +import {useDOMRef} from './useDOMRef'; import {useLocale, useLocalizedStringFormatter} from 'react-aria'; import {useScale} from './utils'; diff --git a/packages/@react-spectrum/s2/src/useDOMRef.ts b/packages/@react-spectrum/s2/src/useDOMRef.ts new file mode 100644 index 00000000000..fea09a48602 --- /dev/null +++ b/packages/@react-spectrum/s2/src/useDOMRef.ts @@ -0,0 +1,57 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {DOMRef, DOMRefValue, FocusableElement, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared'; +import {useImperativeHandle, useMemo, useRef} from 'react'; + +export function createDOMRef(ref: RefObject): DOMRefValue { + return { + UNSAFE_getDOMNode() { + return ref.current; + } + }; +} + +export function createFocusableRef(domRef: RefObject, focusableRef: RefObject = domRef): FocusableRefValue { + return { + ...createDOMRef(domRef), + focus() { + if (focusableRef.current) { + focusableRef.current.focus(); + } + } + }; +} + +export function useDOMRef(ref: DOMRef): RefObject { + let domRef = useRef(null); + useImperativeHandle(ref, () => createDOMRef(domRef)); + return domRef; +} + +export function useFocusableRef(ref: FocusableRef, focusableRef?: RefObject): RefObject { + let domRef = useRef(null); + useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef)); + return domRef; +} + +export function unwrapDOMRef(ref: RefObject | null>): RefObject { + return { + get current() { + return ref.current && ref.current.UNSAFE_getDOMNode(); + } + }; +} + +export function useUnwrapDOMRef(ref: RefObject | null>) : RefObject { + return useMemo(() => unwrapDOMRef(ref), [ref]); +} diff --git a/packages/@react-spectrum/s2/src/useMediaQuery.ts b/packages/@react-spectrum/s2/src/useMediaQuery.ts new file mode 100644 index 00000000000..826ebc430b1 --- /dev/null +++ b/packages/@react-spectrum/s2/src/useMediaQuery.ts @@ -0,0 +1,44 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {useEffect, useState} from 'react'; +import {useIsSSR} from '@react-aria/ssr'; + +export function useMediaQuery(query: string): boolean { + let supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function'; + let [matches, setMatches] = useState(() => + supportsMatchMedia + ? window.matchMedia(query).matches + : false + ); + + useEffect(() => { + if (!supportsMatchMedia) { + return; + } + + let mq = window.matchMedia(query); + let onChange = (evt) => { + setMatches(evt.matches); + }; + + mq.addListener(onChange); + return () => { + mq.removeListener(onChange); + }; + }, [supportsMatchMedia, query]); + + // If in SSR, the media query should never match. Once the page hydrates, + // this will update and the real value will be returned. + let isSSR = useIsSSR(); + return isSSR ? false : matches; +} diff --git a/packages/@react-spectrum/s2/src/utils.ts b/packages/@react-spectrum/s2/src/utils.ts index 6aac5801df9..d2957cb9ae5 100644 --- a/packages/@react-spectrum/s2/src/utils.ts +++ b/packages/@react-spectrum/s2/src/utils.ts @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {useMediaQuery} from '@react-spectrum/utils'; +import {useMediaQuery} from './useMediaQuery'; export type Scale = 'large' | 'medium'; diff --git a/packages/@react-types/provider/package.json b/packages/@react-types/provider/package.json index 6cb824337ba..8e165e122e5 100644 --- a/packages/@react-types/provider/package.json +++ b/packages/@react-types/provider/package.json @@ -8,7 +8,6 @@ "type": "git", "url": "https://github.com/adobe/react-spectrum" }, - "dependencies": {}, "peerDependencies": { "@react-spectrum/provider": "^3.10.12", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" From 6dc30b2c494eaff6bc72624f84ada05a87cee631 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 14:30:29 -0500 Subject: [PATCH 48/56] Update lockfile --- yarn.lock | 427 ++++++++++++++++++++++-------------------------------- 1 file changed, 173 insertions(+), 254 deletions(-) diff --git a/yarn.lock b/yarn.lock index 6500c7bc175..4abc79b68e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5326,7 +5326,6 @@ __metadata: "@react-aria/interactions": "npm:^3.26.0" "@react-aria/utils": "npm:^3.32.0" "@react-stately/list": "npm:^3.13.2" - "@react-types/actiongroup": "npm:^3.4.21" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5350,6 +5349,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/autocomplete@workspace:packages/@react-aria/autocomplete" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/combobox": "npm:^3.14.1" "@react-aria/focus": "npm:^3.21.3" "@react-aria/i18n": "npm:^3.12.14" @@ -5360,8 +5360,7 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/autocomplete": "npm:3.0.0-beta.4" "@react-stately/combobox": "npm:^3.12.1" - "@react-types/autocomplete": "npm:3.0.0-alpha.36" - "@react-types/button": "npm:^3.14.1" + "@react-stately/searchfield": "npm:^3.5.17" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5377,7 +5376,6 @@ __metadata: "@react-aria/i18n": "npm:^3.12.14" "@react-aria/link": "npm:^3.8.7" "@react-aria/utils": "npm:^3.32.0" - "@react-types/breadcrumbs": "npm:^3.7.17" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5394,7 +5392,6 @@ __metadata: "@react-aria/toolbar": "npm:3.0.0-beta.22" "@react-aria/utils": "npm:^3.32.0" "@react-stately/toggle": "npm:^3.9.3" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5408,13 +5405,12 @@ __metadata: resolution: "@react-aria/calendar@workspace:packages/@react-aria/calendar" dependencies: "@internationalized/date": "npm:^3.10.1" + "@react-aria/button": "npm:^3.14.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" "@react-aria/live-announcer": "npm:^3.4.4" "@react-aria/utils": "npm:^3.32.0" "@react-stately/calendar": "npm:^3.9.1" - "@react-types/button": "npm:^3.14.1" - "@react-types/calendar": "npm:^3.8.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5435,7 +5431,6 @@ __metadata: "@react-stately/checkbox": "npm:^3.7.3" "@react-stately/form": "npm:^3.2.2" "@react-stately/toggle": "npm:^3.9.3" - "@react-types/checkbox": "npm:^3.10.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5474,7 +5469,6 @@ __metadata: "@react-aria/visually-hidden": "npm:^3.8.29" "@react-stately/color": "npm:^3.9.3" "@react-stately/form": "npm:^3.2.2" - "@react-types/color": "npm:^3.1.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5487,6 +5481,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/combobox@workspace:packages/@react-aria/combobox" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/focus": "npm:^3.21.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/listbox": "npm:^3.15.1" @@ -5499,8 +5494,6 @@ __metadata: "@react-stately/collections": "npm:^3.12.8" "@react-stately/combobox": "npm:^3.12.1" "@react-stately/form": "npm:^3.2.2" - "@react-types/button": "npm:^3.14.1" - "@react-types/combobox": "npm:^3.13.10" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5516,6 +5509,9 @@ __metadata: "@internationalized/date": "npm:^3.10.1" "@internationalized/number": "npm:^3.6.5" "@internationalized/string": "npm:^3.2.7" + "@react-aria/button": "npm:^3.14.3" + "@react-aria/calendar": "npm:^3.9.3" + "@react-aria/dialog": "npm:^3.5.32" "@react-aria/focus": "npm:^3.21.3" "@react-aria/form": "npm:^3.1.3" "@react-aria/i18n": "npm:^3.12.14" @@ -5523,12 +5519,9 @@ __metadata: "@react-aria/label": "npm:^3.7.23" "@react-aria/spinbutton": "npm:^3.7.0" "@react-aria/utils": "npm:^3.32.0" + "@react-stately/calendar": "npm:^3.9.1" "@react-stately/datepicker": "npm:^3.15.3" "@react-stately/form": "npm:^3.2.2" - "@react-types/button": "npm:^3.14.1" - "@react-types/calendar": "npm:^3.8.1" - "@react-types/datepicker": "npm:^3.13.3" - "@react-types/dialog": "npm:^3.5.22" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5544,7 +5537,6 @@ __metadata: "@react-aria/interactions": "npm:^3.26.0" "@react-aria/overlays": "npm:^3.31.0" "@react-aria/utils": "npm:^3.32.0" - "@react-types/dialog": "npm:^3.5.22" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5557,10 +5549,10 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/disclosure@workspace:packages/@react-aria/disclosure" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/ssr": "npm:^3.9.10" "@react-aria/utils": "npm:^3.32.0" "@react-stately/disclosure": "npm:^3.0.9" - "@react-types/button": "npm:^3.14.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -5573,6 +5565,7 @@ __metadata: resolution: "@react-aria/dnd@workspace:packages/@react-aria/dnd" dependencies: "@internationalized/string": "npm:^3.2.7" + "@react-aria/button": "npm:^3.14.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" "@react-aria/live-announcer": "npm:^3.4.4" @@ -5580,7 +5573,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/collections": "npm:^3.12.8" "@react-stately/dnd": "npm:^3.7.2" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5629,6 +5621,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/grid@workspace:packages/@react-aria/grid" dependencies: + "@react-aria/checkbox": "npm:^3.16.3" "@react-aria/focus": "npm:^3.21.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" @@ -5638,8 +5631,6 @@ __metadata: "@react-stately/collections": "npm:^3.12.8" "@react-stately/grid": "npm:^3.11.7" "@react-stately/selection": "npm:^3.20.7" - "@react-types/checkbox": "npm:^3.10.2" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5734,7 +5725,6 @@ __metadata: dependencies: "@react-aria/interactions": "npm:^3.26.0" "@react-aria/utils": "npm:^3.32.0" - "@react-types/link": "npm:^3.6.5" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5753,7 +5743,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/collections": "npm:^3.12.8" "@react-stately/list": "npm:^3.13.2" - "@react-types/listbox": "npm:^3.7.4" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5787,6 +5776,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/menu@workspace:packages/@react-aria/menu" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/focus": "npm:^3.21.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" @@ -5797,8 +5787,6 @@ __metadata: "@react-stately/menu": "npm:^3.9.9" "@react-stately/selection": "npm:^3.20.7" "@react-stately/tree": "npm:^3.9.4" - "@react-types/button": "npm:^3.14.1" - "@react-types/menu": "npm:^3.10.5" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5812,7 +5800,6 @@ __metadata: resolution: "@react-aria/meter@workspace:packages/@react-aria/meter" dependencies: "@react-aria/progress": "npm:^3.4.28" - "@react-types/meter": "npm:^3.4.13" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5825,6 +5812,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/numberfield@workspace:packages/@react-aria/numberfield" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" "@react-aria/spinbutton": "npm:^3.7.0" @@ -5832,8 +5820,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/form": "npm:^3.2.2" "@react-stately/numberfield": "npm:^3.10.3" - "@react-types/button": "npm:^3.14.1" - "@react-types/numberfield": "npm:^3.8.16" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5854,6 +5840,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/overlays@workspace:packages/@react-aria/overlays" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/focus": "npm:^3.21.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" @@ -5861,8 +5848,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-aria/visually-hidden": "npm:^3.8.29" "@react-stately/overlays": "npm:^3.6.21" - "@react-types/button": "npm:^3.14.1" - "@react-types/overlays": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5886,7 +5871,6 @@ __metadata: "@react-aria/i18n": "npm:^3.12.14" "@react-aria/label": "npm:^3.7.23" "@react-aria/utils": "npm:^3.32.0" - "@react-types/progress": "npm:^3.5.16" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5906,7 +5890,6 @@ __metadata: "@react-aria/label": "npm:^3.7.23" "@react-aria/utils": "npm:^3.32.0" "@react-stately/radio": "npm:^3.11.3" - "@react-types/radio": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5919,12 +5902,11 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/searchfield@workspace:packages/@react-aria/searchfield" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/textfield": "npm:^3.18.3" "@react-aria/utils": "npm:^3.32.0" "@react-stately/searchfield": "npm:^3.5.17" - "@react-types/button": "npm:^3.14.1" - "@react-types/searchfield": "npm:^3.6.6" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5937,6 +5919,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/select@workspace:packages/@react-aria/select" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/form": "npm:^3.1.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" @@ -5947,8 +5930,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-aria/visually-hidden": "npm:^3.8.29" "@react-stately/select": "npm:^3.9.0" - "@react-types/button": "npm:^3.14.1" - "@react-types/select": "npm:^3.12.0" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -5997,7 +5978,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/slider": "npm:^3.7.3" "@react-types/shared": "npm:^3.32.1" - "@react-types/slider": "npm:^3.8.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6009,10 +5989,10 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/spinbutton@workspace:packages/@react-aria/spinbutton" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/live-announcer": "npm:^3.4.4" "@react-aria/utils": "npm:^3.32.0" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6054,7 +6034,6 @@ __metadata: "@react-aria/toggle": "npm:^3.12.3" "@react-stately/toggle": "npm:^3.9.3" "@react-types/shared": "npm:^3.32.1" - "@react-types/switch": "npm:^3.5.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6066,6 +6045,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/table@workspace:packages/@react-aria/table" dependencies: + "@react-aria/checkbox": "npm:^3.16.3" "@react-aria/focus": "npm:^3.21.3" "@react-aria/grid": "npm:^3.14.6" "@react-aria/i18n": "npm:^3.12.14" @@ -6075,11 +6055,9 @@ __metadata: "@react-aria/visually-hidden": "npm:^3.8.29" "@react-stately/collections": "npm:^3.12.8" "@react-stately/flags": "npm:^3.1.2" + "@react-stately/grid": "npm:^3.11.7" "@react-stately/table": "npm:^3.15.2" - "@react-types/checkbox": "npm:^3.10.2" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" - "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6097,7 +6075,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/tabs": "npm:^3.8.7" "@react-types/shared": "npm:^3.32.1" - "@react-types/tabs": "npm:^3.3.20" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6109,6 +6086,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/tag@workspace:packages/@react-aria/tag" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/gridlist": "npm:^3.14.2" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" @@ -6116,7 +6094,6 @@ __metadata: "@react-aria/selection": "npm:^3.27.0" "@react-aria/utils": "npm:^3.32.0" "@react-stately/list": "npm:^3.13.2" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6149,7 +6126,6 @@ __metadata: "@react-stately/form": "npm:^3.2.2" "@react-stately/utils": "npm:^3.11.0" "@react-types/shared": "npm:^3.32.1" - "@react-types/textfield": "npm:^3.12.6" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6161,12 +6137,12 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/toast@workspace:packages/@react-aria/toast" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" "@react-aria/landmark": "npm:^3.0.8" "@react-aria/utils": "npm:^3.32.0" "@react-stately/toast": "npm:^3.1.2" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6182,7 +6158,6 @@ __metadata: "@react-aria/interactions": "npm:^3.26.0" "@react-aria/utils": "npm:^3.32.0" "@react-stately/toggle": "npm:^3.9.3" - "@react-types/checkbox": "npm:^3.10.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6214,7 +6189,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-stately/tooltip": "npm:^3.5.9" "@react-types/shared": "npm:^3.32.1" - "@react-types/tooltip": "npm:^3.5.0" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -6226,12 +6200,12 @@ __metadata: version: 0.0.0-use.local resolution: "@react-aria/tree@workspace:packages/@react-aria/tree" dependencies: + "@react-aria/button": "npm:^3.14.3" "@react-aria/gridlist": "npm:^3.14.2" "@react-aria/i18n": "npm:^3.12.14" "@react-aria/selection": "npm:^3.27.0" "@react-aria/utils": "npm:^3.32.0" "@react-stately/tree": "npm:^3.9.4" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6320,7 +6294,6 @@ __metadata: "@react-spectrum/text": "npm:^3.5.23" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" - "@react-types/actionbar": "npm:^3.1.19" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6348,7 +6321,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" "@react-stately/list": "npm:^3.13.2" - "@react-types/actiongroup": "npm:^3.4.21" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@spectrum-icons/workflow": "npm:^4.2.26" @@ -6385,8 +6357,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" "@react-stately/combobox": "npm:^3.12.1" - "@react-types/autocomplete": "npm:3.0.0-alpha.36" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6404,7 +6374,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/avatar": "npm:^3.0.19" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6422,7 +6391,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/text": "npm:^3.5.23" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/badge": "npm:^3.1.21" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6446,7 +6414,6 @@ __metadata: "@react-spectrum/menu": "npm:^3.22.9" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" - "@react-types/breadcrumbs": "npm:^3.7.17" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6472,7 +6439,6 @@ __metadata: "@react-spectrum/text": "npm:^3.5.23" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/toggle": "npm:^3.9.3" - "@react-types/button": "npm:^3.14.1" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6491,7 +6457,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/buttongroup": "npm:^3.3.21" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/workflow": "npm:^4.0.0" "@swc/helpers": "npm:^0.5.0" @@ -6508,6 +6473,7 @@ __metadata: dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@internationalized/date": "npm:^3.10.1" + "@react-aria/button": "npm:^3.14.3" "@react-aria/calendar": "npm:^3.9.3" "@react-aria/focus": "npm:^3.21.3" "@react-aria/i18n": "npm:^3.12.14" @@ -6519,8 +6485,6 @@ __metadata: "@react-spectrum/test-utils-internal": "npm:3.0.0-alpha.1" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/calendar": "npm:^3.9.1" - "@react-types/button": "npm:^3.14.1" - "@react-types/calendar": "npm:^3.8.1" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6531,7 +6495,7 @@ __metadata: languageName: unknown linkType: soft -"@react-spectrum/card@workspace:packages/@react-spectrum/card": +"@react-spectrum/card@npm:3.0.0-alpha.51, @react-spectrum/card@workspace:packages/@react-spectrum/card": version: 0.0.0-use.local resolution: "@react-spectrum/card@workspace:packages/@react-spectrum/card" dependencies: @@ -6549,8 +6513,6 @@ __metadata: "@react-stately/grid": "npm:^3.11.7" "@react-stately/list": "npm:^3.13.2" "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/card": "npm:3.0.0-alpha.41" - "@react-types/provider": "npm:^3.8.13" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6573,7 +6535,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/checkbox": "npm:^3.7.3" "@react-stately/toggle": "npm:^3.9.3" - "@react-types/checkbox": "npm:^3.10.2" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6633,9 +6594,7 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-spectrum/view": "npm:^3.6.24" "@react-stately/color": "npm:^3.9.3" - "@react-types/color": "npm:^3.1.2" "@react-types/shared": "npm:^3.32.1" - "@react-types/textfield": "npm:^3.12.6" "@swc/helpers": "npm:^0.5.0" react-aria-components: "npm:^1.14.0" peerDependencies: @@ -6670,8 +6629,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" "@react-stately/combobox": "npm:^3.12.1" - "@react-types/button": "npm:^3.14.1" - "@react-types/combobox": "npm:^3.13.10" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6688,13 +6645,14 @@ __metadata: dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/i18n": "npm:^3.12.14" + "@react-aria/overlays": "npm:^3.31.0" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/button": "npm:^3.17.5" "@react-spectrum/dialog": "npm:^3.9.5" "@react-spectrum/link": "npm:^3.2.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-spectrum/view": "npm:^3.1.3" - "@react-types/contextualhelp": "npm:^3.2.22" + "@react-stately/overlays": "npm:^3.6.21" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/workflow": "npm:^4.2.26" "@swc/helpers": "npm:^0.5.0" @@ -6726,7 +6684,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-spectrum/view": "npm:^3.6.24" "@react-stately/datepicker": "npm:^3.15.3" - "@react-types/datepicker": "npm:^3.13.3" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@spectrum-icons/workflow": "npm:^4.2.26" @@ -6758,8 +6715,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-spectrum/view": "npm:^3.6.24" "@react-stately/overlays": "npm:^3.6.21" - "@react-types/button": "npm:^3.14.1" - "@react-types/dialog": "npm:^3.5.22" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -6777,7 +6732,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/separator": "npm:^3.4.14" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/divider": "npm:^3.3.21" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6883,7 +6837,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/form": "npm:^3.2.2" - "@react-types/form": "npm:^3.7.16" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6917,7 +6870,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/layout": "npm:^3.6.20" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/illustratedmessage": "npm:^3.3.21" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6934,7 +6886,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/image": "npm:^3.5.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -6974,7 +6925,6 @@ __metadata: "@react-spectrum/form": "npm:^3.7.20" "@react-spectrum/layout": "npm:^3.6.20" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/label": "npm:^3.9.15" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -7011,7 +6961,6 @@ __metadata: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/layout": "npm:^3.3.27" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7031,7 +6980,6 @@ __metadata: "@react-aria/link": "npm:^3.8.7" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/link": "npm:^3.6.5" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7065,10 +7013,10 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" "@react-stately/dnd": "npm:^3.0.0" + "@react-stately/grid": "npm:^3.11.7" "@react-stately/layout": "npm:^4.5.2" "@react-stately/list": "npm:^3.13.2" "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -7099,7 +7047,6 @@ __metadata: "@react-stately/layout": "npm:^4.5.2" "@react-stately/list": "npm:^3.13.2" "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/listbox": "npm:^3.7.4" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -7145,8 +7092,6 @@ __metadata: "@react-stately/menu": "npm:^3.9.9" "@react-stately/overlays": "npm:^3.6.21" "@react-stately/tree": "npm:^3.9.4" - "@react-types/menu": "npm:^3.10.5" - "@react-types/overlays": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@spectrum-icons/workflow": "npm:^4.2.26" @@ -7166,7 +7111,6 @@ __metadata: "@react-aria/meter": "npm:^3.4.28" "@react-spectrum/progress": "npm:^3.7.21" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/meter": "npm:^3.4.13" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7193,8 +7137,6 @@ __metadata: "@react-spectrum/textfield": "npm:^3.14.3" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/numberfield": "npm:^3.10.3" - "@react-types/button": "npm:^3.14.1" - "@react-types/numberfield": "npm:^3.8.16" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@spectrum-icons/workflow": "npm:^4.2.26" @@ -7216,7 +7158,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/overlays": "npm:^3.6.21" - "@react-types/overlays": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" react-transition-group: "npm:^4.4.5" @@ -7289,7 +7230,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/collections": "npm:^3.12.8" "@react-stately/select": "npm:^3.9.0" - "@react-types/select": "npm:^3.12.0" "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" @@ -7308,7 +7248,6 @@ __metadata: "@react-aria/progress": "npm:^3.4.28" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/progress": "npm:^3.5.16" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7327,7 +7266,6 @@ __metadata: "@react-aria/overlays": "npm:^3.31.0" "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" - "@react-types/provider": "npm:^3.8.13" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" clsx: "npm:^2.0.0" @@ -7349,7 +7287,6 @@ __metadata: "@react-spectrum/label": "npm:^3.16.20" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/radio": "npm:^3.11.3" - "@react-types/radio": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7373,7 +7310,6 @@ __metadata: "@react-spectrum/s2": "npm:^1.0.0" "@react-spectrum/utils": "npm:^3.12.6" "@react-types/shared": "npm:^3.30.0" - "@react-types/textfield": "npm:^3.12.3" axe-playwright: "npm:^2.2.2" emojibase-data: "npm:^16.0.3" fast-glob: "npm:^3.3.3" @@ -7473,18 +7409,14 @@ __metadata: "@react-aria/i18n": "npm:^3.12.14" "@react-aria/interactions": "npm:^3.26.0" "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/overlays": "npm:^3.31.0" + "@react-aria/ssr": "npm:^3.9.10" "@react-aria/test-utils": "npm:^1.0.0-alpha.8" "@react-aria/utils": "npm:^3.32.0" - "@react-spectrum/utils": "npm:^3.12.10" + "@react-stately/grid": "npm:^3.11.7" "@react-stately/layout": "npm:^4.5.2" "@react-stately/utils": "npm:^3.11.0" - "@react-types/dialog": "npm:^3.5.22" - "@react-types/grid": "npm:^3.3.6" - "@react-types/overlays": "npm:^3.9.2" - "@react-types/provider": "npm:^3.8.13" "@react-types/shared": "npm:^3.32.1" - "@react-types/table": "npm:^3.13.4" - "@react-types/textfield": "npm:^3.12.6" "@storybook/jest": "npm:^0.2.3" "@testing-library/dom": "npm:^10.1.0" "@testing-library/react": "npm:^16.0.0" @@ -7512,8 +7444,7 @@ __metadata: "@react-spectrum/textfield": "npm:^3.14.3" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/searchfield": "npm:^3.5.17" - "@react-types/searchfield": "npm:^3.6.6" - "@react-types/textfield": "npm:^3.12.6" + "@react-types/shared": "npm:^3.32.1" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7537,7 +7468,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/slider": "npm:^3.7.3" "@react-types/shared": "npm:^3.32.1" - "@react-types/slider": "npm:^3.8.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -7554,7 +7484,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-types/shared": "npm:^3.32.1" - "@react-types/statuslight": "npm:^3.3.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -7617,7 +7546,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/toggle": "npm:^3.9.3" "@react-types/shared": "npm:^3.32.1" - "@react-types/switch": "npm:^3.5.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -7651,12 +7579,11 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/dnd": "npm:^3.1.0" "@react-stately/flags": "npm:^3.1.2" + "@react-stately/grid": "npm:^3.11.7" "@react-stately/layout": "npm:^4.5.2" "@react-stately/table": "npm:^3.15.2" "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" - "@react-types/table": "npm:^3.13.4" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7682,9 +7609,7 @@ __metadata: "@react-stately/collections": "npm:^3.12.8" "@react-stately/list": "npm:^3.13.2" "@react-stately/tabs": "npm:^3.8.7" - "@react-types/select": "npm:^3.12.0" "@react-types/shared": "npm:^3.32.1" - "@react-types/tabs": "npm:^3.3.20" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -7766,7 +7691,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-types/shared": "npm:^3.32.1" - "@react-types/text": "npm:^3.3.21" "@swc/helpers": "npm:^0.5.0" react-aria-components: "npm:^1.14.0" react-dom: "npm:^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" @@ -7792,7 +7716,6 @@ __metadata: "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/utils": "npm:^3.11.0" "@react-types/shared": "npm:^3.32.1" - "@react-types/textfield": "npm:^3.12.6" "@spectrum-icons/ui": "npm:^3.6.21" "@spectrum-icons/workflow": "npm:^4.0.0" "@swc/helpers": "npm:^0.5.0" @@ -7808,9 +7731,9 @@ __metadata: resolution: "@react-spectrum/theme-dark@workspace:packages/@react-spectrum/theme-dark" dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" - "@react-types/provider": "npm:^3.8.13" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.12 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -7820,9 +7743,9 @@ __metadata: resolution: "@react-spectrum/theme-default@workspace:packages/@react-spectrum/theme-default" dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" - "@react-types/provider": "npm:^3.8.13" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.12 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -7833,9 +7756,9 @@ __metadata: dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" "@react-spectrum/theme-default": "npm:^3.5.22" - "@react-types/provider": "npm:^3.8.13" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.12 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -7845,9 +7768,9 @@ __metadata: resolution: "@react-spectrum/theme-light@workspace:packages/@react-spectrum/theme-light" dependencies: "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1" - "@react-types/provider": "npm:^3.8.13" "@swc/helpers": "npm:^0.5.0" peerDependencies: + "@react-spectrum/provider": ^3.10.12 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -7890,9 +7813,7 @@ __metadata: "@react-spectrum/overlays": "npm:^5.9.1" "@react-spectrum/utils": "npm:^3.12.10" "@react-stately/tooltip": "npm:^3.5.9" - "@react-types/overlays": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" - "@react-types/tooltip": "npm:^3.5.0" "@spectrum-icons/ui": "npm:^3.6.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -7956,7 +7877,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-types/shared": "npm:^3.32.1" - "@react-types/view": "npm:^3.4.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: "@react-spectrum/provider": ^3.0.0 @@ -7973,7 +7893,6 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-spectrum/utils": "npm:^3.12.10" "@react-types/shared": "npm:^3.32.1" - "@react-types/well": "npm:^3.3.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -7998,7 +7917,6 @@ __metadata: dependencies: "@internationalized/date": "npm:^3.10.1" "@react-stately/utils": "npm:^3.11.0" - "@react-types/calendar": "npm:^3.8.1" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8012,7 +7930,6 @@ __metadata: dependencies: "@react-stately/form": "npm:^3.2.2" "@react-stately/utils": "npm:^3.11.0" - "@react-types/checkbox": "npm:^3.10.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8041,7 +7958,6 @@ __metadata: "@react-stately/numberfield": "npm:^3.10.3" "@react-stately/slider": "npm:^3.7.3" "@react-stately/utils": "npm:^3.11.0" - "@react-types/color": "npm:^3.1.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8058,7 +7974,6 @@ __metadata: "@react-stately/list": "npm:^3.13.2" "@react-stately/overlays": "npm:^3.6.21" "@react-stately/utils": "npm:^3.11.0" - "@react-types/combobox": "npm:^3.13.10" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8083,10 +7998,10 @@ __metadata: dependencies: "@internationalized/date": "npm:^3.10.1" "@internationalized/string": "npm:^3.2.7" + "@react-stately/calendar": "npm:^3.9.1" "@react-stately/form": "npm:^3.2.2" "@react-stately/overlays": "npm:^3.6.21" "@react-stately/utils": "npm:^3.11.0" - "@react-types/datepicker": "npm:^3.13.3" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8143,7 +8058,6 @@ __metadata: dependencies: "@react-stately/collections": "npm:^3.12.8" "@react-stately/selection": "npm:^3.20.7" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8156,11 +8070,10 @@ __metadata: resolution: "@react-stately/layout@workspace:packages/@react-stately/layout" dependencies: "@react-stately/collections": "npm:^3.12.8" + "@react-stately/grid": "npm:^3.11.7" "@react-stately/table": "npm:^3.15.2" "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" - "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8187,7 +8100,6 @@ __metadata: resolution: "@react-stately/menu@workspace:packages/@react-stately/menu" dependencies: "@react-stately/overlays": "npm:^3.6.21" - "@react-types/menu": "npm:^3.10.5" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8202,7 +8114,7 @@ __metadata: "@internationalized/number": "npm:^3.6.5" "@react-stately/form": "npm:^3.2.2" "@react-stately/utils": "npm:^3.11.0" - "@react-types/numberfield": "npm:^3.8.16" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8214,7 +8126,6 @@ __metadata: resolution: "@react-stately/overlays@workspace:packages/@react-stately/overlays" dependencies: "@react-stately/utils": "npm:^3.11.0" - "@react-types/overlays": "npm:^3.9.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8227,7 +8138,6 @@ __metadata: dependencies: "@react-stately/form": "npm:^3.2.2" "@react-stately/utils": "npm:^3.11.0" - "@react-types/radio": "npm:^3.9.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8240,7 +8150,7 @@ __metadata: resolution: "@react-stately/searchfield@workspace:packages/@react-stately/searchfield" dependencies: "@react-stately/utils": "npm:^3.11.0" - "@react-types/searchfield": "npm:^3.6.6" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8255,7 +8165,6 @@ __metadata: "@react-stately/list": "npm:^3.13.2" "@react-stately/overlays": "npm:^3.6.21" "@react-stately/utils": "npm:^3.11.0" - "@react-types/select": "npm:^3.12.0" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8282,7 +8191,6 @@ __metadata: dependencies: "@react-stately/utils": "npm:^3.11.0" "@react-types/shared": "npm:^3.32.1" - "@react-types/slider": "npm:^3.8.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8311,9 +8219,7 @@ __metadata: "@react-stately/grid": "npm:^3.11.7" "@react-stately/selection": "npm:^3.20.7" "@react-stately/utils": "npm:^3.11.0" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" - "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8326,7 +8232,6 @@ __metadata: dependencies: "@react-stately/list": "npm:^3.13.2" "@react-types/shared": "npm:^3.32.1" - "@react-types/tabs": "npm:^3.3.20" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8350,7 +8255,6 @@ __metadata: resolution: "@react-stately/toggle@workspace:packages/@react-stately/toggle" dependencies: "@react-stately/utils": "npm:^3.11.0" - "@react-types/checkbox": "npm:^3.10.2" "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: @@ -8363,7 +8267,6 @@ __metadata: resolution: "@react-stately/tooltip@workspace:packages/@react-stately/tooltip" dependencies: "@react-stately/overlays": "npm:^3.6.21" - "@react-types/tooltip": "npm:^3.5.0" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 @@ -8394,7 +8297,7 @@ __metadata: languageName: unknown linkType: soft -"@react-stately/virtualizer@npm:^4.0.0, @react-stately/virtualizer@npm:^4.4.4, @react-stately/virtualizer@workspace:packages/@react-stately/virtualizer": +"@react-stately/virtualizer@npm:^4.4.4, @react-stately/virtualizer@workspace:packages/@react-stately/virtualizer": version: 0.0.0-use.local resolution: "@react-stately/virtualizer@workspace:packages/@react-stately/virtualizer" dependencies: @@ -8406,254 +8309,263 @@ __metadata: languageName: unknown linkType: soft -"@react-types/actionbar@npm:^3.1.19, @react-types/actionbar@workspace:packages/@react-types/actionbar": +"@react-types/actionbar@workspace:packages/@react-types/actionbar": version: 0.0.0-use.local resolution: "@react-types/actionbar@workspace:packages/@react-types/actionbar" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/actionbar": "npm:^3.6.15" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/actiongroup@npm:^3.4.21, @react-types/actiongroup@workspace:packages/@react-types/actiongroup": +"@react-types/actiongroup@workspace:packages/@react-types/actiongroup": version: 0.0.0-use.local resolution: "@react-types/actiongroup@workspace:packages/@react-types/actiongroup" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/actiongroup": "npm:^3.7.22" + "@react-spectrum/actiongroup": "npm:^3.11.5" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/autocomplete@npm:3.0.0-alpha.36, @react-types/autocomplete@workspace:packages/@react-types/autocomplete": +"@react-types/autocomplete@workspace:packages/@react-types/autocomplete": version: 0.0.0-use.local resolution: "@react-types/autocomplete@workspace:packages/@react-types/autocomplete" dependencies: - "@react-types/combobox": "npm:^3.13.10" - "@react-types/searchfield": "npm:^3.6.6" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/autocomplete": "npm:3.0.0-rc.4" + "@react-spectrum/autocomplete": "npm:3.0.0-alpha.51" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/avatar@npm:^3.0.19, @react-types/avatar@workspace:packages/@react-types/avatar": +"@react-types/avatar@workspace:packages/@react-types/avatar": version: 0.0.0-use.local resolution: "@react-types/avatar@workspace:packages/@react-types/avatar" dependencies: + "@react-spectrum/avatar": "npm:^3.0.27" "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/badge@npm:^3.1.21, @react-types/badge@workspace:packages/@react-types/badge": +"@react-types/badge@workspace:packages/@react-types/badge": version: 0.0.0-use.local resolution: "@react-types/badge@workspace:packages/@react-types/badge" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/badge": "npm:^3.1.31" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/breadcrumbs@npm:^3.7.17, @react-types/breadcrumbs@workspace:packages/@react-types/breadcrumbs": +"@react-types/breadcrumbs@workspace:packages/@react-types/breadcrumbs": version: 0.0.0-use.local resolution: "@react-types/breadcrumbs@workspace:packages/@react-types/breadcrumbs" dependencies: - "@react-types/link": "npm:^3.6.5" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/breadcrumbs": "npm:^3.5.30" + "@react-spectrum/breadcrumbs": "npm:^3.9.25" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/button@npm:^3.14.1, @react-types/button@workspace:packages/@react-types/button": +"@react-types/button@workspace:packages/@react-types/button": version: 0.0.0-use.local resolution: "@react-types/button@workspace:packages/@react-types/button" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/button": "npm:^3.14.3" + "@react-spectrum/button": "npm:^3.17.5" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/buttongroup@npm:^3.3.21, @react-types/buttongroup@workspace:packages/@react-types/buttongroup": +"@react-types/buttongroup@workspace:packages/@react-types/buttongroup": version: 0.0.0-use.local resolution: "@react-types/buttongroup@workspace:packages/@react-types/buttongroup" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/buttongroup": "npm:^3.6.27" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/calendar@npm:^3.8.1, @react-types/calendar@workspace:packages/@react-types/calendar": +"@react-types/calendar@workspace:packages/@react-types/calendar": version: 0.0.0-use.local resolution: "@react-types/calendar@workspace:packages/@react-types/calendar" dependencies: "@internationalized/date": "npm:^3.10.1" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/calendar": "npm:^3.9.3" + "@react-spectrum/calendar": "npm:^3.7.9" + "@react-stately/calendar": "npm:^3.9.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/card@npm:3.0.0-alpha.41, @react-types/card@workspace:packages/@react-types/card": +"@react-types/card@workspace:packages/@react-types/card": version: 0.0.0-use.local resolution: "@react-types/card@workspace:packages/@react-types/card" dependencies: - "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/provider": "npm:^3.8.13" - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/card": "npm:3.0.0-alpha.51" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/checkbox@npm:^3.10.2, @react-types/checkbox@workspace:packages/@react-types/checkbox": +"@react-types/checkbox@workspace:packages/@react-types/checkbox": version: 0.0.0-use.local resolution: "@react-types/checkbox@workspace:packages/@react-types/checkbox" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/checkbox": "npm:^3.16.3" + "@react-aria/toggle": "npm:^3.12.3" + "@react-spectrum/checkbox": "npm:^3.10.5" + "@react-stately/checkbox": "npm:^3.7.3" + "@react-stately/toggle": "npm:^3.9.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/color@npm:^3.1.2, @react-types/color@workspace:packages/@react-types/color": +"@react-types/color@workspace:packages/@react-types/color": version: 0.0.0-use.local resolution: "@react-types/color@workspace:packages/@react-types/color" dependencies: - "@react-types/shared": "npm:^3.32.1" - "@react-types/slider": "npm:^3.8.2" + "@react-aria/color": "npm:^3.1.3" + "@react-spectrum/color": "npm:^3.1.5" + "@react-stately/color": "npm:^3.9.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/combobox@npm:^3.13.10, @react-types/combobox@workspace:packages/@react-types/combobox": +"@react-types/combobox@workspace:packages/@react-types/combobox": version: 0.0.0-use.local resolution: "@react-types/combobox@workspace:packages/@react-types/combobox" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/combobox": "npm:^3.14.1" + "@react-spectrum/combobox": "npm:^3.16.5" + "@react-stately/combobox": "npm:^3.12.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/contextualhelp@npm:^3.2.22, @react-types/contextualhelp@workspace:packages/@react-types/contextualhelp": +"@react-types/contextualhelp@workspace:packages/@react-types/contextualhelp": version: 0.0.0-use.local resolution: "@react-types/contextualhelp@workspace:packages/@react-types/contextualhelp" dependencies: - "@react-types/overlays": "npm:^3.9.2" - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/contextualhelp": "npm:^3.6.29" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/datepicker@npm:^3.13.3, @react-types/datepicker@workspace:packages/@react-types/datepicker": +"@react-types/datepicker@workspace:packages/@react-types/datepicker": version: 0.0.0-use.local resolution: "@react-types/datepicker@workspace:packages/@react-types/datepicker" dependencies: - "@internationalized/date": "npm:^3.10.1" - "@react-types/calendar": "npm:^3.8.1" - "@react-types/overlays": "npm:^3.9.2" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/datepicker": "npm:^3.15.3" + "@react-spectrum/datepicker": "npm:^3.14.9" + "@react-stately/datepicker": "npm:^3.15.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/dialog@npm:^3.5.22, @react-types/dialog@workspace:packages/@react-types/dialog": +"@react-types/dialog@workspace:packages/@react-types/dialog": version: 0.0.0-use.local resolution: "@react-types/dialog@workspace:packages/@react-types/dialog" dependencies: - "@react-types/overlays": "npm:^3.9.2" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/dialog": "npm:^3.5.32" + "@react-spectrum/dialog": "npm:^3.9.5" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/divider@npm:^3.3.21, @react-types/divider@workspace:packages/@react-types/divider": +"@react-types/divider@workspace:packages/@react-types/divider": version: 0.0.0-use.local resolution: "@react-types/divider@workspace:packages/@react-types/divider" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/divider": "npm:^3.5.28" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/form@npm:^3.7.16, @react-types/form@workspace:packages/@react-types/form": +"@react-types/form@workspace:packages/@react-types/form": version: 0.0.0-use.local resolution: "@react-types/form@workspace:packages/@react-types/form" dependencies: + "@react-spectrum/form": "npm:^3.7.20" "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/grid@npm:^3.3.6, @react-types/grid@workspace:packages/@react-types/grid": +"@react-types/grid@workspace:packages/@react-types/grid": version: 0.0.0-use.local resolution: "@react-types/grid@workspace:packages/@react-types/grid" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-stately/grid": "npm:^3.11.7" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/illustratedmessage@npm:^3.3.21, @react-types/illustratedmessage@workspace:packages/@react-types/illustratedmessage": +"@react-types/illustratedmessage@workspace:packages/@react-types/illustratedmessage": version: 0.0.0-use.local resolution: "@react-types/illustratedmessage@workspace:packages/@react-types/illustratedmessage" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/illustratedmessage": "npm:^3.5.15" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/image@npm:^3.5.2, @react-types/image@workspace:packages/@react-types/image": +"@react-types/image@workspace:packages/@react-types/image": version: 0.0.0-use.local resolution: "@react-types/image@workspace:packages/@react-types/image" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/image": "npm:^3.6.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/label@npm:^3.9.15, @react-types/label@workspace:packages/@react-types/label": +"@react-types/label@workspace:packages/@react-types/label": version: 0.0.0-use.local resolution: "@react-types/label@workspace:packages/@react-types/label" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/label": "npm:^3.16.20" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/layout@npm:^3.3.27, @react-types/layout@workspace:packages/@react-types/layout": +"@react-types/layout@workspace:packages/@react-types/layout": version: 0.0.0-use.local resolution: "@react-types/layout@workspace:packages/@react-types/layout" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/layout": "npm:^3.6.20" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/link@npm:^3.6.5, @react-types/link@workspace:packages/@react-types/link": +"@react-types/link@workspace:packages/@react-types/link": version: 0.0.0-use.local resolution: "@react-types/link@workspace:packages/@react-types/link" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/link": "npm:^3.8.7" + "@react-spectrum/link": "npm:^3.6.23" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown @@ -8672,109 +8584,122 @@ __metadata: languageName: unknown linkType: soft -"@react-types/listbox@npm:^3.7.4, @react-types/listbox@workspace:packages/@react-types/listbox": +"@react-types/listbox@workspace:packages/@react-types/listbox": version: 0.0.0-use.local resolution: "@react-types/listbox@workspace:packages/@react-types/listbox" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/listbox": "npm:^3.15.1" + "@react-spectrum/listbox": "npm:^3.15.9" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/menu@npm:^3.10.5, @react-types/menu@workspace:packages/@react-types/menu": +"@react-types/menu@workspace:packages/@react-types/menu": version: 0.0.0-use.local resolution: "@react-types/menu@workspace:packages/@react-types/menu" dependencies: - "@react-types/overlays": "npm:^3.9.2" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/menu": "npm:^3.19.4" + "@react-spectrum/menu": "npm:^3.22.9" + "@react-stately/menu": "npm:^3.9.9" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/meter@npm:^3.4.13, @react-types/meter@workspace:packages/@react-types/meter": +"@react-types/meter@workspace:packages/@react-types/meter": version: 0.0.0-use.local resolution: "@react-types/meter@workspace:packages/@react-types/meter" dependencies: - "@react-types/progress": "npm:^3.5.16" + "@react-aria/meter": "npm:^3.4.28" + "@react-spectrum/meter": "npm:^3.5.15" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/numberfield@npm:^3.8.16, @react-types/numberfield@workspace:packages/@react-types/numberfield": +"@react-types/numberfield@workspace:packages/@react-types/numberfield": version: 0.0.0-use.local resolution: "@react-types/numberfield@workspace:packages/@react-types/numberfield" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/numberfield": "npm:^3.12.3" + "@react-spectrum/numberfield": "npm:^3.10.3" + "@react-stately/numberfield": "npm:^3.10.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/overlays@npm:^3.9.2, @react-types/overlays@workspace:packages/@react-types/overlays": +"@react-types/overlays@workspace:packages/@react-types/overlays": version: 0.0.0-use.local resolution: "@react-types/overlays@workspace:packages/@react-types/overlays" dependencies: + "@react-aria/overlays": "npm:^3.31.0" + "@react-spectrum/overlays": "npm:^5.9.1" + "@react-stately/overlays": "npm:^3.6.21" "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/progress@npm:^3.5.16, @react-types/progress@workspace:packages/@react-types/progress": +"@react-types/progress@workspace:packages/@react-types/progress": version: 0.0.0-use.local resolution: "@react-types/progress@workspace:packages/@react-types/progress" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/progress": "npm:^3.4.28" + "@react-spectrum/progress": "npm:^3.7.21" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/provider@npm:^3.8.13, @react-types/provider@workspace:packages/@react-types/provider": +"@react-types/provider@workspace:packages/@react-types/provider": version: 0.0.0-use.local resolution: "@react-types/provider@workspace:packages/@react-types/provider" - dependencies: - "@react-types/shared": "npm:^3.32.1" peerDependencies: + "@react-spectrum/provider": ^3.10.12 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/radio@npm:^3.9.2, @react-types/radio@workspace:packages/@react-types/radio": +"@react-types/radio@workspace:packages/@react-types/radio": version: 0.0.0-use.local resolution: "@react-types/radio@workspace:packages/@react-types/radio" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/radio": "npm:^3.12.3" + "@react-spectrum/radio": "npm:^3.7.22" + "@react-stately/radio": "npm:^3.11.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/searchfield@npm:^3.6.6, @react-types/searchfield@workspace:packages/@react-types/searchfield": +"@react-types/searchfield@workspace:packages/@react-types/searchfield": version: 0.0.0-use.local resolution: "@react-types/searchfield@workspace:packages/@react-types/searchfield" dependencies: - "@react-types/shared": "npm:^3.32.1" - "@react-types/textfield": "npm:^3.12.6" + "@react-aria/searchfield": "npm:^3.8.10" + "@react-spectrum/searchfield": "npm:^3.8.24" + "@react-stately/searchfield": "npm:^3.5.17" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/select@npm:^3.12.0, @react-types/select@workspace:packages/@react-types/select": +"@react-types/select@workspace:packages/@react-types/select": version: 0.0.0-use.local resolution: "@react-types/select@workspace:packages/@react-types/select" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/select": "npm:^3.17.1" + "@react-spectrum/picker": "npm:^3.16.5" + "@react-stately/select": "npm:^3.9.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/shared@npm:^3.1.0, @react-types/shared@npm:^3.30.0, @react-types/shared@npm:^3.32.1, @react-types/shared@workspace:packages/@react-types/shared": +"@react-types/shared@npm:^3.30.0, @react-types/shared@npm:^3.32.1, @react-types/shared@workspace:packages/@react-types/shared": version: 0.0.0-use.local resolution: "@react-types/shared@workspace:packages/@react-types/shared" peerDependencies: @@ -8782,115 +8707,111 @@ __metadata: languageName: unknown linkType: soft -"@react-types/sidenav@workspace:packages/@react-types/sidenav": - version: 0.0.0-use.local - resolution: "@react-types/sidenav@workspace:packages/@react-types/sidenav" - dependencies: - "@react-stately/virtualizer": "npm:^4.0.0" - "@react-types/shared": "npm:^3.1.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - languageName: unknown - linkType: soft - -"@react-types/slider@npm:^3.8.2, @react-types/slider@workspace:packages/@react-types/slider": +"@react-types/slider@workspace:packages/@react-types/slider": version: 0.0.0-use.local resolution: "@react-types/slider@workspace:packages/@react-types/slider" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/slider": "npm:^3.8.3" + "@react-spectrum/slider": "npm:^3.8.3" + "@react-stately/slider": "npm:^3.7.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/statuslight@npm:^3.3.21, @react-types/statuslight@workspace:packages/@react-types/statuslight": +"@react-types/statuslight@workspace:packages/@react-types/statuslight": version: 0.0.0-use.local resolution: "@react-types/statuslight@workspace:packages/@react-types/statuslight" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/statuslight": "npm:^3.5.27" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/switch@npm:^3.5.15, @react-types/switch@workspace:packages/@react-types/switch": +"@react-types/switch@workspace:packages/@react-types/switch": version: 0.0.0-use.local resolution: "@react-types/switch@workspace:packages/@react-types/switch" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/switch": "npm:^3.7.9" + "@react-spectrum/switch": "npm:^3.6.7" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/table@npm:^3.13.4, @react-types/table@workspace:packages/@react-types/table": +"@react-types/table@workspace:packages/@react-types/table": version: 0.0.0-use.local resolution: "@react-types/table@workspace:packages/@react-types/table" dependencies: - "@react-types/grid": "npm:^3.3.6" + "@react-spectrum/table": "npm:^3.17.9" + "@react-stately/table": "npm:^3.15.2" "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/tabs@npm:^3.3.20, @react-types/tabs@workspace:packages/@react-types/tabs": +"@react-types/tabs@workspace:packages/@react-types/tabs": version: 0.0.0-use.local resolution: "@react-types/tabs@workspace:packages/@react-types/tabs" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/tabs": "npm:^3.10.9" + "@react-spectrum/tabs": "npm:^3.8.28" + "@react-stately/tabs": "npm:^3.8.7" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/text@npm:^3.3.21, @react-types/text@workspace:packages/@react-types/text": +"@react-types/text@workspace:packages/@react-types/text": version: 0.0.0-use.local resolution: "@react-types/text@workspace:packages/@react-types/text" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/text": "npm:^3.5.23" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/textfield@npm:^3.12.3, @react-types/textfield@npm:^3.12.6, @react-types/textfield@workspace:packages/@react-types/textfield": +"@react-types/textfield@workspace:packages/@react-types/textfield": version: 0.0.0-use.local resolution: "@react-types/textfield@workspace:packages/@react-types/textfield" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-aria/textfield": "npm:^3.18.3" + "@react-spectrum/textfield": "npm:^3.14.3" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/tooltip@npm:^3.5.0, @react-types/tooltip@workspace:packages/@react-types/tooltip": +"@react-types/tooltip@workspace:packages/@react-types/tooltip": version: 0.0.0-use.local resolution: "@react-types/tooltip@workspace:packages/@react-types/tooltip" dependencies: - "@react-types/overlays": "npm:^3.9.2" - "@react-types/shared": "npm:^3.32.1" + "@react-aria/tooltip": "npm:^3.9.0" + "@react-spectrum/tooltip": "npm:^3.8.0" + "@react-stately/tooltip": "npm:^3.5.9" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/view@npm:^3.4.21, @react-types/view@workspace:packages/@react-types/view": +"@react-types/view@workspace:packages/@react-types/view": version: 0.0.0-use.local resolution: "@react-types/view@workspace:packages/@react-types/view" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/view": "npm:^3.6.24" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft -"@react-types/well@npm:^3.3.21, @react-types/well@workspace:packages/@react-types/well": +"@react-types/well@workspace:packages/@react-types/well": version: 0.0.0-use.local resolution: "@react-types/well@workspace:packages/@react-types/well" dependencies: - "@react-types/shared": "npm:^3.32.1" + "@react-spectrum/well": "npm:^3.4.28" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown @@ -24611,15 +24532,13 @@ __metadata: "@react-aria/utils": "npm:^3.32.0" "@react-aria/virtualizer": "npm:^4.1.11" "@react-stately/autocomplete": "npm:3.0.0-beta.4" + "@react-stately/grid": "npm:^3.11.7" "@react-stately/layout": "npm:^4.5.2" "@react-stately/selection": "npm:^3.20.7" "@react-stately/table": "npm:^3.15.2" "@react-stately/utils": "npm:^3.11.0" "@react-stately/virtualizer": "npm:^4.4.4" - "@react-types/form": "npm:^3.7.16" - "@react-types/grid": "npm:^3.3.6" "@react-types/shared": "npm:^3.32.1" - "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" "@tailwindcss/postcss": "npm:^4.0.0" client-only: "npm:^0.0.1" From 623234e0e5d56899c0cb77bcd6a1f378c104f26f Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 14:57:04 -0500 Subject: [PATCH 49/56] Add missing peers --- packages/@react-types/actionbar/package.json | 4 +- .../@react-types/actiongroup/package.json | 4 +- .../@react-types/autocomplete/package.json | 4 +- packages/@react-types/avatar/package.json | 4 +- packages/@react-types/badge/package.json | 4 +- .../@react-types/breadcrumbs/package.json | 4 +- packages/@react-types/button/package.json | 1 + .../@react-types/buttongroup/package.json | 1 + packages/@react-types/calendar/package.json | 5 +- packages/@react-types/card/package.json | 1 + packages/@react-types/checkbox/package.json | 1 + packages/@react-types/color/package.json | 4 +- packages/@react-types/combobox/package.json | 4 +- .../@react-types/contextualhelp/package.json | 4 +- packages/@react-types/datepicker/package.json | 4 +- packages/@react-types/dialog/package.json | 4 +- packages/@react-types/divider/package.json | 4 +- packages/@react-types/form/package.json | 4 +- .../illustratedmessage/package.json | 4 +- packages/@react-types/image/package.json | 4 +- packages/@react-types/label/package.json | 4 +- packages/@react-types/layout/package.json | 1 + packages/@react-types/link/package.json | 4 +- packages/@react-types/listbox/package.json | 4 +- packages/@react-types/menu/package.json | 1 + packages/@react-types/meter/package.json | 4 +- .../@react-types/numberfield/package.json | 4 +- packages/@react-types/overlays/package.json | 4 +- packages/@react-types/progress/package.json | 4 +- packages/@react-types/radio/package.json | 4 +- .../@react-types/searchfield/package.json | 4 +- packages/@react-types/select/package.json | 4 +- packages/@react-types/slider/package.json | 4 +- .../@react-types/statuslight/package.json | 4 +- packages/@react-types/switch/package.json | 4 +- packages/@react-types/table/package.json | 4 +- packages/@react-types/tabs/package.json | 4 +- packages/@react-types/text/package.json | 1 + packages/@react-types/textfield/package.json | 4 +- packages/@react-types/tooltip/package.json | 1 + packages/@react-types/view/package.json | 4 +- packages/@react-types/well/package.json | 4 +- yarn.lock | 77 ++++++++++++++++++- 43 files changed, 186 insertions(+), 36 deletions(-) diff --git a/packages/@react-types/actionbar/package.json b/packages/@react-types/actionbar/package.json index 4cb504d0b44..e43187ac9fe 100644 --- a/packages/@react-types/actionbar/package.json +++ b/packages/@react-types/actionbar/package.json @@ -12,7 +12,9 @@ "@react-spectrum/actionbar": "^3.6.15" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/actiongroup/package.json b/packages/@react-types/actiongroup/package.json index a346d4226e4..5817fa20fef 100644 --- a/packages/@react-types/actiongroup/package.json +++ b/packages/@react-types/actiongroup/package.json @@ -13,7 +13,9 @@ "@react-spectrum/actiongroup": "^3.11.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/autocomplete/package.json b/packages/@react-types/autocomplete/package.json index 8ad99d70072..696aec46e79 100644 --- a/packages/@react-types/autocomplete/package.json +++ b/packages/@react-types/autocomplete/package.json @@ -13,7 +13,9 @@ "@react-spectrum/autocomplete": "3.0.0-alpha.51" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/avatar/package.json b/packages/@react-types/avatar/package.json index 8015b76ab55..b630b795590 100644 --- a/packages/@react-types/avatar/package.json +++ b/packages/@react-types/avatar/package.json @@ -13,7 +13,9 @@ "@react-types/shared": "^3.32.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/badge/package.json b/packages/@react-types/badge/package.json index 848a6d18f52..c01a3194b9c 100644 --- a/packages/@react-types/badge/package.json +++ b/packages/@react-types/badge/package.json @@ -12,7 +12,9 @@ "@react-spectrum/badge": "^3.1.31" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/breadcrumbs/package.json b/packages/@react-types/breadcrumbs/package.json index 9e874c49f55..0bd8ba003c0 100644 --- a/packages/@react-types/breadcrumbs/package.json +++ b/packages/@react-types/breadcrumbs/package.json @@ -13,7 +13,9 @@ "@react-spectrum/breadcrumbs": "^3.9.25" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/button/package.json b/packages/@react-types/button/package.json index c2e87f912ba..973f3b3a01d 100644 --- a/packages/@react-types/button/package.json +++ b/packages/@react-types/button/package.json @@ -13,6 +13,7 @@ "@react-spectrum/button": "^3.17.5" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/buttongroup/package.json b/packages/@react-types/buttongroup/package.json index 603c47b524f..3772a903eb4 100644 --- a/packages/@react-types/buttongroup/package.json +++ b/packages/@react-types/buttongroup/package.json @@ -12,6 +12,7 @@ "@react-spectrum/buttongroup": "^3.6.27" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/calendar/package.json b/packages/@react-types/calendar/package.json index 2b424369305..cecef508498 100644 --- a/packages/@react-types/calendar/package.json +++ b/packages/@react-types/calendar/package.json @@ -9,7 +9,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@internationalized/date": "^3.10.1", "@react-aria/calendar": "^3.9.3", "@react-spectrum/calendar": "^3.7.9", "@react-stately/calendar": "^3.9.1" @@ -18,6 +17,8 @@ "access": "public" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-types/card/package.json b/packages/@react-types/card/package.json index 898f991ae33..9f6d8d08321 100644 --- a/packages/@react-types/card/package.json +++ b/packages/@react-types/card/package.json @@ -12,6 +12,7 @@ "@react-spectrum/card": "3.0.0-alpha.51" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, diff --git a/packages/@react-types/checkbox/package.json b/packages/@react-types/checkbox/package.json index 547f9c06dc5..1397a847558 100644 --- a/packages/@react-types/checkbox/package.json +++ b/packages/@react-types/checkbox/package.json @@ -16,6 +16,7 @@ "@react-stately/toggle": "^3.9.3" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/color/package.json b/packages/@react-types/color/package.json index b92cbb48fe2..e9740c3de68 100644 --- a/packages/@react-types/color/package.json +++ b/packages/@react-types/color/package.json @@ -14,7 +14,9 @@ "@react-stately/color": "^3.9.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/combobox/package.json b/packages/@react-types/combobox/package.json index d87f903ad88..84ce2a4a86b 100644 --- a/packages/@react-types/combobox/package.json +++ b/packages/@react-types/combobox/package.json @@ -14,7 +14,9 @@ "@react-stately/combobox": "^3.12.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/contextualhelp/package.json b/packages/@react-types/contextualhelp/package.json index 3f99a0d0ecc..4a68b9508e6 100644 --- a/packages/@react-types/contextualhelp/package.json +++ b/packages/@react-types/contextualhelp/package.json @@ -15,6 +15,8 @@ "access": "public" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-types/datepicker/package.json b/packages/@react-types/datepicker/package.json index 93008e7cae9..cc38f1c608a 100644 --- a/packages/@react-types/datepicker/package.json +++ b/packages/@react-types/datepicker/package.json @@ -17,6 +17,8 @@ "access": "public" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } } diff --git a/packages/@react-types/dialog/package.json b/packages/@react-types/dialog/package.json index 66d47138e3d..305c2106697 100644 --- a/packages/@react-types/dialog/package.json +++ b/packages/@react-types/dialog/package.json @@ -13,7 +13,9 @@ "@react-spectrum/dialog": "^3.9.5" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/divider/package.json b/packages/@react-types/divider/package.json index 86095bb110a..54d17a701d4 100644 --- a/packages/@react-types/divider/package.json +++ b/packages/@react-types/divider/package.json @@ -12,7 +12,9 @@ "@react-spectrum/divider": "^3.5.28" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/form/package.json b/packages/@react-types/form/package.json index 06caff3353e..9ed64a2baf0 100644 --- a/packages/@react-types/form/package.json +++ b/packages/@react-types/form/package.json @@ -13,7 +13,9 @@ "@react-types/shared": "^3.32.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/illustratedmessage/package.json b/packages/@react-types/illustratedmessage/package.json index 2bf28f324e4..c4463baafa9 100644 --- a/packages/@react-types/illustratedmessage/package.json +++ b/packages/@react-types/illustratedmessage/package.json @@ -12,7 +12,9 @@ "@react-spectrum/illustratedmessage": "^3.5.15" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/image/package.json b/packages/@react-types/image/package.json index 45779b6de6c..e124692b8b3 100644 --- a/packages/@react-types/image/package.json +++ b/packages/@react-types/image/package.json @@ -12,7 +12,9 @@ "@react-spectrum/image": "^3.6.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/label/package.json b/packages/@react-types/label/package.json index 50418cff411..ad5fc7f5d98 100644 --- a/packages/@react-types/label/package.json +++ b/packages/@react-types/label/package.json @@ -12,7 +12,9 @@ "@react-spectrum/label": "^3.16.20" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/layout/package.json b/packages/@react-types/layout/package.json index 8a00166bf12..e611d614084 100644 --- a/packages/@react-types/layout/package.json +++ b/packages/@react-types/layout/package.json @@ -12,6 +12,7 @@ "@react-spectrum/layout": "^3.6.20" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/link/package.json b/packages/@react-types/link/package.json index 74187d12d3a..ed4158ada5d 100644 --- a/packages/@react-types/link/package.json +++ b/packages/@react-types/link/package.json @@ -13,7 +13,9 @@ "@react-spectrum/link": "^3.6.23" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/listbox/package.json b/packages/@react-types/listbox/package.json index ded93604b79..384f7756e93 100644 --- a/packages/@react-types/listbox/package.json +++ b/packages/@react-types/listbox/package.json @@ -13,7 +13,9 @@ "@react-spectrum/listbox": "^3.15.9" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/menu/package.json b/packages/@react-types/menu/package.json index d733c05bfb8..9146a703710 100644 --- a/packages/@react-types/menu/package.json +++ b/packages/@react-types/menu/package.json @@ -14,6 +14,7 @@ "@react-stately/menu": "^3.9.9" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/meter/package.json b/packages/@react-types/meter/package.json index 56633987839..c5713563485 100644 --- a/packages/@react-types/meter/package.json +++ b/packages/@react-types/meter/package.json @@ -13,7 +13,9 @@ "@react-spectrum/meter": "^3.5.15" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/numberfield/package.json b/packages/@react-types/numberfield/package.json index 0d0319d2621..d1a875f2e0c 100644 --- a/packages/@react-types/numberfield/package.json +++ b/packages/@react-types/numberfield/package.json @@ -14,7 +14,9 @@ "@react-stately/numberfield": "^3.10.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/overlays/package.json b/packages/@react-types/overlays/package.json index 1578bfcf2d3..9884df2fc63 100644 --- a/packages/@react-types/overlays/package.json +++ b/packages/@react-types/overlays/package.json @@ -15,7 +15,9 @@ "@react-types/shared": "^3.32.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/progress/package.json b/packages/@react-types/progress/package.json index 97b137133d1..aa7f62b9934 100644 --- a/packages/@react-types/progress/package.json +++ b/packages/@react-types/progress/package.json @@ -13,7 +13,9 @@ "@react-spectrum/progress": "^3.7.21" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/radio/package.json b/packages/@react-types/radio/package.json index babf8f64d55..1ce7279d6e4 100644 --- a/packages/@react-types/radio/package.json +++ b/packages/@react-types/radio/package.json @@ -14,7 +14,9 @@ "@react-stately/radio": "^3.11.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/searchfield/package.json b/packages/@react-types/searchfield/package.json index aba5352080e..f746d124e70 100644 --- a/packages/@react-types/searchfield/package.json +++ b/packages/@react-types/searchfield/package.json @@ -14,7 +14,9 @@ "@react-stately/searchfield": "^3.5.17" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/select/package.json b/packages/@react-types/select/package.json index 7070b71163e..bcc7c33ab90 100644 --- a/packages/@react-types/select/package.json +++ b/packages/@react-types/select/package.json @@ -14,7 +14,9 @@ "@react-stately/select": "^3.9.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/slider/package.json b/packages/@react-types/slider/package.json index 46ae26a859b..d6b5b9817a2 100644 --- a/packages/@react-types/slider/package.json +++ b/packages/@react-types/slider/package.json @@ -14,7 +14,9 @@ "@react-stately/slider": "^3.7.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/statuslight/package.json b/packages/@react-types/statuslight/package.json index b3c9ab034bc..b287a8ad1f7 100644 --- a/packages/@react-types/statuslight/package.json +++ b/packages/@react-types/statuslight/package.json @@ -12,7 +12,9 @@ "@react-spectrum/statuslight": "^3.5.27" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/switch/package.json b/packages/@react-types/switch/package.json index 8c90db852ed..f9f62127ae8 100644 --- a/packages/@react-types/switch/package.json +++ b/packages/@react-types/switch/package.json @@ -13,7 +13,9 @@ "@react-spectrum/switch": "^3.6.7" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/table/package.json b/packages/@react-types/table/package.json index b49237d7b01..ee868684fea 100644 --- a/packages/@react-types/table/package.json +++ b/packages/@react-types/table/package.json @@ -14,7 +14,9 @@ "@react-types/shared": "^3.32.1" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/tabs/package.json b/packages/@react-types/tabs/package.json index a17065b92aa..464eeac3b54 100644 --- a/packages/@react-types/tabs/package.json +++ b/packages/@react-types/tabs/package.json @@ -14,7 +14,9 @@ "@react-stately/tabs": "^3.8.7" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/text/package.json b/packages/@react-types/text/package.json index 22cb6dec569..a91e2d62907 100644 --- a/packages/@react-types/text/package.json +++ b/packages/@react-types/text/package.json @@ -12,6 +12,7 @@ "@react-spectrum/text": "^3.5.23" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/textfield/package.json b/packages/@react-types/textfield/package.json index 96f0a84ab7c..36db2d8685e 100644 --- a/packages/@react-types/textfield/package.json +++ b/packages/@react-types/textfield/package.json @@ -13,7 +13,9 @@ "@react-spectrum/textfield": "^3.14.3" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/tooltip/package.json b/packages/@react-types/tooltip/package.json index ef888eac269..830cbd4037f 100644 --- a/packages/@react-types/tooltip/package.json +++ b/packages/@react-types/tooltip/package.json @@ -14,6 +14,7 @@ "@react-stately/tooltip": "^3.5.9" }, "peerDependencies": { + "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { diff --git a/packages/@react-types/view/package.json b/packages/@react-types/view/package.json index 8b2765d5ef1..810966c8a13 100644 --- a/packages/@react-types/view/package.json +++ b/packages/@react-types/view/package.json @@ -12,7 +12,9 @@ "@react-spectrum/view": "^3.6.24" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/well/package.json b/packages/@react-types/well/package.json index 631e6dde57d..1911a318d00 100644 --- a/packages/@react-types/well/package.json +++ b/packages/@react-types/well/package.json @@ -12,7 +12,9 @@ "@react-spectrum/well": "^3.4.28" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "@react-spectrum/provider": "^3.0.0", + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/yarn.lock b/yarn.lock index 4abc79b68e8..41976e9f1c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8315,7 +8315,9 @@ __metadata: dependencies: "@react-spectrum/actionbar": "npm:^3.6.15" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8326,7 +8328,9 @@ __metadata: "@react-aria/actiongroup": "npm:^3.7.22" "@react-spectrum/actiongroup": "npm:^3.11.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8337,7 +8341,9 @@ __metadata: "@react-aria/autocomplete": "npm:3.0.0-rc.4" "@react-spectrum/autocomplete": "npm:3.0.0-alpha.51" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8348,7 +8354,9 @@ __metadata: "@react-spectrum/avatar": "npm:^3.0.27" "@react-types/shared": "npm:^3.32.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8358,7 +8366,9 @@ __metadata: dependencies: "@react-spectrum/badge": "npm:^3.1.31" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8369,7 +8379,9 @@ __metadata: "@react-aria/breadcrumbs": "npm:^3.5.30" "@react-spectrum/breadcrumbs": "npm:^3.9.25" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8380,6 +8392,7 @@ __metadata: "@react-aria/button": "npm:^3.14.3" "@react-spectrum/button": "npm:^3.17.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8390,6 +8403,7 @@ __metadata: dependencies: "@react-spectrum/buttongroup": "npm:^3.6.27" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8398,12 +8412,13 @@ __metadata: version: 0.0.0-use.local resolution: "@react-types/calendar@workspace:packages/@react-types/calendar" dependencies: - "@internationalized/date": "npm:^3.10.1" "@react-aria/calendar": "npm:^3.9.3" "@react-spectrum/calendar": "npm:^3.7.9" "@react-stately/calendar": "npm:^3.9.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8413,6 +8428,7 @@ __metadata: dependencies: "@react-spectrum/card": "npm:3.0.0-alpha.51" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown @@ -8428,6 +8444,7 @@ __metadata: "@react-stately/checkbox": "npm:^3.7.3" "@react-stately/toggle": "npm:^3.9.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8440,7 +8457,9 @@ __metadata: "@react-spectrum/color": "npm:^3.1.5" "@react-stately/color": "npm:^3.9.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8452,7 +8471,9 @@ __metadata: "@react-spectrum/combobox": "npm:^3.16.5" "@react-stately/combobox": "npm:^3.12.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8462,7 +8483,9 @@ __metadata: dependencies: "@react-spectrum/contextualhelp": "npm:^3.6.29" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8474,7 +8497,9 @@ __metadata: "@react-spectrum/datepicker": "npm:^3.14.9" "@react-stately/datepicker": "npm:^3.15.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8485,7 +8510,9 @@ __metadata: "@react-aria/dialog": "npm:^3.5.32" "@react-spectrum/dialog": "npm:^3.9.5" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8495,7 +8522,9 @@ __metadata: dependencies: "@react-spectrum/divider": "npm:^3.5.28" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8506,7 +8535,9 @@ __metadata: "@react-spectrum/form": "npm:^3.7.20" "@react-types/shared": "npm:^3.32.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8526,7 +8557,9 @@ __metadata: dependencies: "@react-spectrum/illustratedmessage": "npm:^3.5.15" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8536,7 +8569,9 @@ __metadata: dependencies: "@react-spectrum/image": "npm:^3.6.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8546,7 +8581,9 @@ __metadata: dependencies: "@react-spectrum/label": "npm:^3.16.20" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8556,6 +8593,7 @@ __metadata: dependencies: "@react-spectrum/layout": "npm:^3.6.20" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8567,7 +8605,9 @@ __metadata: "@react-aria/link": "npm:^3.8.7" "@react-spectrum/link": "npm:^3.6.23" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8591,7 +8631,9 @@ __metadata: "@react-aria/listbox": "npm:^3.15.1" "@react-spectrum/listbox": "npm:^3.15.9" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8603,6 +8645,7 @@ __metadata: "@react-spectrum/menu": "npm:^3.22.9" "@react-stately/menu": "npm:^3.9.9" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8614,7 +8657,9 @@ __metadata: "@react-aria/meter": "npm:^3.4.28" "@react-spectrum/meter": "npm:^3.5.15" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8626,7 +8671,9 @@ __metadata: "@react-spectrum/numberfield": "npm:^3.10.3" "@react-stately/numberfield": "npm:^3.10.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8639,7 +8686,9 @@ __metadata: "@react-stately/overlays": "npm:^3.6.21" "@react-types/shared": "npm:^3.32.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8650,7 +8699,9 @@ __metadata: "@react-aria/progress": "npm:^3.4.28" "@react-spectrum/progress": "npm:^3.7.21" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8671,7 +8722,9 @@ __metadata: "@react-spectrum/radio": "npm:^3.7.22" "@react-stately/radio": "npm:^3.11.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8683,7 +8736,9 @@ __metadata: "@react-spectrum/searchfield": "npm:^3.8.24" "@react-stately/searchfield": "npm:^3.5.17" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8695,7 +8750,9 @@ __metadata: "@react-spectrum/picker": "npm:^3.16.5" "@react-stately/select": "npm:^3.9.0" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8715,7 +8772,9 @@ __metadata: "@react-spectrum/slider": "npm:^3.8.3" "@react-stately/slider": "npm:^3.7.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8725,7 +8784,9 @@ __metadata: dependencies: "@react-spectrum/statuslight": "npm:^3.5.27" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8736,7 +8797,9 @@ __metadata: "@react-aria/switch": "npm:^3.7.9" "@react-spectrum/switch": "npm:^3.6.7" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8748,7 +8811,9 @@ __metadata: "@react-stately/table": "npm:^3.15.2" "@react-types/shared": "npm:^3.32.1" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8760,7 +8825,9 @@ __metadata: "@react-spectrum/tabs": "npm:^3.8.28" "@react-stately/tabs": "npm:^3.8.7" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8770,6 +8837,7 @@ __metadata: dependencies: "@react-spectrum/text": "npm:^3.5.23" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8781,7 +8849,9 @@ __metadata: "@react-aria/textfield": "npm:^3.18.3" "@react-spectrum/textfield": "npm:^3.14.3" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8793,6 +8863,7 @@ __metadata: "@react-spectrum/tooltip": "npm:^3.8.0" "@react-stately/tooltip": "npm:^3.5.9" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8803,7 +8874,9 @@ __metadata: dependencies: "@react-spectrum/view": "npm:^3.6.24" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8813,7 +8886,9 @@ __metadata: dependencies: "@react-spectrum/well": "npm:^3.4.28" peerDependencies: + "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft From 559487c86a7a3368d284a85779985c29405fd7f0 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 15:06:37 -0500 Subject: [PATCH 50/56] Fix types --- packages/@react-aria/slider/stories/StoryMultiSlider.tsx | 4 ++-- packages/@react-aria/slider/stories/StoryRangeSlider.tsx | 4 ++-- packages/@react-aria/slider/stories/StorySlider.tsx | 4 ++-- packages/@react-spectrum/actionbar/src/ActionBar.tsx | 4 ++-- packages/@react-spectrum/datepicker/src/DatePicker.tsx | 2 +- packages/@react-spectrum/menu/src/Menu.tsx | 2 +- packages/react-aria-components/package.json | 1 + packages/react-stately/src/index.ts | 2 +- 8 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx index 88cf54dcc55..f2ce2aa1cb4 100644 --- a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx @@ -13,10 +13,10 @@ import {classNames} from '@react-spectrum/utils'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; -import {SliderProps, SliderState, SliderThumbProps, useSliderState} from '@react-stately/slider'; +import {SliderProps, SliderState, useSliderState} from '@react-stately/slider'; +import {SliderThumbProps, useSlider, useSliderThumb} from '@react-aria/slider'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; -import {useSlider, useSliderThumb} from '@react-aria/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx index f1a30a58f0f..0164bccea44 100644 --- a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx @@ -1,9 +1,9 @@ -import {AriaSliderProps, useSliderState} from '@react-stately/slider'; +import {AriaSliderProps, useSlider, useSliderThumb} from '@react-aria/slider'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; -import {useSlider, useSliderThumb} from '@react-aria/slider'; +import {useSliderState} from '@react-stately/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; diff --git a/packages/@react-aria/slider/stories/StorySlider.tsx b/packages/@react-aria/slider/stories/StorySlider.tsx index dfdce22de19..f34f989a7e6 100644 --- a/packages/@react-aria/slider/stories/StorySlider.tsx +++ b/packages/@react-aria/slider/stories/StorySlider.tsx @@ -10,12 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaSliderProps, useSliderState} from '@react-stately/slider'; +import {AriaSliderProps, useSlider, useSliderThumb} from '@react-aria/slider'; import {FocusRing} from '@react-aria/focus'; import React, {JSX} from 'react'; import styles from './story-slider.css'; import {useNumberFormatter} from '@react-aria/i18n'; -import {useSlider, useSliderThumb} from '@react-aria/slider'; +import {useSliderState} from '@react-stately/slider'; import {VisuallyHidden} from '@react-aria/visually-hidden'; interface StorySliderProps extends AriaSliderProps { diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx index f1ad65bbb7a..c1f6c22c534 100644 --- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx +++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx @@ -15,13 +15,13 @@ import {ActionGroup} from '@react-spectrum/actiongroup'; import {announce} from '@react-aria/live-announcer'; import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils'; import CrossLarge from '@spectrum-icons/ui/CrossLarge'; -import {DOMProps, DOMRef, ItemElement, ItemRenderer, StyleProps} from '@react-types/shared'; +import {DOMProps, DOMRef, ItemElement, ItemRenderer, Key, StyleProps} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; import {OpenTransition} from '@react-spectrum/overlays'; -import React, {Key, ReactElement, Ref, useEffect, useRef, useState} from 'react'; +import React, {ReactElement, Ref, useEffect, useRef, useState} from 'react'; import styles from './actionbar.css'; import {Text} from '@react-spectrum/text'; import {useKeyboard} from '@react-aria/interactions'; diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx index 667e911dcc5..975f1ef8a18 100644 --- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx +++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx @@ -23,8 +23,8 @@ import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Field} from '@react-spectrum/label'; import {FieldButton} from '@react-spectrum/button'; import {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; -// @ts-ignore import {Input} from './Input'; +// @ts-ignore import intlMessages from '../intl/*.json'; // HACK: must be included BEFORE inputgroup import {mergeProps} from '@react-aria/utils'; import React, {ReactElement, useRef} from 'react'; diff --git a/packages/@react-spectrum/menu/src/Menu.tsx b/packages/@react-spectrum/menu/src/Menu.tsx index 324cbc24066..dc7124abe13 100644 --- a/packages/@react-spectrum/menu/src/Menu.tsx +++ b/packages/@react-spectrum/menu/src/Menu.tsx @@ -15,8 +15,8 @@ import {AriaMenuProps, useMenu} from '@react-aria/menu'; import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall'; import {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils'; import {DOMRef, StyleProps} from '@react-types/shared'; -// @ts-ignore import {FocusScope} from '@react-aria/focus'; +// @ts-ignore import intlMessages from '../intl/*.json'; import {MenuContext, MenuStateContext, useMenuStateContext} from './context'; import {MenuItem} from './MenuItem'; diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json index 7cdc4827445..59bc521ca51 100644 --- a/packages/react-aria-components/package.json +++ b/packages/react-aria-components/package.json @@ -51,6 +51,7 @@ "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.31.0", "@react-aria/ssr": "^3.9.10", + "@react-aria/table": "^3.17.9", "@react-aria/textfield": "^3.18.3", "@react-aria/toolbar": "3.0.0-beta.22", "@react-aria/utils": "^3.32.0", diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts index 16d7a070823..1d748bf872b 100644 --- a/packages/react-stately/src/index.ts +++ b/packages/react-stately/src/index.ts @@ -27,7 +27,7 @@ export type {SelectProps, SelectState, SelectStateOptions} from '@react-stately/ export type {SliderState, SliderStateOptions} from '@react-stately/slider'; export type {MultipleSelectionManager, MultipleSelectionState, SingleSelectionState} from '@react-stately/selection'; export type {NumberFieldState, NumberFieldStateOptions} from '@react-stately/numberfield'; -export type {TableState, TableStateProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, TableColumnResizeState, TableColumnResizeStateProps, ColumnSize, ColumnStaticSize, ColumnDynamicSize, ITableCollection} from '@react-stately/table'; +export type {TableProps, TableState, TableStateProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, TableColumnResizeState, TableColumnResizeStateProps, ColumnSize, ColumnStaticSize, ColumnDynamicSize, ITableCollection} from '@react-stately/table'; export type {TabListProps, TabListState} from '@react-stately/tabs'; export type {ToastState, QueuedToast, ToastStateProps, ToastOptions} from '@react-stately/toast'; export type {ToggleProps, ToggleState, ToggleGroupProps, ToggleGroupState} from '@react-stately/toggle'; From 704c014a5e8dd159c94d899bf473c43c5a14bc22 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 15:10:19 -0500 Subject: [PATCH 51/56] lint --- packages/@react-spectrum/actiongroup/src/ActionGroup.tsx | 2 +- packages/@react-spectrum/card/chromatic/CardView.stories.tsx | 2 +- .../@react-spectrum/card/stories/WaterfallCardView.stories.tsx | 2 +- .../statuslight/chromatic/StatusLight.stories.tsx | 2 +- packages/@react-types/button/package.json | 3 ++- packages/@react-types/buttongroup/package.json | 3 ++- packages/@react-types/checkbox/package.json | 3 ++- packages/@react-types/layout/package.json | 3 ++- packages/@react-types/menu/package.json | 3 ++- packages/@react-types/text/package.json | 3 ++- packages/@react-types/tooltip/package.json | 3 ++- 11 files changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx index a1bafb058e8..439233d35c3 100644 --- a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx +++ b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx @@ -11,6 +11,7 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {AriaActionGroupProps, useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; import {AriaLabelingProps, DOMProps, DOMRef, Key, Node, StyleProps} from '@react-types/shared'; import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css'; import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium'; @@ -35,7 +36,6 @@ import React, {forwardRef, ReactElement, ReactNode, useCallback, useMemo, useRef import styles from '@adobe/spectrum-css-temp/components/actiongroup/vars.css'; import {Text} from '@react-spectrum/text'; import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip'; -import {AriaActionGroupProps, useActionGroup, useActionGroupItem} from '@react-aria/actiongroup'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; export interface SpectrumActionGroupProps extends AriaActionGroupProps, StyleProps { diff --git a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx index 30da9f6e430..a5cc584704e 100644 --- a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx +++ b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout, SpectrumCardViewProps} from '..'; +import {Card, CardView, GalleryLayout, GridLayout, SpectrumCardViewProps, WaterfallLayout} from '..'; import {Content} from '@react-spectrum/view'; import {Heading, Text} from '@react-spectrum/text'; import {Image} from '@react-spectrum/image'; diff --git a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx index bd4679ac514..6b712c50b80 100644 --- a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx +++ b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx @@ -29,7 +29,7 @@ import { StaticCards, StaticCardViewStory } from './GridCardView.stories'; -import {CardView, WaterfallLayout, SpectrumCardViewProps} from '../'; +import {CardView, SpectrumCardViewProps, WaterfallLayout} from '../'; import {Meta, StoryObj} from '@storybook/react'; import React, {useMemo} from 'react'; import {Size} from '@react-stately/virtualizer'; diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx index c131eb35a09..17eb1241c94 100644 --- a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx +++ b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx @@ -13,7 +13,7 @@ import {Flex} from '@react-spectrum/layout'; import {Meta, StoryObj} from '@storybook/react'; import React from 'react'; -import {StatusLight, SpectrumStatusLightProps} from '../'; +import {SpectrumStatusLightProps, StatusLight} from '../'; import {View} from '@react-spectrum/view'; let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse', 'magenta', 'purple', 'neutral', 'info', 'positive', 'notice', 'negative', 'positive'] as SpectrumStatusLightProps['variant'][]; diff --git a/packages/@react-types/button/package.json b/packages/@react-types/button/package.json index 973f3b3a01d..b6e08d29859 100644 --- a/packages/@react-types/button/package.json +++ b/packages/@react-types/button/package.json @@ -14,7 +14,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/buttongroup/package.json b/packages/@react-types/buttongroup/package.json index 3772a903eb4..db6f9895585 100644 --- a/packages/@react-types/buttongroup/package.json +++ b/packages/@react-types/buttongroup/package.json @@ -13,7 +13,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/checkbox/package.json b/packages/@react-types/checkbox/package.json index 1397a847558..60a51866ec2 100644 --- a/packages/@react-types/checkbox/package.json +++ b/packages/@react-types/checkbox/package.json @@ -17,7 +17,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/layout/package.json b/packages/@react-types/layout/package.json index e611d614084..edee7a07cb5 100644 --- a/packages/@react-types/layout/package.json +++ b/packages/@react-types/layout/package.json @@ -13,7 +13,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/menu/package.json b/packages/@react-types/menu/package.json index 9146a703710..8e18ad8b6e6 100644 --- a/packages/@react-types/menu/package.json +++ b/packages/@react-types/menu/package.json @@ -15,7 +15,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/text/package.json b/packages/@react-types/text/package.json index a91e2d62907..5ad455a2b72 100644 --- a/packages/@react-types/text/package.json +++ b/packages/@react-types/text/package.json @@ -13,7 +13,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" diff --git a/packages/@react-types/tooltip/package.json b/packages/@react-types/tooltip/package.json index 830cbd4037f..df160bcc48e 100644 --- a/packages/@react-types/tooltip/package.json +++ b/packages/@react-types/tooltip/package.json @@ -15,7 +15,8 @@ }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" }, "publishConfig": { "access": "public" From 2f18e9d330e46775ecb1a7e551d782deba75d0f5 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 15:49:25 -0500 Subject: [PATCH 52/56] Update imports in mdx files --- packages/@react-aria/color/docs/useColorSlider.mdx | 3 +-- packages/@react-aria/overlays/docs/usePopover.mdx | 3 +-- packages/@react-spectrum/color/docs/ColorArea.mdx | 2 +- packages/@react-spectrum/color/docs/ColorField.mdx | 3 +-- packages/@react-spectrum/color/docs/ColorPicker.mdx | 2 +- packages/@react-spectrum/color/docs/ColorSlider.mdx | 2 +- packages/@react-spectrum/color/docs/ColorSwatch.mdx | 2 +- packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx | 2 +- packages/@react-spectrum/color/docs/ColorWheel.mdx | 2 +- packages/@react-spectrum/table/docs/TableView.mdx | 6 +++--- packages/dev/docs/pages/react-spectrum/theming.mdx | 2 +- packages/react-aria-components/docs/Dialog.mdx | 1 - packages/react-aria-components/docs/Modal.mdx | 1 - packages/react-aria-components/docs/Popover.mdx | 2 +- 14 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/@react-aria/color/docs/useColorSlider.mdx b/packages/@react-aria/color/docs/useColorSlider.mdx index 35e2939ec96..91bea26cb59 100644 --- a/packages/@react-aria/color/docs/useColorSlider.mdx +++ b/packages/@react-aria/color/docs/useColorSlider.mdx @@ -12,7 +12,6 @@ export default Layout; import docs from 'docs:@react-aria/color'; import statelyDocs from 'docs:@react-stately/color'; -import typesDocs from 'docs:@react-types/color'; import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-aria/color/package.json'; import Anatomy from './ColorSliderAnatomy.svg'; @@ -87,7 +86,7 @@ label, or override this with a more specific label, a `label`, `aria-label` or ` This example shows how to build a horizontal color slider. It also includes a label which can be clicked to focus the thumb. Styling for the track background and positioning of the thumb are provided by `useColorSlider` in the returned `style` prop for each element. -If no `label` prop is given, it uses the object to +If no `label` prop is given, it uses the object to get a localized string for the channel name using the `getChannelName` method. In addition, an `` element is used to display the current channel value as text. This is formatted using the Color object's `formatChannelValue` method, which formats the value according to the channel type and locale settings. diff --git a/packages/@react-aria/overlays/docs/usePopover.mdx b/packages/@react-aria/overlays/docs/usePopover.mdx index 7c0931b32df..da380b1a2ef 100644 --- a/packages/@react-aria/overlays/docs/usePopover.mdx +++ b/packages/@react-aria/overlays/docs/usePopover.mdx @@ -14,7 +14,6 @@ import docs from 'docs:@react-aria/overlays'; import focusDocs from 'docs:@react-aria/focus'; import dialogDocs from 'docs:@react-aria/dialog'; import statelyDocs from 'docs:@react-stately/overlays'; -import typesDocs from 'docs:@react-types/overlays'; import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-aria/overlays/package.json'; @@ -264,7 +263,7 @@ The following examples show how to use the `Popover` and `PopoverTrigger` compon ### Placement The popover's placement with respect to its anchor element can be adjusted using the `placement` -prop. See for a full list of available placement combinations. +prop. See for a full list of available placement combinations. ```tsx example
diff --git a/packages/@react-spectrum/color/docs/ColorArea.mdx b/packages/@react-spectrum/color/docs/ColorArea.mdx index 80301747a7c..817ac9dead4 100644 --- a/packages/@react-spectrum/color/docs/ColorArea.mdx +++ b/packages/@react-spectrum/color/docs/ColorArea.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorField.mdx b/packages/@react-spectrum/color/docs/ColorField.mdx index f158d2bc9ee..974434a9187 100644 --- a/packages/@react-spectrum/color/docs/ColorField.mdx +++ b/packages/@react-spectrum/color/docs/ColorField.mdx @@ -14,7 +14,6 @@ import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import packageData from '@react-spectrum/color/package.json'; import statelyDocs from 'docs:@react-stately/color'; -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; ```jsx import import {ColorField} from '@react-spectrum/color'; @@ -45,7 +44,7 @@ keywords: [color field, input] ## Value A ColorField's `value` is empty by default, but an initial, uncontrolled, value can be provided using the `defaultValue` prop. -Alternatively, a controlled value can be provided using the `value` prop. The value provided to either of these props should be a color string or object. +Alternatively, a controlled value can be provided using the `value` prop. The value provided to either of these props should be a color string or object. In the example below, the function is used to parse the initial color from a hex value, stored in state. diff --git a/packages/@react-spectrum/color/docs/ColorPicker.mdx b/packages/@react-spectrum/color/docs/ColorPicker.mdx index 7e1dda904d8..a34b59c33d9 100644 --- a/packages/@react-spectrum/color/docs/ColorPicker.mdx +++ b/packages/@react-spectrum/color/docs/ColorPicker.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorSlider.mdx b/packages/@react-spectrum/color/docs/ColorSlider.mdx index 084820d6102..a2b89483442 100644 --- a/packages/@react-spectrum/color/docs/ColorSlider.mdx +++ b/packages/@react-spectrum/color/docs/ColorSlider.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorSwatch.mdx b/packages/@react-spectrum/color/docs/ColorSwatch.mdx index d4cd1e11b49..23af213d3c0 100644 --- a/packages/@react-spectrum/color/docs/ColorSwatch.mdx +++ b/packages/@react-spectrum/color/docs/ColorSwatch.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx b/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx index bc315038362..38a5cbe3717 100644 --- a/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx +++ b/packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import docs from 'docs:@react-spectrum/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; diff --git a/packages/@react-spectrum/color/docs/ColorWheel.mdx b/packages/@react-spectrum/color/docs/ColorWheel.mdx index 2d666c3b5ba..82df8aae2ee 100644 --- a/packages/@react-spectrum/color/docs/ColorWheel.mdx +++ b/packages/@react-spectrum/color/docs/ColorWheel.mdx @@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */} import docs from 'docs:@react-spectrum/color'; -import colorTypes from 'docs:@react-types/color/src/index.d.ts'; +import colorTypes from 'docs:@react-stately/color'; import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs'; import {Layout} from '@react-spectrum/docs'; import packageData from '@react-spectrum/color/package.json'; diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 5cf26a1ff55..5fec2079fb8 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -13,7 +13,7 @@ export default Layout; import docs from 'docs:@react-spectrum/table'; import dndDocs from 'docs:@react-spectrum/dnd'; import tableUtil from 'docs:@react-aria/test-utils/src/table.ts'; -import tableTypes from 'docs:@react-types/table/src/index.d.ts'; +import tableTypes from 'docs:@react-stately/table'; import {HeaderInfo, PropTable, PageDescription, TypeLink, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-spectrum/table/package.json'; @@ -1644,9 +1644,9 @@ function CustomDragPreviewExample() { +}} links={docs.links} style={{marginBottom: '40px'}} /> ### TableBody props diff --git a/packages/dev/docs/pages/react-spectrum/theming.mdx b/packages/dev/docs/pages/react-spectrum/theming.mdx index 34bed6316f8..557b57b97e2 100644 --- a/packages/dev/docs/pages/react-spectrum/theming.mdx +++ b/packages/dev/docs/pages/react-spectrum/theming.mdx @@ -7,7 +7,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */} -import docs from 'docs:@react-types/provider/src/index.d.ts'; +import docs from 'docs:@react-spectrum/provider'; import {Layout, TypeLink} from '@react-spectrum/docs'; export default Layout; diff --git a/packages/react-aria-components/docs/Dialog.mdx b/packages/react-aria-components/docs/Dialog.mdx index 9d8e500b38b..56776cc22d5 100644 --- a/packages/react-aria-components/docs/Dialog.mdx +++ b/packages/react-aria-components/docs/Dialog.mdx @@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:react-aria-components'; -import typesDocs from 'docs:@react-types/overlays'; import overlayStatelyDocs from 'docs:@react-stately/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx index ef3f090acca..c1430559ef0 100644 --- a/packages/react-aria-components/docs/Modal.mdx +++ b/packages/react-aria-components/docs/Modal.mdx @@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:react-aria-components'; -import typesDocs from 'docs:@react-types/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; diff --git a/packages/react-aria-components/docs/Popover.mdx b/packages/react-aria-components/docs/Popover.mdx index 453ce476735..e7f3a568771 100644 --- a/packages/react-aria-components/docs/Popover.mdx +++ b/packages/react-aria-components/docs/Popover.mdx @@ -11,7 +11,7 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:react-aria-components'; -import typesDocs from 'docs:@react-types/overlays'; +import typesDocs from 'docs:@react-aria/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; From f402092a309cf7f4c0c5df457bddc4d9c535c09d Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 16:02:31 -0500 Subject: [PATCH 53/56] update lockfile --- yarn.lock | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/yarn.lock b/yarn.lock index 41976e9f1c1..6bae0f103fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8394,6 +8394,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8405,6 +8406,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8446,6 +8448,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8595,6 +8598,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8647,6 +8651,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8839,6 +8844,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -8865,6 +8871,7 @@ __metadata: peerDependencies: "@react-spectrum/provider": ^3.0.0 react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 languageName: unknown linkType: soft @@ -24602,6 +24609,7 @@ __metadata: "@react-aria/live-announcer": "npm:^3.4.4" "@react-aria/overlays": "npm:^3.31.0" "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/table": "npm:^3.17.9" "@react-aria/textfield": "npm:^3.18.3" "@react-aria/toolbar": "npm:3.0.0-beta.22" "@react-aria/utils": "npm:^3.32.0" From e6daf7da69fc674b04920f6ad046511431460fee Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 16:17:47 -0500 Subject: [PATCH 54/56] Fix DateRangePicker props --- packages/@react-aria/datepicker/src/useDateRangePicker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts index ae1aa2158e4..100739e22bb 100644 --- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts +++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts @@ -28,7 +28,7 @@ import {useFocusWithin} from '@react-aria/interactions'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useMemo, useRef} from 'react'; -export interface AriaDateRangePickerProps extends DateRangePickerProps, AriaLabelingProps, InputDOMProps, DOMProps {} +export interface AriaDateRangePickerProps extends DateRangePickerProps, AriaLabelingProps, Omit, DOMProps {} export interface DateRangePickerAria extends ValidationResult { /** Props for the date range picker's visible label element, if any. */ From 213660827ea133e1d4770124e641308ef25010e9 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 16:23:07 -0500 Subject: [PATCH 55/56] inline SpectrumTextFieldBaseProps --- packages/@react-spectrum/textfield/src/TextArea.tsx | 13 +++++++++---- .../@react-spectrum/textfield/src/TextField.tsx | 11 ++++++++--- .../@react-spectrum/textfield/src/TextFieldBase.tsx | 7 ------- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx index 3fc9b3190b3..1f343f92b44 100644 --- a/packages/@react-spectrum/textfield/src/TextArea.tsx +++ b/packages/@react-spectrum/textfield/src/TextArea.tsx @@ -12,15 +12,20 @@ import {AriaTextFieldProps, useTextField} from '@react-aria/textfield'; import {chain, useLayoutEffect} from '@react-aria/utils'; -import React, {Ref, useCallback, useEffect, useRef} from 'react'; +import React, {ReactElement, Ref, useCallback, useEffect, useRef} from 'react'; import {SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; -import {SpectrumTextFieldBaseProps, TextFieldBase} from './TextFieldBase'; +import {TextFieldBase} from './TextFieldBase'; import {TextFieldRef} from './TextField'; import {useControlledState} from '@react-stately/utils'; import {useFormProps} from '@react-spectrum/form'; import {useProviderProps} from '@react-spectrum/provider'; -export interface SpectrumTextAreaProps extends SpectrumTextFieldBaseProps, SpectrumTextInputBase, Omit, 'isInvalid' | 'validationState' | 'type' | 'pattern'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} +export interface SpectrumTextAreaProps extends SpectrumTextInputBase, Omit, 'isInvalid' | 'validationState' | 'type' | 'pattern'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { + /** An icon to display at the start of the input. */ + icon?: ReactElement | null, + /** Whether the input should be displayed with a quiet style. */ + isQuiet?: boolean +} /** * TextAreas are multiline text inputs, useful for cases where users have @@ -88,7 +93,7 @@ export const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAr return ( , SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {} +export interface SpectrumTextFieldProps extends SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { + /** An icon to display at the start of the input. */ + icon?: ReactElement | null, + /** Whether the input should be displayed with a quiet style. */ + isQuiet?: boolean +} export interface TextFieldRef extends FocusableRefValue { select(): void, diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx index e1ffb82c4e0..22f1944f36d 100644 --- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx +++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx @@ -25,13 +25,6 @@ import {useFocusRing} from '@react-aria/focus'; import {useHover} from '@react-aria/interactions'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -export interface SpectrumTextFieldBaseProps { - /** An icon to display at the start of the input. */ - icon?: ReactElement | null, - /** Whether the input should be displayed with a quiet style. */ - isQuiet?: boolean -} - interface TextFieldBaseProps extends Omit, PressEvents, Partial { wrapperChildren?: ReactElement | ReactElement[], inputClassName?: string, From b26b9696502bea706383889005311acc96e3567a Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 9 Jan 2026 16:25:09 -0500 Subject: [PATCH 56/56] Keep TableView children required --- packages/@react-stately/table/src/useTableState.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts index 8e37b6735ef..33bb65f8a16 100644 --- a/packages/@react-stately/table/src/useTableState.ts +++ b/packages/@react-stately/table/src/useTableState.ts @@ -21,7 +21,7 @@ import {useCollection} from '@react-stately/collections'; export interface TableProps extends MultipleSelection, Sortable { /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ - children?: [ReactElement>, ReactElement>], + children: [ReactElement>, ReactElement>], /** A list of row keys to disable. */ disabledKeys?: Iterable, /** @@ -59,7 +59,9 @@ export interface CollectionBuilderContext { columns: Node[] } -export interface TableStateProps extends TableProps, MultipleSelectionStateProps, Sortable { +export interface TableStateProps extends Omit, 'children'>, MultipleSelectionStateProps, Sortable { + /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ + children?: [ReactElement>, ReactElement>], /** A pre-constructed collection to use instead of building one from items and children. */ collection?: ITableCollection, /** Whether the row selection checkboxes should be displayed. */