fix(Accordion): deprecate (rename) expandBehaviour in favor of expandBehavior

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v12-info.mdx

@@ -0,0 +1,31 @@
+---
+draft: true
+---
+
+# v12
+
+- [v12](#v12)
+  - [Migration](#migration)
+  - [Install](#install)
+  - [Component changes](#component-changes)
+    - [Accordion](#accordion)
+
+## Migration
+
+v12 of @dnb/eufemia contains _breaking changes_. As a migration process, you can simply search and replace:
+
+## Install
+
+To upgrade to @dnb/eufemia v12 with NPM, use:
+
+```bash
+$ npm i @dnb/eufemia@12
+# or
+$ yarn add @dnb/eufemia@12
+```
+
+## Component changes
+
+### [Accordion](/uilib/components/accordion)
+
+1. Find the `expandBehaviour` property and replace it with `expandBehavior`.

packages/dnb-eufemia/src/components/accordion/Accordion.tsx

@@ -445,7 +445,15 @@ export type GroupProps = AccordionProps & {
    * Determines how many accordions can be expanded at once.
    * Default: `single`
    */
+  /**
+   * @deprecated – Replaced with expandBehavior, expandBehaviour can be removed in v11
+   */
   expandBehaviour?: 'single' | 'multiple'
+  /**
+   * Determines how many accordions can be expanded at once.
+   * Default: `single`
+   */
+  expandBehavior?: 'single' | 'multiple'
   /**
    * ref handle to collapse all expanded accordions. Send in a ref and use `.current()` to collapse all accordions.
    *
@@ -455,7 +463,11 @@ export type GroupProps = AccordionProps & {
   collapseAllHandleRef?: React.MutableRefObject<() => void>
 }
 
-const Group = ({ expandBehaviour = 'single', ...props }: GroupProps) => {
+const Group = ({
+  expandBehaviour = 'single',
+  expandBehavior = 'single',
+  ...props
+}: GroupProps) => {
   if (props.remember_state && !props.id) {
     rememberWarning('accordion group')
   }
@@ -524,6 +536,7 @@ const Group = ({ expandBehaviour = 'single', ...props }: GroupProps) => {
       {...props}
       group={group}
       expandBehaviour={expandBehaviour}
+      expandBehavior={expandBehavior}
       expanded_id={expandedId || props.expanded_id}
     />
   )

packages/dnb-eufemia/src/components/accordion/AccordionContext.ts

@@ -11,7 +11,11 @@ import { AccordionGroupProps } from './AccordionGroup'
 export type AccordionContextProps = AccordionProps &
   SkeletonContextProps & {
     allow_close_all?: boolean
+    /**
+     * @deprecated – Replaced with expandBehavior, expandBehaviour can be removed in v11
+     */
     expandBehaviour: AccordionGroupProps['expandBehaviour']
+    expandBehavior: AccordionGroupProps['expandBehavior']
     callOnChange?: (parameters: {
       id: string
       group: string

packages/dnb-eufemia/src/components/accordion/AccordionDocs.ts

@@ -134,9 +134,13 @@ export const AccordionProviderGroupProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
-
   expandBehaviour: {
-    doc: 'Determines how many accordions can be expanded at once. Defaults to `single`',
+    doc: 'Determines how many accordions can be expanded at once. Defaults to `single`.',
+    type: ['single', 'multiple'],
+    status: 'deprecated',
+  },
+  expandBehavior: {
+    doc: 'Determines how many accordions can be expanded at once. Defaults to `single`.',
     type: ['single', 'multiple'],
     status: 'optional',
   },

packages/dnb-eufemia/src/components/accordion/AccordionGroup.tsx

@@ -72,6 +72,7 @@ const AccordionGroup = (props: AccordionGroupProps) => {
     children, // eslint-disable-line
     collapseAllHandleRef,
     expandBehaviour,
+    expandBehavior,
 
     ...restOfExtendedProps
   } = extendedProps
@@ -112,7 +113,8 @@ const AccordionGroup = (props: AccordionGroupProps) => {
     onChange: onChangeHandler,
     collapseAllHandleRef,
     collapseAccordionCallbacks,
-    expandBehaviour,
+    expandBehaviour, // Deprecated – expandBehaviour is replaced with expandBehavior - can be removed in v11
+    expandBehavior,
   }
 
   return (

packages/dnb-eufemia/src/components/accordion/AccordionProviderContext.ts

@@ -17,7 +17,11 @@ type AccordionGroupContextProps = {
   onInit?: (...args: any[]) => any
   collapseAccordionCallbacks?: React.MutableRefObject<(() => void)[]>
   collapseAllHandleRef?: React.MutableRefObject<() => void>
+  /**
+   * @deprecated – Replaced with expandBehavior, expandBehaviour can be removed in v11
+   */
   expandBehaviour?: AccordionGroupProps['expandBehaviour']
+  expandBehavior?: AccordionGroupProps['expandBehavior']
 }
 
 const AccordionGroupContext =

packages/dnb-eufemia/src/components/accordion/AccordionStore.ts

@@ -15,7 +15,11 @@ export class AccordionStore {
   }
   onChange({ id }: { id: string }) {
     this._instances.forEach((inst) => {
-      if (inst.context.expandBehaviour === 'single' && inst._id !== id) {
+      // Deprecated – expandBehaviour is replaced with expandBehavior - can be removed in v11
+      const closeAccordion =
+        inst.context.expandBehaviour === 'single' &&
+        inst.context.expandBehavior === 'single'
+      if (closeAccordion && inst._id !== id) {
         inst.close()
       }
     })

packages/dnb-eufemia/src/components/accordion/__tests__/Accordion.test.tsx

@@ -467,6 +467,7 @@
     ).toBe('transition-duration: 1ms; min-height: 6rem;')
   })
 
+  // Deprecated – expandBehaviour is replaced with expandBehavior - can be removed in v11
   it('should allow all accordions inside a group to be expanded at the same time', async () => {
     render(
       <Accordion.Group expandBehaviour="multiple">
@@ -518,6 +519,58 @@
     expect(second).toHaveAttribute('aria-expanded', 'true')
     expect(third).toHaveAttribute('aria-expanded', 'true')
   })
+
+  it('should allow all accordions inside a group to be expanded at the same time', async () => {
+    render(
+      <Accordion.Group expandBehavior="multiple">
+        <Accordion>
+          <Accordion.Header>Accordion title 1</Accordion.Header>
+          <Accordion.Content>
+            Sociis sapien sociosqu vel sollicitudin accumsan laoreet
+            gravida himenaeos nostra mollis volutpat bibendum convallis cum
+            condimentum dictumst blandit rutrum vehicula
+          </Accordion.Content>
+        </Accordion>
+        <Accordion>
+          <Accordion.Header>Accordion title 2</Accordion.Header>
+          <Accordion.Content>
+            Nec sit mattis natoque interdum sagittis cubilia nibh nullam
+            etiam
+          </Accordion.Content>
+        </Accordion>
+        <Accordion>
+          <Accordion.Header>Accordion title 3</Accordion.Header>
+          <Accordion.Content>
+            Nec sit mattis natoque interdum sagittis cubilia nibh nullam
+            etiam
+          </Accordion.Content>
+        </Accordion>
+      </Accordion.Group>
+    )
+
+    const [first, second, third] = Array.from(
+      document.querySelectorAll('.dnb-accordion__header')
+    )
+
+    expect(first).toHaveAttribute('aria-expanded', 'false')
+    expect(second).toHaveAttribute('aria-expanded', 'false')
+    expect(third).toHaveAttribute('aria-expanded', 'false')
+
+    await userEvent.click(first)
+    expect(first).toHaveAttribute('aria-expanded', 'true')
+    expect(second).toHaveAttribute('aria-expanded', 'false')
+    expect(third).toHaveAttribute('aria-expanded', 'false')
+
+    await userEvent.click(second)
+    expect(first).toHaveAttribute('aria-expanded', 'true')
+    expect(second).toHaveAttribute('aria-expanded', 'true')
+    expect(third).toHaveAttribute('aria-expanded', 'false')
+
+    await userEvent.click(third)
+    expect(first).toHaveAttribute('aria-expanded', 'true')
+    expect(second).toHaveAttribute('aria-expanded', 'true')
+    expect(third).toHaveAttribute('aria-expanded', 'true')
+  })
 })
 
 describe('Accordion scss', () => {