[core] Include history from the @mui/base components & hooks v5

mui · Sep 11, 2024 · c1c0d7c · c1c0d7c
1 parent f6e0318
commit c1c0d7c
Show file tree

Hide file tree

Showing 20 changed files with 56 additions and 76 deletions.
diff --git a/packages/mui-material/src/Badge/useBadge.ts b/packages/mui-material/src/Badge/useBadge.ts
@@ -13,7 +13,7 @@ import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
  *
  * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
  */
-export function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue {
+function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue {
   const {
     badgeContent: badgeContentProp,
     invisible: invisibleProp = false,
@@ -44,3 +44,5 @@ export function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue {
     displayValue,
   };
 }
+
+export default useBadge;
diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
@@ -9,8 +9,8 @@ import {
   fireDiscreteEvent,
   screen,
 } from '@mui/internal-test-utils';
-import { Portal } from '@mui/base/Portal';
-import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import Portal from '@mui/material/Portal';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 
 describe('<ClickAwayListener />', () => {
   const { render: clientRender, clock } = createRenderer({ clock: 'fake' });

diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
@@ -7,8 +7,8 @@ import {
   unstable_ownerDocument as ownerDocument,
   unstable_useForkRef as useForkRef,
   unstable_useEventCallback as useEventCallback,
-  unstable_getReactNodeRef as getReactNodeRef,
 } from '@mui/utils';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 function mapEventPropToEvent(
@@ -65,11 +65,12 @@ export interface ClickAwayListenerProps {
  *
  * Demos:
  *
- * - [Click-Away Listener](https://mui.com/base-ui/react-click-away-listener/)
+ * - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
  *
  * API:
  *
- * - [ClickAwayListener API](https://mui.com/base-ui/react-click-away-listener/components-api/#click-away-listener)
+ * - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
  */
 function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
   const {

diff --git a/packages/mui-material/src/Modal/useModal.ts b/packages/mui-material/src/Modal/useModal.ts
@@ -6,7 +6,8 @@ import {
   unstable_useEventCallback as useEventCallback,
   unstable_createChainedFunction as createChainedFunction,
 } from '@mui/utils';
-import { EventHandlers, extractEventHandlers } from '../utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
+import { EventHandlers } from '../utils/types';
 import { ModalManager, ariaHidden } from './ModalManager';
 import {
   UseModalParameters,
@@ -36,7 +37,7 @@ const defaultManager = new ModalManager();
  *
  * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
  */
-export function useModal(parameters: UseModalParameters): UseModalReturnValue {
+function useModal(parameters: UseModalParameters): UseModalReturnValue {
   const {
     container,
     disableEscapeKeyDown = false,
@@ -238,3 +239,5 @@ export function useModal(parameters: UseModalParameters): UseModalReturnValue {
     hasTransition,
   };
 }
+
+export default useModal;
diff --git a/packages/mui-material/src/Modal/useModal.types.ts b/packages/mui-material/src/Modal/useModal.types.ts
@@ -1,5 +1,5 @@
 import { PortalProps } from '../Portal';
-import { EventHandlers } from '../utils';
+import { EventHandlers } from '../utils/types';
 
 export interface UseModalRootSlotOwnProps {
   role: React.AriaRole;

diff --git a/packages/mui-material/src/NoSsr/NoSsr.test.tsx b/packages/mui-material/src/NoSsr/NoSsr.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 describe('<NoSsr />', () => {
   const { render, renderToString } = createRenderer();

diff --git a/packages/mui-material/src/Popper/BasePopper.tsx b/packages/mui-material/src/Popper/BasePopper.tsx
@@ -10,10 +10,12 @@ import {
 } from '@mui/utils';
 import { createPopper, Instance, Modifier, Placement, State, VirtualElement } from '@popperjs/core';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '../composeClasses';
-import { Portal } from '../Portal';
+import composeClasses from '@mui/utils/composeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import Portal from '../Portal';
 import { getPopperUtilityClass } from './popperClasses';
-import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
+import { WithOptionalOwnerState } from '../utils/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import {
   PopperPlacementType,
   PopperTooltipProps,
@@ -23,8 +25,7 @@ import {
   PopperRootSlotProps,
   PopperTransitionProps,
   PopperTypeMap,
-} from './Popper.types';
-import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
+} from './BasePopper.types';
 
 function flipPlacement(placement?: PopperPlacementType, direction?: 'ltr' | 'rtl') {
   if (direction === 'ltr') {
@@ -65,12 +66,13 @@ function isVirtualElement(element: HTMLElement | VirtualElement): element is Vir
   return !isHTMLElement(element);
 }
 
-const useUtilityClasses = () => {
+const useUtilityClasses = (ownerState: any) => {
+  const { classes } = ownerState;
   const slots = {
     root: ['root'],
   };
 
-  return composeClasses(slots, useClassNamesOverride(getPopperUtilityClass));
+  return composeClasses(slots, getPopperUtilityClass, classes);
 };
 
 const defaultPopperOptions = {};
@@ -214,7 +216,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
     childProps.TransitionProps = TransitionProps;
   }
 
-  const classes = useUtilityClasses();
+  const classes = useUtilityClasses(props);
   const Root = slots.root ?? 'div';
 
   const rootProps: WithOptionalOwnerState<PopperRootSlotProps> = useSlotProps({
@@ -235,15 +237,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
 }) as PolymorphicComponent<PopperTooltipTypeMap>;
 
 /**
- * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
- *
- * Demos:
- *
- * - [Popper](https://mui.com/base-ui/react-popper/)
- *
- * API:
- *
- * - [Popper API](https://mui.com/base-ui/react-popper/components-api/#popper)
+ * @ignore - internal component.
  */
 const Popper = React.forwardRef(function Popper<RootComponentType extends React.ElementType>(
   props: PopperProps<RootComponentType>,
@@ -542,4 +536,4 @@ Popper.propTypes /* remove-proptypes */ = {
   transition: PropTypes.bool,
 } as any;
 
-export { Popper };
+export default Popper;
diff --git a/packages/mui-material/src/Popper/BasePopper.types.ts b/packages/mui-material/src/Popper/BasePopper.types.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Instance, Options, OptionsGeneric, VirtualElement } from '@popperjs/core';
 import { PortalProps } from '../Portal';
-import { PolymorphicProps, SlotComponentProps } from '../utils';
+import { SlotComponentProps } from '../utils/types';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export type PopperPlacementType = Options['placement'];
 

diff --git a/packages/mui-material/src/Portal/Portal.test.tsx b/packages/mui-material/src/Portal/Portal.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer } from '@mui/internal-test-utils';
-import { Portal, PortalProps } from '@mui/base/Portal';
+import Portal, { PortalProps } from '@mui/material/Portal';
 
 describe('<Portal />', () => {
   const { render, renderToString } = createRenderer();

diff --git a/packages/mui-material/src/Portal/Portal.tsx b/packages/mui-material/src/Portal/Portal.tsx
@@ -2,13 +2,13 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import {
   exactProp,
   HTMLElementType,
   unstable_useEnhancedEffect as useEnhancedEffect,
   unstable_useForkRef as useForkRef,
   unstable_setRef as setRef,
+  unstable_getReactNodeRef as getReactNodeRef,
 } from '@mui/utils';
 import { PortalProps } from './Portal.types';
 
@@ -22,11 +22,11 @@ function getContainer(container: PortalProps['container']) {
  *
  * Demos:
  *
- * - [Portal](https://mui.com/base-ui/react-portal/)
+ * - [Portal](https://mui.com/material-ui/react-portal/)
  *
  * API:
  *
- * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)
+ * - [Portal API](https://mui.com/material-ui/api/portal/)
  */
 const Portal = React.forwardRef(function Portal(
   props: PortalProps,
@@ -105,4 +105,4 @@ if (process.env.NODE_ENV !== 'production') {
   (Portal as any)['propTypes' + ''] = exactProp((Portal as any).propTypes);
 }
 
-export { Portal };
+export default Portal;
diff --git a/packages/mui-material/src/Slider/useSlider.ts b/packages/mui-material/src/Slider/useSlider.ts
@@ -10,6 +10,7 @@ import {
   visuallyHidden,
   clamp,
 } from '@mui/utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import {
   Mark,
   UseSliderHiddenInputProps,
@@ -18,7 +19,8 @@ import {
   UseSliderRootSlotProps,
   UseSliderThumbSlotProps,
 } from './useSlider.types';
-import { areArraysEqual, EventHandlers, extractEventHandlers } from '../utils';
+import { EventHandlers } from '../utils/types';
+import areArraysEqual from '../utils/areArraysEqual';
 
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
@@ -413,7 +415,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     const { width, height, bottom, left } = slider!.getBoundingClientRect();
     let percent;
 
-    if (axis.startsWith('vertical')) {
+    if (axis.indexOf('vertical') === 0) {
       percent = (bottom - finger.y) / height;
     } else {
       percent = (finger.x - left) / width;

diff --git a/packages/mui-material/src/Snackbar/useSnackbar.test.tsx b/packages/mui-material/src/Snackbar/useSnackbar.test.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { fireEvent, createRenderer } from '@mui/internal-test-utils';
-import { useSnackbar, UseSnackbarParameters } from '@mui/base/useSnackbar';
+import useSnackbar from './useSnackbar';
+import { UseSnackbarParameters } from './useSnackbar.types';
 
 describe('useSnackbar', () => {
   const { render } = createRenderer();

diff --git a/packages/mui-material/src/Snackbar/useSnackbar.ts b/packages/mui-material/src/Snackbar/useSnackbar.ts
@@ -4,12 +4,12 @@ import {
   unstable_useEventCallback as useEventCallback,
   unstable_useTimeout as useTimeout,
 } from '@mui/utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import {
   UseSnackbarParameters,
   SnackbarCloseReason,
   UseSnackbarReturnValue,
 } from './useSnackbar.types';
-import { extractEventHandlers } from '../utils/extractEventHandlers';
 import { EventHandlers } from '../utils/types';
 
 /**
@@ -23,7 +23,7 @@ import { EventHandlers } from '../utils/types';
  *
  * - [useSnackbar API](https://mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)
  */
-export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbarReturnValue {
+function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbarReturnValue {
   const {
     autoHideDuration = null,
     disableWindowBlurListener = false,
@@ -162,3 +162,5 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar
 
   return { getRootProps, onClickAway: handleClickAway };
 }
+
+export default useSnackbar;
diff --git a/packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import sinon, { spy, stub } from 'sinon';
 import { act, screen, waitFor, createRenderer, fireEvent } from '@mui/internal-test-utils';
-import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 function getStyleValue(value: string) {
   return parseInt(value, 10) || 0;
@@ -35,22 +34,6 @@ async function raf() {
 describe('<TextareaAutosize />', () => {
   const { clock, render } = createRenderer();
 
-  describeConformanceUnstyled(<TextareaAutosize />, () => ({
-    render,
-    inheritComponent: 'textarea',
-    refInstanceof: window.HTMLTextAreaElement,
-    slots: {},
-    skip: [
-      // doesn't have slots, so these tests are irrelevant:
-      'componentProp',
-      'mergeClassName',
-      'ownerStatePropagation',
-      'propsSpread',
-      'refForwarding',
-      'slotsProp',
-    ],
-  }));
-
   // For https://github.com/mui/material-ui/pull/33238
   it('should not crash when unmounting with Suspense', async () => {
     const LazyRoute = React.lazy(() => {

diff --git a/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx
@@ -49,12 +49,11 @@ function isEmpty(obj: TextareaStyles) {
  *
  * Demos:
  *
- * - [Textarea Autosize](https://mui.com/base-ui/react-textarea-autosize/)
  * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
  *
  * API:
  *
- * - [TextareaAutosize API](https://mui.com/base-ui/react-textarea-autosize/components-api/#textarea-autosize)
+ * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
  */
 const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   props: TextareaAutosizeProps,
@@ -262,4 +261,4 @@ TextareaAutosize.propTypes /* remove-proptypes */ = {
   ]),
 } as any;
 
-export { TextareaAutosize };
+export default TextareaAutosize;
diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.test.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import { act, createRenderer, screen } from '@mui/internal-test-utils';
-import { FocusTrap } from '@mui/base/FocusTrap';
-import { Portal } from '@mui/base/Portal';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
+import Portal from '@mui/material/Portal';
 
 interface GenericProps {
   [index: string]: any;

diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
@@ -123,15 +123,7 @@ function defaultIsEnabled(): boolean {
 }
 
 /**
- * Utility component that locks focus inside the component.
- *
- * Demos:
- *
- * - [Focus Trap](https://mui.com/base-ui/react-focus-trap/)
- *
- * API:
- *
- * - [FocusTrap API](https://mui.com/base-ui/react-focus-trap/components-api/#focus-trap)
+ * @ignore - internal component.
  */
 function FocusTrap(props: FocusTrapProps): React.JSX.Element {
   const {
@@ -278,7 +270,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element {
         return;
       }
 
-      let tabbable: ReadonlyArray<string> | HTMLElement[] = [];
+      let tabbable: ReadonlyArray<HTMLElement> = [];
       if (
         doc.activeElement === sentinelStart.current ||
         doc.activeElement === sentinelEnd.current
@@ -431,4 +423,4 @@ if (process.env.NODE_ENV !== 'production') {
   (FocusTrap as any)['propTypes' + ''] = exactProp(FocusTrap.propTypes);
 }
 
-export { FocusTrap };
+export default FocusTrap;
diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts
@@ -10,7 +10,7 @@ export interface FocusTrapProps {
    * For instance, you can provide the "tabbable" npm dependency.
    * @param {HTMLElement} root
    */
-  getTabbable?: (root: HTMLElement) => ReadonlyArray<string>;
+  getTabbable?: (root: HTMLElement) => ReadonlyArray<HTMLElement>;
   /**
    * This prop extends the `open` prop.
    * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.

diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts b/packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts
@@ -1,5 +1,5 @@
 import { expectType } from '@mui/types';
-import { useAutocomplete, FilterOptionsState } from '@mui/base/useAutocomplete';
+import { useAutocomplete, FilterOptionsState } from '@mui/material/useAutocomplete';
 
 interface Person {
   id: string;