[accordion][toggle group] Unify multiple prop name to multiple

docs/reference/generated/accordion-root.json

@@ -23,7 +23,7 @@
       "description": "Allows the browser’s built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM.",
       "detailedType": "boolean | undefined"
     },
-    "openMultiple": {
+    "multiple": {
       "type": "boolean",
       "default": "true",
       "description": "Whether multiple items can be open at the same time.",

docs/reference/generated/toggle-group.json

@@ -17,7 +17,7 @@
       "description": "Callback fired when the pressed states of the toggle group changes.",
       "detailedType": "| ((\n    groupValue: any[],\n    eventDetails: Toggle.Group.ChangeEventDetails,\n  ) => void)\n| undefined"
     },
-    "toggleMultiple": {
+    "multiple": {
       "type": "boolean",
       "default": "false",
       "description": "When `false` only one item in the group can be pressed. If any item in\nthe group becomes pressed, the others will become unpressed.\nWhen `true` multiple items can be pressed.",

docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap

@@ -262,7 +262,7 @@ Renders a \`<div>\` element.
 | value            | \`any[]\`                                                                             | -            | The controlled value of the item(s) that should be expanded.To render an uncontrolled accordion, use the \`defaultValue\` prop instead.                                                                      |
 | onValueChange    | \`((value: any[], eventDetails: Accordion.Root.ChangeEventDetails) => void)\`         | -            | Event handler called when an accordion item is expanded or collapsed.&#xA;Provides the new value as an argument.                                                                                           |
 | hiddenUntilFound | \`boolean\`                                                                           | \`false\`      | Allows the browser’s built-in page search to find and expand the panel contents.Overrides the \`keepMounted\` prop and uses \`hidden="until-found"\`&#xA;to hide the element without removing it from the DOM. |
-| openMultiple     | \`boolean\`                                                                           | \`true\`       | Whether multiple items can be open at the same time.                                                                                                                                                       |
+| multiple         | \`boolean\`                                                                           | \`true\`       | Whether multiple items can be open at the same time.                                                                                                                                                       |
 | disabled         | \`boolean\`                                                                           | \`false\`      | Whether the component should ignore user interaction.                                                                                                                                                      |
 | loop             | \`boolean\`                                                                           | \`true\`       | Whether to loop keyboard focus back to the first item&#xA;when the end of the list is reached while using the arrow keys.                                                                                  |
 | orientation      | \`Orientation\`                                                                       | \`'vertical'\` | The visual orientation of the accordion.&#xA;Controls whether roving focus uses left/right or up/down arrow keys.                                                                                          |

docs/src/app/(private)/experiments/accordion/animations.tsx

@@ -10,24 +10,18 @@ import {
 interface Settings extends Record<string, boolean> {}
 
 export const settingsMetadata: SettingsMetadata<Settings> = {
-  openMultiple: {
+  multiple: {
     type: 'boolean',
-    label: 'open multiple',
+    label: 'Allow multiple open',
     default: true,
   },
 };
 
 // the `value` prop is set manually on Accordion.Items to ensure animations are
 // cancelled when they are initially open
-function ExampleAccordion({
-  keepMounted,
-  openMultiple,
-}: {
-  keepMounted: boolean;
-  openMultiple: boolean;
-}) {
+function ExampleAccordion({ keepMounted, multiple }: { keepMounted: boolean; multiple: boolean }) {
   return (
-    <Accordion.Root className={styles.Accordion} defaultValue={[0]} openMultiple={openMultiple}>
+    <Accordion.Root className={styles.Accordion} defaultValue={[0]} multiple={multiple}>
       <Accordion.Item className={styles.Item} value={0}>
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
@@ -75,18 +69,18 @@ function ExampleAccordion({
 
 export default function CssAnimations() {
   const { settings } = useExperimentSettings<Settings>();
-  const openMultiple = settings.openMultiple;
+  const multiple = settings.multiple;
   return (
     <div className={styles.grid}>
       <div className={styles.wrapper}>
         <pre>keepMounted: true</pre>
-        <ExampleAccordion keepMounted openMultiple={openMultiple} />
+        <ExampleAccordion keepMounted multiple={multiple} />
         <small>———</small>
       </div>
 
       <div className={styles.wrapper}>
         <pre>keepMounted: false</pre>
-        <ExampleAccordion keepMounted={false} openMultiple={openMultiple} />
+        <ExampleAccordion keepMounted={false} multiple={multiple} />
         <small>———</small>
       </div>
     </div>

docs/src/app/(private)/experiments/accordion/horizontal.tsx

@@ -20,7 +20,7 @@ export default function App() {
         <Accordion.Root
           className={styles.Root}
           aria-label="Uncontrolled Horizontal Accordion"
-          openMultiple={false}
+          multiple={false}
         >
           {['one', 'two', 'three'].map((value) => (
             <Accordion.Item className={styles.Item} key={value}>
@@ -62,7 +62,7 @@ export default function App() {
           <Accordion.Root
             className={styles.Root}
             aria-label="Controlled Horizontal RTL Accordion"
-            openMultiple={false}
+            multiple={false}
             orientation="horizontal"
             value={val}
             onValueChange={(newValue: Accordion.Root.Props['value']) => {

docs/src/app/(private)/experiments/accordion/transitions.tsx

@@ -10,24 +10,18 @@ import {
 interface Settings extends Record<string, boolean> {}
 
 export const settingsMetadata: SettingsMetadata<Settings> = {
-  openMultiple: {
+  multiple: {
     type: 'boolean',
-    label: 'open multiple',
+    label: 'Allow multiple open',
     default: true,
   },
 };
 
 // the `value` prop is set manually on Accordion.Items to ensure transitions are
 // cancelled when they are initially open
-function ExampleAccordion({
-  keepMounted,
-  openMultiple,
-}: {
-  keepMounted: boolean;
-  openMultiple: boolean;
-}) {
+function ExampleAccordion({ keepMounted, multiple }: { keepMounted: boolean; multiple: boolean }) {
   return (
-    <Accordion.Root className={styles.Accordion} defaultValue={[0]} openMultiple={openMultiple}>
+    <Accordion.Root className={styles.Accordion} defaultValue={[0]} multiple={multiple}>
       <Accordion.Item className={styles.Item} value={0}>
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
@@ -75,18 +69,18 @@ function ExampleAccordion({
 
 export default function CssTransitions() {
   const { settings } = useExperimentSettings<Settings>();
-  const openMultiple = settings.openMultiple;
+  const multiple = settings.multiple;
   return (
     <div className={styles.grid}>
       <div className={styles.wrapper}>
         <pre>keepMounted: true</pre>
-        <ExampleAccordion keepMounted openMultiple={openMultiple} />
+        <ExampleAccordion keepMounted multiple={multiple} />
         <small>———</small>
       </div>
 
       <div className={styles.wrapper}>
         <pre>keepMounted: false</pre>
-        <ExampleAccordion keepMounted={false} openMultiple={openMultiple} />
+        <ExampleAccordion keepMounted={false} multiple={multiple} />
         <small>———</small>
       </div>
     </div>

docs/src/app/(private)/experiments/toggle-group.tsx

@@ -39,7 +39,7 @@ export default function ToggleGroupDemo() {
       <div dir="rtl">
         <div>
           <div>
-            <ToggleGroup toggleMultiple aria-label="Text formatting" className={classes.group}>
+            <ToggleGroup multiple aria-label="Text formatting" className={classes.group}>
               <Toggle value="bold" aria-label="Toggle bold" className={classes.button}>
                 <BoldIcon />
               </Toggle>

docs/src/app/(private)/experiments/toolbar/text-editor.tsx

@@ -245,7 +245,7 @@ export default function App() {
             <Toolbar.Separator className={styles.toolbar.Separator} />
 
             <ToggleGroup
-              toggleMultiple
+              multiple
               defaultValue={[]}
               className={styles.toolbar.ToggleGroup}
               disabled={settings.toolbarDisabled}

packages/react/src/accordion/root/AccordionRoot.test.tsx

@@ -500,7 +500,7 @@ describe('<Accordion.Root />', () => {
     });
   });
 
-  describe.skipIf(isJSDOM)('prop: openMultiple', () => {
+  describe.skipIf(isJSDOM)('prop: multiple', () => {
     it('multiple items can be open by default', async () => {
       const { getAllByRole, queryByText, user } = await render(
         <Accordion.Root>
@@ -537,7 +537,7 @@ describe('<Accordion.Root />', () => {
 
     it('when false only one item can be open', async () => {
       const { getAllByRole, queryByText, user } = await render(
-        <Accordion.Root openMultiple={false}>
+        <Accordion.Root multiple={false}>
           <Accordion.Item>
             <Accordion.Header>
               <Accordion.Trigger>Trigger 1</Accordion.Trigger>
@@ -723,11 +723,11 @@ describe('<Accordion.Root />', () => {
       expect(onValueChange.args[1][0]).to.deep.equal(['two', 'one']);
     });
 
-    it('openMultiple is false', async () => {
+    it('`multiple` is false', async () => {
       const onValueChange = spy();
 
       const { getAllByRole, user } = await render(
-        <Accordion.Root onValueChange={onValueChange} openMultiple={false}>
+        <Accordion.Root onValueChange={onValueChange} multiple={false}>
           <Accordion.Item value="one">
             <Accordion.Header>
               <Accordion.Trigger>Trigger 1</Accordion.Trigger>

packages/react/src/accordion/root/AccordionRoot.tsx

@@ -36,7 +36,7 @@ export const AccordionRoot = React.forwardRef(function AccordionRoot(
     keepMounted: keepMountedProp,
     loop = true,
     onValueChange: onValueChangeProp,
-    openMultiple = true,
+    multiple = true,
     orientation = 'vertical',
     value: valueProp,
     defaultValue: defaultValueProp,
@@ -80,7 +80,7 @@ export const AccordionRoot = React.forwardRef(function AccordionRoot(
   const handleValueChange = React.useCallback(
     (newValue: number | string, nextOpen: boolean) => {
       const details = createBaseUIEventDetails('none');
-      if (!openMultiple) {
+      if (!multiple) {
         const nextValue = value[0] === newValue ? [] : [newValue];
         onValueChange(nextValue, details);
         if (details.isCanceled) {
@@ -104,7 +104,7 @@ export const AccordionRoot = React.forwardRef(function AccordionRoot(
         setValue(nextOpenValues);
       }
     },
-    [onValueChange, openMultiple, setValue, value],
+    [onValueChange, multiple, setValue, value],
   );
 
   const state: AccordionRoot.State = React.useMemo(
@@ -221,7 +221,7 @@ export namespace AccordionRoot {
      * Whether multiple items can be open at the same time.
      * @default true
      */
-    openMultiple?: boolean;
+    multiple?: boolean;
     /**
      * The visual orientation of the accordion.
      * Controls whether roving focus uses left/right or up/down arrow keys.

packages/react/src/toggle-group/ToggleGroup.test.tsx

@@ -175,10 +175,10 @@ describe('<ToggleGroup />', () => {
     });
   });
 
-  describe('prop: toggleMultiple', () => {
+  describe('prop: multiple', () => {
     it('multiple items can be pressed when true', async () => {
       const { getAllByRole, user } = await render(
-        <ToggleGroup toggleMultiple defaultValue={['one']}>
+        <ToggleGroup multiple defaultValue={['one']}>
           <Toggle value="one" />
           <Toggle value="two" />
         </ToggleGroup>,
@@ -197,7 +197,7 @@ describe('<ToggleGroup />', () => {
 
     it('only one item can be pressed when false', async () => {
       const { getAllByRole, user } = await render(
-        <ToggleGroup toggleMultiple={false} defaultValue={['one']}>
+        <ToggleGroup multiple={false} defaultValue={['one']}>
           <Toggle value="one" />
           <Toggle value="two" />
         </ToggleGroup>,

packages/react/src/toggle-group/ToggleGroup.tsx

@@ -34,7 +34,7 @@ export const ToggleGroup = React.forwardRef(function ToggleGroup(
     loop = true,
     onValueChange,
     orientation = 'horizontal',
-    toggleMultiple = false,
+    multiple = false,
     value: valueProp,
     className,
     render,
@@ -62,7 +62,7 @@ export const ToggleGroup = React.forwardRef(function ToggleGroup(
 
   const setGroupValue = useEventCallback((newValue: string, nextPressed: boolean, event: Event) => {
     let newGroupValue: any[] | undefined;
-    if (toggleMultiple) {
+    if (multiple) {
       newGroupValue = groupValue.slice();
       if (nextPressed) {
         newGroupValue.push(newValue);
@@ -86,8 +86,8 @@ export const ToggleGroup = React.forwardRef(function ToggleGroup(
   });
 
   const state: ToggleGroup.State = React.useMemo(
-    () => ({ disabled, multiple: toggleMultiple, orientation }),
-    [disabled, orientation, toggleMultiple],
+    () => ({ disabled, multiple, orientation }),
+    [disabled, orientation, multiple],
   );
 
   const contextValue: ToggleGroupContext = React.useMemo(
@@ -179,7 +179,7 @@ export namespace ToggleGroup {
      * When `true` multiple items can be pressed.
      * @default false
      */
-    toggleMultiple?: boolean;
+    multiple?: boolean;
   }
 
   export type ChangeEventReason = 'none';