chore: remove react types (#212)

* v1.2.1

* v1.3.1

* remove more

* more cleanup

* WIP

* remove more

* fix node

package.json

@@ -141,7 +141,6 @@
     "@react-stately/tooltip": "^3.2.2",
     "@react-stately/utils": "^3.5.1",
     "@react-stately/virtualizer": "^3.3.1",
-    "@react-types/shared": "^3.15.0",
     "clsx": "^1.1.1",
     "eslint-config-prettier": "^8.8.0",
     "react-transition-group": "^4.4.5"

src/breadcrumbs/BreadcrumbItem.tsx

@@ -1,11 +1,11 @@
-import { BreadcrumbItemProps } from '@react-types/breadcrumbs';
 import { FocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import React, { Fragment, useRef } from 'react';
 import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import { useHover } from '@react-aria/interactions';
 import { classNames, getWrappedElement } from '../utils';
 import { ChevronRightOutline, Icon } from '../icon';
+import { BreadcrumbItemProps } from '../types';
 
 export function BreadcrumbItem(props: BreadcrumbItemProps) {
   const { children, isCurrent, isDisabled } = props;

src/breadcrumbs/Breadcrumbs.tsx

@@ -1,4 +1,3 @@
-import { DOMRef } from '@react-types/shared';
 import React, { Key, ReactElement, useCallback, useRef } from 'react';
 import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import { useLayoutEffect, useValueEffect } from '@react-aria/utils';
@@ -11,45 +10,12 @@ import { FolderOutline } from '../icon/Icons';
 import { classNames, useDOMRef } from '../utils';
 import { ActionButton } from '../button';
 import theme from '../theme';
-import { AriaLabelingProps, DOMProps, ItemProps, StyleProps } from '../types';
+import { ACBreadcrumbsProps, DOMRef } from '../types';
 import { BreadcrumbItem } from './BreadcrumbItem';
 
 const MIN_VISIBLE_ITEMS = 1;
 const MAX_VISIBLE_ITEMS = 4;
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface BreadcrumbsProps {}
-export interface AriaBreadcrumbsProps
-  extends BreadcrumbsProps,
-    DOMProps,
-    AriaLabelingProps {}
-
-export interface ArizeBreadcrumbsProps<T>
-  extends AriaBreadcrumbsProps,
-    StyleProps {
-  /** The breadcrumb items. */
-  children: ReactElement<ItemProps<T>> | ReactElement<ItemProps<T>>[];
-  /** 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 ulCSS = css`
   flex-wrap: nowrap;
   flex: 1 0;
@@ -88,7 +54,7 @@ const liCSS = css`
   }
 `;
 
-function Breadcrumbs<T>(props: ArizeBreadcrumbsProps<T>, ref: DOMRef) {
+function Breadcrumbs<T>(props: ACBreadcrumbsProps<T>, ref: DOMRef) {
   props = useProviderProps(props);
   const {
     size = 'L',

src/dialog/Dialog.tsx

@@ -1,4 +1,3 @@
-import { DOMRef } from '@react-types/shared';
 import { FocusScope } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import React, { useContext } from 'react';
@@ -9,6 +8,7 @@ import { Heading } from '../content';
 import { CloseOutline, Icon } from '../icon';
 import { classNames, useDOMRef } from '../utils';
 import { Button } from '../button';
+import { DOMRef } from '../types';
 import { DialogContext, DialogContextValue } from './context';
 
 const dialogCSS = css`

src/field/Field.tsx

@@ -1,13 +1,12 @@
 import { css, keyframes } from '@emotion/react';
-import { LabelPosition } from '@react-types/shared';
 import { mergeProps } from '@react-aria/utils';
 import React, {
   RefObject,
   HTMLAttributes,
   ReactNode,
   ReactElement,
 } from 'react';
-import { Validation } from '../types';
+import { LabelPosition, Validation } from '../types';
 import { classNames } from '../utils';
 import { useFormProps } from '../form';
 import { FieldLabel, FieldLabelProps } from './FieldLabel';

src/field/FieldLabel.tsx

@@ -1,9 +1,13 @@
-import { DOMRef } from '@react-types/shared';
 import { css } from '@emotion/react';
 import { filterDOMProps } from '@react-aria/utils';
 import React, { ReactNode, ElementType, HTMLAttributes } from 'react';
 import { classNames, useDOMRef } from '../utils';
-import { DOMProps, LabelableProps, ExtendableLabelProps } from '../types';
+import {
+  DOMProps,
+  LabelableProps,
+  ExtendableLabelProps,
+  DOMRef,
+} from '../types';
 import theme from '../theme';
 
 interface LabelProps {

src/listbox/ListBox.tsx

@@ -1,11 +1,11 @@
-import { DOMRef } from '@react-types/shared';
 import React, { ReactElement, CSSProperties, ReactNode, Key } from 'react';
 import { useListState } from '@react-stately/list';
 import { useDOMRef } from '../utils';
 import {
   AriaLabelingProps,
   CollectionBase,
   DOMProps,
+  DOMRef,
   MultipleSelection,
   SelectionBehavior,
 } from '../types';

src/listbox/ListBoxBase.tsx

@@ -1,10 +1,3 @@
-import {
-  AriaLabelingProps,
-  DOMProps,
-  FocusStrategy,
-  Node,
-  StyleProps,
-} from '@react-types/shared';
 import { AriaListBoxOptions, useListBox } from '@react-aria/listbox';
 
 import { ListLayout } from '@react-stately/layout';
@@ -21,6 +14,13 @@ import React, {
 import { ReusableView } from '@react-stately/virtualizer';
 import { useCollator } from '@react-aria/i18n';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
+import {
+  AriaLabelingProps,
+  DOMProps,
+  FocusStrategy,
+  StyleProps,
+  Node,
+} from '../types';
 import { ListBoxSection } from './ListBoxSection';
 import { ListBoxOption } from './ListBoxOption';
 import { ListBoxContext } from './ListBoxContext';

src/listbox/ListBoxOption.tsx

@@ -1,14 +1,14 @@
 import { FocusRing } from '@react-aria/focus';
 import { isFocusVisible, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
-import { Node } from '@react-types/shared';
 import React, { useContext } from 'react';
 import { useOption } from '@react-aria/listbox';
 import { useRef } from 'react';
 import { Text } from '../content';
 import { classNames } from '../utils';
 import { Icon, CheckmarkOutline } from '../icon';
 import { menuItemCSS } from '../menu/styles';
+import { Node } from '../types';
 import { ListBoxContext } from './ListBoxContext';
 
 interface OptionProps<T> {

src/listbox/ListBoxSection.tsx

@@ -3,14 +3,14 @@ import {
   layoutInfoToStyle,
   useVirtualizerItem,
 } from '@react-aria/virtualizer';
-import { Node } from '@react-types/shared';
 import React, { Fragment, ReactNode, useContext, useRef } from 'react';
 import { LayoutInfo } from '@react-stately/virtualizer';
 import { useListBoxSection } from '@react-aria/listbox';
 import { useLocale } from '@react-aria/i18n';
 import { useSeparator } from '@react-aria/separator';
 import { css } from '@emotion/react';
 import theme from '../theme';
+import { Node } from '../types';
 import { ListBoxContext } from './ListBoxContext';
 
 interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref'> {

src/menu/ActionMenu.tsx

@@ -1,9 +1,8 @@
 import { filterDOMProps } from '@react-aria/utils';
-import { FocusableRef } from '@react-types/shared';
 import React, { forwardRef } from 'react';
 import { css } from '@emotion/react';
 import { ArrowIosDownwardOutline, Icon, MoreHorizontalOutline } from '../icon';
-import { ActionMenuProps } from '../types';
+import { ActionMenuProps, FocusableRef } from '../types';
 import { Button } from '../button';
 import { MenuTrigger } from './MenuTrigger';
 import { Menu } from './Menu';

src/menu/Menu.tsx

@@ -32,7 +32,7 @@ export interface AriaMenuProps<T>
     DOMProps,
     AriaLabelingProps {}
 
-export type MenuComponentProps<T> = AriaMenuProps<T>
+export type MenuComponentProps<T> = AriaMenuProps<T>;
 
 const menuULCSS = css`
   background-color: var(--ac-global-menu-background-color);

src/menu/MenuItem.tsx

@@ -1,13 +1,13 @@
 import { FocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { Node } from '@react-types/shared';
 import React, { Key, useRef } from 'react';
 import { TreeState } from '@react-stately/tree';
 import { useHover } from '@react-aria/interactions';
 import { useMenuItem } from '@react-aria/menu';
 import { Text } from '../content';
 import { classNames } from '../utils';
 import { Icon, CheckmarkOutline } from '../icon';
+import { Node } from '../types';
 import { useMenuContext } from './context';
 import { menuItemCSS } from './styles';
 

src/menu/MenuSection.tsx

@@ -1,13 +1,12 @@
-import { Node } from '@react-types/shared';
 import React, { Fragment, Key } from 'react';
 import { TreeState } from '@react-stately/tree';
 import { useMenuSection } from '@react-aria/menu';
 import { useSeparator } from '@react-aria/separator';
 import { getChildNodes } from '@react-stately/collections';
 import { css } from '@emotion/react';
 import theme from '../theme';
+import { Node } from '../types';
 import { MenuItem } from './MenuItem';
-
 interface MenuSectionProps<T> {
   item: Node<T>;
   state: TreeState<T>;

src/menu/MenuTrigger.tsx

@@ -1,14 +1,18 @@
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
-import { DOMRef, DOMRefValue } from '@react-types/shared';
 import { FocusScope } from '@react-aria/focus';
-import { Placement } from '@react-types/overlays';
 import { PressResponder } from '@react-aria/interactions';
 import React, { forwardRef, Fragment, ReactElement, useRef } from 'react';
 import { useMenuTrigger } from '@react-aria/menu';
 import { useMenuTriggerState } from '@react-stately/menu';
 import { Popover } from '../popover';
 import { unwrapDOMRef, useDOMRef } from '../utils';
-import { Alignment, OverlayTriggerProps } from '../types';
+import {
+  Alignment,
+  DOMRef,
+  DOMRefValue,
+  OverlayTriggerProps,
+  Placement,
+} from '../types';
 import { MenuContext } from './context';
 
 type MenuTriggerType = 'press' | 'longPress';

src/picker/Picker.tsx

@@ -7,11 +7,10 @@ import {
   useLayoutEffect,
   useResizeObserver,
 } from '@react-aria/utils';
-import { Placement } from '@react-types/overlays';
 import { PressResponder, useHover } from '@react-aria/interactions';
 import React, { ReactElement, useCallback, useRef, useState } from 'react';
 import { useSelectState } from '@react-stately/select';
-import { PickerProps } from '../types';
+import { PickerProps, Placement } from '../types';
 import { DropdownMenu, DropdownButton } from '../dropdown';
 import { ListBoxBase, useListBoxLayout } from '../listbox';
 import {

src/progress/ProgressCircle.tsx

@@ -1,9 +1,13 @@
 import { clamp } from '@react-aria/utils';
-import { AriaLabelingProps, DOMRef } from '@react-types/shared';
 import React, { CSSProperties } from 'react';
 import { useProgressBar } from '@react-aria/progress';
 import { classNames, useDOMRef } from '../utils';
-import { DOMProps, ProgressBaseProps } from '../types';
+import {
+  AriaLabelingProps,
+  DOMProps,
+  DOMRef,
+  ProgressBaseProps,
+} from '../types';
 import { progressCircleCSS } from './styles';
 
 interface AriaProgressCircleProps extends DOMProps, AriaLabelingProps {}

src/slider/RangeSlider.tsx

@@ -1,7 +1,7 @@
-import { FocusableRef } from '@react-types/shared';
 import React from 'react';
 import { useLocale } from '@react-aria/i18n';
 import { RangeSliderProps } from '../types/slider';
+import { FocusableRef } from '../types';
 import {
   SliderBase,
   SliderBaseChildArguments,

src/slider/SliderBase.tsx

@@ -1,4 +1,3 @@
-import { FocusableRef } from '@react-types/shared';
 import React, { CSSProperties, ReactNode, RefObject, useRef } from 'react';
 import { SliderState, useSliderState } from '@react-stately/slider';
 import { useNumberFormatter } from '@react-aria/i18n';
@@ -7,6 +6,7 @@ import { css } from '@emotion/react';
 import { useProviderProps } from '../provider';
 import { BarSliderBase } from '../types/slider';
 import { classNames, useFocusableRef } from '../utils';
+import { FocusableRef } from '../types';
 import { labelCSS, labelContainerCSS, sliderCSS } from './styles';
 export interface SliderBaseChildArguments {
   inputRef: RefObject<HTMLInputElement>;

src/textfield/TextFieldBase.tsx

@@ -1,7 +1,6 @@
 import { css, keyframes } from '@emotion/react';
 import { FocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { PressEvents } from '@react-types/shared';
 import React, {
   HTMLAttributes,
   InputHTMLAttributes,
@@ -14,7 +13,7 @@ import React, {
   useRef,
   forwardRef,
 } from 'react';
-import { useHover } from '@react-aria/interactions';
+import { PressEvents, useHover } from '@react-aria/interactions';
 import { classNames, createFocusableRef } from '../utils';
 import { Field } from '../field';
 import { Icon, AlertCircleOutline } from '../icon';

src/types/breadcrumb.ts

@@ -0,0 +1,60 @@
+import { AriaLinkProps } from '@react-types/link';
+import { Key, ReactElement, ReactNode } from 'react';
+import { AriaLabelingProps, DOMProps, LinkDOMProps } from './dom';
+import { ItemProps } from './collection';
+import { StyleProps } from './style';
+
+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;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface BreadcrumbsProps {}
+export interface AriaBreadcrumbsProps
+  extends BreadcrumbsProps,
+    DOMProps,
+    AriaLabelingProps {}
+
+export interface ACBreadcrumbsProps<T>
+  extends AriaBreadcrumbsProps,
+    StyleProps {
+  /** The breadcrumb items. */
+  children: ReactElement<ItemProps<T>> | ReactElement<ItemProps<T>>[];
+  /** 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;
+}