@mui/system - npm Package Compare versions

Comparing version 5.14.3 to 5.14.4

Box/Box.d.ts

 import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '@mui/types';
-import { Theme } from '../createTheme';
+import { Theme as SystemTheme } from '../createTheme';
 import {
@@ -173,6 +173,15 @@ SxProps,
 
-export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div', T extends object = Theme> {
-  props: P &
-    SystemProps<T> & {
+export interface BoxTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+  Theme extends object = SystemTheme,
+> {
+  props: AdditionalProps &
+    SystemProps<Theme> & {
       children?: React.ReactNode;
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
+      component?: React.ElementType;
       ref?: React.Ref<unknown>;
@@ -182,5 +191,5 @@ /**
        */
-      sx?: SxProps<T>;
+      sx?: SxProps<Theme>;
     };
-  defaultComponent: D;
+  defaultComponent: RootComponent;
 }
@@ -201,6 +210,8 @@ /**
 export type BoxProps<
-  D extends React.ElementType = BoxTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BoxTypeMap<P, D>, D> & { component?: React.ElementType };
+  RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Box;

Container/Container.d.ts

@@ -0,0 +0,0 @@ /**

Container/containerClasses.d.ts

@@ -0,0 +0,0 @@ export interface ContainerClasses {

Container/ContainerProps.d.ts

@@ -6,4 +6,4 @@ import * as React from 'react';
 import { ContainerClasses } from './containerClasses';
-export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & {
+export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & {
         children?: React.ReactNode;
@@ -39,4 +39,4 @@ /**
     };
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
 }
-export type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
+export type ContainerProps<RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;

Container/createContainer.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

createStyled.d.ts

@@ -27,14 +27,14 @@ import * as React from 'react';
 
-export type CreateMUIStyled<T extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
-  MUIStyledCommonProps<T>,
+export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
+  MUIStyledCommonProps<Theme>,
   MuiStyledOptions,
-  T
+  Theme
 >;
 
-export default function createStyled<T extends object = DefaultTheme>(options?: {
+export default function createStyled<Theme extends object = DefaultTheme>(options?: {
   themeId?: string;
-  defaultTheme?: T;
+  defaultTheme?: Theme;
   rootShouldForwardProp?: (prop: PropertyKey) => boolean;
   slotShouldForwardProp?: (prop: PropertyKey) => boolean;
   styleFunctionSx?: typeof styleFunctionSx;
-}): CreateMUIStyled<T>;
+}): CreateMUIStyled<Theme>;

createStyled.js

@@ -81,2 +81,5 @@ "use strict";
 const lowercaseFirstLetter = string => {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
@@ -91,2 +94,8 @@ };
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (props, styles) => styles[slot];
+}
 function createStyled(input = {}) {
@@ -116,3 +125,5 @@ const {
         skipSx: inputSkipSx,
-        overridesResolver
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
+        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
@@ -122,3 +133,6 @@ options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded);
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
@@ -128,2 +142,4 @@ let label;
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
@@ -133,3 +149,6 @@ }
     let shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
@@ -216,3 +235,3 @@ } else if (componentSlot) {
         if (componentName) {
-          displayName = `${componentName}${componentSlot || ''}`;
+          displayName = `${componentName}${(0, _utils.unstable_capitalize)(componentSlot || '')}`;
         }
@@ -219,0 +238,0 @@ if (displayName === undefined) {

createTheme/createSpacing.d.ts

@@ -0,0 +0,0 @@ export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;

cssVars/createCssVarsTheme.d.ts

@@ -0,0 +0,0 @@ import { DefaultCssVarsTheme } from './prepareCssVars';

cssVars/createGetCssVar.d.ts

@@ -0,0 +0,0 @@ /**

cssVars/cssVarsParser.d.ts

@@ -0,0 +0,0 @@ type NestedRecord<V = any> = {

cssVars/getInitColorSchemeScript.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

cssVars/index.d.ts

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

cssVars/prepareCssVars.d.ts

@@ -0,0 +0,0 @@ export interface DefaultCssVarsTheme {

cssVars/useCurrentColorScheme.d.ts

@@ -0,0 +0,0 @@ export type Mode = 'light' | 'dark' | 'system';

esm/createStyled.js

@@ -6,3 +6,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
 import createTheme from './createTheme';
@@ -70,2 +70,5 @@ import propsToClassKey from './propsToClassKey';
 const lowercaseFirstLetter = string => {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
@@ -80,2 +83,8 @@ };
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (props, styles) => styles[slot];
+}
 export default function createStyled(input = {}) {
@@ -105,3 +114,5 @@ const {
         skipSx: inputSkipSx,
-        overridesResolver
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
+        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
@@ -111,3 +122,6 @@ options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
@@ -117,2 +131,4 @@ let label;
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
@@ -122,3 +138,6 @@ }
     let shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
@@ -205,3 +224,3 @@ } else if (componentSlot) {
         if (componentName) {
-          displayName = `${componentName}${componentSlot || ''}`;
+          displayName = `${componentName}${capitalize(componentSlot || '')}`;
         }
@@ -208,0 +227,0 @@ if (displayName === undefined) {

esm/styleFunctionSx/styleFunctionSx.js

@@ -37,2 +37,4 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
@@ -39,0 +41,0 @@ return {

GlobalStyles/GlobalStyles.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

GlobalStyles/index.d.ts

 export { default } from './GlobalStyles';
 export * from './GlobalStyles';

index.js

 /**
- * @mui/system v5.14.3
+ * @mui/system v5.14.4
  *
@@ -4,0 +4,0 @@ * @license MIT

legacy/createStyled.js

@@ -7,3 +7,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
 import createTheme from './createTheme';
@@ -70,2 +70,5 @@ import propsToClassKey from './propsToClassKey';
 var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
@@ -79,2 +82,10 @@ };
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return function (props, styles) {
+    return styles[slot];
+  };
+}
 export default function createStyled() {
@@ -110,5 +121,9 @@ var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       inputSkipSx = inputOptions.skipSx,
-      overridesResolver = inputOptions.overridesResolver,
+      _inputOptions$overrid = inputOptions.overridesResolver,
+      overridesResolver = _inputOptions$overrid === void 0 ? defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) : _inputOptions$overrid,
       options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     var skipSx = inputSkipSx || false;
@@ -118,2 +133,4 @@ var label;
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = "".concat(componentName, "-").concat(lowercaseFirstLetter(componentSlot || 'Root'));
@@ -123,3 +140,6 @@ }
     var shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
@@ -214,3 +234,3 @@ } else if (componentSlot) {
         if (componentName) {
-          displayName = "".concat(componentName).concat(componentSlot || '');
+          displayName = "".concat(componentName).concat(capitalize(componentSlot || ''));
         }
@@ -217,0 +237,0 @@ if (displayName === undefined) {

legacy/index.js

 /**
- * @mui/system v5.14.3
+ * @mui/system v5.14.4
  *
@@ -4,0 +4,0 @@ * @license MIT

legacy/styleFunctionSx/styleFunctionSx.js

@@ -41,2 +41,4 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
@@ -43,0 +45,0 @@ return _defineProperty({}, prop, val);

modern/createStyled.js

@@ -6,3 +6,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
 import createTheme from './createTheme';
@@ -69,2 +69,5 @@ import propsToClassKey from './propsToClassKey';
 const lowercaseFirstLetter = string => {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
@@ -79,2 +82,8 @@ };
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (props, styles) => styles[slot];
+}
 export default function createStyled(input = {}) {
@@ -104,3 +113,5 @@ const {
         skipSx: inputSkipSx,
-        overridesResolver
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
+        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
@@ -110,3 +121,6 @@ options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
@@ -116,2 +130,4 @@ let label;
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
@@ -121,3 +137,6 @@ }
     let shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
@@ -204,3 +223,3 @@ } else if (componentSlot) {
         if (componentName) {
-          displayName = `${componentName}${componentSlot || ''}`;
+          displayName = `${componentName}${capitalize(componentSlot || '')}`;
         }
@@ -207,0 +226,0 @@ if (displayName === undefined) {

modern/index.js

 /**
- * @mui/system v5.14.3
+ * @mui/system v5.14.4
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/styleFunctionSx/styleFunctionSx.js

@@ -37,2 +37,4 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
@@ -39,0 +41,0 @@ return {

package.json

 {
   "name": "@mui/system",
-  "version": "5.14.3",
+  "version": "5.14.4",
   "private": false,
@@ -47,6 +47,6 @@ "author": "MUI Team",
     "@babel/runtime": "^7.22.6",
-    "@mui/private-theming": "^5.13.7",
+    "@mui/private-theming": "^5.14.4",
     "@mui/styled-engine": "^5.13.2",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.3",
+    "@mui/utils": "^5.14.4",
     "clsx": "^2.0.0",
@@ -53,0 +53,0 @@ "csstype": "^3.1.2",

Stack/createStack.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Stack/index.d.ts

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

Stack/Stack.d.ts

@@ -0,0 +0,0 @@ /**

Stack/stackClasses.d.ts

@@ -0,0 +0,0 @@ export interface StackClasses {

Stack/StackProps.d.ts

@@ -37,4 +37,4 @@ import * as React from 'react';
 }
-export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & StackBaseProps & {
+export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & StackBaseProps & {
         /**
@@ -45,7 +45,7 @@ * The system prop, which allows defining system overrides as well as additional CSS styles.
     } & SystemProps<Theme>;
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
 }
-export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
+export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
     component?: React.ElementType;
-}> = OverrideProps<StackTypeMap<P, D>, D>;
+}> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
@@ -52,0 +52,0 @@ direction: StackProps['direction'];

styleFunctionSx/styleFunctionSx.js

@@ -45,2 +45,4 @@ "use strict";
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
@@ -47,0 +49,0 @@ return {

Unstable_Grid/createGrid.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Unstable_Grid/Grid.d.ts

@@ -0,0 +0,0 @@ /**

Unstable_Grid/gridClasses.d.ts

@@ -0,0 +0,0 @@ export interface GridClasses {

Unstable_Grid/gridGenerator.d.ts

@@ -0,0 +0,0 @@ import { Breakpoints } from '../createTheme/createBreakpoints';

Unstable_Grid/GridProps.d.ts

@@ -176,11 +176,11 @@ import * as React from 'react';
 }
-export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & GridBaseProps & {
         sx?: SxProps<Theme>;
     } & SystemProps<Theme>;
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
 }
-export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
     component?: React.ElementType;
-}> = OverrideProps<GridTypeMap<P, D>, D>;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export {};

Unstable_Grid/index.d.ts

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

Unstable_Grid/traverseBreakpoints.d.ts

@@ -0,0 +0,0 @@ import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1425910

increased by0.75%

Lines of code

20188

increased by0.44%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@mui/private-theming@^5.14.4

• Updated@mui/utils@^5.14.4