diff --git a/src/components/AccordionItem.spec.tsx b/src/components/AccordionItem.spec.tsx
index 30eb3e4..49f0099 100644
--- a/src/components/AccordionItem.spec.tsx
+++ b/src/components/AccordionItem.spec.tsx
@@ -1,7 +1,8 @@
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, fireEvent } from '@testing-library/react';
import * as React from 'react';
import { default as Accordion } from './Accordion';
import AccordionItem from './AccordionItem';
+import AccordionItemButton from './AccordionItemButton';
enum UUIDS {
FOO = 'FOO',
@@ -74,4 +75,29 @@ describe('AccordionItem', () => {
expect(getByText('Hello World')).toBeTruthy();
});
});
+
+ describe('uuid prop', () => {
+ it('keeps the uuid as 0 even though its falsy', () => {
+ const testId = 'el-with-zero-uuid';
+ const zero = 0;
+ let selected: (string | number)[] = [];
+ const { getByTestId } = render(
+ {
+ selected = latestSelected;
+ }}
+ >
+
+
+ Click me
+
+
+ ,
+ );
+
+ fireEvent.click(getByTestId(testId));
+
+ expect(selected).toEqual([zero]);
+ });
+ });
});
diff --git a/src/components/AccordionItem.tsx b/src/components/AccordionItem.tsx
index 35ad7df..3f593a2 100644
--- a/src/components/AccordionItem.tsx
+++ b/src/components/AccordionItem.tsx
@@ -24,7 +24,7 @@ const AccordionItem = ({
...rest
}: Props): JSX.Element => {
const [instanceUuid] = useState(nextUuid());
- const uuid = customUuid || instanceUuid;
+ const uuid = customUuid ?? instanceUuid;
const renderChildren = (itemContext: ItemContext): JSX.Element => {
const { expanded } = itemContext;
@@ -39,7 +39,7 @@ const AccordionItem = ({
);
};
- assertValidHtmlId(uuid);
+ assertValidHtmlId(uuid.toString());
if (rest.id) {
assertValidHtmlId(rest.id);
}
diff --git a/src/components/ItemContext.tsx b/src/components/ItemContext.tsx
index 0e109db..42d9379 100644
--- a/src/components/ItemContext.tsx
+++ b/src/components/ItemContext.tsx
@@ -11,7 +11,7 @@ import {
Consumer as AccordionContextConsumer,
} from './AccordionContext';
-export type UUID = string;
+export type UUID = string | number;
type ProviderProps = {
children?: React.ReactNode;