[collapsible] Fix types and vitest warnings (#772)

Author: mj12albert

docs/src/app/experiments/accordion-horizontal.tsx

@@ -46,8 +46,8 @@ export default function App() {
         orientation="horizontal"
         direction="rtl"
         value={val}
-        onValueChange={(newValue: Accordion.Root.Props['Value']) => {
-          if (newValue.length > 0) {
+        onValueChange={(newValue: Accordion.Root.Props['value']) => {
+          if (Array.isArray(newValue) && newValue.length > 0) {
             setVal(newValue);
           }
         }}

docs/src/app/experiments/accordion.tsx

@@ -5,7 +5,7 @@ import { Accordion } from '@base_ui/react/Accordion';
 
 export default function App() {
   const [openMultiple, setOpenMultiple] = React.useState(true);
-  const [val, setVal] = React.useState(['one']);
+  const [val, setVal] = React.useState<readonly (string | number)[]>(['one']);
   const [val2, setVal2] = React.useState(['one']);
   return (
     <div className="AccordionDemo">
@@ -141,8 +141,8 @@ export default function App() {
       <Accordion.Root
         className="MyAccordion-root"
         value={val2}
-        onValueChange={(newValue: Accordion.Root.Props['Value']) => {
-          if (newValue.length > 0) {
+        onValueChange={(newValue: Accordion.Root.Props['value']) => {
+          if (Array.isArray(newValue) && newValue.length > 0) {
             setVal2(newValue);
           }
         }}

docs/src/app/experiments/collapsible.tsx

@@ -53,7 +53,7 @@ export default function CollapsibleDemo() {
         </Collapsible.Root>
       </div>
 
-      <Collapsible.Root render="span" className="MyCollapsible-root">
+      <Collapsible.Root render={<span />} className="MyCollapsible-root">
         <Collapsible.Trigger className="MyCollapsible-trigger">
           <span className="icon">
             <svg

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

@@ -148,7 +148,7 @@ export namespace AccordionItem {
   }
 
   export interface Props
-    extends BaseUIComponentProps<any, OwnerState>,
+    extends BaseUIComponentProps<'div', OwnerState>,
       Pick<useCollapsibleRoot.Parameters, 'disabled' | 'onOpenChange'> {
     value?: Value;
   }
@@ -161,6 +161,10 @@ AccordionItem.propTypes /* remove-proptypes */ = {
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Class names applied to the element or a function that returns them based on the component's state.
    */

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, describeSkipIf } from '@mui/internal-test-utils';
+import { describeSkipIf, flushMicrotasks } from '@mui/internal-test-utils';
 import { Accordion } from '@base_ui/react/Accordion';
-import { describeConformance } from '#test-utils';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Accordion.Root />', () => {
   const { render } = createRenderer();
@@ -154,13 +154,15 @@ describe('<Accordion.Root />', () => {
       expect(panel).not.toBeVisible();
 
       setProps({ value: [0] });
+      await flushMicrotasks();
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(trigger).to.have.attribute('data-panel-open');
       expect(panel).toBeVisible();
       expect(panel).to.have.attribute('data-open');
 
       setProps({ value: [] });
+      await flushMicrotasks();
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(panel).not.toBeVisible();

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

@@ -107,7 +107,7 @@ export namespace AccordionRoot {
 
   export interface Props
     extends useAccordionRoot.Parameters,
-      BaseUIComponentProps<any, OwnerState> {
+      Omit<BaseUIComponentProps<'div', OwnerState>, 'defaultValue'> {
     hiddenUntilFound?: boolean;
   }
 }
@@ -124,6 +124,10 @@ AccordionRoot.propTypes /* remove-proptypes */ = {
    * @default true
    */
   animated: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Class names applied to the element or a function that returns them based on the component's state.
    */

packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx

@@ -2,9 +2,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, act, describeSkipIf } from '@mui/internal-test-utils';
+import { act, describeSkipIf, flushMicrotasks } from '@mui/internal-test-utils';
 import { Collapsible } from '@base_ui/react/Collapsible';
-import { describeConformance } from '../../../test/describeConformance';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Collapsible.Root />', () => {
   const { render } = createRenderer();
@@ -51,13 +51,15 @@ describe('<Collapsible.Root />', () => {
       expect(panel).not.toBeVisible();
 
       setProps({ open: true });
+      await flushMicrotasks();
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(panel).toBeVisible();
       expect(panel).to.have.attribute('data-open');
       expect(trigger).to.have.attribute('data-panel-open');
 
       setProps({ open: false });
+      await flushMicrotasks();
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(panel).not.toBeVisible();

packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx

@@ -90,7 +90,7 @@ export namespace CollapsibleRoot {
 
   export interface Props
     extends useCollapsibleRoot.Parameters,
-      BaseUIComponentProps<any, OwnerState> {}
+      BaseUIComponentProps<'div', OwnerState> {}
 }
 
 CollapsibleRoot.propTypes /* remove-proptypes */ = {
@@ -103,6 +103,10 @@ CollapsibleRoot.propTypes /* remove-proptypes */ = {
    * @default true
    */
   animated: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Class names applied to the element or a function that returns them based on the component's state.
    */