@mui/utils 6.0.0-beta.0 → 6.0.0-beta.3

package/mergeSlotProps/mergeSlotProps.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ClassValue } from 'clsx';
+import { Simplify } from '@mui/types';
+import { EventHandlers } from '../types';
+export type WithCommonProps<OtherProps> = OtherProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: React.Ref<any>;
+};
+export interface MergeSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps> {
+    /**
+     * A function that returns the internal props of the component.
+     * It accepts the event handlers passed into the component by the user
+     * and is responsible for calling them where appropriate.
+     */
+    getSlotProps?: (other: EventHandlers) => WithCommonProps<SlotProps>;
+    /**
+     * Props provided to the `slotProps.*` of the Base UI component.
+     */
+    externalSlotProps?: WithCommonProps<ExternalSlotProps>;
+    /**
+     * Extra props placed on the Base UI component that should be forwarded to the slot.
+     * This should usually be used only for the root slot.
+     */
+    externalForwardedProps?: WithCommonProps<ExternalForwardedProps>;
+    /**
+     * Additional props to be placed on the slot.
+     */
+    additionalProps?: WithCommonProps<AdditionalProps>;
+    /**
+     * Extra class name(s) to be placed on the slot.
+     */
+    className?: ClassValue | ClassValue[];
+}
+export type MergeSlotPropsResult<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps> = {
+    props: Simplify<SlotProps & ExternalForwardedProps & ExternalSlotProps & AdditionalProps & {
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    internalRef: React.Ref<any> | undefined;
+};
+/**
+ * Merges the slot component internal props (usually coming from a hook)
+ * with the externally provided ones.
+ *
+ * The merge order is (the latter overrides the former):
+ * 1. The internal props (specified as a getter function to work with get*Props hook result)
+ * 2. Additional props (specified internally on a Base UI component)
+ * 3. External props specified on the owner component. These should only be used on a root slot.
+ * 4. External props specified in the `slotProps.*` prop.
+ * 5. The `className` prop - combined from all the above.
+ * @param parameters
+ * @returns
+ */
+declare function mergeSlotProps<SlotProps, ExternalForwardedProps extends Record<string, unknown>, ExternalSlotProps extends Record<string, unknown>, AdditionalProps>(parameters: MergeSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>): MergeSlotPropsResult<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>;
+export default mergeSlotProps;

package/mergeSlotProps/mergeSlotProps.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _extractEventHandlers = _interopRequireDefault(require("../extractEventHandlers"));
+var _omitEventHandlers = _interopRequireDefault(require("../omitEventHandlers"));
+/**
+ * Merges the slot component internal props (usually coming from a hook)
+ * with the externally provided ones.
+ *
+ * The merge order is (the latter overrides the former):
+ * 1. The internal props (specified as a getter function to work with get*Props hook result)
+ * 2. Additional props (specified internally on a Base UI component)
+ * 3. External props specified on the owner component. These should only be used on a root slot.
+ * 4. External props specified in the `slotProps.*` prop.
+ * 5. The `className` prop - combined from all the above.
+ * @param parameters
+ * @returns
+ */
+function mergeSlotProps(parameters) {
+  const {
+    getSlotProps,
+    additionalProps,
+    externalSlotProps,
+    externalForwardedProps,
+    className
+  } = parameters;
+  if (!getSlotProps) {
+    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
+    // so we can simply merge all the props without having to worry about extracting event handlers.
+    const joinedClasses = (0, _clsx.default)(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+    const mergedStyle = {
+      ...(additionalProps == null ? void 0 : additionalProps.style),
+      ...(externalForwardedProps == null ? void 0 : externalForwardedProps.style),
+      ...(externalSlotProps == null ? void 0 : externalSlotProps.style)
+    };
+    const props = {
+      ...additionalProps,
+      ...externalForwardedProps,
+      ...externalSlotProps
+    };
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
+    }
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+    return {
+      props,
+      internalRef: undefined
+    };
+  }
+
+  // In this case, getSlotProps is responsible for calling the external event handlers.
+  // We don't need to include them in the merged props because of this.
+
+  const eventHandlers = (0, _extractEventHandlers.default)({
+    ...externalForwardedProps,
+    ...externalSlotProps
+  });
+  const componentsPropsWithoutEventHandlers = (0, _omitEventHandlers.default)(externalSlotProps);
+  const otherPropsWithoutEventHandlers = (0, _omitEventHandlers.default)(externalForwardedProps);
+  const internalSlotProps = getSlotProps(eventHandlers);
+
+  // The order of classes is important here.
+  // Emotion (that we use in libraries consuming Base UI) depends on this order
+  // to properly override style. It requires the most important classes to be last
+  // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
+  const joinedClasses = (0, _clsx.default)(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+  const mergedStyle = {
+    ...(internalSlotProps == null ? void 0 : internalSlotProps.style),
+    ...(additionalProps == null ? void 0 : additionalProps.style),
+    ...(externalForwardedProps == null ? void 0 : externalForwardedProps.style),
+    ...(externalSlotProps == null ? void 0 : externalSlotProps.style)
+  };
+  const props = {
+    ...internalSlotProps,
+    ...additionalProps,
+    ...otherPropsWithoutEventHandlers,
+    ...componentsPropsWithoutEventHandlers
+  };
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
+  }
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+  return {
+    props,
+    internalRef: internalSlotProps.ref
+  };
+}
+var _default = exports.default = mergeSlotProps;

package/mergeSlotProps/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/mergeSlotProps/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/modern/appendOwnerState/appendOwnerState.js

@@ -0,0 +1,28 @@
+import isHostComponent from '../isHostComponent';
+
+/**
+ * Type of the ownerState based on the type of an element it applies to.
+ * This resolves to the provided OwnerState for React components and `undefined` for host components.
+ * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+ */
+
+/**
+ * Appends the ownerState object to the props, merging with the existing one if necessary.
+ *
+ * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
+ * @param otherProps Props of the element.
+ * @param ownerState
+ */
+function appendOwnerState(elementType, otherProps, ownerState) {
+  if (elementType === undefined || isHostComponent(elementType)) {
+    return otherProps;
+  }
+  return {
+    ...otherProps,
+    ownerState: {
+      ...otherProps.ownerState,
+      ...ownerState
+    }
+  };
+}
+export default appendOwnerState;

package/modern/appendOwnerState/index.js

@@ -0,0 +1 @@
+export { default } from './appendOwnerState';

package/modern/extractEventHandlers/extractEventHandlers.js

@@ -0,0 +1,18 @@
+/**
+ * Extracts event handlers from a given object.
+ * A prop is considered an event handler if it is a function and its name starts with `on`.
+ *
+ * @param object An object to extract event handlers from.
+ * @param excludeKeys An array of keys to exclude from the returned object.
+ */
+function extractEventHandlers(object, excludeKeys = []) {
+  if (object === undefined) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+export default extractEventHandlers;

package/modern/extractEventHandlers/index.js

@@ -0,0 +1 @@
+export { default } from './extractEventHandlers';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.0.0-beta.0
+ * @mui/utils v6.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,4 +47,8 @@ export { isGlobalState as unstable_isGlobalState } from './generateUtilityClass'
 export * from './generateUtilityClass';
 export { default as unstable_generateUtilityClasses } from './generateUtilityClasses';
 export { default as unstable_ClassNameGenerator } from './ClassNameGenerator';
-export { default as clamp } from './clamp';
+export { default as clamp } from './clamp';
+export { default as unstable_useSlotProps } from './useSlotProps';
+export { default as unstable_resolveComponentProps } from './resolveComponentProps';
+export { default as unstable_extractEventHandlers } from './extractEventHandlers';
+export * from './types';

package/modern/isHostComponent/index.js

@@ -0,0 +1 @@
+export { default } from './isHostComponent';

package/modern/isHostComponent/isHostComponent.js

@@ -0,0 +1,7 @@
+/**
+ * Determines if a given element is a DOM element name (i.e. not a React component).
+ */
+function isHostComponent(element) {
+  return typeof element === 'string';
+}
+export default isHostComponent;

package/modern/mergeSlotProps/index.js

@@ -0,0 +1 @@
+export { default } from './mergeSlotProps';

package/modern/mergeSlotProps/mergeSlotProps.js

@@ -0,0 +1,90 @@
+import clsx from 'clsx';
+import extractEventHandlers from '../extractEventHandlers';
+import omitEventHandlers from '../omitEventHandlers';
+/**
+ * Merges the slot component internal props (usually coming from a hook)
+ * with the externally provided ones.
+ *
+ * The merge order is (the latter overrides the former):
+ * 1. The internal props (specified as a getter function to work with get*Props hook result)
+ * 2. Additional props (specified internally on a Base UI component)
+ * 3. External props specified on the owner component. These should only be used on a root slot.
+ * 4. External props specified in the `slotProps.*` prop.
+ * 5. The `className` prop - combined from all the above.
+ * @param parameters
+ * @returns
+ */
+function mergeSlotProps(parameters) {
+  const {
+    getSlotProps,
+    additionalProps,
+    externalSlotProps,
+    externalForwardedProps,
+    className
+  } = parameters;
+  if (!getSlotProps) {
+    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
+    // so we can simply merge all the props without having to worry about extracting event handlers.
+    const joinedClasses = clsx(additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
+    const mergedStyle = {
+      ...additionalProps?.style,
+      ...externalForwardedProps?.style,
+      ...externalSlotProps?.style
+    };
+    const props = {
+      ...additionalProps,
+      ...externalForwardedProps,
+      ...externalSlotProps
+    };
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
+    }
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+    return {
+      props,
+      internalRef: undefined
+    };
+  }
+
+  // In this case, getSlotProps is responsible for calling the external event handlers.
+  // We don't need to include them in the merged props because of this.
+
+  const eventHandlers = extractEventHandlers({
+    ...externalForwardedProps,
+    ...externalSlotProps
+  });
+  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+  const internalSlotProps = getSlotProps(eventHandlers);
+
+  // The order of classes is important here.
+  // Emotion (that we use in libraries consuming Base UI) depends on this order
+  // to properly override style. It requires the most important classes to be last
+  // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
+  const joinedClasses = clsx(internalSlotProps?.className, additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
+  const mergedStyle = {
+    ...internalSlotProps?.style,
+    ...additionalProps?.style,
+    ...externalForwardedProps?.style,
+    ...externalSlotProps?.style
+  };
+  const props = {
+    ...internalSlotProps,
+    ...additionalProps,
+    ...otherPropsWithoutEventHandlers,
+    ...componentsPropsWithoutEventHandlers
+  };
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
+  }
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+  return {
+    props,
+    internalRef: internalSlotProps.ref
+  };
+}
+export default mergeSlotProps;

package/modern/omitEventHandlers/index.js

@@ -0,0 +1 @@
+export { default } from './omitEventHandlers';

package/modern/omitEventHandlers/omitEventHandlers.js

@@ -0,0 +1,18 @@
+/**
+ * Removes event handlers from the given object.
+ * A field is considered an event handler if it is a function with a name beginning with `on`.
+ *
+ * @param object Object to remove event handlers from.
+ * @returns Object with event handlers removed.
+ */
+function omitEventHandlers(object) {
+  if (object === undefined) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+export default omitEventHandlers;

package/modern/resolveComponentProps/index.js

@@ -0,0 +1 @@
+export { default } from './resolveComponentProps';

package/modern/resolveComponentProps/resolveComponentProps.js

@@ -0,0 +1,11 @@
+/**
+ * If `componentProps` is a function, calls it with the provided `ownerState`.
+ * Otherwise, just returns `componentProps`.
+ */
+function resolveComponentProps(componentProps, ownerState, slotState) {
+  if (typeof componentProps === 'function') {
+    return componentProps(ownerState, slotState);
+  }
+  return componentProps;
+}
+export default resolveComponentProps;

package/modern/types.js

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

package/modern/useSlotProps/index.js

@@ -0,0 +1 @@
+export { default } from './useSlotProps';

package/modern/useSlotProps/useSlotProps.js

@@ -0,0 +1,38 @@
+'use client';
+
+import useForkRef from '../useForkRef';
+import appendOwnerState from '../appendOwnerState';
+import mergeSlotProps from '../mergeSlotProps';
+import resolveComponentProps from '../resolveComponentProps';
+/**
+ * @ignore - do not document.
+ * Builds the props to be passed into the slot of an unstyled component.
+ * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
+ * If the slot component is not a host component, it also merges in the `ownerState`.
+ *
+ * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
+ */
+function useSlotProps(parameters) {
+  const {
+    elementType,
+    externalSlotProps,
+    ownerState,
+    skipResolvingSlotProps = false,
+    ...other
+  } = parameters;
+  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
+  const {
+    props: mergedProps,
+    internalRef
+  } = mergeSlotProps({
+    ...other,
+    externalSlotProps: resolvedComponentsProps
+  });
+  const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.additionalProps?.ref);
+  const props = appendOwnerState(elementType, {
+    ...mergedProps,
+    ref
+  }, ownerState);
+  return props;
+}
+export default useSlotProps;

package/omitEventHandlers/index.d.ts

@@ -0,0 +1 @@
+export { default } from './omitEventHandlers';

package/{node/HTMLElementType → omitEventHandlers}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _HTMLElementType.default;
+    return _omitEventHandlers.default;
   }
 });
-var _HTMLElementType = _interopRequireDefault(require("./HTMLElementType"));
+var _omitEventHandlers = _interopRequireDefault(require("./omitEventHandlers"));

package/omitEventHandlers/omitEventHandlers.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Removes event handlers from the given object.
+ * A field is considered an event handler if it is a function with a name beginning with `on`.
+ *
+ * @param object Object to remove event handlers from.
+ * @returns Object with event handlers removed.
+ */
+declare function omitEventHandlers<Props extends Record<string, unknown>>(object: Props | undefined): {};
+export default omitEventHandlers;

package/omitEventHandlers/omitEventHandlers.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Removes event handlers from the given object.
+ * A field is considered an event handler if it is a function with a name beginning with `on`.
+ *
+ * @param object Object to remove event handlers from.
+ * @returns Object with event handlers removed.
+ */
+function omitEventHandlers(object) {
+  if (object === undefined) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+var _default = exports.default = omitEventHandlers;

package/omitEventHandlers/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/omitEventHandlers/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ownerDocument/index.js

@@ -1 +1,13 @@
-export { default } from './ownerDocument';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ownerDocument.default;
+  }
+});
+var _ownerDocument = _interopRequireDefault(require("./ownerDocument"));

package/ownerDocument/ownerDocument.js

@@ -1,3 +1,9 @@
-export default function ownerDocument(node) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ownerDocument;
+function ownerDocument(node) {
   return node && node.ownerDocument || document;
 }

package/ownerDocument/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/ownerDocument/index.js",
+  "module": "../esm/ownerDocument/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/ownerWindow/index.js

@@ -1 +1,13 @@
-export { default } from './ownerWindow';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ownerWindow.default;
+  }
+});
+var _ownerWindow = _interopRequireDefault(require("./ownerWindow"));

package/ownerWindow/ownerWindow.js

@@ -1,5 +1,12 @@
-import ownerDocument from '../ownerDocument';
-export default function ownerWindow(node) {
-  const doc = ownerDocument(node);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ownerWindow;
+var _ownerDocument = _interopRequireDefault(require("../ownerDocument"));
+function ownerWindow(node) {
+  const doc = (0, _ownerDocument.default)(node);
   return doc.defaultView || window;
 }

package/ownerWindow/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/ownerWindow/index.js",
+  "module": "../esm/ownerWindow/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mui/utils",
-  "version": "6.0.0-beta.0",
+  "version": "6.0.0-beta.3",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
-  "main": "./node/index.js",
+  "main": "./index.js",
   "keywords": [
     "react",
     "react-component",
@@ -26,10 +26,12 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@types/prop-types": "^15.7.12",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "^18.3.1"
+    "react-is": "^18.3.1",
+    "@mui/types": "^7.2.14"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
@@ -48,6 +50,6 @@
   "engines": {
     "node": ">=12.0.0"
   },
-  "module": "./index.js",
+  "module": "./esm/index.js",
   "types": "./index.d.ts"
 }

package/ponyfillGlobal/index.js

@@ -1 +1,13 @@
-export { default } from './ponyfillGlobal';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ponyfillGlobal.default;
+  }
+});
+var _ponyfillGlobal = _interopRequireDefault(require("./ponyfillGlobal"));

package/ponyfillGlobal/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/ponyfillGlobal/index.js",
+  "module": "../esm/ponyfillGlobal/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/ponyfillGlobal/ponyfillGlobal.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /* eslint-disable */
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-export default typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
+var _default = exports.default = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();

package/refType/index.js

@@ -1 +1,13 @@
-export { default } from './refType';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _refType.default;
+  }
+});
+var _refType = _interopRequireDefault(require("./refType"));