Rename onOpenChange to onValueChange and misc fixes

docs/data/components/accordion/accordion.mdx

@@ -113,13 +113,13 @@ When uncontrolled, use the `defaultValue` prop to set the initial state of the a
 
 ### Controlled
 
-When controlled, pass the `value` and `onOpenChange` props to `Accordion.Root`:
+When controlled, pass the `value` and `onValueChange` props to `Accordion.Root`:
 
 ```tsx
 const [value, setValue] = React.useState(['a']);
 
 return (
-  <Accordion.Root value={value} onOpenChange={setValue}>
+  <Accordion.Root value={value} onValueChange={setValue}>
     <Accordion.Item value="a">
       <Accordion.Header>
         <Accordion.Trigger>Toggle one</Accordion.Trigger>
@@ -153,14 +153,14 @@ Use controlled mode to always keep one `Item` open:
 ```tsx
 const [value, setValue] = React.useState([0]);
 
-const handleOpenChange = (newValue) => {
+const handleValueChange = (newValue) => {
   if (newValue.length > 0) {
     setValue(newValue);
   }
 };
 
 return (
-  <Accordion.Root value={value} onOpenChange={handleOpenChange}>
+  <Accordion.Root value={value} onValueChange={handleValueChange}>
     {/* subcomponents */}
   </Accordion.Root>
 );
@@ -295,7 +295,7 @@ When using external libraries for animation, for example `framer-motion`, be awa
 function App() {
   const [value, setValue] = useState([0]);
   return (
-    <Accordion.Root value={value} onOpenChange={setValue}>
+    <Accordion.Root value={value} onValueChange={setValue}>
       <Accordion.Item>
         <Accordion.Header>
           <Accordion.Trigger>Toggle</Accordion.Trigger>

packages/mui-base/src/Accordion/Header/AccordionHeader.test.tsx

@@ -13,7 +13,7 @@ const accordionRootContextValue: Accordion.Root.Context = {
   animated: false,
   direction: 'ltr',
   disabled: false,
-  handleOpenChange() {},
+  handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
   ownerState: {

packages/mui-base/src/Accordion/Item/AccordionItem.test.tsx

@@ -9,7 +9,7 @@ const accordionRootContextValue: Accordion.Root.Context = {
   animated: false,
   direction: 'ltr',
   disabled: false,
-  handleOpenChange: NOOP,
+  handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
   ownerState: {

packages/mui-base/src/Accordion/Item/AccordionItem.tsx

@@ -45,7 +45,7 @@ const AccordionItem = React.forwardRef(function AccordionItem(
   const {
     animated,
     disabled: contextDisabled,
-    handleOpenChange,
+    handleValueChange,
     ownerState: rootOwnerState,
     value: openValues,
   } = useAccordionRootContext();
@@ -69,7 +69,7 @@ const AccordionItem = React.forwardRef(function AccordionItem(
   }, [openValues, value]);
 
   const onOpenChange = useEventCallback((nextOpen: boolean) => {
-    handleOpenChange(value, nextOpen);
+    handleValueChange(value, nextOpen);
     onOpenChangeProp?.(nextOpen);
   });
 

packages/mui-base/src/Accordion/Panel/AccordionPanel.test.tsx

@@ -13,7 +13,7 @@ const accordionRootContextValue: Accordion.Root.Context = {
   animated: false,
   direction: 'ltr',
   disabled: false,
-  handleOpenChange: NOOP,
+  handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
   ownerState: {

packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx

@@ -29,6 +29,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
     hiddenUntilFound: hiddenUntilFoundProp,
     id: idProp,
     render,
+    style: styleProp,
     ...otherProps
   } = props;
 
@@ -63,6 +64,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
       style: {
         '--accordion-content-height': height ? `${height}px` : undefined,
         '--accordion-content-width': width ? `${width}px` : undefined,
+        ...styleProp,
       },
     },
     customStyleHookMapping: accordionStyleHookMapping,
@@ -106,4 +108,8 @@ AccordionPanel.propTypes /* remove-proptypes */ = {
    * A function to customize rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
 } as any;

packages/mui-base/src/Accordion/Root/AccordionRoot.test.tsx

@@ -710,12 +710,12 @@ describe('<Accordion.Root />', () => {
     });
   });
 
-  describe('prop: onOpenChange', () => {
+  describe('prop: onValueChange', () => {
     it('default item value', async () => {
-      const onOpenChange = spy();
+      const onValueChange = spy();
 
       const { getByTestId, user } = await render(
-        <Accordion.Root data-testid="root" animated={false} onOpenChange={onOpenChange}>
+        <Accordion.Root data-testid="root" animated={false} onValueChange={onValueChange}>
           <Accordion.Item>
             <Accordion.Header>
               <Accordion.Trigger data-testid="trigger1">Trigger 1</Accordion.Trigger>
@@ -734,24 +734,24 @@ describe('<Accordion.Root />', () => {
       const trigger1 = getByTestId('trigger1');
       const trigger2 = getByTestId('trigger2');
 
-      expect(onOpenChange.callCount).to.equal(0);
+      expect(onValueChange.callCount).to.equal(0);
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
 
-      expect(onOpenChange.callCount).to.equal(1);
-      expect(onOpenChange.args[0][0]).to.deep.equal([0]);
+      expect(onValueChange.callCount).to.equal(1);
+      expect(onValueChange.args[0][0]).to.deep.equal([0]);
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
 
-      expect(onOpenChange.callCount).to.equal(2);
-      expect(onOpenChange.args[1][0]).to.deep.equal([0, 1]);
+      expect(onValueChange.callCount).to.equal(2);
+      expect(onValueChange.args[1][0]).to.deep.equal([0, 1]);
     });
 
     it('custom item value', async () => {
-      const onOpenChange = spy();
+      const onValueChange = spy();
 
       const { getByTestId, user } = await render(
-        <Accordion.Root data-testid="root" animated={false} onOpenChange={onOpenChange}>
+        <Accordion.Root data-testid="root" animated={false} onValueChange={onValueChange}>
           <Accordion.Item value="one">
             <Accordion.Header>
               <Accordion.Trigger data-testid="trigger1">Trigger 1</Accordion.Trigger>
@@ -770,27 +770,27 @@ describe('<Accordion.Root />', () => {
       const trigger1 = getByTestId('trigger1');
       const trigger2 = getByTestId('trigger2');
 
-      expect(onOpenChange.callCount).to.equal(0);
+      expect(onValueChange.callCount).to.equal(0);
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
 
-      expect(onOpenChange.callCount).to.equal(1);
-      expect(onOpenChange.args[0][0]).to.deep.equal(['two']);
+      expect(onValueChange.callCount).to.equal(1);
+      expect(onValueChange.args[0][0]).to.deep.equal(['two']);
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
 
-      expect(onOpenChange.callCount).to.equal(2);
-      expect(onOpenChange.args[1][0]).to.deep.equal(['two', 'one']);
+      expect(onValueChange.callCount).to.equal(2);
+      expect(onValueChange.args[1][0]).to.deep.equal(['two', 'one']);
     });
 
     it('openMultiple is false', async () => {
-      const onOpenChange = spy();
+      const onValueChange = spy();
 
       const { getByTestId, user } = await render(
         <Accordion.Root
           data-testid="root"
           animated={false}
-          onOpenChange={onOpenChange}
+          onValueChange={onValueChange}
           openMultiple={false}
         >
           <Accordion.Item value="one">
@@ -811,17 +811,17 @@ describe('<Accordion.Root />', () => {
       const trigger1 = getByTestId('trigger1');
       const trigger2 = getByTestId('trigger2');
 
-      expect(onOpenChange.callCount).to.equal(0);
+      expect(onValueChange.callCount).to.equal(0);
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
 
-      expect(onOpenChange.callCount).to.equal(1);
-      expect(onOpenChange.args[0][0]).to.deep.equal(['one']);
+      expect(onValueChange.callCount).to.equal(1);
+      expect(onValueChange.args[0][0]).to.deep.equal(['one']);
 
       await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
 
-      expect(onOpenChange.callCount).to.equal(2);
-      expect(onOpenChange.args[1][0]).to.deep.equal(['two']);
+      expect(onValueChange.callCount).to.equal(2);
+      expect(onValueChange.args[1][0]).to.deep.equal(['two']);
     });
   });
 });

packages/mui-base/src/Accordion/Root/AccordionRoot.tsx

@@ -28,7 +28,7 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
     disabled = false,
     hiddenUntilFound = false,
     loop,
-    onOpenChange,
+    onValueChange,
     openMultiple = true,
     orientation,
     value,
@@ -54,7 +54,7 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
     defaultValue,
     loop,
     orientation,
-    onOpenChange,
+    onValueChange,
     openMultiple,
     value,
   });
@@ -168,7 +168,7 @@ AccordionRoot.propTypes /* remove-proptypes */ = {
    * Callback fired when an Accordion section is opened or closed.
    * The value representing the involved section is provided as an argument.
    */
-  onOpenChange: PropTypes.func,
+  onValueChange: PropTypes.func,
   /**
    * Whether multiple Accordion sections can be opened at the same time
    * @default true

packages/mui-base/src/Accordion/Root/useAccordionRoot.ts

@@ -43,7 +43,7 @@ export function useAccordionRoot(
     disabled = false,
     direction = 'ltr',
     loop = true,
-    onOpenChange = NOOP,
+    onValueChange = NOOP,
     orientation = 'vertical',
     openMultiple = true,
     value: valueParam,
@@ -59,24 +59,24 @@ export function useAccordionRoot(
     state: 'value',
   });
 
-  const handleOpenChange = React.useCallback(
+  const handleValueChange = React.useCallback(
     (newValue: number | string, nextOpen: boolean) => {
       if (!openMultiple) {
         const nextValue = value[0] === newValue ? [] : [newValue];
         setValue(nextValue);
-        onOpenChange(nextValue);
+        onValueChange(nextValue);
       } else if (nextOpen) {
         const nextOpenValues = value.slice();
         nextOpenValues.push(newValue);
         setValue(nextOpenValues);
-        onOpenChange(nextOpenValues);
+        onValueChange(nextOpenValues);
       } else {
         const nextOpenValues = value.filter((v) => v !== newValue);
         setValue(nextOpenValues);
-        onOpenChange(nextOpenValues);
+        onValueChange(nextOpenValues);
       }
     },
-    [onOpenChange, openMultiple, setValue, value],
+    [onValueChange, openMultiple, setValue, value],
   );
 
   const getRootProps = React.useCallback(
@@ -173,7 +173,7 @@ export function useAccordionRoot(
       animated,
       direction,
       disabled,
-      handleOpenChange,
+      handleValueChange,
       orientation,
       value,
     }),
@@ -183,7 +183,7 @@ export function useAccordionRoot(
       animated,
       direction,
       disabled,
-      handleOpenChange,
+      handleValueChange,
       orientation,
       value,
     ],
@@ -233,7 +233,7 @@ export namespace useAccordionRoot {
      * Callback fired when an Accordion section is opened or closed.
      * The value representing the involved section is provided as an argument.
      */
-    onOpenChange?: (value: Value) => void;
+    onValueChange?: (value: Value) => void;
     /**
      * Whether multiple Accordion sections can be opened at the same time
      * @default true
@@ -256,7 +256,7 @@ export namespace useAccordionRoot {
      * The disabled state of the Accordion
      */
     disabled: boolean;
-    handleOpenChange: (value: number | string, nextOpen: boolean) => void;
+    handleValueChange: (value: number | string, nextOpen: boolean) => void;
     orientation: Orientation;
     /**
      * The open state of the Accordion represented by an array of the values

packages/mui-base/src/Accordion/Trigger/AccordionTrigger.test.tsx

@@ -13,7 +13,7 @@ const accordionRootContextValue: Accordion.Root.Context = {
   animated: false,
   direction: 'ltr',
   disabled: false,
-  handleOpenChange: NOOP,
+  handleValueChange: NOOP,
   hiddenUntilFound: false,
   orientation: 'vertical',
   ownerState: {

packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts

@@ -19,7 +19,7 @@ export function useCollapsibleTrigger(
 ): useCollapsibleTrigger.ReturnValue {
   const { contentId, disabled, id, open, rootRef: externalRef, setOpen } = parameters;
 
-  const { getRootProps: getButtonProps, rootRef: buttonRef } = useButton({
+  const { getButtonProps, buttonRef } = useButton({
     disabled,
     focusableWhenDisabled: true,
     type: 'button',