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

package/esm/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/esm/omitEventHandlers/index.js

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

package/esm/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/esm/ownerDocument/index.js

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

package/esm/ownerDocument/ownerDocument.js

@@ -0,0 +1,3 @@
+export default function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}

package/esm/ownerWindow/index.js

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

package/esm/ownerWindow/ownerWindow.js

@@ -0,0 +1,5 @@
+import ownerDocument from '../ownerDocument';
+export default function ownerWindow(node) {
+  const doc = ownerDocument(node);
+  return doc.defaultView || window;
+}

package/esm/ponyfillGlobal/index.js

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

package/esm/ponyfillGlobal/ponyfillGlobal.js

@@ -0,0 +1,3 @@
+/* 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')();

package/esm/refType/index.js

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

package/esm/refType/refType.js

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+const refType = PropTypes.oneOfType([PropTypes.func, PropTypes.object]);
+export default refType;

package/esm/requirePropFactory/index.js

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

package/{node → esm}/requirePropFactory/requirePropFactory.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = requirePropFactory;
-function requirePropFactory(componentNameInError, Component) {
+export default function requirePropFactory(componentNameInError, Component) {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
@@ -15,7 +9,7 @@ function requirePropFactory(componentNameInError, Component) {
   } : null;
   const requireProp = requiredProp => (props, propName, componentName, location, propFullName, ...args) => {
     const propFullNameSafe = propFullName || propName;
-    const defaultTypeChecker = prevPropTypes == null ? void 0 : prevPropTypes[propFullNameSafe];
+    const defaultTypeChecker = prevPropTypes?.[propFullNameSafe];
     if (defaultTypeChecker) {
       const typeCheckerResult = defaultTypeChecker(props, propName, componentName, location, propFullName, ...args);
       if (typeCheckerResult) {

package/esm/resolveComponentProps/index.js

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

package/esm/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/esm/resolveProps/index.js

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

package/{node → esm}/resolveProps/resolveProps.js

@@ -1,16 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = resolveProps;
 /**
  * Add keys, values of `defaultProps` that does not exist in `props`
  * @param {object} defaultProps
  * @param {object} props
  * @returns {object} resolved props
  */
-function resolveProps(defaultProps, props) {
+export default function resolveProps(defaultProps, props) {
   const output = {
     ...props
   };

package/esm/setRef/index.js

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

package/{node → esm}/setRef/setRef.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = setRef;
 /**
  * TODO v5: consider making it private
  *
@@ -17,7 +11,7 @@ exports.default = setRef;
  * while still using it inside the component.
  * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
  */
-function setRef(ref, value) {
+export default function setRef(ref, value) {
   if (typeof ref === 'function') {
     ref(value);
   } else if (ref) {

package/esm/types.js

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

package/esm/unsupportedProp/index.js

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

package/{node → esm}/unsupportedProp/unsupportedProp.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = unsupportedProp;
-function unsupportedProp(props, propName, componentName, location, propFullName) {
+export default function unsupportedProp(props, propName, componentName, location, propFullName) {
   if (process.env.NODE_ENV === 'production') {
     return null;
   }

package/esm/useControlled/index.js

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

package/{node → esm}/useControlled/useControlled.js

@@ -1,15 +1,8 @@
-"use strict";
 'use client';
 
 /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useControlled;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function useControlled({
+import * as React from 'react';
+export default function useControlled({
   controlled,
   default: defaultProp,
   name,

package/esm/useEnhancedEffect/index.js

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

package/esm/useEnhancedEffect/useEnhancedEffect.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export default useEnhancedEffect;

package/esm/useEventCallback/index.js

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

package/esm/useEventCallback/useEventCallback.js

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '../useEnhancedEffect';
+
+/**
+ * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * See RFC in https://github.com/reactjs/rfcs/pull/220
+ */
+
+function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect(() => {
+    ref.current = fn;
+  });
+  return React.useRef((...args) =>
+  // @ts-expect-error hide `this`
+  (0, ref.current)(...args)).current;
+}
+export default useEventCallback;

package/esm/useForkRef/index.js

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

package/esm/useForkRef/useForkRef.js

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+import setRef from '../setRef';
+export default function useForkRef(...refs) {
+  /**
+   * This will create a new function if the refs passed to this hook change and are all defined.
+   * This means react will call the old forkRef with `null` and the new forkRef
+   * with the ref. Cleanup naturally emerges from this behavior.
+   */
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return instance => {
+      refs.forEach(ref => {
+        setRef(ref, instance);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}

package/esm/useId/index.js

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

package/{node → esm}/useId/useId.js

@@ -1,13 +1,6 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useId;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import * as React from 'react';
 let globalId = 0;
 function useGlobalId(idOverride) {
   const [defaultId, setDefaultId] = React.useState(idOverride);
@@ -33,10 +26,10 @@ const maybeReactUseId = React['useId'.toString()];
  * @param idOverride
  * @returns {string}
  */
-function useId(idOverride) {
+export default function useId(idOverride) {
   if (maybeReactUseId !== undefined) {
     const reactId = maybeReactUseId();
-    return idOverride != null ? idOverride : reactId;
+    return idOverride ?? reactId;
   }
   // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
   return useGlobalId(idOverride);

package/esm/useLazyRef/index.js

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

package/esm/useLazyRef/useLazyRef.js

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+const UNINITIALIZED = {};
+
+/**
+ * A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
+ * initialization argument, so the initialization function doesn't need to be an inline closure.
+ *
+ * @usage
+ *   const ref = useLazyRef(sortColumns, columns)
+ */
+export default function useLazyRef(init, initArg) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}

package/esm/useLocalStorageState/index.js

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

package/{node → esm}/useLocalStorageState/useLocalStorageState.js

@@ -1,13 +1,7 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import * as React from 'react';
+
 // storage events only work across tabs, we'll use an event emitter to announce within the current tab
 const currentTabChangeListeners = new Map();
 function onCurrentTabStorageChange(key, handler) {
@@ -96,10 +90,7 @@ function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
   const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
-  const getKeySnapshot = React.useCallback(() => {
-    var _getSnapshot;
-    return (_getSnapshot = getSnapshot(area, key)) != null ? _getSnapshot : initialValue;
-  }, [area, initialValue, key]);
+  const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.
   const getKeyServerSnapshot = () => null;
@@ -114,4 +105,4 @@ function useLocalStorageStateBrowser(key, initializer = null) {
   }
   return [storedValue, setStoredValue];
 }
-var _default = exports.default = typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;
+export default typeof window === 'undefined' ? useLocalStorageStateServer : useLocalStorageStateBrowser;

package/esm/useOnMount/index.js

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

package/esm/useOnMount/useOnMount.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+const EMPTY = [];
+
+/**
+ * A React.useEffect equivalent that runs once, when the component is mounted.
+ */
+export default function useOnMount(fn) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(fn, EMPTY);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}

package/esm/usePreviousProps/index.js

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

package/esm/usePreviousProps/usePreviousProps.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+const usePreviousProps = value => {
+  const ref = React.useRef({});
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+export default usePreviousProps;

package/esm/useSlotProps/index.js

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

package/esm/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/esm/useTimeout/index.js

@@ -0,0 +1,2 @@
+export { default } from './useTimeout';
+export { Timeout } from './useTimeout';

package/esm/useTimeout/useTimeout.js

@@ -0,0 +1,35 @@
+'use client';
+
+import useLazyRef from '../useLazyRef/useLazyRef';
+import useOnMount from '../useOnMount/useOnMount';
+export class Timeout {
+  static create() {
+    return new Timeout();
+  }
+  currentId = null;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
+  }
+  clear = () => {
+    if (this.currentId !== null) {
+      clearTimeout(this.currentId);
+      this.currentId = null;
+    }
+  };
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+export default function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}

package/esm/visuallyHidden/index.js

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

package/{node → esm}/visuallyHidden/visuallyHidden.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const visuallyHidden = {
   border: 0,
   clip: 'rect(0 0 0 0)',
@@ -15,4 +9,4 @@ const visuallyHidden = {
   whiteSpace: 'nowrap',
   width: '1px'
 };
-var _default = exports.default = visuallyHidden;
+export default visuallyHidden;

package/exactProp/exactProp.js

@@ -1,9 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exactProp;
 // This module is based on https://github.com/airbnb/prop-types-exact repository.
 // However, in order to reduce the number of dependencies and to remove some extra safe checks
 // the module was forked.
 
 const specialProperty = 'exact-prop: \u200b';
-export default function exactProp(propTypes) {
+function exactProp(propTypes) {
   if (process.env.NODE_ENV === 'production') {
     return propTypes;
   }

package/exactProp/index.js

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

package/exactProp/package.json

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

package/extractEventHandlers/extractEventHandlers.d.ts

@@ -0,0 +1,10 @@
+import { EventHandlers } from '../types';
+/**
+ * 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.
+ */
+declare function extractEventHandlers(object: Record<string, any> | undefined, excludeKeys?: string[]): EventHandlers;
+export default extractEventHandlers;