Browse Source

ref(packages): Import `react-aria` types from `@react-aria`/`@react-stately` (#50457)

Following https://github.com/getsentry/sentry/pull/50451, rather than
having to import prop types for `react-aria` hooks separately:
```js
import {useRadio} from '@react-aria/radio';
import {AriaRadioProps} from '@react-types/radio';
```
we can now just write
```js
import {AriaRadioProps, useRadio} from '@react-aria/radio';
```
Vu Luong 1 year ago
parent
commit
dd2d516982

+ 0 - 3
package.json

@@ -41,9 +41,6 @@
     "@react-stately/radio": "^3.8.1",
     "@react-stately/tabs": "^3.4.1",
     "@react-stately/tree": "^3.6.1",
-    "@react-types/menu": "^3.9.1",
-    "@react-types/numberfield": "^3.4.2",
-    "@react-types/radio": "^3.4.2",
     "@react-types/shared": "^3.18.1",
     "@sentry-internal/global-search": "^0.5.7",
     "@sentry-internal/react-inspector": "6.0.1-4",

+ 1 - 2
static/app/components/numberInput.tsx

@@ -2,9 +2,8 @@ import {forwardRef, useRef} from 'react';
 import styled from '@emotion/styled';
 import {useButton} from '@react-aria/button';
 import {useLocale} from '@react-aria/i18n';
-import {useNumberField} from '@react-aria/numberfield';
+import {AriaNumberFieldProps, useNumberField} from '@react-aria/numberfield';
 import {useNumberFieldState} from '@react-stately/numberfield';
-import {AriaNumberFieldProps} from '@react-types/numberfield';
 
 import {Button} from 'sentry/components/button';
 import {InputStylesProps} from 'sentry/components/input';

+ 5 - 6
static/app/components/segmentedControl.tsx

@@ -1,11 +1,10 @@
 import {useMemo, useRef} from 'react';
 import {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {useRadio, useRadioGroup} from '@react-aria/radio';
+import {AriaRadioProps, useRadio, useRadioGroup} from '@react-aria/radio';
 import {Item, useCollection} from '@react-stately/collections';
 import {ListCollection} from '@react-stately/list';
-import {RadioGroupState, useRadioGroupState} from '@react-stately/radio';
-import {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';
+import {RadioGroupProps, RadioGroupState, useRadioGroupState} from '@react-stately/radio';
 import {CollectionBase, ItemProps, Node} from '@react-types/shared';
 import {LayoutGroup, motion} from 'framer-motion';
 
@@ -41,10 +40,10 @@ export interface SegmentedControlItemProps<Value extends string>
 
 type Priority = 'default' | 'primary';
 export interface SegmentedControlProps<Value extends string>
-  extends Omit<AriaRadioGroupProps, 'value' | 'defaultValue' | 'onChange'>,
+  extends Omit<RadioGroupProps, 'value' | 'defaultValue' | 'onChange'>,
     CollectionBase<any> {
   defaultValue?: Value;
-  disabled?: AriaRadioGroupProps['isDisabled'];
+  disabled?: RadioGroupProps['isDisabled'];
   onChange?: (value: Value) => void;
   priority?: Priority;
   size?: FormSize;
@@ -65,7 +64,7 @@ export function SegmentedControl<Value extends string>({
   const ref = useRef<HTMLDivElement>(null);
 
   const collection = useCollection(props, collectionFactory);
-  const ariaProps: AriaRadioGroupProps = {
+  const ariaProps: RadioGroupProps = {
     ...props,
     // Cast value/defaultValue as string to comply with AriaRadioGroupProps. This is safe
     // as value and defaultValue are already strings (their type, Value, extends string)

+ 12 - 10
static/app/utils/useOverlay.tsx

@@ -1,16 +1,18 @@
 import {useMemo, useRef, useState} from 'react';
 import {PopperProps, usePopper} from 'react-popper';
 import {detectOverflow, Modifier, preventOverflow} from '@popperjs/core';
-import {useButton} from '@react-aria/button';
+import {useButton as useButtonAria} from '@react-aria/button';
 import {
   AriaOverlayProps,
   OverlayTriggerProps,
-  useOverlay as useAriaOverlay,
-  useOverlayTrigger,
+  useOverlay as useOverlayAria,
+  useOverlayTrigger as useOverlayTriggerAria,
 } from '@react-aria/overlays';
 import {mergeProps} from '@react-aria/utils';
-import {useOverlayTriggerState} from '@react-stately/overlays';
-import {OverlayTriggerProps as OverlayTriggerStateProps} from '@react-types/overlays';
+import {
+  OverlayTriggerProps as OverlayTriggerStateProps,
+  useOverlayTriggerState,
+} from '@react-stately/overlays';
 
 type PreventOverflowOptions = NonNullable<(typeof preventOverflow)['options']>;
 
@@ -196,19 +198,19 @@ function useOverlay({
   } = usePopper(triggerElement, overlayElement, {modifiers, placement: position});
 
   // Get props for trigger button
-  const {triggerProps, overlayProps: overlayTriggerProps} = useOverlayTrigger(
+  const {triggerProps, overlayProps: overlayTriggerAriaProps} = useOverlayTriggerAria(
     {type},
     openState,
     triggerRef
   );
-  const {buttonProps: ariaTriggerProps} = useButton(
+  const {buttonProps: triggerAriaProps} = useButtonAria(
     {...triggerProps, isDisabled: disableTrigger},
     triggerRef
   );
 
   // Get props for overlay element
   const interactedOutside = useRef(false);
-  const {overlayProps} = useAriaOverlay(
+  const {overlayProps: overlayAriaProps} = useOverlayAria(
     {
       onClose: () => {
         onClose?.();
@@ -247,13 +249,13 @@ function useOverlay({
     triggerRef,
     triggerProps: {
       ref: setTriggerElement,
-      ...ariaTriggerProps,
+      ...triggerAriaProps,
     },
     overlayRef,
     overlayProps: {
       ref: setOverlayElement,
       style: popperStyles.popper,
-      ...mergeProps(overlayTriggerProps, overlayProps),
+      ...mergeProps(overlayTriggerAriaProps, overlayAriaProps),
     },
     arrowProps: {
       ref: setArrowElement,