React aria update

.changeset/sharp-bugs-march.md

@@ -0,0 +1,45 @@
+---
+'@voussoir/drag-and-drop': patch
+'@voussoir/action-group': patch
+'@voussoir/number-field': patch
+'@voussoir/search-field': patch
+'@voussoir/breadcrumbs': patch
+'@voussoir/text-field': patch
+'@voussoir/typography': patch
+'@voussoir/date-time': patch
+'@voussoir/list-view': patch
+'@voussoir/checkbox': patch
+'@voussoir/combobox': patch
+'@voussoir/nav-list': patch
+'@voussoir/overlays': patch
+'@voussoir/progress': patch
+'@voussoir/listbox': patch
+'@voussoir/tooltip': patch
+'@voussoir/avatar': patch
+'@voussoir/button': patch
+'@voussoir/dialog': patch
+'@voussoir/editor': patch
+'@voussoir/layout': patch
+'@voussoir/notice': patch
+'@voussoir/picker': patch
+'@voussoir/switch': patch
+'@voussoir/badge': patch
+'@voussoir/field': patch
+'@voussoir/image': patch
+'@voussoir/radio': patch
+'@voussoir/slots': patch
+'@voussoir/style': patch
+'@voussoir/table': patch
+'@voussoir/toast': patch
+'@voussoir/types': patch
+'@voussoir/utils': patch
+'@voussoir/core': patch
+'@voussoir/icon': patch
+'@voussoir/link': patch
+'@voussoir/menu': patch
+'@voussoir/tabs': patch
+'@voussoir/docs': patch
+'@keystatic/core': patch
+---
+
+Update @react-aria/_, @react-stately/_, etc. to latest versions.

design-system/docs/package.json

@@ -18,9 +18,9 @@
   "dependencies": {
     "@babel/core": "^7.18.5",
     "@babel/runtime": "^7.18.3",
-    "@internationalized/date": "^3.2.0",
+    "@internationalized/date": "^3.3.0",
     "@markdoc/markdoc": "^0.3.0",
-    "@react-aria/i18n": "^3.7.1",
+    "@react-aria/i18n": "^3.8.0",
     "@types/js-yaml": "^4.0.5",
     "@voussoir/action-group": "^0.1.6",
     "@voussoir/avatar": "^0.1.2",
@@ -52,7 +52,6 @@
     "@voussoir/radio": "^0.1.6",
     "@voussoir/search-field": "^0.1.6",
     "@voussoir/slots": "^0.1.3",
-    "@voussoir/ssr": "^0.2.1",
     "@voussoir/style": "^0.1.6",
     "@voussoir/switch": "^0.1.5",
     "@voussoir/table": "^0.1.6",

design-system/packages/action-group/package.json

@@ -18,12 +18,12 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@react-aria/actiongroup": "^3.4.3",
-    "@react-aria/focus": "^3.12.1",
-    "@react-aria/interactions": "^3.15.1",
-    "@react-aria/utils": "^3.17.0",
-    "@react-stately/collections": "^3.5.0",
-    "@react-stately/list": "^3.6.0",
+    "@react-aria/actiongroup": "^3.6.0",
+    "@react-aria/focus": "^3.13.0",
+    "@react-aria/interactions": "^3.16.0",
+    "@react-aria/utils": "^3.18.0",
+    "@react-stately/collections": "^3.9.0",
+    "@react-stately/list": "^3.9.0",
     "@react-types/actiongroup": "^3.3.5",
     "@react-types/shared": "^3.18.0",
     "@voussoir/button": "^0.2.0",
@@ -34,7 +34,6 @@
     "@voussoir/slots": "^0.1.3",
     "@voussoir/style": "^0.1.6",
     "@voussoir/tooltip": "^0.1.4",
-    "@voussoir/types": "^0.1.1",
     "@voussoir/typography": "^0.1.6",
     "@voussoir/utils": "^2.0.3"
   },

design-system/packages/action-group/src/ActionGroup.tsx

@@ -2,6 +2,7 @@ import { useActionGroup, useActionGroupItem } from '@react-aria/actiongroup';
 import { FocusScope } from '@react-aria/focus';
 import { PressResponder } from '@react-aria/interactions';
 import {
+  filterDOMProps,
   mergeProps,
   useId,
   useLayoutEffect,
@@ -10,7 +11,7 @@ import {
   useValueEffect,
 } from '@react-aria/utils';
 import { ListState, useListState } from '@react-stately/list';
-import { Node } from '@react-types/shared';
+import { AriaLabelingProps, DOMProps, Node } from '@react-types/shared';
 import {
   ForwardedRef,
   Key,
@@ -40,8 +41,7 @@ import {
   tokenSchema,
   useStyleProps,
 } from '@voussoir/style';
-import { AriaLabellingProps, DOMProps } from '@voussoir/types';
-import { filterDOMProps, isReactText, toDataAttributes } from '@voussoir/utils';
+import { isReactText, toDataAttributes } from '@voussoir/utils';
 
 import { ActionGroupProps } from './types';
 
@@ -231,7 +231,7 @@ function ActionGroup<T extends object>(
   // If there are no visible items, don't apply any props to the action group container
   // and pass all aria labeling props through to the menu button.
   if (overflowMode === 'collapse' && visibleItems === 0) {
-    menuProps = filterDOMProps(props, { labellable: true });
+    menuProps = filterDOMProps(props, { labelable: true });
     actionGroupProps = {};
   }
 
@@ -482,7 +482,7 @@ function ActionGroupItem<T>({
   return button;
 }
 
-interface ActionGroupMenuProps<T> extends AriaLabellingProps {
+interface ActionGroupMenuProps<T> extends AriaLabelingProps {
   hideButtonText?: boolean;
   isDisabled?: boolean;
   isOnlyItem?: boolean;

design-system/packages/avatar/package.json

@@ -18,11 +18,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.18.3",
+    "@react-aria/utils": "^3.18.0",
+    "@react-types/shared": "^3.18.0",
     "@voussoir/layout": "^0.1.2",
     "@voussoir/style": "^0.1.3",
-    "@voussoir/types": "^0.1.1",
-    "@voussoir/typography": "^0.1.2",
-    "@voussoir/utils": "^2.0.2"
+    "@voussoir/typography": "^0.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.8",

design-system/packages/avatar/src/Avatar.tsx

@@ -1,3 +1,5 @@
+import { filterDOMProps } from '@react-aria/utils';
+import { AriaLabelingProps, DOMProps } from '@react-types/shared';
 import {
   forwardRef,
   ForwardedRef,
@@ -13,9 +15,7 @@ import {
   useStyleProps,
   SizeElement,
 } from '@voussoir/style';
-import { AriaLabellingProps, DOMProps } from '@voussoir/types';
 import { Text } from '@voussoir/typography';
-import { filterDOMProps } from '@voussoir/utils';
 
 export type AvatarProps = {
   /**
@@ -40,7 +40,7 @@ export type AvatarProps = {
 ) &
   Omit<BaseStyleProps, 'height' | 'width'> &
   DOMProps &
-  AriaLabellingProps;
+  AriaLabelingProps;
 
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an

design-system/packages/badge/package.json

@@ -18,10 +18,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.18.3",
+    "@react-aria/utils": "^3.18.0",
+    "@react-types/shared": "^3.18.0",
     "@voussoir/layout": "^0.1.3",
     "@voussoir/slots": "^0.1.2",
     "@voussoir/style": "^0.1.5",
-    "@voussoir/types": "^0.1.1",
     "@voussoir/typography": "^0.1.4",
     "@voussoir/utils": "^2.0.2"
   },

design-system/packages/badge/src/Badge.tsx

@@ -1,3 +1,5 @@
+import { AriaLabelingProps, DOMProps } from '@react-types/shared';
+import { filterDOMProps } from '@react-aria/utils';
 import {
   ReactNode,
   forwardRef,
@@ -10,9 +12,8 @@ import {
 import { Flex } from '@voussoir/layout';
 import { SlotProvider } from '@voussoir/slots';
 import { BaseStyleProps, useStyleProps } from '@voussoir/style';
-import { AriaLabellingProps, DOMProps } from '@voussoir/types';
 import { Text } from '@voussoir/typography';
-import { filterDOMProps, isReactText } from '@voussoir/utils';
+import { isReactText } from '@voussoir/utils';
 
 type BadgeTones =
   | 'accent'
@@ -33,7 +34,7 @@ export type BadgeProps = {
   tone?: BadgeTones;
 } & BaseStyleProps &
   DOMProps &
-  AriaLabellingProps;
+  AriaLabelingProps;
 
 /**
  * A badge is a decorative indicator used to either call attention to an item or
@@ -68,7 +69,7 @@ export const Badge: ForwardRefExoticComponent<
       UNSAFE_className={styleProps.className}
       UNSAFE_style={styleProps.style}
       ref={forwardedRef}
-      {...filterDOMProps(otherProps, { labellable: true })}
+      {...filterDOMProps(otherProps, { labelable: true })}
       // appearance
       backgroundColor={bg}
       borderRadius="full"

design-system/packages/breadcrumbs/package.json

@@ -18,12 +18,12 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@react-aria/breadcrumbs": "^3.5.0",
-    "@react-aria/i18n": "^3.7.1",
-    "@react-aria/interactions": "^3.15.1",
-    "@react-aria/utils": "^3.17.0",
-    "@react-stately/collections": "^3.5.0",
-    "@react-types/breadcrumbs": "^3.5.0",
+    "@react-aria/breadcrumbs": "^3.5.3",
+    "@react-aria/i18n": "^3.8.0",
+    "@react-aria/interactions": "^3.16.0",
+    "@react-aria/utils": "^3.18.0",
+    "@react-stately/collections": "^3.9.0",
+    "@react-types/breadcrumbs": "^3.6.0",
     "@react-types/shared": "^3.18.0",
     "@voussoir/button": "0.2.0",
     "@voussoir/core": "5.0.3",
@@ -32,7 +32,6 @@
     "@voussoir/menu": "0.1.5",
     "@voussoir/slots": "^0.1.3",
     "@voussoir/style": "^0.1.6",
-    "@voussoir/types": "^0.1.1",
     "@voussoir/typography": "^0.1.6",
     "@voussoir/utils": "^2.0.3",
     "emery": "^1.4.1"

design-system/packages/button/package.json

@@ -18,11 +18,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@react-aria/button": "^3.6.3",
-    "@react-aria/focus": "^3.12.1",
-    "@react-aria/interactions": "^3.15.1",
-    "@react-aria/utils": "^3.17.0",
-    "@react-stately/toggle": "^3.4.3",
+    "@react-aria/button": "^3.8.0",
+    "@react-aria/focus": "^3.13.0",
+    "@react-aria/interactions": "^3.16.0",
+    "@react-aria/utils": "^3.18.0",
+    "@react-stately/toggle": "^3.6.0",
     "@react-types/button": "^3.7.0",
     "@react-types/shared": "^3.18.0",
     "@voussoir/core": "^5.0.2",

design-system/packages/button/src/ActionButton.tsx

@@ -1,3 +1,6 @@
+import { useButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
+import { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';
 import {
   ForwardedRef,
   forwardRef,
@@ -6,15 +9,11 @@ import {
   useMemo,
 } from 'react';
 
-import { useButton } from '@react-aria/button';
-import { useHover } from '@react-aria/interactions';
-import { mergeProps, useObjectRef } from '@react-aria/utils';
-
 import { useProviderProps } from '@voussoir/core';
 import { SlotProvider, SlotContextType, useSlotProps } from '@voussoir/slots';
 import { FocusRing } from '@voussoir/style';
 import { Text } from '@voussoir/typography';
-import { filterDOMProps, isReactText } from '@voussoir/utils';
+import { isReactText } from '@voussoir/utils';
 
 import {
   actionButtonClassList,

design-system/packages/button/src/Button.tsx

@@ -1,15 +1,14 @@
-import { ForwardedRef, forwardRef, useMemo } from 'react';
-
 import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
-import { mergeProps, useObjectRef } from '@react-aria/utils';
+import { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';
+import { ForwardedRef, forwardRef, useMemo } from 'react';
 
 import { useProviderProps } from '@voussoir/core';
 import { useLinkComponent } from '@voussoir/link';
 import { SlotProvider, useSlotProps } from '@voussoir/slots';
 import { FocusRing } from '@voussoir/style';
 import { Text } from '@voussoir/typography';
-import { filterDOMProps, isReactText } from '@voussoir/utils';
+import { isReactText } from '@voussoir/utils';
 
 import {
   ButtonElementProps,

design-system/packages/button/src/ButtonGroup.tsx

@@ -1,4 +1,5 @@
 import {
+  filterDOMProps,
   useLayoutEffect,
   useObjectRef,
   useResizeObserver,
@@ -20,7 +21,7 @@ import {
 } from '@voussoir/core';
 import { useSlotProps } from '@voussoir/slots';
 import { classNames, css, tokenSchema, useStyleProps } from '@voussoir/style';
-import { filterDOMProps, toDataAttributes } from '@voussoir/utils';
+import { toDataAttributes } from '@voussoir/utils';
 
 import { ButtonGroupProps } from './types';
 

design-system/packages/button/src/ToggleButton.tsx

@@ -1,19 +1,17 @@
+import { useToggleButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
+import { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';
+import { useToggleState } from '@react-stately/toggle';
 import {
   ForwardedRef,
   forwardRef,
   ForwardRefExoticComponent,
   Ref,
 } from 'react';
 
-import { useToggleButton } from '@react-aria/button';
-import { useHover } from '@react-aria/interactions';
-import { mergeProps, useObjectRef } from '@react-aria/utils';
-import { useToggleState } from '@react-stately/toggle';
-
 import { useProviderProps } from '@voussoir/core';
 import { useSlotProps } from '@voussoir/slots';
 import { FocusRing } from '@voussoir/style';
-import { filterDOMProps } from '@voussoir/utils';
 
 import { useActionButtonStyles } from './useActionButtonStyles';
 import { ToggleButtonProps } from './types';
@@ -50,7 +48,7 @@ export const ToggleButton: ForwardRefExoticComponent<
         ref={domRef}
         {...styleProps}
         {...mergeProps(buttonProps, hoverProps)}
-        {...filterDOMProps(otherProps, { pick: new Set(['tabIndex']) })}
+        {...filterDOMProps(otherProps)}
       >
         {children}
       </button>