React 18 useId

Author: Matthew Holloway

.eslintrc.js

@@ -1,23 +1,24 @@
 module.exports = {
-    parser: "@typescript-eslint/parser",
+    parser: '@typescript-eslint/parser',
     parserOptions: {
         jsx: true,
     },
-    plugins: ["react", "@typescript-eslint", "jsx-a11y"],
+    plugins: ['react', '@typescript-eslint', 'jsx-a11y'],
     extends: [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:jsx-a11y/recommended",
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:jsx-a11y/recommended',
     ],
     settings: {
         react: {
-            pragma: "React",
-            version: "detect",
+            pragma: 'React',
+            version: 'detect',
         },
     },
     rules: {
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "react/prop-types": "off",
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'react/prop-types': 'off',
     },
 };

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-accessible-accordion",
-    "version": "4.0.0",
+    "version": "5.0.0",
     "description": "Accessible Accordion component for React",
     "main": "dist/umd/index.js",
     "module": "dist/es/index.js",
@@ -133,8 +133,8 @@
         "webpack-dev-server": "^3.2.1"
     },
     "peerDependencies": {
-        "react": "^16.3.2 || ^17.0.0",
-        "react-dom": "^16.3.3 || ^17.0.0"
+        "react": "^16.3.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.3 || ^17.0.0 || ^18.0.0"
     },
     "husky": {
         "hooks": {

src/components/Accordion.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { DivAttributes } from '../helpers/types';
 import { Provider } from './AccordionContext';
-import { UUID } from './ItemContext';
+import { ID } from './ItemContext';
 
 type AccordionProps = Pick<
     DivAttributes,
     Exclude<keyof DivAttributes, 'onChange'>
 > & {
     className?: string;
-    preExpanded?: UUID[];
+    preExpanded?: ID[];
     allowMultipleExpanded?: boolean;
     allowZeroExpanded?: boolean;
-    onChange?(args: UUID[]): void;
+    onChange?(args: ID[]): void;
 };
 
 const Accordion = ({

src/components/AccordionContext.tsx

@@ -6,31 +6,31 @@ import AccordionStore, {
     InjectedHeadingAttributes,
     InjectedPanelAttributes,
 } from '../helpers/AccordionStore';
-import { UUID } from './ItemContext';
+import { ID } from './ItemContext';
 
 export interface ProviderProps {
-    preExpanded?: UUID[];
+    preExpanded?: ID[];
     allowMultipleExpanded?: boolean;
     allowZeroExpanded?: boolean;
     children?: React.ReactNode;
-    onChange?(args: UUID[]): void;
+    onChange?(args: ID[]): void;
 }
 
 type ProviderState = AccordionStore;
 
 export interface AccordionContext {
     allowMultipleExpanded: boolean;
     allowZeroExpanded: boolean;
-    toggleExpanded(uuid: UUID): void;
-    isItemDisabled(uuid: UUID): boolean;
-    isItemExpanded(uuid: UUID): boolean;
+    toggleExpanded(uuid: ID): void;
+    isItemDisabled(uuid: ID): boolean;
+    isItemExpanded(uuid: ID): boolean;
     getPanelAttributes(
-        uuid: UUID,
+        uuid: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedPanelAttributes;
-    getHeadingAttributes(uuid: UUID): InjectedHeadingAttributes;
+    getHeadingAttributes(uuid: ID): InjectedHeadingAttributes;
     getButtonAttributes(
-        uuid: UUID,
+        uuid: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedButtonAttributes;
 }
@@ -52,7 +52,7 @@ export class Provider extends React.PureComponent<
         allowZeroExpanded: this.props.allowZeroExpanded,
     });
 
-    toggleExpanded = (key: UUID): void => {
+    toggleExpanded = (key: ID): void => {
         this.setState(
             (state: Readonly<ProviderState>) => state.toggleExpanded(key),
             () => {
@@ -63,16 +63,16 @@ export class Provider extends React.PureComponent<
         );
     };
 
-    isItemDisabled = (key: UUID): boolean => {
+    isItemDisabled = (key: ID): boolean => {
         return this.state.isItemDisabled(key);
     };
 
-    isItemExpanded = (key: UUID): boolean => {
+    isItemExpanded = (key: ID): boolean => {
         return this.state.isItemExpanded(key);
     };
 
     getPanelAttributes = (
-        key: UUID,
+        key: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedPanelAttributes => {
         return this.state.getPanelAttributes(key, dangerouslySetExpanded);
@@ -84,7 +84,7 @@ export class Provider extends React.PureComponent<
     };
 
     getButtonAttributes = (
-        key: UUID,
+        key: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedButtonAttributes => {
         return this.state.getButtonAttributes(key, dangerouslySetExpanded);

src/components/AccordionItem.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import { useState } from 'react';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
-import { assertValidHtmlId, nextUuid } from '../helpers/uuid';
+import { assertValidHtmlId, useNextId } from '../helpers/id';
 import {
     Consumer as ItemConsumer,
     ItemContext,
     Provider as ItemProvider,
-    UUID,
+    ID,
 } from './ItemContext';
 
 type Props = DivAttributes & {
-    uuid?: UUID;
+    uuid?: ID;
     activeClassName?: string;
     dangerouslySetExpanded?: boolean;
 };
@@ -23,7 +23,7 @@ const AccordionItem = ({
     activeClassName,
     ...rest
 }: Props): JSX.Element => {
-    const [instanceUuid] = useState<UUID>(nextUuid());
+    const [instanceUuid] = useState<ID>(useNextId());
     const uuid = customUuid ?? instanceUuid;
 
     const renderChildren = (itemContext: ItemContext): JSX.Element => {

src/components/AccordionItemButton.tsx

@@ -8,7 +8,7 @@ import {
 } from '../helpers/focus';
 import keycodes from '../helpers/keycodes';
 import { DivAttributes } from '../helpers/types';
-import { assertValidHtmlId } from '../helpers/uuid';
+import { assertValidHtmlId } from '../helpers/id';
 
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 

src/components/AccordionItemHeading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InjectedHeadingAttributes } from '../helpers/AccordionStore';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
-import { assertValidHtmlId } from '../helpers/uuid';
+import { assertValidHtmlId } from '../helpers/id';
 
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 

src/components/AccordionItemPanel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DivAttributes } from '../helpers/types';
-import { assertValidHtmlId } from '../helpers/uuid';
+import { assertValidHtmlId } from '../helpers/id';
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
 type Props = DivAttributes & { region?: boolean; className?: string };
@@ -18,7 +18,9 @@ const AccordionItemPanel = ({
 
         const attrs = {
             ...panelAttributes,
-            'aria-labelledby': region ? panelAttributes['aria-labelledby'] : undefined,
+            'aria-labelledby': region
+                ? panelAttributes['aria-labelledby']
+                : undefined,
         };
 
         return (
@@ -27,7 +29,7 @@ const AccordionItemPanel = ({
                 className={className}
                 {...rest}
                 {...attrs}
-                role={region ? 'region': undefined}
+                role={region ? 'region' : undefined}
             />
         );
     };

src/components/ItemContext.tsx

@@ -11,11 +11,11 @@ import {
     Consumer as AccordionContextConsumer,
 } from './AccordionContext';
 
-export type UUID = string | number;
+export type ID = string | number;
 
 type ProviderProps = {
     children?: React.ReactNode;
-    uuid: UUID;
+    uuid: ID;
     accordionContext: AccordionContext;
     dangerouslySetExpanded?: boolean;
 };
@@ -26,7 +26,7 @@ export type ProviderWrapperProps = Pick<
 >;
 
 export type ItemContext = {
-    uuid: UUID;
+    uuid: ID;
     expanded: boolean;
     disabled: boolean;
     panelAttributes: InjectedPanelAttributes;
@@ -85,7 +85,7 @@ const Provider = ({
     );
 };
 
-const ProviderWrapper: React.SFC<ProviderWrapperProps> = (
+const ProviderWrapper: React.FunctionComponent<ProviderWrapperProps> = (
     props: ProviderWrapperProps,
 ): JSX.Element => (
     <AccordionContextConsumer>

src/helpers/AccordionStore.ts

@@ -1,4 +1,4 @@
-import { UUID } from '../components/ItemContext';
+import { ID } from '../components/ItemContext';
 
 export interface InjectedPanelAttributes {
     role: string | undefined;
@@ -22,7 +22,7 @@ export interface InjectedButtonAttributes {
 }
 
 export default class AccordionStore {
-    public readonly expanded: UUID[];
+    public readonly expanded: ID[];
     public readonly allowMultipleExpanded: boolean;
     public readonly allowZeroExpanded: boolean;
 
@@ -31,7 +31,7 @@ export default class AccordionStore {
         allowMultipleExpanded = false,
         allowZeroExpanded = false,
     }: {
-        expanded?: UUID[];
+        expanded?: ID[];
         allowMultipleExpanded?: boolean;
         allowZeroExpanded?: boolean;
     }) {
@@ -40,7 +40,7 @@ export default class AccordionStore {
         this.allowZeroExpanded = allowZeroExpanded;
     }
 
-    public readonly toggleExpanded = (uuid: UUID): AccordionStore => {
+    public readonly toggleExpanded = (uuid: ID): AccordionStore => {
         if (this.isItemDisabled(uuid)) {
             return this;
         }
@@ -55,7 +55,7 @@ export default class AccordionStore {
         } else {
             return this.augment({
                 expanded: this.expanded.filter(
-                    (expandedUuid: UUID): boolean => expandedUuid !== uuid,
+                    (expandedUuid: ID): boolean => expandedUuid !== uuid,
                 ),
             });
         }
@@ -68,7 +68,7 @@ export default class AccordionStore {
      * and if the accordion does not permit the panel to be collapsed, the
      * header button element has aria-disabled set to true.”
      */
-    public readonly isItemDisabled = (uuid: UUID): boolean => {
+    public readonly isItemDisabled = (uuid: ID): boolean => {
         const isExpanded = this.isItemExpanded(uuid);
         const isOnlyOneExpanded = this.expanded.length === 1;
 
@@ -77,12 +77,12 @@ export default class AccordionStore {
         );
     };
 
-    public readonly isItemExpanded = (uuid: UUID): boolean => {
+    public readonly isItemExpanded = (uuid: ID): boolean => {
         return this.expanded.indexOf(uuid) !== -1;
     };
 
     public readonly getPanelAttributes = (
-        uuid: UUID,
+        uuid: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedPanelAttributes => {
         const expanded = dangerouslySetExpanded ?? this.isItemExpanded(uuid);
@@ -104,7 +104,7 @@ export default class AccordionStore {
     };
 
     public readonly getButtonAttributes = (
-        uuid: UUID,
+        uuid: ID,
         dangerouslySetExpanded?: boolean,
     ): InjectedButtonAttributes => {
         const expanded = dangerouslySetExpanded ?? this.isItemExpanded(uuid);
@@ -120,14 +120,13 @@ export default class AccordionStore {
         };
     };
 
-    private readonly getPanelId = (uuid: UUID): string =>
-        `accordion__panel-${uuid}`;
+    private readonly getPanelId = (id: ID): string => `accordion__panel-${id}`;
 
-    private readonly getButtonId = (uuid: UUID): string =>
-        `accordion__heading-${uuid}`;
+    private readonly getButtonId = (id: ID): string =>
+        `accordion__heading-${id}`;
 
     private readonly augment = (args: {
-        expanded?: UUID[];
+        expanded?: ID[];
         allowMultipleExpanded?: boolean;
         allowZeroExpanded?: boolean;
     }): AccordionStore => {

src/helpers/id.spec.ts

@@ -0,0 +1,35 @@
+import {
+    assertValidHtmlId,
+    useGlobalCounterId,
+    resetGlobalCounterId,
+} from './id';
+
+describe('UUID helper', () => {
+    describe('useGlobalCounterId', () => {
+        it('generates incremental ids', () => {
+            expect(useGlobalCounterId()).toBe('raa-0');
+            expect(useGlobalCounterId()).toBe('raa-1');
+        });
+    });
+
+    describe('resetGlobalCounterId', () => {
+        it('resets the id', () => {
+            resetGlobalCounterId();
+            expect(useGlobalCounterId()).toBe('raa-0');
+            resetGlobalCounterId();
+            expect(useGlobalCounterId()).toBe('raa-0');
+        });
+    });
+
+    describe('assertValidHtmlId', () => {
+        it("returns false in case there's a whitespace or an empty string", () => {
+            expect(assertValidHtmlId('a a')).toBe(false);
+            expect(assertValidHtmlId('')).toBe(false);
+        });
+
+        it('returns true on a valid id', () => {
+            expect(assertValidHtmlId('💜')).toBe(true);
+            expect(assertValidHtmlId('✅')).toBe(true);
+        });
+    });
+});