[SelectUnstyled] Improve exported types

packages/mui-base/src/ListboxUnstyled/types.ts

@@ -11,7 +11,7 @@ export type UseListboxStrictProps<TOption> = Omit<
 > &
   Required<Pick<UseListboxProps<TOption>, UseListboxStrictPropsRequiredKeys>>;
 
-export enum ActionTypes {
+enum ActionTypes {
   blur = 'blur',
   focus = 'focus',
   keyDown = 'keyDown',
@@ -20,6 +20,9 @@ export enum ActionTypes {
   optionsChange = 'optionsChange',
 }
 
+// split declaration and export due to https://github.com/codesandbox/codesandbox-client/issues/6435
+export { ActionTypes };
+
 interface OptionClickAction<TOption> {
   type: ActionTypes.optionClick;
   option: TOption;
@@ -78,9 +81,19 @@ export type ListboxReducer<TOption> = (
 
 interface UseListboxCommonProps<TOption> {
   /**
-   * Array of options to be rendered in the list.
+   * If `true`, it will be possible to highlight disabled options.
+   * @default false
    */
-  options: TOption[];
+  disabledItemsFocusable?: boolean;
+  /**
+   * If `true`, the highlight will not wrap around the list if arrow keys are used.
+   * @default false
+   */
+  disableListWrap?: boolean;
+  /**
+   * Ref of the listbox DOM element.
+   */
+  listboxRef?: React.Ref<any>;
   /**
    * Id attribute of the listbox.
    */
@@ -90,35 +103,28 @@ interface UseListboxCommonProps<TOption> {
    * @default () => false
    */
   isOptionDisabled?: (option: TOption, index: number) => boolean;
+  /**
+   * Callback fired when the highlighted option changes.
+   */
+  onHighlightChange?: (option: TOption | null) => void;
   /**
    * A function that tests equality between two options.
    * @default (a, b) => a === b
    */
   optionComparer?: (optionA: TOption, optionB: TOption) => boolean;
-  /**
-   * If `true`, the highlight will not wrap around the list if arrow keys are used.
-   * @default false
-   */
-  disableListWrap?: boolean;
-  /**
-   * If `true`, it will be possible to highlight disabled options.
-   * @default false
-   */
-  disabledItemsFocusable?: boolean;
   /**
    * A function that generates the id attribute of individual options.
    */
   optionIdGenerator?: (option: TOption, index: number) => string;
+  /**
+   * Array of options to be rendered in the list.
+   */
+  options: TOption[];
   /**
    * Custom state reducer function. It calculates the new state (highlighted and selected options)
    * based on the previous one and the performed action.
    */
   stateReducer?: ListboxReducer<TOption>;
-  /**
-   * Callback fired when the highlighted option changes.
-   */
-  onHighlightChange?: (option: TOption | null) => void;
-  listboxRef?: React.Ref<Element>;
 }
 
 interface UseSingleSelectListboxProps<TOption> extends UseListboxCommonProps<TOption> {
@@ -168,7 +174,5 @@ export type UseListboxProps<TOption> =
 export interface OptionState {
   disabled: boolean;
   highlighted: boolean;
-  index: number;
-  // option: TOption;
   selected: boolean;
 }

packages/mui-base/src/ListboxUnstyled/useListbox.test.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { useListbox } from '@mui/base/ListboxUnstyled';
+import { expect } from 'chai';
+import { createRenderer } from 'test/utils';
+
+describe('useListbox', () => {
+  const { render } = createRenderer();
+  describe('prop: id', () => {
+    it('propagates it to the root element', () => {
+      const Listbox = () => {
+        const { getRootProps } = useListbox({ options: [], id: 'test-id' });
+        return <ul {...getRootProps()} />;
+      };
+      const { getByRole } = render(<Listbox />);
+
+      const listbox = getByRole('listbox');
+      expect(listbox).to.have.attribute('id', 'test-id');
+    });
+
+    it('uses the provided id to create option ids', () => {
+      const options = ['one', 'two'];
+      const Listbox = () => {
+        const { getRootProps, getOptionProps } = useListbox({ options, id: 'test-id' });
+        return (
+          <ul {...getRootProps()}>
+            {options.map((o) => (
+              <li key={o} {...getOptionProps(o)}>
+                {o}
+              </li>
+            ))}
+          </ul>
+        );
+      };
+      const { getAllByRole } = render(<Listbox />);
+
+      const optionElements = getAllByRole('option');
+      optionElements.forEach((opt, index) =>
+        expect(opt).to.have.attribute('id', `test-id-option-${index}`),
+      );
+    });
+
+    it('generates a unique id if not provided explicitly', () => {
+      const Listbox = () => {
+        const { getRootProps } = useListbox({ options: [] });
+        return <ul {...getRootProps()} />;
+      };
+
+      const { getAllByRole } = render(
+        <React.Fragment>
+          <Listbox />
+          <Listbox />
+        </React.Fragment>,
+      );
+
+      const listboxes = getAllByRole('listbox');
+      expect(listboxes[0].id).not.to.equal(listboxes[1].id);
+    });
+  });
+});

packages/mui-base/src/ListboxUnstyled/useListbox.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
 import { UseListboxProps, UseListboxStrictProps, ActionTypes, OptionState } from './types';
 import defaultReducer from './defaultListboxReducer';
 import useControllableReducer from './useControllableReducer';
@@ -11,7 +11,7 @@ export default function useListbox<TOption>(props: UseListboxProps<TOption>) {
   const {
     disableListWrap = false,
     disabledItemsFocusable = false,
-    id,
+    id: idProp,
     options,
     multiple = false,
     isOptionDisabled = () => false,
@@ -20,6 +20,8 @@ export default function useListbox<TOption>(props: UseListboxProps<TOption>) {
     listboxRef: externalListboxRef,
   } = props;
 
+  const id = useId(idProp);
+
   function defaultIdGenerator(_: TOption, index: number) {
     return `${id}-option-${index}`;
   }
@@ -163,8 +165,6 @@ export default function useListbox<TOption>(props: UseListboxProps<TOption>) {
     const disabled = isOptionDisabled(option, index);
 
     return {
-      index,
-      option,
       selected,
       disabled,
       highlighted: highlightedIndex === index,

packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { OptionState } from '../ListboxUnstyled';
 import composeClasses from '../composeClasses';
-import OptionUnstyledProps from './OptionUnstyledProps';
+import OptionUnstyledProps, { OptionUnstyledOwnerState } from './OptionUnstyledProps';
 import { SelectUnstyledContext } from '../SelectUnstyled/SelectUnstyledContext';
 import { getOptionUnstyledUtilityClass } from './optionUnstyledClasses';
 import appendOwnerState from '../utils/appendOwnerState';
@@ -53,7 +53,7 @@ const OptionUnstyled = React.forwardRef(function OptionUnstyled<TValue>(
   const optionState = selectContext.getOptionState(selectOption);
   const optionProps = selectContext.getOptionProps(selectOption);
 
-  const ownerState = {
+  const ownerState: OptionUnstyledOwnerState<TValue> = {
     ...props,
     ...optionState,
   };

packages/mui-base/src/OptionUnstyled/OptionUnstyledProps.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { OptionState } from '../ListboxUnstyled';
 
 export interface OptionUnstyledComponentsPropsOverrides {}
 
@@ -37,3 +38,5 @@ export default interface OptionUnstyledProps<TValue> {
     root?: React.ComponentPropsWithRef<'li'> & OptionUnstyledComponentsPropsOverrides;
   };
 }
+
+export type OptionUnstyledOwnerState<TValue> = OptionUnstyledProps<TValue> & OptionState;

packages/mui-base/src/SelectUnstyled/SelectUnstyled.spec.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SelectUnstyled } from '@mui/base';
+
+const SelectUnstyledComponentsPropsOverridesTest = (
+  <SelectUnstyled
+    componentsProps={{
+      root: {
+        // @ts-expect-error - requires module augmentation
+        size: 'red',
+        className: 'test',
+      },
+      popper: {
+        className: 'popper',
+        disablePortal: true,
+      },
+      listbox: {
+        className: 'listbox',
+        onMouseOver: () => {},
+      },
+    }}
+  />
+);

packages/mui-base/src/SelectUnstyled/SelectUnstyledProps.ts

@@ -29,7 +29,8 @@ export interface SelectUnstyledCommonProps {
   componentsProps?: {
     root?: React.ComponentPropsWithRef<'button'> & SelectUnstyledComponentsPropsOverrides;
     listbox?: React.ComponentPropsWithRef<'ul'> & SelectUnstyledComponentsPropsOverrides;
-    popper?: React.ComponentPropsWithRef<typeof PopperUnstyled> &
+    // PopperUnstyled has a required prop: open, but it is not necessary to provide it in componentsProps.
+    popper?: Partial<React.ComponentPropsWithRef<typeof PopperUnstyled>> &
       SelectUnstyledComponentsPropsOverrides;
   };
   /**

packages/mui-base/test/typescript/moduleAugmentation/selectUnstyledComponentsProps.spec.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SelectUnstyled, MultiSelectUnstyled } from '@mui/base';
+
+declare module '@mui/base' {
+  interface SelectUnstyledComponentsPropsOverrides {
+    variant?: 'one' | 'two';
+  }
+}
+
+<SelectUnstyled componentsProps={{ root: { variant: 'one' } }} />;
+
+// @ts-expect-error unknown variant
+<SelectUnstyled componentsProps={{ root: { variant: 'three' } }} />;
+
+<MultiSelectUnstyled componentsProps={{ root: { variant: 'one' } }} />;
+
+// @ts-expect-error unknown variant
+<MultiSelectUnstyled componentsProps={{ root: { variant: 'three' } }} />;

packages/mui-base/test/typescript/moduleAugmentation/selectUnstyledComponentsProps.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig",
+  "files": ["selectUnstyledComponentsProps.spec.tsx"]
+}