Make unique id generation come from context when provided

src/components/Checkbox/CheckboxBooleanInput.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import React, { useState } from 'react';
+import React from 'react';
 import type { InputProps } from 'reactstrap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import FormGroup from '../Form/FormGroup';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
@@ -19,7 +19,7 @@ function CheckboxBooleanInput({
   value,
   ...inputProps
 }: CheckboxBooleanInputProps) {
-  const [generatedId] = useState(() => getUniqueId('checkbox-boolean-input-'));
+  const generatedId = useUniqueId('checkbox-boolean-input-');
   const id = inputProps.id || generatedId;
   const classNames = classnames('pt-2', className);
   return (

src/components/Form/FormChoice.js

@@ -1,63 +1,56 @@
 import classname from 'classnames';
 import React from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
 import FormGroup from './FormGroup';
 
-class FormChoice extends React.Component {
-  constructor(props) {
-    super(props);
-    this.id = props.id || getUniqueId('form-choice-');
-  }
-
-  render() {
-    /* eslint-disable-next-line  @typescript-eslint/no-unused-vars -- Let's figure out a better way to omit props for this scenario */
-    const { id, inline, disabled, children, containerClassName, type, value, ...attributes } =
-      this.props;
-
-    if (type === 'select') {
-      return (
-        <option {...attributes} disabled={disabled} value={value}>
-          {children}
-        </option>
-      );
-    }
-
-    const containerClasses = classname({ 'form-check-inline': inline }, containerClassName);
-
-    const computedValue = value || children;
-
-    const item = (
-      <div className={containerClasses}>
-        <Input
-          id={this.id}
-          type={type}
-          {...attributes}
-          disabled={disabled}
-          value={computedValue}
-          style={{ cursor: disabled && 'not-allowed' }}
-        />
-        <Label
-          className="form-check-label"
-          check={!inline}
-          for={this.id}
-          style={{ cursor: disabled && 'not-allowed' }}
-        >
-          {children}
-        </Label>
-      </div>
-    );
+function FormChoice({ id, inline, disabled, children, containerClassName, type, value, ...props }) {
+  const generatedId = useUniqueId('form-choice-');
+  const idToUse = id || generatedId;
 
-    if (inline) {
-      return item;
-    }
+  if (type === 'select') {
     return (
-      <FormGroup check disabled={disabled}>
-        {item}
-      </FormGroup>
+      <option {...props} disabled={disabled} value={value}>
+        {children}
+      </option>
     );
   }
+
+  const containerClasses = classname({ 'form-check-inline': inline }, containerClassName);
+
+  const computedValue = value || children;
+
+  const item = (
+    <div className={containerClasses}>
+      <Input
+        id={idToUse}
+        type={type}
+        {...props}
+        disabled={disabled}
+        value={computedValue}
+        style={{ cursor: disabled && 'not-allowed' }}
+      />
+      <Label
+        className="form-check-label"
+        check={!inline}
+        for={idToUse}
+        style={{ cursor: disabled && 'not-allowed' }}
+      >
+        {children}
+      </Label>
+    </div>
+  );
+
+  if (inline) {
+    return item;
+  }
+
+  return (
+    <FormGroup check disabled={disabled}>
+      {item}
+    </FormGroup>
+  );
 }
 
 export default FormChoice;

src/components/HasManyFields/HasManyFieldsRow.tsx

@@ -1,7 +1,7 @@
 import { Placement } from '@popperjs/core';
 import classnames from 'classnames';
-import React, { useState } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import ConfirmationButton, { ConfirmationButtonProps } from '../Button/ConfirmationButton';
 import Icon from '../Icon/Icon';
@@ -33,7 +33,7 @@ const HasManyFieldsRow = ({
   deleteProps,
   ...props
 }: HasManyFieldsRowProps) => {
-  const [id] = useState(() => getUniqueId('hmf-', 1));
+  const id = useUniqueId('hmf-', 1);
 
   const classNames = classnames('mb-4 gx-0', className);
   // The `disabled ? <Button> : <ConfirmationButton>` code works around Tooltips not show on `disabled` elements:

src/components/HelpBubble/HelpBubble.tsx

@@ -1,5 +1,5 @@
 import React, { useState, SyntheticEvent } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Popover from '../Popover/Popover';
@@ -18,7 +18,7 @@ const style = {
 };
 
 function HelpBubble(props: HelpBubbleProps) {
-  const [id] = useState(() => getUniqueId('help-bubble-'));
+  const id = useUniqueId('help-bubble-');
   const [isOpen, setIsOpen] = useState(false);
 
   const toggle = (e: SyntheticEvent) => {

src/components/List/List.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ListGroupProps } from 'reactstrap';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useMap from '../../hooks/useMap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Input from '../Input/Input';
 import Col from '../Layout/Col';
 import Row from '../Layout/Row';
@@ -90,7 +90,7 @@ function List<T extends Item>({
     clear: clearSelection,
     replace: replaceSelection,
   } = useMap(selected, selectedKeyMapper);
-  const [selectAllId] = useState(() => getUniqueId('selectall-', 1));
+  const selectAllId = useUniqueId('selectall-', 1);
   const selectAllRef = useRef<HTMLInputElement>(null);
 
   useDeepCompareEffect(() => replaceSelection(selected), [selected, replaceSelection]);

src/components/List/ListItem.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import React, { useState } from 'react';
 import { ListGroupItemProps } from 'reactstrap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Collapse from '../Collapse/Collapse';
 import Icon from '../Icon/Icon';
@@ -42,7 +42,7 @@ function ListItem<T>({
   const isExpandable = onExpand !== undefined;
   const ExpandedItem = isExpandable ? onExpand!(item) : undefined;
   const [expanded, setExpanded] = useState(defaultExpanded);
-  const [id] = useState(() => getUniqueId('listitem-', 1));
+  const id = useUniqueId('listitem-', 1);
 
   const unselectedColor = (expanded && expandedColor) || color;
 

src/components/List/components/FilterHeader.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { getUniqueId } from '../../../util/uniqueId';
+import React from 'react';
+import { useUniqueId } from '../../../util/uniqueId';
 import Input from '../../Input/Input';
 import Label from '../../Label/Label';
 
@@ -10,7 +10,7 @@ export interface FilterHeaderProps
 }
 
 const FilterHeader = ({ value, onChange, className, id, ...props }: FilterHeaderProps) => {
-  const [filterId] = useState(() => getUniqueId('filter-', 1));
+  const filterId = useUniqueId('filter-', 1);
   return (
     <>
       <Label hidden for={filterId}>

src/components/List/components/SortHeader.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { getUniqueId } from '../../../util/uniqueId';
+import React from 'react';
+import { useUniqueId } from '../../../util/uniqueId';
 import Button from '../../Button/Button';
 import Icon from '../../Icon/Icon';
 import Input from '../../Input/Input';
@@ -28,7 +28,7 @@ const SortHeader = ({
   onChangeAscending,
   onChangeProperty,
 }: SortHeaderProps) => {
-  const [sortId] = useState(() => getUniqueId('sort-', 1));
+  const sortId = useUniqueId('sort-', 1);
   return (
     <Col
       xs="12"

src/components/Table/SortableTable.js

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import React from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React, { memo } from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Label from '../Label/Label';
@@ -71,8 +71,8 @@ function defaultRenderRow(
   ];
 }
 
-function getSelectableCell(row, rowSelected, onSelect) {
-  const selectRowId = getUniqueId('select-row-', 1);
+const SelectableCell = memo(({ row, rowSelected, onSelect }) => {
+  const selectRowId = useUniqueId('select-row-', 1);
   return (
     <>
       <Label for={selectRowId} hidden>
@@ -89,7 +89,26 @@ function getSelectableCell(row, rowSelected, onSelect) {
       />
     </>
   );
-}
+});
+
+const SelectAllHeader = memo(({ allSelected, onSelectAll }) => {
+  const id = useUniqueId('select-all-', 1);
+  return (
+    <>
+      <Label for={id} hidden>
+        Select all rows
+      </Label>
+      <input
+        type="checkbox"
+        className="mx-1"
+        id={id}
+        checked={allSelected}
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => onSelectAll(e.target.checked)}
+      />
+    </>
+  );
+});
 
 function getExpandableCell(row, expanded, onExpand) {
   return (
@@ -189,26 +208,12 @@ class SortableTable extends React.Component {
     const cols = [...columns];
 
     if (selectable) {
-      const selectAllId = getUniqueId('select-all-', 1);
       cols.unshift({
         align: 'center',
         key: 'select',
-        header: (
-          <>
-            <Label for={selectAllId} hidden>
-              Select all rows
-            </Label>
-            <input
-              type="checkbox"
-              className="mx-1"
-              id={selectAllId}
-              checked={allSelected}
-              onClick={(e) => e.stopPropagation()}
-              onChange={(e) => onSelectAll(e.target.checked)}
-            />
-          </>
-        ),
-        cell: (row) => getSelectableCell(row, rowSelected, onSelect),
+        header: <SelectAllHeader allSelected={allSelected} onSelectAll={onSelectAll} />,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: (row) => <SelectableCell row={row} rowSelected={rowSelected} onSelect={onSelect} />,
         width: '2rem',
       });
     }

src/components/Tooltip/TooltipButton.tsx

@@ -1,7 +1,7 @@
 import { Placement } from '@popperjs/core';
 import classnames from 'classnames';
-import React, { FC, useState } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React, { FC } from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button, { ButtonProps } from '../Button/Button';
 import Tooltip from './Tooltip';
 
@@ -19,7 +19,7 @@ const TooltipButton: FC<TooltipButtonProps> = ({
   gearsBtnContainerClass,
   ...props
 }) => {
-  const [buttonId] = useState(() => `tooltip-button-${getUniqueId('tooltip-button-')}`);
+  const buttonId = useUniqueId('tooltip-button-');
   const tooltipId = `tooltip-for-${buttonId}`;
   const className = classnames('d-inline-block', gearsBtnContainerClass);
 

src/components/Tree/TreeItem.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
-import { getUniqueId } from '../../util/uniqueId';
+import React, { useEffect, useRef } from 'react';
+import { useUniqueId } from '../../util/uniqueId';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import Input from '../Input/Input';
@@ -36,7 +36,7 @@ function TreeItem<T>({
   ...props
 }: TreeItemProps<T>) {
   const selectAllRef = useRef<HTMLInputElement>(null);
-  const [checkboxId] = useState(() => getUniqueId('tree-item-'));
+  const checkboxId = useUniqueId('tree-item-');
   const showExpand = option.children && option.children?.length > 0;
 
   useEffect(() => {

src/components/TruncatedText/TruncatedText.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TooltipProps, UncontrolledTooltipProps } from 'reactstrap';
-import { getUniqueId } from '../../util/uniqueId';
+import { useUniqueId } from '../../util/uniqueId';
 import Tooltip from '../Tooltip/Tooltip';
 
 interface TruncatedTextProps {
@@ -20,7 +20,8 @@ const TruncatedText = ({
   placement = 'top',
   tooltipProps,
 }: TruncatedTextProps) => {
-  const [id] = useState(targetId || (() => getUniqueId('truncated-text-')));
+  const generatedId = useUniqueId('truncated-text-');
+  const id = targetId || generatedId;
   return (
     <>
       <span id={id}>

src/context.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { UniqueIdContext } from './util/uniqueId';
+
+interface GearsContextProviderProps {
+  children: React.ReactNode;
+  uniqueIdCounts: Record<string, number>;
+}
+
+export function GearsContextProvider({ children, uniqueIdCounts }: GearsContextProviderProps) {
+  return <UniqueIdContext.Provider value={uniqueIdCounts}>{children}</UniqueIdContext.Provider>;
+}

src/index.ts

@@ -93,6 +93,7 @@ export { default as CreditCardNumber } from './components/Input/CreditCardNumber
 export { default as CurrencyInput } from './components/Input/CurrencyInput';
 export { default as DateInput } from './components/Input/DateInput';
 export { default as FileInput } from './components/Input/FileInput';
+export { GearsContextProvider } from './context';
 export { default as Input } from './components/Input/Input';
 export { default as MaskedInput } from './components/Input/MaskedInput';
 export { default as MonthInput } from './components/Input/MonthInput';