@mui/material 6.0.0-beta.0 → 6.0.0-beta.2

package/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import {
-  useAutocomplete,
+import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
+import { PaperProps } from '@mui/material/Paper';
+import { PopperProps } from '@mui/material/Popper';
+import useAutocomplete, {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
   AutocompleteCloseReason,
@@ -11,11 +14,7 @@ import {
   createFilterOptions,
   UseAutocompleteProps,
   AutocompleteFreeSoloValueMapping,
-} from '@mui/base';
-import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
-import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
-import { PaperProps } from '@mui/material/Paper';
-import { PopperProps } from '@mui/material/Popper';
+} from '../useAutocomplete';
 import { AutocompleteClasses } from './autocompleteClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 

package/Autocomplete/Autocomplete.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import { useAutocomplete, createFilterOptions } from '@mui/base';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import useAutocomplete, { createFilterOptions } from '../useAutocomplete';
 import Popper from '../Popper';
 import ListSubheader from '../ListSubheader';
 import Paper from '../Paper';

package/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion, Simplify } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
+import { SlotComponentProps } from '../utils/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BadgeClasses } from './badgeClasses';

package/Badge/Badge.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useBadge } from '@mui/base/useBadge';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
+import useBadge from './useBadge';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';

package/Badge/useBadge.d.ts

@@ -0,0 +1,13 @@
+import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://next.mui.com/base-ui/react-badge/#hook)
+ *
+ * API:
+ *
+ * - [useBadge API](https://next.mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ */
+declare function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
+export default useBadge;

package/Badge/useBadge.js

@@ -0,0 +1,41 @@
+'use client';
+
+import { usePreviousProps } from '@mui/utils';
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://next.mui.com/base-ui/react-badge/#hook)
+ *
+ * API:
+ *
+ * - [useBadge API](https://next.mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ */
+function useBadge(parameters) {
+  const {
+    badgeContent: badgeContentProp,
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    showZero = false
+  } = parameters;
+  const prevProps = usePreviousProps({
+    badgeContent: badgeContentProp,
+    max: maxProp
+  });
+  let invisible = invisibleProp;
+  if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+    invisible = true;
+  }
+  const {
+    badgeContent,
+    max = maxProp
+  } = invisible ? prevProps : parameters;
+  const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+  return {
+    badgeContent,
+    invisible,
+    max,
+    displayValue
+  };
+}
+export default useBadge;

package/Badge/useBadge.types.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export interface UseBadgeParameters {
+    /**
+     * The content rendered within the badge.
+     */
+    badgeContent?: React.ReactNode;
+    /**
+     * If `true`, the badge is invisible.
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Max count to show.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Controls whether the badge is hidden when `badgeContent` is zero.
+     * @default false
+     */
+    showZero?: boolean;
+}
+export interface UseBadgeReturnValue {
+    /**
+     * Defines the content that's displayed inside the badge.
+     */
+    badgeContent: React.ReactNode;
+    /**
+     * If `true`, the component will not be visible.
+     */
+    invisible: boolean;
+    /**
+     * Maximum number to be displayed in the badge.
+     */
+    max: number;
+    /**
+     * Value to be displayed in the badge. If `badgeContent` is greater than `max`, it will return `max+`.
+     */
+    displayValue: React.ReactNode;
+}

package/Badge/useBadge.types.js

@@ -0,0 +1 @@
+export {};

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '../utils/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BreadcrumbsClasses } from './breadcrumbsClasses';

package/Breadcrumbs/Breadcrumbs.js

@@ -5,8 +5,8 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-beta.2
+
+<!-- generated comparing v6.0.0-beta.1..next -->
+
+_Jul 16, 2024_
+
+### `@mui/material@6.0.0-beta.2`
+
+- &#8203;<!-- 1 -->[material] Add missing dependency (#42961) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 2 -->[docs] Move feedback from Canny to GitHub @oliviertassinari
+
+All contributors of this release in alphabetical order: @mnajdova, @oliviertassinari
+
+## v6.0.0-beta.1
+
+<!-- generated comparing v6.0.0-beta.0..next -->
+
+_Jul 16, 2024_
+
+A big thanks to the 6 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.1`
+
+- &#8203;<!-- 03 -->Remove dependency on @mui/base (#42907) @mnajdova
+- &#8203;<!-- 02 -->Set material-pigment-css to public (#42912) @siriwatknp
+
+### `@mui/codemod@6.0.0-beta.1`
+
+- &#8203;<!-- 10 -->Support sx conditional inside spread element (#42894) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 07 -->Fix 301 link @oliviertassinari
+- &#8203;<!-- 04 -->[material-ui] Add script to generate template screenshots (#42903) @siriwatknp
+
+### Core
+
+- &#8203;<!-- 09 -->[core] Remove custom hooks from the `mui-name-matches-component-name` linting rule (#42773) @flaviendelangle
+- &#8203;<!-- 08 -->[core] Normalize rest / other to match the most common used @oliviertassinari
+- &#8203;<!-- 06 -->[docs-infra] Move Ads component to TS (#42842) @alexfauquette
+- &#8203;<!-- 05 -->[docs-infra] Support code tabs overflow (#42913) @arminmeh
+- &#8203;<!-- 01 -->[website] Sync /about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @alexfauquette, @arminmeh, @flaviendelangle, @mnajdova, @oliviertassinari, @siriwatknp
+
 ## v6.0.0-beta.0
 
 <!-- generated comparing v6.0.0-alpha.14..next -->

package/ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+export interface ClickAwayListenerProps {
+    /**
+     * The wrapped element.
+     */
+    children: React.ReactElement<any>;
+    /**
+     * If `true`, the React tree is ignored and only the DOM tree is considered.
+     * This prop changes how portaled elements are handled.
+     * @default false
+     */
+    disableReactTree?: boolean;
+    /**
+     * The mouse event to listen to. You can disable the listener by providing `false`.
+     * @default 'onClick'
+     */
+    mouseEvent?: ClickAwayMouseEventHandler | false;
+    /**
+     * Callback fired when a "click away" event is detected.
+     */
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * The touch event to listen to. You can disable the listener by providing `false`.
+     * @default 'onTouchEnd'
+     */
+    touchEvent?: ClickAwayTouchEventHandler | false;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
+ */
+declare function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element;
+declare namespace ClickAwayListener {
+    var propTypes: any;
+}
+export { ClickAwayListener };

package/ClickAwayListener/ClickAwayListener.js

@@ -0,0 +1,178 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+
+// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
+import { jsx as _jsx } from "react/jsx-runtime";
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
+ */
+function ClickAwayListener(props) {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd'
+  } = props;
+  const movedRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  React.useEffect(() => {
+    // Ensure that this component is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+  const handleRef = useForkRef(
+  // @ts-expect-error TODO upstream fix
+  children.ref, nodeRef);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = useEventCallback(event => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      insideDOM = !doc.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target) || nodeRef.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target);
+    }
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const createHandleSynthetic = handlerName => event => {
+    syntheticEventRef.current = true;
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const childrenProps = {
+    ref: handleRef
+  };
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+  React.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = ownerDocument(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, touchEvent]);
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+  React.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, mouseEvent]);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(children, childrenProps)
+  });
+}
+process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: PropTypes.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: PropTypes.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+}
+export { ClickAwayListener };

package/ClickAwayListener/index.d.ts

@@ -1,2 +1,2 @@
-export { ClickAwayListener as default } from '@mui/base/ClickAwayListener';
-export type { ClickAwayListenerProps } from '@mui/base/ClickAwayListener';
+export { ClickAwayListener as default } from './ClickAwayListener';
+export type { ClickAwayListenerProps } from './ClickAwayListener';

package/ClickAwayListener/index.js

@@ -1 +1 @@
-export { ClickAwayListener as default } from '@mui/base/ClickAwayListener';
+export { ClickAwayListener as default } from './ClickAwayListener';

package/InputBase/InputBase.js

@@ -7,9 +7,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import refType from '@mui/utils/refType';
-import { TextareaAutosize } from '@mui/base';
-import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import TextareaAutosize from '../TextareaAutosize';
+import isHostComponent from '../utils/isHostComponent';
 import formControlState from '../FormControl/formControlState';
 import FormControlContext from '../FormControl/FormControlContext';
 import useFormControl from '../FormControl/useFormControl';

package/ListItem/ListItem.js

@@ -3,11 +3,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { alpha } from '@mui/system/colorManipulator';
+import isHostComponent from '../utils/isHostComponent';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';

package/Menu/Menu.js

@@ -5,9 +5,9 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useRtl } from '@mui/system/RtlProvider';
+import useSlotProps from '@mui/utils/useSlotProps';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';

package/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '../utils/types';
 import { PortalProps } from '../Portal';
 import { Theme } from '../styles';
 import Backdrop, { BackdropProps } from '../Backdrop';

package/Modal/Modal.js

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Backdrop from '../Backdrop';
+import useModal from './useModal';
 import { getModalUtilityClass } from './modalClasses';
 import useSlot from '../utils/useSlot';
 import { useForkRef } from '../utils';

package/Modal/ModalManager.d.ts

@@ -0,0 +1,25 @@
+export interface ManagedModalProps {
+    disableScrollLock?: boolean;
+}
+export declare function ariaHidden(element: Element, show: boolean): void;
+interface Modal {
+    mount: Element;
+    modalRef: Element;
+}
+/**
+ * @ignore - do not document.
+ *
+ * Proper state management for containers and the modals in those containers.
+ * Simplified, but inspired by react-overlay's ModalManager class.
+ * Used by the Modal to ensure proper styling of containers.
+ */
+export declare class ModalManager {
+    private containers;
+    private modals;
+    constructor();
+    add(modal: Modal, container: HTMLElement): number;
+    mount(modal: Modal, props: ManagedModalProps): void;
+    remove(modal: Modal, ariaHiddenState?: boolean): number;
+    isTopModal(modal: Modal): boolean;
+}
+export {};