fix(types): fix types for event key

src/AbstractNavItem.tsx

@@ -7,14 +7,15 @@ import warning from 'warning';
 import NavContext from './NavContext';
 import SelectableContext, { makeEventKey } from './SelectableContext';
 import { BsPrefixRefForwardingComponent } from './helpers';
+import { EventKey } from './types';
 
 // TODO: check this
 interface AbstractNavItemProps {
   active?: boolean;
   as: React.ElementType;
   className?: string;
   disabled?: boolean;
-  eventKey?: any; // TODO: especially fix this
+  eventKey?: EventKey;
   href?: string;
   role?: string;
   id?: string;

src/DropdownItem.tsx

@@ -12,11 +12,12 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface DropdownItemProps extends BsPrefixPropsWithChildren {
   active?: boolean;
   disabled?: boolean;
-  eventKey?: string;
+  eventKey?: EventKey;
   href?: string;
   onClick?: React.MouseEventHandler<this>;
   onSelect?: SelectCallback;
@@ -44,7 +45,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`.
@@ -95,8 +96,8 @@ const DropdownItem: DropdownItem = React.forwardRef(
     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

@@ -17,7 +17,6 @@ export interface DropdownToggleProps
     ButtonProps {
   split?: boolean;
   childBsPrefix?: string;
-  eventKey?: any; // TODO: fix this type
 }
 
 type DropdownToggle = BsPrefixRefForwardingComponent<

src/ListGroup.tsx

@@ -13,12 +13,13 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface ListGroupProps extends BsPrefixProps {
   variant?: 'flush';
   horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl';
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
   onSelect?: SelectCallback;
 }
 

src/ListGroupItem.tsx

@@ -3,18 +3,17 @@ import React, { 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 { EventKey, Variant } 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;
@@ -48,7 +47,7 @@ const propTypes = {
    */
   disabled: PropTypes.bool,
 
-  eventKey: PropTypes.string,
+  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   onClick: PropTypes.func,
 
@@ -79,7 +78,6 @@ const ListGroupItem: ListGroupItem = React.forwardRef(
       variant,
       action,
       as,
-      eventKey,
       onClick,
       ...props
     },
@@ -109,8 +107,6 @@ const ListGroupItem: ListGroupItem = React.forwardRef(
       <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

@@ -16,13 +16,14 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface NavProps extends BsPrefixPropsWithChildren {
   navbarBsPrefix?: string;
   cardHeaderBsPrefix?: string;
   variant?: 'tabs' | 'pills';
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
   fill?: boolean;
   justify?: boolean;
   onSelect?: SelectCallback;
@@ -59,7 +60,7 @@ const propTypes = {
    *
    * @type {string}
    */
-  activeKey: PropTypes.any,
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * Have all `NavItem`s proportionately fill all available width.

src/NavLink.tsx

@@ -11,14 +11,15 @@ import {
   BsPrefixRefForwardingComponent,
   SelectCallback,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface NavLinkProps extends BsPrefixPropsWithChildren {
   active?: boolean;
   disabled?: boolean;
   role?: string;
   href?: string;
   onSelect?: SelectCallback;
-  eventKey?: unknown;
+  eventKey?: EventKey;
 }
 
 type NavLink = BsPrefixRefForwardingComponent<'a', NavLinkProps>;
@@ -60,7 +61,7 @@ const propTypes = {
    * Uniquely idenifies 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

@@ -8,7 +8,7 @@ const SelectableContext = React.createContext<SelectableContextType | 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,9 +4,10 @@ import React from 'react';
 import TabContainer from './TabContainer';
 import TabContent from './TabContent';
 import TabPane from './TabPane';
+import { EventKey } from './types';
 
 export interface TabProps extends React.ComponentPropsWithRef<typeof TabPane> {
-  eventKey?: string;
+  eventKey?: EventKey;
   title: React.ReactNode;
   disabled?: boolean;
   tabClassName?: string;
@@ -16,6 +17,7 @@ export interface TabProps extends React.ComponentPropsWithRef<typeof TabPane> {
 class Tab extends React.Component<TabProps> {
   static propTypes = {
     title: PropTypes.node.isRequired,
+    eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   };
 
   public static Container = TabContainer;

src/TabContainer.tsx

@@ -5,16 +5,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) => {
@@ -92,7 +93,7 @@ const propTypes = {
    *
    * @controllable onSelect
    */
-  activeKey: PropTypes.any,
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 const TabContainer = (props: TabContainerProps) => {
@@ -110,7 +111,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],
   );
 
@@ -121,8 +122,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

@@ -12,9 +12,10 @@ import {
   TransitionCallbacks,
   TransitionType,
 } from './helpers';
+import { EventKey } from './types';
 
 export interface TabPaneProps extends TransitionCallbacks, BsPrefixProps {
-  eventKey?: any;
+  eventKey?: EventKey;
   active?: boolean;
   transition?: TransitionType;
   mountOnEnter?: boolean;
@@ -34,7 +35,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,10 +13,11 @@ import TabPane from './TabPane';
 
 import { forEach, map } from './ElementChildren';
 import { SelectCallback, TransitionType } from './helpers';
+import { EventKey } from './types';
 
 export interface TabsProps extends React.PropsWithChildren<unknown> {
-  activeKey?: unknown;
-  defaultActiveKey?: unknown;
+  activeKey?: EventKey;
+  defaultActiveKey?: EventKey;
   onSelect?: SelectCallback;
   variant?: 'tabs' | 'pills';
   transition?: TransitionType;
@@ -31,9 +32,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

@@ -30,3 +30,5 @@ export type Color =
   | 'light'
   | 'white'
   | 'muted';
+
+export type EventKey = string | number;