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-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-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-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-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-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/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-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/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/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/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-aria/combobox/package.json b/packages/@react-aria/combobox/package.json index 8fbf1a90c14..124d0198094 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", @@ -38,8 +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/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..7a1a3ce65cd 100644 --- a/packages/@react-aria/combobox/src/useComboBox.ts +++ b/packages/@react-aria/combobox/src/useComboBox.ts @@ -11,13 +11,12 @@ */ import {announce} from '@react-aria/live-announcer'; -import {AriaButtonProps} from '@react-types/button'; -import {AriaComboBoxProps} from '@react-types/combobox'; +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'; -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-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json index 8fa0b397b5b..7446778411e 100644 --- a/packages/@react-aria/datepicker/package.json +++ b/packages/@react-aria/datepicker/package.json @@ -29,6 +29,9 @@ "@internationalized/date": "^3.10.1", "@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", "@react-aria/i18n": "^3.12.14", @@ -36,12 +39,9 @@ "@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", - "@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/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 f768b34df88..46403bb98ff 100644 --- a/packages/@react-aria/datepicker/src/useDatePicker.ts +++ b/packages/@react-aria/datepicker/src/useDatePicker.ts @@ -10,13 +10,12 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaDatePickerProps, DateValue} from '@react-types/datepicker'; -import {AriaDialogProps} from '@react-types/dialog'; -import {CalendarProps} from '@react-types/calendar'; +import {AriaButtonProps} from '@react-aria/button'; +import {AriaDialogProps} from '@react-aria/dialog'; +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 6e9c748455b..100739e22bb 100644 --- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts +++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts @@ -10,14 +10,14 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker'; -import {AriaDialogProps} from '@react-types/dialog'; +import {AriaButtonProps} from '@react-aria/button'; +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-types/calendar'; -import {DateRangePickerState} from '@react-stately/datepicker'; +import {DateRange, RangeCalendarProps} from '@react-stately/calendar'; +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, Omit, 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-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-aria/disclosure/package.json b/packages/@react-aria/disclosure/package.json index 1b61d315a74..f8a0484eb8b 100644 --- a/packages/@react-aria/disclosure/package.json +++ b/packages/@react-aria/disclosure/package.json @@ -26,10 +26,10 @@ "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", - "@react-types/button": "^3.14.1", "@swc/helpers": "^0.5.0" }, "peerDependencies": { 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..028ea4e3e2b 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", @@ -34,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/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 1d118d7f629..365b5d07cbe 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", @@ -35,8 +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/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..21e73a33f2a 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 {AriaCheckboxProps} from '@react-aria/checkbox'; +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/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/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-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/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-aria/menu/package.json b/packages/@react-aria/menu/package.json index dd3cc732fbd..e1e08f40f31 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", @@ -36,8 +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/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..c2ac3b1a573 100644 --- a/packages/@react-aria/menu/src/useMenuTrigger.ts +++ b/packages/@react-aria/menu/src/useMenuTrigger.ts @@ -10,14 +10,13 @@ * 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'; // @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-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/numberfield/package.json b/packages/@react-aria/numberfield/package.json index 0f59f1cd936..71ad6ad5e15 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", @@ -33,8 +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/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..597ff4fa859 100644 --- a/packages/@react-aria/numberfield/src/useNumberField.ts +++ b/packages/@react-aria/numberfield/src/useNumberField.ts @@ -10,10 +10,9 @@ * governing permissions and limitations under the License. */ -import {AriaButtonProps} from '@react-types/button'; -import {AriaNumberFieldProps} from '@react-types/numberfield'; +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 {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-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-aria/overlays/package.json b/packages/@react-aria/overlays/package.json index f1a7c48aa5e..958d54c1c72 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", @@ -33,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/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/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/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-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-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-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-aria/select/package.json b/packages/@react-aria/select/package.json index d6c7a08914d..9f4561dd7a4 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", @@ -36,8 +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/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..0e76ebd6b0f 100644 --- a/packages/@react-aria/select/src/useSelect.ts +++ b/packages/@react-aria/select/src/useSelect.ts @@ -10,20 +10,36 @@ * 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 {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-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-aria/slider/stories/StoryMultiSlider.tsx b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx index f925c5aadfc..f2ce2aa1cb4 100644 --- a/packages/@react-aria/slider/stories/StoryMultiSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryMultiSlider.tsx @@ -13,11 +13,10 @@ 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, 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 1e4e3c0ef5a..0164bccea44 100644 --- a/packages/@react-aria/slider/stories/StoryRangeSlider.tsx +++ b/packages/@react-aria/slider/stories/StoryRangeSlider.tsx @@ -1,9 +1,8 @@ -import {AriaSliderProps} from '@react-types/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 0884247501c..f34f989a7e6 100644 --- a/packages/@react-aria/slider/stories/StorySlider.tsx +++ b/packages/@react-aria/slider/stories/StorySlider.tsx @@ -10,12 +10,11 @@ * governing permissions and limitations under the License. */ -import {AriaSliderProps} from '@react-types/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/spinbutton/package.json b/packages/@react-aria/spinbutton/package.json index 75cee01a0ac..19a913406c3 100644 --- a/packages/@react-aria/spinbutton/package.json +++ b/packages/@react-aria/spinbutton/package.json @@ -26,10 +26,10 @@ "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", - "@react-types/button": "^3.14.1", "@react-types/shared": "^3.32.1", "@swc/helpers": "^0.5.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/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-aria/table/package.json b/packages/@react-aria/table/package.json index 6e0aef03739..d86dd9ff8c0 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", @@ -35,11 +36,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" }, "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/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..d3029c2e1d4 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -11,15 +11,14 @@ */ 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'; -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'; -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 41556dd6e10..e5eb7833f3c 100644 --- a/packages/@react-aria/table/src/useTableRow.ts +++ b/packages/@react-aria/table/src/useTableRow.ts @@ -13,13 +13,12 @@ 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 {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/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/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-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-aria/tag/package.json b/packages/@react-aria/tag/package.json index dea80584cf5..032487b566e 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", @@ -33,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/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/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-aria/toast/package.json b/packages/@react-aria/toast/package.json index 33d70ae2c8d..25d27fb1e56 100644 --- a/packages/@react-aria/toast/package.json +++ b/packages/@react-aria/toast/package.json @@ -26,12 +26,12 @@ "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", "@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/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/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-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-aria/tree/package.json b/packages/@react-aria/tree/package.json index d7b88985e94..7de4955f0d1 100644 --- a/packages/@react-aria/tree/package.json +++ b/packages/@react-aria/tree/package.json @@ -26,12 +26,12 @@ "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", "@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-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/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..c1f6c22c534 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, 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, {ReactElement, Ref, useEffect, useRef, useState} from 'react'; -import {SpectrumActionBarProps} from '@react-types/actionbar'; 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-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..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'; @@ -32,13 +33,43 @@ 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 {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-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/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-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-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/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-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/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/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-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-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/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-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/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/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-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/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..a5cc584704e 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, SpectrumCardViewProps, WaterfallLayout} 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..c35fbf67ad4 100644 --- a/packages/@react-spectrum/card/package.json +++ b/packages/@react-spectrum/card/package.json @@ -53,8 +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/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/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..e017d759c5f --- /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-spectrum/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..6b712c50b80 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, SpectrumCardViewProps, WaterfallLayout} 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-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/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..287d6cf5d80 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 './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-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/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/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/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-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/combobox/package.json b/packages/@react-spectrum/combobox/package.json index 9f665621c50..c51c260a67e 100644 --- a/packages/@react-spectrum/combobox/package.json +++ b/packages/@react-spectrum/combobox/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/button": "^3.14.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/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-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-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..975f1ef8a18 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 {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Input} from './Input'; // @ts-ignore -import intlMessages from '../intl/*.json'; +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/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..8cc19b175ea 100644 --- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx +++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx @@ -15,9 +15,9 @@ 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-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/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/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-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-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-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/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-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/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-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/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/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-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/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-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/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/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/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/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-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..a1081cfa093 100644 --- a/packages/@react-spectrum/menu/package.json +++ b/packages/@react-spectrum/menu/package.json @@ -56,8 +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", "@spectrum-icons/workflow": "^4.2.26", 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..dc7124abe13 100644 --- a/packages/@react-spectrum/menu/src/Menu.tsx +++ b/packages/@react-spectrum/menu/src/Menu.tsx @@ -11,9 +11,10 @@ */ 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 {DOMRef, StyleProps} from '@react-types/shared'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -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 6f23974af9e..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 {Placement} from '@react-types/overlays'; +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/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/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/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/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-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/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/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..a4a9fa4caec 100644 --- a/packages/@react-spectrum/numberfield/package.json +++ b/packages/@react-spectrum/numberfield/package.json @@ -51,8 +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/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..087dbabab43 100644 --- a/packages/@react-spectrum/numberfield/src/NumberField.tsx +++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx @@ -10,24 +10,33 @@ * 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'; -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/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/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-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/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/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/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-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/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-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 544fb05905a..0830e39f8c7 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -158,17 +158,13 @@ "@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/ssr": "^3.9.10", "@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/dialog": "^3.5.22", - "@react-types/grid": "^3.3.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", "react-aria-components": "^1.14.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 1addb1c9f65..c641478d998 100644 --- a/packages/@react-spectrum/s2/src/ColorField.tsx +++ b/packages/@react-spectrum/s2/src/ColorField.tsx @@ -17,13 +17,13 @@ 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'; 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/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 ab2348328b6..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'; @@ -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/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/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/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/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-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 8a9a189d2a3..599279c0d3c 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -25,14 +25,14 @@ 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'; 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/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/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/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 0d6965299db..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'; @@ -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/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 58a1ebc837b..6f9a55d5bc0 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -56,11 +56,11 @@ 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'; -import {GridNode} from '@react-types/grid'; +import {GridNode} from '@react-stately/grid'; import {IconContext} from './Icon'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -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 b82705b2ae2..da01c5b0062 100644 --- a/packages/@react-spectrum/s2/src/TextField.tsx +++ b/packages/@react-spectrum/s2/src/TextField.tsx @@ -23,16 +23,20 @@ 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'; -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/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 504cba97f73..d37e936d50a 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -20,12 +20,11 @@ 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'}; -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/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/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-spectrum/searchfield/package.json b/packages/@react-spectrum/searchfield/package.json index beec0eb7f76..3d74213afbb 100644 --- a/packages/@react-spectrum/searchfield/package.json +++ b/packages/@react-spectrum/searchfield/package.json @@ -46,8 +46,7 @@ "@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/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-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/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-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-spectrum/statuslight/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx index 83d53ed26d2..17eb1241c94 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 {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-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/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/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-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/@react-spectrum/table/package.json b/packages/@react-spectrum/table/package.json index 3b13e54b150..2c5de391f83 100644 --- a/packages/@react-spectrum/table/package.json +++ b/packages/@react-spectrum/table/package.json @@ -58,12 +58,11 @@ "@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", "@swc/helpers": "^0.5.0" }, diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index defc24868ea..7214894d9ef 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -1,10 +1,10 @@ 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'; -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'; @@ -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 5934d217e19..d098045bd32 100644 --- a/packages/@react-spectrum/table/src/TableViewBase.tsx +++ b/packages/@react-spectrum/table/src/TableViewBase.tsx @@ -22,14 +22,14 @@ 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'; 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'; @@ -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/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-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/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-spectrum/table/test/TableSizing.test.tsx b/packages/@react-spectrum/table/test/TableSizing.test.tsx index 3c82d3a3223..f081cbb242b 100644 --- a/packages/@react-spectrum/table/test/TableSizing.test.tsx +++ b/packages/@react-spectrum/table/test/TableSizing.test.tsx @@ -15,15 +15,14 @@ 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'; 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/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 f71651caee0..ba660991c9d 100644 --- a/packages/@react-spectrum/tabs/package.json +++ b/packages/@react-spectrum/tabs/package.json @@ -51,9 +51,7 @@ "@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" }, "devDependencies": { diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx index 4090507353d..875aad37ff0 100644 --- a/packages/@react-spectrum/tabs/src/Tabs.tsx +++ b/packages/@react-spectrum/tabs/src/Tabs.tsx @@ -10,12 +10,12 @@ * 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} 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'; @@ -36,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, @@ -257,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 . @@ -333,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-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-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/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx index 2424823560b..1f343f92b44 100644 --- a/packages/@react-spectrum/textfield/src/TextArea.tsx +++ b/packages/@react-spectrum/textfield/src/TextArea.tsx @@ -10,14 +10,22 @@ * 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 React, {ReactElement, Ref, useCallback, useEffect, useRef} from 'react'; +import {SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared'; 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'; -import {useTextField} from '@react-aria/textfield'; + +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 @@ -85,7 +93,7 @@ export const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAr return ( , 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, + 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..22f1944f36d 100644 --- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx +++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx @@ -19,7 +19,7 @@ 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'; 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-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-spectrum/tooltip/package.json b/packages/@react-spectrum/tooltip/package.json index b4c6a151519..4eea9eec1ba 100644 --- a/packages/@react-spectrum/tooltip/package.json +++ b/packages/@react-spectrum/tooltip/package.json @@ -47,9 +47,7 @@ "@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", - "@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/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-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-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-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-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/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-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-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/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-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-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-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..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 '@react-types/grid'; +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 83d34f4aa5a..c0369e7414a 100644 --- a/packages/@react-stately/layout/package.json +++ b/packages/@react-stately/layout/package.json @@ -27,11 +27,10 @@ }, "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" }, "peerDependencies": { diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index 87d666fd6c5..69a11d45148 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -12,11 +12,10 @@ 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'; -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/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-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-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/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-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-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-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-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/@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-stately/table/package.json b/packages/@react-stately/table/package.json index 270cbab2acf..05e5f6d23f9 100644 --- a/packages/@react-stately/table/package.json +++ b/packages/@react-stately/table/package.json @@ -31,9 +31,7 @@ "@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" }, "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 6fd872cab19..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-types/grid'; +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 346cd516347..258c7976239 100644 --- a/packages/@react-stately/table/src/TableCollection.ts +++ b/packages/@react-stately/table/src/TableCollection.ts @@ -11,11 +11,23 @@ */ import {getFirstItem, getLastItem} from '@react-stately/collections'; -import {GridCollection} from '@react-stately/grid'; -import {GridNode} from '@react-types/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 0f9d3ee0223..2b32ea875a9 100644 --- a/packages/@react-stately/table/src/TableColumnLayout.ts +++ b/packages/@react-stately/table/src/TableColumnLayout.ts @@ -15,8 +15,8 @@ import { getMaxWidth, getMinWidth } from './TableUtils'; -import {ColumnSize, TableCollection} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {ColumnSize, ITableCollection as TableCollection} from '@react-stately/table'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; export interface TableColumnLayoutOptions { 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 7ba050cb1e8..d561629f013 100644 --- a/packages/@react-stately/table/src/useTableColumnResizeState.ts +++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts @@ -10,8 +10,8 @@ * governing permissions and limitations under the License. */ -import {ColumnSize} from '@react-types/table'; -import {GridNode} from '@react-types/grid'; +import {ColumnSize} from './Column'; +import {GridNode} from '@react-stately/grid'; import {Key} from '@react-types/shared'; import {TableColumnLayout} from './TableColumnLayout'; import {TableState} from './useTableState'; @@ -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..33bb65f8a16 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,9 @@ export interface CollectionBuilderContext { columns: Node[] } -export interface TableStateProps extends 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 list of row keys to disable. */ - disabledKeys?: Iterable, /** 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-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-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-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-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/actionbar/package.json b/packages/@react-types/actionbar/package.json index e61df1a40f1..e43187ac9fe 100644 --- a/packages/@react-types/actionbar/package.json +++ b/packages/@react-types/actionbar/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/actiongroup/package.json b/packages/@react-types/actiongroup/package.json index f4ffa5e9e7c..5817fa20fef 100644 --- a/packages/@react-types/actiongroup/package.json +++ b/packages/@react-types/actiongroup/package.json @@ -9,10 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/autocomplete/package.json b/packages/@react-types/autocomplete/package.json index 90e53088a41..696aec46e79 100644 --- a/packages/@react-types/autocomplete/package.json +++ b/packages/@react-types/autocomplete/package.json @@ -9,12 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/avatar/package.json b/packages/@react-types/avatar/package.json index c9cc8aa20d9..b630b795590 100644 --- a/packages/@react-types/avatar/package.json +++ b/packages/@react-types/avatar/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-spectrum/avatar": "^3.0.27", "@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/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'; diff --git a/packages/@react-types/badge/package.json b/packages/@react-types/badge/package.json index a3a6c9bab4c..c01a3194b9c 100644 --- a/packages/@react-types/badge/package.json +++ b/packages/@react-types/badge/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/breadcrumbs/package.json b/packages/@react-types/breadcrumbs/package.json index 54cee297652..0bd8ba003c0 100644 --- a/packages/@react-types/breadcrumbs/package.json +++ b/packages/@react-types/breadcrumbs/package.json @@ -9,11 +9,13 @@ "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" + "@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/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 -} diff --git a/packages/@react-types/button/package.json b/packages/@react-types/button/package.json index 455a8e666de..b6e08d29859 100644 --- a/packages/@react-types/button/package.json +++ b/packages/@react-types/button/package.json @@ -9,10 +9,13 @@ "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" + "@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/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'>; diff --git a/packages/@react-types/buttongroup/package.json b/packages/@react-types/buttongroup/package.json index 50199c7771b..db6f9895585 100644 --- a/packages/@react-types/buttongroup/package.json +++ b/packages/@react-types/buttongroup/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/calendar/package.json b/packages/@react-types/calendar/package.json index 4770a44da99..cecef508498 100644 --- a/packages/@react-types/calendar/package.json +++ b/packages/@react-types/calendar/package.json @@ -9,13 +9,16 @@ "url": "https://github.com/adobe/react-spectrum" }, "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" }, "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/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'; diff --git a/packages/@react-types/card/package.json b/packages/@react-types/card/package.json index e892f228ca7..9f6d8d08321 100644 --- a/packages/@react-types/card/package.json +++ b/packages/@react-types/card/package.json @@ -9,11 +9,10 @@ "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-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/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'; diff --git a/packages/@react-types/checkbox/package.json b/packages/@react-types/checkbox/package.json index 68d5d480185..60a51866ec2 100644 --- a/packages/@react-types/checkbox/package.json +++ b/packages/@react-types/checkbox/package.json @@ -9,10 +9,16 @@ "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" + "@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/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'; diff --git a/packages/@react-types/color/package.json b/packages/@react-types/color/package.json index c5e0e8c8790..e9740c3de68 100644 --- a/packages/@react-types/color/package.json +++ b/packages/@react-types/color/package.json @@ -9,11 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/combobox/package.json b/packages/@react-types/combobox/package.json index 06ce0453342..84ce2a4a86b 100644 --- a/packages/@react-types/combobox/package.json +++ b/packages/@react-types/combobox/package.json @@ -9,10 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/contextualhelp/package.json b/packages/@react-types/contextualhelp/package.json index 90791c8656b..4a68b9508e6 100644 --- a/packages/@react-types/contextualhelp/package.json +++ b/packages/@react-types/contextualhelp/package.json @@ -9,13 +9,14 @@ "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" }, "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/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/datepicker/package.json b/packages/@react-types/datepicker/package.json index 4aef0957060..cc38f1c608a 100644 --- a/packages/@react-types/datepicker/package.json +++ b/packages/@react-types/datepicker/package.json @@ -9,15 +9,16 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@internationalized/date": "^3.10.1", - "@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" }, "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/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts index 1f7950072f6..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-types/overlays'; -import {PageBehavior} from '@react-types/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; diff --git a/packages/@react-types/dialog/package.json b/packages/@react-types/dialog/package.json index 5e05c1ad696..305c2106697 100644 --- a/packages/@react-types/dialog/package.json +++ b/packages/@react-types/dialog/package.json @@ -9,11 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/divider/package.json b/packages/@react-types/divider/package.json index d5e54bc65b1..54d17a701d4 100644 --- a/packages/@react-types/divider/package.json +++ b/packages/@react-types/divider/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/form/package.json b/packages/@react-types/form/package.json index 3552404c732..9ed64a2baf0 100644 --- a/packages/@react-types/form/package.json +++ b/packages/@react-types/form/package.json @@ -9,10 +9,13 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { + "@react-spectrum/form": "^3.7.20", "@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/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/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/illustratedmessage/package.json b/packages/@react-types/illustratedmessage/package.json index b4eba997adc..c4463baafa9 100644 --- a/packages/@react-types/illustratedmessage/package.json +++ b/packages/@react-types/illustratedmessage/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/image/package.json b/packages/@react-types/image/package.json index 9209484a8a3..e124692b8b3 100644 --- a/packages/@react-types/image/package.json +++ b/packages/@react-types/image/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/label/package.json b/packages/@react-types/label/package.json index d074f8685d6..ad5fc7f5d98 100644 --- a/packages/@react-types/label/package.json +++ b/packages/@react-types/label/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/layout/package.json b/packages/@react-types/layout/package.json index e61c487af17..edee7a07cb5 100644 --- a/packages/@react-types/layout/package.json +++ b/packages/@react-types/layout/package.json @@ -9,10 +9,12 @@ "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" + "@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/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}; diff --git a/packages/@react-types/link/package.json b/packages/@react-types/link/package.json index f137b952023..ed4158ada5d 100644 --- a/packages/@react-types/link/package.json +++ b/packages/@react-types/link/package.json @@ -9,10 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/listbox/package.json b/packages/@react-types/listbox/package.json index 92c607d04b0..384f7756e93 100644 --- a/packages/@react-types/listbox/package.json +++ b/packages/@react-types/listbox/package.json @@ -9,10 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/menu/package.json b/packages/@react-types/menu/package.json index eaca477ad11..8e18ad8b6e6 100644 --- a/packages/@react-types/menu/package.json +++ b/packages/@react-types/menu/package.json @@ -9,11 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/meter/package.json b/packages/@react-types/meter/package.json index 2436039e525..c5713563485 100644 --- a/packages/@react-types/meter/package.json +++ b/packages/@react-types/meter/package.json @@ -9,10 +9,13 @@ "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" + "@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/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/numberfield/package.json b/packages/@react-types/numberfield/package.json index d45dcea4b01..d1a875f2e0c 100644 --- a/packages/@react-types/numberfield/package.json +++ b/packages/@react-types/numberfield/package.json @@ -9,10 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/overlays/package.json b/packages/@react-types/overlays/package.json index 8ddde4dda60..9884df2fc63 100644 --- a/packages/@react-types/overlays/package.json +++ b/packages/@react-types/overlays/package.json @@ -9,10 +9,15 @@ "url": "https://github.com/adobe/react-spectrum" }, "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": { - "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/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts index 89e07151a26..4686d4caf59 100644 --- a/packages/@react-types/overlays/src/index.d.ts +++ b/packages/@react-types/overlays/src/index.d.ts @@ -10,73 +10,16 @@ * 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 {OverlayTriggerProps} from '@react-stately/overlays'; +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 +28,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 +41,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, @@ -105,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 -} diff --git a/packages/@react-types/progress/package.json b/packages/@react-types/progress/package.json index 663cbed596e..aa7f62b9934 100644 --- a/packages/@react-types/progress/package.json +++ b/packages/@react-types/progress/package.json @@ -9,10 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/provider/package.json b/packages/@react-types/provider/package.json index af4186dd289..8e165e122e5 100644 --- a/packages/@react-types/provider/package.json +++ b/packages/@react-types/provider/package.json @@ -8,10 +8,8 @@ "type": "git", "url": "https://github.com/adobe/react-spectrum" }, - "dependencies": { - "@react-types/shared": "^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" }, "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'; diff --git a/packages/@react-types/radio/package.json b/packages/@react-types/radio/package.json index ebc04cbf731..1ce7279d6e4 100644 --- a/packages/@react-types/radio/package.json +++ b/packages/@react-types/radio/package.json @@ -9,10 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/searchfield/package.json b/packages/@react-types/searchfield/package.json index fcc914cbf0b..f746d124e70 100644 --- a/packages/@react-types/searchfield/package.json +++ b/packages/@react-types/searchfield/package.json @@ -9,11 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/select/package.json b/packages/@react-types/select/package.json index 877e5a904a5..bcc7c33ab90 100644 --- a/packages/@react-types/select/package.json +++ b/packages/@react-types/select/package.json @@ -9,10 +9,14 @@ "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" + "@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/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'; 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-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 -} diff --git a/packages/@react-types/slider/package.json b/packages/@react-types/slider/package.json index f338c4cb08e..d6b5b9817a2 100644 --- a/packages/@react-types/slider/package.json +++ b/packages/@react-types/slider/package.json @@ -9,10 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/statuslight/package.json b/packages/@react-types/statuslight/package.json index 6efb1460a17..b287a8ad1f7 100644 --- a/packages/@react-types/statuslight/package.json +++ b/packages/@react-types/statuslight/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; diff --git a/packages/@react-types/switch/package.json b/packages/@react-types/switch/package.json index 77e30287369..f9f62127ae8 100644 --- a/packages/@react-types/switch/package.json +++ b/packages/@react-types/switch/package.json @@ -9,10 +9,13 @@ "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" + "@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/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; diff --git a/packages/@react-types/table/package.json b/packages/@react-types/table/package.json index 30d203a70f6..ee868684fea 100644 --- a/packages/@react-types/table/package.json +++ b/packages/@react-types/table/package.json @@ -9,11 +9,14 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-types/grid": "^3.3.6", + "@react-spectrum/table": "^3.17.9", + "@react-stately/table": "^3.15.2", "@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/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts index 9a8b69ca8c2..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 {GridCollection, GridNode} from '@react-types/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-types/tabs/package.json b/packages/@react-types/tabs/package.json index ebadc7b1f7f..464eeac3b54 100644 --- a/packages/@react-types/tabs/package.json +++ b/packages/@react-types/tabs/package.json @@ -9,10 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/text/package.json b/packages/@react-types/text/package.json index 2327568df15..5ad455a2b72 100644 --- a/packages/@react-types/text/package.json +++ b/packages/@react-types/text/package.json @@ -9,10 +9,12 @@ "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" + "@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/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 -} diff --git a/packages/@react-types/textfield/package.json b/packages/@react-types/textfield/package.json index 00c176690ce..36db2d8685e 100644 --- a/packages/@react-types/textfield/package.json +++ b/packages/@react-types/textfield/package.json @@ -9,10 +9,13 @@ "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" + "@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/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'; diff --git a/packages/@react-types/tooltip/package.json b/packages/@react-types/tooltip/package.json index abf80497ea6..df160bcc48e 100644 --- a/packages/@react-types/tooltip/package.json +++ b/packages/@react-types/tooltip/package.json @@ -9,11 +9,14 @@ "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" + "@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/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'; diff --git a/packages/@react-types/view/package.json b/packages/@react-types/view/package.json index dfe0cc25aed..810966c8a13 100644 --- a/packages/@react-types/view/package.json +++ b/packages/@react-types/view/package.json @@ -9,10 +9,12 @@ "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" + "@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/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 -} diff --git a/packages/@react-types/well/package.json b/packages/@react-types/well/package.json index 19a04889698..1911a318d00 100644 --- a/packages/@react-types/well/package.json +++ b/packages/@react-types/well/package.json @@ -9,10 +9,12 @@ "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" + "@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/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'; 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/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", 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/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'; diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json index 332aebfbe7c..59bc521ca51 100644 --- a/packages/react-aria-components/package.json +++ b/packages/react-aria-components/package.json @@ -51,20 +51,19 @@ "@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", "@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/form": "^3.7.16", - "@react-types/grid": "^3.3.6", "@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/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 { /** diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 96836b8f5e8..fba1e887630 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -17,13 +17,12 @@ 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'; 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'; 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'; diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts index cfffea50e21..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} 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'; diff --git a/yarn.lock b/yarn.lock index 6500c7bc175..6bae0f103fc 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,256 +8309,309 @@ __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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 @@ -8672,109 +8628,140 @@ __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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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,117 +8769,133 @@ __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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 -"@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-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 @@ -24606,20 +24609,19 @@ __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" "@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"