fix(types): fix types for event key (#5727)

src/AbstractNav.tsx

@@ -7,13 +7,14 @@ import useMergedRefs from '@restart/hooks/useMergedRefs';
 import NavContext from './NavContext';
 import SelectableContext, { makeEventKey } from './SelectableContext';
 import TabContext from './TabContext';
-import { BsPrefixRefForwardingComponent } from './helpers';
+import { BsPrefixRefForwardingComponent, SelectCallback } from './helpers';
+import { EventKey } from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
 const propTypes = {
-  onSelect: PropTypes.func.isRequired,
+  onSelect: PropTypes.func,
 
   as: PropTypes.elementType,
 
@@ -24,23 +25,15 @@ const propTypes = {
   /** @private */
   parentOnSelect: PropTypes.func,
   /** @private */
-  getControlledId: PropTypes.func,
-  /** @private */
-  getControllerId: PropTypes.func,
-  /** @private */
-  activeKey: PropTypes.any,
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-// TODO: is this correct?
-interface AbstractNavProps extends React.HTMLAttributes<HTMLElement> {
-  activeKey?: any;
+interface AbstractNavProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+  activeKey?: EventKey;
   as?: React.ElementType;
-  getControlledId?: any;
-  getControllerId?: any;
-  onKeyDown?: any;
-  onSelect?: any;
-  parentOnSelect?: any;
-  role?: string;
+  onSelect?: SelectCallback;
+  parentOnSelect?: SelectCallback;
 }
 
 const AbstractNav: BsPrefixRefForwardingComponent<

src/AbstractNavItem.tsx

@@ -8,14 +8,14 @@ import warning from 'warning';
 import NavContext from './NavContext';
 import SelectableContext, { makeEventKey } from './SelectableContext';
 import { BsPrefixRefForwardingComponent } from './helpers';
+import { EventKey } from './types';
 
-// TODO: check this
 export interface AbstractNavItemProps
   extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   active?: boolean;
   as: React.ElementType;
   disabled?: boolean;
-  eventKey?: any; // TODO: especially fix this
+  eventKey?: EventKey;
   href?: string;
   tabIndex?: number;
   onSelect?: (navKey: string, e: any) => void;
@@ -28,7 +28,7 @@ const propTypes = {
 
   href: PropTypes.string,
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  eventKey: PropTypes.any,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onclick: PropTypes.func,
 
   as: PropTypes.any,

src/DropdownItem.tsx

@@ -13,13 +13,14 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface DropdownItemProps
   extends BsPrefixProps,
     Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   active?: boolean;
   disabled?: boolean;
-  eventKey?: string;
+  eventKey?: EventKey;
   href?: string;
   onSelect?: SelectCallback;
 }
@@ -41,7 +42,7 @@ const propTypes = {
   /**
    * Value passed to the `onSelect` handler, useful for identifying the selected menu item.
    */
-  eventKey: PropTypes.any,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * HTML `href` attribute corresponding to `a.href`.
@@ -94,8 +95,7 @@ const DropdownItem: BsPrefixRefForwardingComponent<
     const navContext = useContext(NavContext);
 
     const { activeKey } = navContext || {};
-    // TODO: Restrict eventKey to string in v5?
-    const key = makeEventKey(eventKey as any, href);
+    const key = makeEventKey(eventKey, href);
 
     const active =
       propActive == null && key != null

src/DropdownToggle.tsx

@@ -12,7 +12,6 @@ import { BsPrefixRefForwardingComponent } from './helpers';
 export interface DropdownToggleProps extends ButtonProps {
   split?: boolean;
   childBsPrefix?: string;
-  eventKey?: any; // TODO: fix this type
 }
 
 type DropdownToggleComponent = BsPrefixRefForwardingComponent<

src/ListGroup.tsx

@@ -13,14 +13,15 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface ListGroupProps
   extends BsPrefixProps,
     Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   variant?: 'flush';
   horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
   onSelect?: SelectCallback;
 }
 

src/ListGroupItem.tsx

@@ -4,18 +4,17 @@ import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import AbstractNavItem from './AbstractNavItem';
-import { makeEventKey } from './SelectableContext';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
-import { Variant } from './types';
+import { Variant, EventKey } from './types';
 
 export interface ListGroupItemProps
   extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>,
     BsPrefixProps {
   action?: boolean;
   active?: boolean;
   disabled?: boolean;
-  eventKey?: string;
+  eventKey?: EventKey;
   href?: string;
   onClick?: React.MouseEventHandler;
   variant?: Variant;
@@ -47,7 +46,7 @@ const propTypes = {
    */
   disabled: PropTypes.bool,
 
-  eventKey: PropTypes.string,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   onClick: PropTypes.func,
 
@@ -81,7 +80,6 @@ const ListGroupItem: BsPrefixRefForwardingComponent<
       variant,
       action,
       as,
-      eventKey,
       onClick,
       ...props
     },
@@ -111,8 +109,6 @@ const ListGroupItem: BsPrefixRefForwardingComponent<
       <AbstractNavItem
         ref={ref}
         {...props}
-        // TODO: Restrict eventKey to string in v5?
-        eventKey={makeEventKey(eventKey as any, props.href)}
         // eslint-disable-next-line no-nested-ternary
         as={as || (action ? (props.href ? 'a' : 'button') : 'div')}
         onClick={handleClick}

src/Nav.tsx

@@ -17,15 +17,16 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface NavProps
   extends BsPrefixProps,
     Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   navbarBsPrefix?: string;
   cardHeaderBsPrefix?: string;
   variant?: 'tabs' | 'pills';
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
   fill?: boolean;
   justify?: boolean;
   onSelect?: SelectCallback;
@@ -52,10 +53,8 @@ const propTypes = {
 
   /**
    * Marks the NavItem with a matching `eventKey` (or `href` if present) as active.
-   *
-   * @type {string}
    */
-  activeKey: PropTypes.any,
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * Have all `NavItem`s proportionately fill all available width.

src/NavContext.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { EventKey } from './types';
 
-// TODO: check this
 interface NavContextType {
   role?: string; // used by NavLink to determine it's role
-  activeKey: any;
-  getControlledId: (key: any) => any;
-  getControllerId: (key: any) => any;
+  activeKey: EventKey | null;
+  getControlledId: (key: EventKey | null) => string;
+  getControllerId: (key: EventKey | null) => string;
 }
 
 const NavContext = React.createContext<NavContextType | null>(null);

src/NavLink.tsx

@@ -46,10 +46,10 @@ const propTypes = {
   onSelect: PropTypes.func,
 
   /**
-   * Uniquely idenifies the `NavItem` amongst its siblings,
+   * Uniquely identifies the `NavItem` amongst its siblings,
    * used to determine and control the active state of the parent `Nav`
    */
-  eventKey: PropTypes.any,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /** @default 'a' */
   as: PropTypes.elementType,

src/SelectableContext.tsx

@@ -1,14 +1,10 @@
 import * as React from 'react';
+import { SelectCallback } from './helpers';
 
-// TODO (apparently this is a bare "onSelect"?)
-type SelectableContextType = (key: string | null, event: any) => void;
-
-const SelectableContext = React.createContext<SelectableContextType | null>(
-  null,
-);
+const SelectableContext = React.createContext<SelectCallback | null>(null);
 
 export const makeEventKey = (
-  eventKey: string | null,
+  eventKey?: string | number | null,
   href: string | null = null,
 ): string | null => {
   if (eventKey != null) return String(eventKey);

src/Tab.tsx

@@ -4,17 +4,18 @@ import * as React from 'react';
 import TabContainer from './TabContainer';
 import TabContent from './TabContent';
 import TabPane, { TabPaneProps } from './TabPane';
+import { EventKey } from './types';
 
 export interface TabProps extends Omit<TabPaneProps, 'title'> {
-  eventKey?: string;
+  eventKey?: EventKey;
   title: React.ReactNode;
   disabled?: boolean;
   tabClassName?: string;
 }
 
 /* eslint-disable react/no-unused-prop-types */
 const propTypes = {
-  eventKey: PropTypes.string,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * Content for the tab title.

src/TabContainer.tsx

@@ -6,16 +6,17 @@ import { useUncontrolled } from 'uncontrollable';
 import TabContext, { TabContextType } from './TabContext';
 import SelectableContext from './SelectableContext';
 import { SelectCallback, TransitionType } from './helpers';
+import { EventKey } from './types';
 
 export interface TabContainerProps extends React.PropsWithChildren<unknown> {
   id?: string;
   transition?: TransitionType;
   mountOnEnter?: boolean;
   unmountOnExit?: boolean;
-  generateChildId?: (eventKey: unknown, type: 'tab' | 'pane') => string;
+  generateChildId?: (eventKey: EventKey, type: 'tab' | 'pane') => string;
   onSelect?: SelectCallback;
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
 }
 
 const validateId: Validator<string> = (props, ...args) => {
@@ -93,7 +94,7 @@ const propTypes = {
    *
    * @controllable onSelect
    */
-  activeKey: PropTypes.any,
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 const TabContainer = (props: TabContainerProps) => {
@@ -111,7 +112,7 @@ const TabContainer = (props: TabContainerProps) => {
   const generateChildId = useMemo(
     () =>
       generateCustomChildId ||
-      ((key, type) => (id ? `${id}-${type}-${key}` : null)),
+      ((key: EventKey, type: string) => (id ? `${id}-${type}-${key}` : null)),
     [id, generateCustomChildId],
   );
 
@@ -122,8 +123,8 @@ const TabContainer = (props: TabContainerProps) => {
       transition,
       mountOnEnter: mountOnEnter || false,
       unmountOnExit: unmountOnExit || false,
-      getControlledId: (key) => generateChildId(key, 'tabpane'),
-      getControllerId: (key) => generateChildId(key, 'tab'),
+      getControlledId: (key: EventKey) => generateChildId(key, 'tabpane'),
+      getControllerId: (key: EventKey) => generateChildId(key, 'tab'),
     }),
     [
       onSelect,

src/TabPane.tsx

@@ -13,12 +13,13 @@ import {
   TransitionCallbacks,
   TransitionType,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface TabPaneProps
   extends TransitionCallbacks,
     BsPrefixProps,
     React.HTMLAttributes<HTMLElement> {
-  eventKey?: any;
+  eventKey?: EventKey;
   active?: boolean;
   transition?: TransitionType;
   mountOnEnter?: boolean;
@@ -36,7 +37,7 @@ const propTypes = {
   /**
    * A key that associates the `TabPane` with it's controlling `NavLink`.
    */
-  eventKey: PropTypes.any,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * Toggles the active state of the TabPane, this is generally controlled by a

src/Tabs.tsx

@@ -13,11 +13,12 @@ import TabPane from './TabPane';
 
 import { forEach, map } from './ElementChildren';
 import { SelectCallback, TransitionType } from './helpers';
+import { EventKey } from './types';
 
 export interface TabsProps
   extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
   onSelect?: SelectCallback;
   variant?: 'tabs' | 'pills';
   transition?: TransitionType;
@@ -32,9 +33,9 @@ const propTypes = {
    *
    * @controllable onSelect
    */
-  activeKey: PropTypes.any,
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** The default active key that is selected on start */
-  defaultActiveKey: PropTypes.any,
+  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * Navigation style

src/types.tsx

@@ -37,3 +37,5 @@ export type ArrowProps = {
   ref: React.RefCallback<HTMLElement>;
   style: React.CSSProperties;
 };
+
+export type EventKey = string | number;