Remove PropTypes

Author: ericgio

package.json

@@ -54,7 +54,6 @@
     "fast-deep-equal": "^3.1.1",
     "invariant": "^2.2.1",
     "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.5.8",
     "scroll-into-view-if-needed": "^3.1.0",
     "warning": "^4.0.1"
   },

src/components/AsyncTypeahead/AsyncTypeahead.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 
 import { TypeaheadRef, useAsync, UseAsyncProps } from '../../core';
@@ -9,38 +8,4 @@ const AsyncTypeahead = forwardRef<TypeaheadRef, UseAsyncProps>((props, ref) => {
   return <Typeahead {...useAsync(props)} ref={ref} />;
 });
 
-AsyncTypeahead.propTypes = {
-  /**
-   * Delay, in milliseconds, before performing search.
-   */
-  delay: PropTypes.number,
-  /**
-   * Whether or not a request is currently pending. Necessary for the
-   * container to know when new results are available.
-   */
-  isLoading: PropTypes.bool.isRequired,
-  /**
-   * Number of input characters that must be entered before showing results.
-   */
-  minLength: PropTypes.number,
-  /**
-   * Callback to perform when the search is executed.
-   */
-  onSearch: PropTypes.func.isRequired,
-  /**
-   * Message displayed in the menu when there is no user input.
-   */
-  // @ts-ignore
-  promptText: PropTypes.node,
-  /**
-   * Message displayed in the menu while the request is pending.
-   */
-  // @ts-ignore
-  searchText: PropTypes.node,
-  /**
-   * Whether or not the component should cache query results.
-   */
-  useCache: PropTypes.bool,
-};
-
 export default AsyncTypeahead;

src/components/ClearButton/ClearButton.tsx

@@ -1,19 +1,9 @@
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React, { HTMLProps, KeyboardEvent, MouseEvent } from 'react';
 
 import type { Size } from '../../types';
 import { isSizeLarge, isSizeSmall } from '../../utils';
 
-import { sizeType } from '../../propTypes';
-
-const propTypes = {
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  size: sizeType,
-};
-
 export interface ClearButtonProps
   extends Omit<HTMLProps<HTMLButtonElement>, 'size'> {
   label?: string;
@@ -63,6 +53,4 @@ const ClearButton = ({
   </button>
 );
 
-ClearButton.propTypes = propTypes;
-
 export default ClearButton;

src/components/Highlighter/Highlighter.tsx

@@ -1,23 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { getMatchBounds } from '../../utils';
 
-const propTypes = {
-  children: PropTypes.string.isRequired,
-  highlightClassName: PropTypes.string,
-  search: PropTypes.string.isRequired,
-};
-
 export interface HighlighterProps {
   children: string;
   highlightClassName?: string;
   search: string;
 }
 
 /**
- * Stripped-down version of https://github.com/helior/react-highlighter
- *
  * Results are already filtered by the time the component is used internally so
  * we can safely ignore case and diacritical marks for the purposes of matching.
  */
@@ -66,6 +57,4 @@ const Highlighter = ({
   return <>{highlighterChildren}</>;
 };
 
-Highlighter.propTypes = propTypes;
-
 export default Highlighter;

src/components/Loader/Loader.tsx

@@ -1,10 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
-const propTypes = {
-  label: PropTypes.string,
-};
-
 export interface LoaderProps {
   label?: string;
 }
@@ -15,6 +10,4 @@ const Loader = ({ label = 'Loading...' }: LoaderProps) => (
   </div>
 );
 
-Loader.propTypes = propTypes;
-
 export default Loader;

src/components/Menu/Menu.stories.tsx

@@ -6,8 +6,6 @@ import MenuItem from '../MenuItem';
 
 const options = [{ label: 'Item 1' }, { label: 'Item 2' }, { label: 'Item 3' }];
 
-// TODO: Caused by `isRequiredForA11y` validator.
-// @ts-ignore
 export default {
   title: 'Components/Menu',
   component: Menu,

src/components/Menu/Menu.tsx

@@ -1,11 +1,10 @@
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React, { Children, HTMLProps, ReactNode, Ref } from 'react';
 
 import { BaseMenuItem } from '../MenuItem';
 
+import { Id } from '../../types';
 import { preventInputBlur } from '../../utils';
-import { checkPropType, isRequiredForA11y } from '../../propTypes';
 
 const MenuDivider = () => <div className="dropdown-divider" role="separator" />;
 
@@ -14,28 +13,19 @@ const MenuHeader = (props: HTMLProps<HTMLDivElement>) => (
   <div {...props} className="dropdown-header" role="heading" />
 );
 
-const propTypes = {
-  'aria-label': PropTypes.string,
+export interface MenuProps extends HTMLProps<HTMLDivElement> {
   /**
    * Message to display in the menu if there are no valid results.
    */
-  emptyLabel: PropTypes.node,
+  emptyLabel?: ReactNode;
   /**
    * Needed for accessibility.
    */
-  id: checkPropType(
-    PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    isRequiredForA11y
-  ),
+  id?: Id;
+  innerRef?: Ref<HTMLDivElement>;
   /**
    * Maximum height of the dropdown menu.
    */
-  maxHeight: PropTypes.string,
-};
-
-export interface MenuProps extends HTMLProps<HTMLDivElement> {
-  emptyLabel?: ReactNode;
-  innerRef?: Ref<HTMLDivElement>;
   maxHeight?: string;
 }
 
@@ -82,7 +72,6 @@ const Menu = ({
   );
 };
 
-Menu.propTypes = propTypes;
 Menu.Divider = MenuDivider;
 Menu.Header = MenuHeader;
 

src/components/MenuItem/MenuItem.tsx

@@ -1,9 +1,7 @@
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React, { forwardRef, HTMLAttributes, MouseEvent } from 'react';
 
 import { useItem, UseItemProps } from '../../core';
-import { optionType } from '../../propTypes';
 
 export interface BaseMenuItemProps extends HTMLAttributes<HTMLAnchorElement> {
   active?: boolean;
@@ -35,9 +33,4 @@ function MenuItem(props: MenuItemProps) {
   return <BaseMenuItem {...useItem(props)} />;
 }
 
-MenuItem.propTypes = {
-  option: optionType.isRequired,
-  position: PropTypes.number,
-};
-
 export default MenuItem;

src/components/Token/Token.tsx

@@ -1,11 +1,9 @@
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React, { forwardRef, HTMLProps, MouseEventHandler } from 'react';
 
 import ClearButton from '../ClearButton';
 
 import { useToken, UseTokenProps } from '../../core';
-import { optionType } from '../../propTypes';
 import { isFunction } from '../../utils';
 
 type HTMLElementProps = Omit<HTMLProps<HTMLDivElement>, 'onBlur' | 'ref'>;
@@ -97,12 +95,4 @@ const Token = ({
   );
 };
 
-Token.propTypes = {
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onRemove: PropTypes.func,
-  option: optionType.isRequired,
-};
-
 export default Token;

src/components/TypeaheadMenu/TypeaheadMenu.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { ReactNode } from 'react';
 
 import Highlighter from '../Highlighter';
@@ -16,28 +15,22 @@ export type RenderMenuItemChildren = (
 
 export interface TypeaheadMenuProps extends MenuProps {
   labelKey: LabelKey;
-  newSelectionPrefix?: ReactNode;
-  options: Option[];
-  paginationText?: ReactNode;
-  renderMenuItemChildren?: RenderMenuItemChildren;
-  text: string;
-}
-
-const propTypes = {
   /**
    * Provides the ability to specify a prefix before the user-entered text to
    * indicate that the selection will be new. No-op unless `allowNew={true}`.
    */
-  newSelectionPrefix: PropTypes.node,
+  newSelectionPrefix?: ReactNode;
+  options: Option[];
   /**
    * Prompt displayed when large data sets are paginated.
    */
-  paginationText: PropTypes.node,
+  paginationText?: ReactNode;
   /**
    * Provides a hook for customized rendering of menu item contents.
    */
-  renderMenuItemChildren: PropTypes.func,
-};
+  renderMenuItemChildren?: RenderMenuItemChildren;
+  text: string;
+}
 
 function defaultRenderMenuItemChildren(
   option: Option,
@@ -122,6 +115,4 @@ const TypeaheadMenu = (props: TypeaheadMenuProps) => {
   );
 };
 
-TypeaheadMenu.propTypes = propTypes;
-
 export default TypeaheadMenu;