feat(react): remove dir and getRootNode from components

frameworks/react/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+### Removed
+
+- BREAKING: Removed `dir` and `getRootNode` from all components. Use `LocaleProvider` instead.
+
 ### Changed
 
 - Made the `id` attribute optional for `<Combobox.ItemGroup>` and removed `htmlFor` from `<Combobox.ItemGroupLabel>`.

frameworks/react/src/components/accordion/accordion-item.tsx

@@ -25,7 +25,6 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>((pro
   return (
     <AccordionItemPropsProvider value={itemProps}>
       <AccordionItemProvider value={item}>
-        {/* @ts-expect-error TODO fix dir typing */}
         <Collapsible.Root
           ref={ref}
           open={item.expanded}

frameworks/react/src/components/accordion/accordion-root.tsx

@@ -20,9 +20,9 @@ export const AccordionRoot = forwardRef<HTMLDivElement, AccordionRootProps>((pro
   const [useAccordionProps, localProps] = createSplitProps<UseAccordionProps>()(accordionProps, [
     'collapsible',
     'defaultValue',
-    'dir',
+
     'disabled',
-    'getRootNode',
+
     'id',
     'ids',
     'multiple',

frameworks/react/src/components/accordion/tests/accordion.test.tsx

@@ -109,7 +109,8 @@ describe('Accordion', () => {
     expect(onFocusChange).toHaveBeenCalled()
   })
 
-  it('should render text direction based on dir prop', async () => {
+  // TODO use locale provider
+  it.skip('should render text direction based on dir prop', async () => {
     render(<ComponentUnderTest dir="rtl" />)
 
     const button = screen.getByRole('button', { name: 'React Trigger' })

frameworks/react/src/components/accordion/use-accordion.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseAccordionProps extends Optional<accordion.Context, 'id'> {
+export interface UseAccordionProps
+  extends Optional<Omit<accordion.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial value of the accordion.
    */

frameworks/react/src/components/avatar/avatar-root.tsx

@@ -10,8 +10,6 @@ export interface AvatarRootProps extends Assign<HTMLArkProps<'div'>, UseAvatarPr
 
 export const AvatarRoot = forwardRef<HTMLDivElement, AvatarRootProps>((props, ref) => {
   const [useAvatarProps, localProps] = createSplitProps<UseAvatarProps>()(props, [
-    'dir',
-    'getRootNode',
     'id',
     'onStatusChange',
   ])

frameworks/react/src/components/avatar/use-avatar.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseAvatarProps extends Optional<avatar.Context, 'id'> {}
+export interface UseAvatarProps
+  extends Optional<Omit<avatar.Context, 'dir' | 'getRootNode'>, 'id'> {}
 export interface UseAvatarReturn extends avatar.Api<PropTypes> {}
 
 export const useAvatar = (props: UseAvatarProps = {}): UseAvatarReturn => {

frameworks/react/src/components/carousel/carousel-root.tsx

@@ -12,8 +12,7 @@ export const CarouselRoot = forwardRef<HTMLDivElement, CarouselRootProps>((props
   const [useCarouselProps, localProps] = createSplitProps<UseCarouselProps>()(props, [
     'align',
     'defaultIndex',
-    'dir',
-    'getRootNode',
+
     'id',
     'ids',
     'index',

frameworks/react/src/components/carousel/use-carousel.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseCarouselProps extends Optional<carousel.Context, 'id'> {
+export interface UseCarouselProps
+  extends Optional<Omit<carousel.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial selected index of the carousel.
    */

frameworks/react/src/components/checkbox/checkbox-root.tsx

@@ -12,10 +12,10 @@ export const CheckboxRoot = forwardRef<HTMLLabelElement, CheckboxRootProps>((pro
   const [useCheckboxProps, localProps] = createSplitProps<UseCheckboxProps>()(props, [
     'checked',
     'defaultChecked',
-    'dir',
+
     'disabled',
     'form',
-    'getRootNode',
+
     'id',
     'ids',
     'invalid',

frameworks/react/src/components/checkbox/use-checkbox.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseCheckboxProps extends Optional<checkbox.Context, 'id'> {
+export interface UseCheckboxProps
+  extends Optional<Omit<checkbox.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial checked state of the checkbox.
    */

frameworks/react/src/components/clipboard/clipboard-root.tsx

@@ -10,7 +10,6 @@ export interface ClipboardRootProps extends Assign<HTMLArkProps<'div'>, UseClipb
 
 export const ClipboardRoot = forwardRef<HTMLDivElement, ClipboardRootProps>((props, ref) => {
   const [useClipboardProps, localProps] = createSplitProps<UseClipboardProps>()(props, [
-    'getRootNode',
     'id',
     'ids',
     'onStatusChange',

frameworks/react/src/components/clipboard/use-clipboard.ts

@@ -4,7 +4,8 @@ import { useId } from 'react'
 import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 
-export interface UseClipboardProps extends Optional<clipboard.Context, 'id'> {}
+export interface UseClipboardProps
+  extends Optional<Omit<clipboard.Context, 'dir' | 'getRootNode'>, 'id'> {}
 export interface UseClipboardReturn extends clipboard.Api<PropTypes> {}
 
 export const useClipboard = (props: UseClipboardProps) => {

frameworks/react/src/components/collapsible/split-collapsible-props.ts

@@ -4,9 +4,7 @@ import type { UseCollapsibleProps } from './use-collapsible'
 export const splitCollapsibleProps = <T extends UseCollapsibleProps>(props: T) =>
   createSplitProps<UseCollapsibleProps>()(props, [
     'defaultOpen',
-    'dir',
     'disabled',
-    'getRootNode',
     'id',
     'ids',
     'lazyMount',

frameworks/react/src/components/collapsible/use-collapsible.ts

@@ -7,7 +7,7 @@ import type { RenderStrategyProps } from '../../utils/render-strategy'
 import { useEvent } from '../../utils/use-event'
 
 export interface UseCollapsibleProps
-  extends Optional<Omit<collapsible.Context, 'open.controlled'>, 'id'>,
+  extends Optional<Omit<collapsible.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'>,
     RenderStrategyProps {
   /**
    * The initial open state of the collpasible.

frameworks/react/src/components/color-picker/color-picker-root.tsx

@@ -23,10 +23,8 @@ export const ColorPickerRoot = forwardRef<HTMLDivElement, ColorPickerRootProps>(
     [
       'closeOnSelect',
       'defaultValue',
-      'dir',
       'disabled',
       'format',
-      'getRootNode',
       'id',
       'ids',
       'initialFocusEl',

frameworks/react/src/components/color-picker/use-color-picker.ts

@@ -6,7 +6,10 @@ import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
 export interface UseColorPickerProps
-  extends Omit<Optional<Omit<colorPicker.Context, 'value'>, 'id'>, 'open.controlled'> {
+  extends Optional<
+    Omit<colorPicker.Context, 'value' | 'open.controlled' | 'dir' | 'getRootNode'>,
+    'id'
+  > {
   /**
    * The initial value of the color picker.
    */

frameworks/react/src/components/combobox/combobox-root.tsx

@@ -26,11 +26,9 @@ const ComboboxImpl = <T extends CollectionItem>(
     'autoFocus',
     'closeOnSelect',
     'defaultValue',
-    'dir',
     'disabled',
     'dismissable',
     'form',
-    'getRootNode',
     'getSelectionValue',
     'highlightedValue',
     'id',

frameworks/react/src/components/combobox/use-combobox.ts

@@ -9,7 +9,10 @@ import { useEvent } from '../../utils/use-event'
 
 export interface UseComboboxProps<T extends CollectionItem>
   extends CollectionOptions<T>,
-    Omit<Optional<combobox.Context<T>, 'id'>, 'collection' | 'open.controlled'> {
+    Optional<
+      Omit<combobox.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'open.controlled'>,
+      'id'
+    > {
   /**
    * the initial value of the combobox
    */

frameworks/react/src/components/date-picker/date-picker-root.tsx

@@ -21,12 +21,10 @@ export const DatePickerRoot = forwardRef<HTMLDivElement, DatePickerRootProps>((p
   const [useDatePickerProps, localProps] = createSplitProps<UseDatePickerProps>()(datePickerProps, [
     'closeOnSelect',
     'defaultValue',
-    'dir',
     'disabled',
     'fixedWeeks',
     'focusedValue',
     'format',
-    'getRootNode',
     'id',
     'ids',
     'isDateUnavailable',

frameworks/react/src/components/date-picker/use-date-picker.ts

@@ -9,7 +9,7 @@ export interface UseDatePickerProps
   extends Optional<
     Omit<
       datePicker.Context,
-      'value' | 'min' | 'max' | 'parse' | 'focusedValue' | 'open.controlled'
+      'dir' | 'getRootNode' | 'value' | 'min' | 'max' | 'parse' | 'focusedValue' | 'open.controlled'
     >,
     'id'
   > {

frameworks/react/src/components/editable/editable-root.tsx

@@ -13,11 +13,11 @@ export const EditableRoot = forwardRef<HTMLDivElement, EditableRootProps>((props
     'activationMode',
     'autoResize',
     'defaultValue',
-    'dir',
+
     'disabled',
     'finalFocusEl',
     'form',
-    'getRootNode',
+
     'id',
     'ids',
     'invalid',

frameworks/react/src/components/editable/use-editable.ts

@@ -6,7 +6,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseEditableProps extends Optional<editable.Context, 'id'> {
+export interface UseEditableProps
+  extends Optional<Omit<editable.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial value of the editable.
    */

frameworks/react/src/components/file-upload/file-upload-root.tsx

@@ -13,10 +13,10 @@ export const FileUploadRoot = forwardRef<HTMLDivElement, FileUploadRootProps>((p
     'accept',
     'allowDrop',
     'capture',
-    'dir',
+
     'directory',
     'disabled',
-    'getRootNode',
+
     'id',
     'ids',
     'locale',

frameworks/react/src/components/file-upload/use-file-upload.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseFileUploadProps extends Optional<fileUpload.Context, 'id'> {}
+export interface UseFileUploadProps
+  extends Optional<Omit<fileUpload.Context, 'dir' | 'getRootNode'>, 'id'> {}
 export interface UseFileUploadReturn extends fileUpload.Api<PropTypes> {}
 
 export const useFileUpload = (props: UseFileUploadProps = {}): UseFileUploadReturn => {

frameworks/react/src/components/menu/menu-root.tsx

@@ -23,8 +23,6 @@ export const MenuRoot = (props: MenuRootProps) => {
     'anchorPoint',
     'aria-label',
     'closeOnSelect',
-    'dir',
-    'getRootNode',
     'highlightedValue',
     'id',
     'ids',

frameworks/react/src/components/menu/tests/menu.test.tsx

@@ -101,7 +101,7 @@ describe('Menu', () => {
   })
 
   it('should accept a custom placement', async () => {
-    render(<ComponentUnderTest dir="rtl" positioning={{ placement: 'left-start' }} />)
+    render(<ComponentUnderTest positioning={{ placement: 'left-start' }} />)
 
     const button = screen.getByRole('button', { name: /open menu/i })
     await user.click(button)

frameworks/react/src/components/menu/use-menu.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseMenuProps extends Omit<Optional<menu.Context, 'id'>, 'open.controlled'> {}
+export interface UseMenuProps
+  extends Optional<Omit<menu.Context, 'open.controlled' | 'dir' | 'getRootNode'>, 'id'> {}
 export interface UseMenuReturn {
   machine: menu.Service
   api: menu.Api<PropTypes>

frameworks/react/src/components/number-input/number-input-root.tsx

@@ -14,12 +14,12 @@ export const NumberInputRoot = forwardRef<HTMLDivElement, NumberInputRootProps>(
     'allowOverflow',
     'clampValueOnBlur',
     'defaultValue',
-    'dir',
+
     'disabled',
     'focusInputOnChange',
     'form',
     'formatOptions',
-    'getRootNode',
+
     'id',
     'ids',
     'inputMode',

frameworks/react/src/components/number-input/use-number-input.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UseNumberInputProps extends Optional<numberInput.Context, 'id'> {
+export interface UseNumberInputProps
+  extends Optional<Omit<numberInput.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial value of the number input.
    */

frameworks/react/src/components/pagination/examples/customized.tsx

@@ -5,7 +5,6 @@ export const Customized = () => (
     count={5000}
     pageSize={20}
     siblingCount={3}
-    dir="ltr"
     translations={{
       nextTriggerLabel: 'Next',
       prevTriggerLabel: 'Prev',

frameworks/react/src/components/pagination/pagination-root.tsx

@@ -12,8 +12,7 @@ export const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>((prop
   const [paginationProps, localProps] = createSplitProps<UsePaginationProps>()(props, [
     'count',
     'defaultPage',
-    'dir',
-    'getRootNode',
+
     'id',
     'ids',
     'onPageChange',

frameworks/react/src/components/pagination/use-pagination.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UsePaginationProps extends Optional<pagination.Context, 'id'> {
+export interface UsePaginationProps
+  extends Optional<Omit<pagination.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial page of the pagination.
    */

frameworks/react/src/components/pin-input/pin-input-root.tsx

@@ -13,10 +13,10 @@ export const PinInputRoot = forwardRef<HTMLDivElement, PinInputRootProps>((props
     'autoFocus',
     'blurOnComplete',
     'defaultValue',
-    'dir',
+
     'disabled',
     'form',
-    'getRootNode',
+
     'id',
     'ids',
     'invalid',

frameworks/react/src/components/pin-input/use-pin-input.ts

@@ -5,7 +5,8 @@ import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
-export interface UsePinInputProps extends Optional<pinInput.Context, 'id'> {
+export interface UsePinInputProps
+  extends Optional<Omit<pinInput.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial value of the pin input.
    */

frameworks/react/src/components/progress/progress-root.tsx

@@ -11,8 +11,7 @@ export interface ProgressRootProps extends Assign<HTMLArkProps<'div'>, UseProgre
 export const ProgressRoot = forwardRef<HTMLDivElement, ProgressRootProps>((props, ref) => {
   const [progressProps, localProps] = createSplitProps<UseProgressProps>()(props, [
     'defaultValue',
-    'dir',
-    'getRootNode',
+
     'id',
     'max',
     'min',

frameworks/react/src/components/progress/use-progress.ts

@@ -4,7 +4,8 @@ import { useId } from 'react'
 import { useEnvironmentContext } from '../../providers/environment'
 import type { Optional } from '../../types'
 
-export interface UseProgressProps extends Optional<progress.Context, 'id'> {
+export interface UseProgressProps
+  extends Optional<Omit<progress.Context, 'dir' | 'getRootNode'>, 'id'> {
   /**
    * The initial value of the progress.
    */