Add support for overriding id (#158)

Co-authored-by: Rogin Farrer <rfarrer@wayfair.com>

.changeset/small-pianos-work.md

@@ -0,0 +1,5 @@
+---
+'react-collapsed': minor
+---
+
+Added support for overriding `id`.

.prettierignore

@@ -0,0 +1,2 @@
+dist
+node_modules

packages/react-collapsed/.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+}

packages/react-collapsed/README.md

@@ -101,6 +101,7 @@ The following are optional properties passed into `useCollapse({ })`:
 | duration                | number   | `undefined`                    | The duration of the animation in milliseconds. By default, the duration is programmatically calculated based on the height of the collapsed element |
 | onTransitionStateChange | function | no-op                          | Handler called with at each stage of the transition animation                                                                                       |
 | hasDisabledAnimation    | boolean  | false                          | If true, will disable the animation                                                                                                                 |
+| id                      | string \| number | `undefined` | Unique identifier used to for associating elements appropriately for accessibility. |
 
 ### What you get
 

packages/react-collapsed/src/index.ts

@@ -65,6 +65,10 @@ export interface UseCollapseInput {
       | 'collapseEnd'
       | 'collapsing'
   ) => void
+  /**
+   * Unique identifier used to for associating elements appropriately for accessibility.
+   */
+  id?: string | number;
 }
 
 export function useCollapse({
@@ -74,10 +78,11 @@ export function useCollapse({
   isExpanded: configIsExpanded,
   defaultExpanded = false,
   hasDisabledAnimation,
+  id,
   ...initialConfig
 }: UseCollapseInput = {}) {
   const onTransitionStateChange = useEvent(propOnTransitionStateChange)
-  const uniqueId = useId()
+  const uniqueId = useId(id ? `${id}` : undefined)
 
   const [isExpanded, setExpanded] = useControlledState(
     configIsExpanded,
@@ -220,7 +225,7 @@ export function useCollapse({
       },
       RefKey extends string | undefined = 'ref'
     >(
-      rest?: Args & {
+      args?: Args & {
         /**
          * Sets the key of the prop that the component uses for ref assignment
          * @default 'ref'
@@ -238,16 +243,16 @@ export function useCollapse({
       role?: 'button'
       tabIndex?: number
     } {
-      const { disabled, onClick, refKey } = {
+      const { disabled, onClick, refKey, ...rest } = {
         refKey: 'ref',
         onClick() {},
         disabled: false,
-        ...rest,
+        ...args,
       }
 
       const isButton = toggleEl ? toggleEl.tagName === 'BUTTON' : undefined
 
-      const theirRef: any = rest?.[refKey || 'ref']
+      const theirRef: any = args?.[refKey || 'ref']
 
       const props: any = {
         id: `react-collapsed-toggle-${uniqueId}`,
@@ -272,14 +277,15 @@ export function useCollapse({
       }
 
       if (isButton === false) {
-        return { ...props, ...fakeButtonProps }
+        return { ...props, ...fakeButtonProps, ...rest }
       } else if (isButton === true) {
-        return { ...props, ...buttonProps }
+        return { ...props, ...buttonProps, ...rest }
       } else {
         return {
           ...props,
           ...buttonProps,
           ...fakeButtonProps,
+          ...rest
         }
       }
     },
@@ -288,7 +294,7 @@ export function useCollapse({
       Args extends { style?: CSSProperties; [k: string]: unknown },
       RefKey extends string | undefined = 'ref'
     >(
-      rest?: Args & {
+      args?: Args & {
         /**
          * Sets the key of the prop that the component uses for ref assignment
          * @default 'ref'
@@ -303,13 +309,13 @@ export function useCollapse({
       role: string
       style: CSSProperties
     } {
-      const { style, refKey } = { refKey: 'ref', style: {}, ...rest }
-      const theirRef: any = rest?.[refKey || 'ref']
+      const { style, refKey } = { refKey: 'ref', style: {}, ...args }
+      const theirRef: any = args?.[refKey || 'ref']
       return {
         id: `react-collapsed-panel-${uniqueId}`,
         'aria-hidden': !isExpanded,
         role: 'region',
-        ...rest,
+        ...args,
         [refKey || 'ref']: mergeRefs(collapseElRef, theirRef),
         style: {
           boxSizing: 'border-box',

packages/react-collapsed/tests/index.test.tsx

@@ -144,3 +144,17 @@ test('permits access to the collapse ref', () => {
   const { queryByTestId } = render(<Collapse collapseProps={{ ref: cb }} />)
   expect(cb).toHaveBeenCalledWith(queryByTestId('collapse'))
 })
+
+test('id argument modifies all rendered elements', () => {
+  const {container} = render(<Collapse id="foo" />)
+  expect(container.querySelector('#react-collapsed-toggle-foo')).toBeInTheDocument()
+  expect(container.querySelector('#react-collapsed-panel-foo')).toBeInTheDocument()
+})
+
+test('id will be overridden by prop getters', () => {
+  const {container} = render(<Collapse id="foo" collapseProps={{id: 'bar'}} toggleProps={{id: 'baz'}} />)
+  expect(container.querySelector('#react-collapsed-toggle-foo')).not.toBeInTheDocument()
+  expect(container.querySelector('#react-collapsed-panel-foo')).not.toBeInTheDocument()
+  expect(container.querySelector('#baz')).toBeInTheDocument()
+  expect(container.querySelector('#bar')).toBeInTheDocument()
+})

packages/react/.storybook/main.js

@@ -1,11 +1,8 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y"
-  ]
 }

packages/react/.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+}