@mui/material 5.15.4 → 5.15.5

package/utils/types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/base';
+export type SlotCommonProps = {
+    component?: React.ElementType;
+    sx?: SxProps;
+};
+export type SlotProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> = SlotComponentProps<TSlotComponent, SlotCommonProps & TOverrides, TOwnerState>;
+/**
+ * Use the keys of `Slots` to make sure that K contains all of the keys
+ *
+ * @example CreateSlotsAndSlotProps<{ root: React.ElementType, decorator: React.ElementType }, { root: ..., decorator: ... }>
+ */
+export type CreateSlotsAndSlotProps<Slots, K extends Record<keyof Slots, any>> = {
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots?: Slots;
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: {
+        [P in keyof K]?: K[P];
+    };
+};

package/utils/types.js

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

package/utils/useSlot.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { ClassValue } from 'clsx';
+export type WithCommonProps<T> = T & {
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: React.Ref<any>;
+};
+type EventHandlers = Record<string, React.EventHandler<any>>;
+type ExtractComponentProps<P> = P extends infer T | ((ownerState: any) => infer T) ? T : never;
+/**
+ * An internal function to create a Material UI slot.
+ *
+ * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+ * while Base UI does not need to support leaf component customization.
+ *
+ * @param {string} name: name of the slot
+ * @param {object} parameters
+ * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+ *
+ * Note: the returned slot's props
+ * - will never contain `component` prop.
+ * - might contain `as` prop.
+ */
+export default function useSlot<T extends string, ElementType extends React.ElementType, SlotProps, OwnerState extends {}, ExternalSlotProps extends {
+    component?: React.ElementType;
+    ref?: React.Ref<any>;
+}, ExternalForwardedProps extends {
+    component?: React.ElementType;
+    slots?: {
+        [k in T]?: React.ElementType;
+    };
+    slotProps?: {
+        [k in T]?: ExternalSlotProps | ((ownerState: OwnerState) => ExternalSlotProps);
+    };
+}, AdditionalProps, SlotOwnerState extends {}>(
+/**
+ * The slot's name. All Material UI components should have `root` slot.
+ *
+ * If the name is `root`, the logic behaves differently from other slots,
+ * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+ */
+name: T, parameters: (T extends 'root' ? {
+    ref: React.ForwardedRef<any>;
+} : {
+    ref?: React.ForwardedRef<any>;
+}) & {
+    /**
+     * The slot's className
+     */
+    className: ClassValue | ClassValue[];
+    /**
+     * The slot's default styled-component
+     */
+    elementType: ElementType;
+    /**
+     * The component's ownerState
+     */
+    ownerState: OwnerState;
+    /**
+     * The `other` props from the consumer. It has to contain `component`, `slots`, and `slotProps`.
+     * The function will use those props to calculate the final rendered element and the returned props.
+     *
+     * If the slot is not `root`, the rest of the `externalForwardedProps` are neglected.
+     */
+    externalForwardedProps: ExternalForwardedProps;
+    getSlotProps?: (other: EventHandlers) => WithCommonProps<SlotProps>;
+    additionalProps?: WithCommonProps<AdditionalProps>;
+    /**
+     * For overriding the component's ownerState for the slot.
+     * This is required for some components that need styling via `ownerState`.
+     *
+     * It is a function because `slotProps.{slot}` can be a function which has to be resolved first.
+     */
+    getSlotOwnerState?: (mergedProps: AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps['slotProps'], undefined>[T], undefined>>) => SlotOwnerState;
+    /**
+     * props forward to `T` only if the `slotProps.*.component` is not provided.
+     * e.g. Autocomplete's listbox uses Popper + StyledComponent
+     */
+    internalForwardedProps?: any;
+}): [ElementType, {
+    className: string;
+    ownerState: OwnerState & SlotOwnerState;
+} & AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps["slotProps"], undefined>[T], undefined>>];
+export {};

package/utils/useSlot.js

@@ -0,0 +1,82 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
+  _excluded2 = ["component", "slots", "slotProps"],
+  _excluded3 = ["component"];
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { appendOwnerState, resolveComponentProps, mergeSlotProps } from '@mui/base/utils';
+/**
+ * An internal function to create a Material UI slot.
+ *
+ * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+ * while Base UI does not need to support leaf component customization.
+ *
+ * @param {string} name: name of the slot
+ * @param {object} parameters
+ * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+ *
+ * Note: the returned slot's props
+ * - will never contain `component` prop.
+ * - might contain `as` prop.
+ */
+export default function useSlot(
+/**
+ * The slot's name. All Material UI components should have `root` slot.
+ *
+ * If the name is `root`, the logic behaves differently from other slots,
+ * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+ */
+name, parameters) {
+  const {
+      className,
+      elementType: initialElementType,
+      ownerState,
+      externalForwardedProps,
+      getSlotOwnerState,
+      internalForwardedProps
+    } = parameters,
+    useSlotPropsParams = _objectWithoutPropertiesLoose(parameters, _excluded);
+  const {
+      component: rootComponent,
+      slots = {
+        [name]: undefined
+      },
+      slotProps = {
+        [name]: undefined
+      }
+    } = externalForwardedProps,
+    other = _objectWithoutPropertiesLoose(externalForwardedProps, _excluded2);
+  const elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
+  // `resolvedComponentsProps` is always a plain object.
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  const _mergeSlotProps = mergeSlotProps(_extends({
+      className
+    }, useSlotPropsParams, {
+      externalForwardedProps: name === 'root' ? other : undefined,
+      externalSlotProps: resolvedComponentsProps
+    })),
+    {
+      props: {
+        component: slotComponent
+      },
+      internalRef
+    } = _mergeSlotProps,
+    mergedProps = _objectWithoutPropertiesLoose(_mergeSlotProps.props, _excluded3);
+  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
+  const finalOwnerState = _extends({}, ownerState, slotOwnerState);
+  const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
+  const props = appendOwnerState(elementType, _extends({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
+    as: LeafComponent
+  }, {
+    ref
+  }), finalOwnerState);
+  Object.keys(slotOwnerState).forEach(propName => {
+    delete props[propName];
+  });
+  return [elementType, props];
+}

package/zero-styled/index.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as styled } from '../styles/styled';

package/zero-styled/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as styled } from '../styles/styled';

package/zero-styled/package.json

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