@material-ui/system - npm Package Compare versions

Comparing version 5.0.0-alpha.24 to 5.0.0-alpha.25

borders.js

@@ -64,18 +64,16 @@ "use strict";
 
-function resolveCssProperty(props, prop, transformer) {
-  // Using a hash computation over an array iteration could be faster, but with only 28 items,
-  // it isn't worth the bundle size.
-  if (prop !== 'borderRadius') {
-    return null;
+const borderRadius = props => {
+  const propValue = props.borderRadius;
+
+  if (propValue) {
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+
+    const styleFromPropValue = () => ({
+      borderRadius: (0, _spacing.getValue)(transformer, propValue)
+    });
+
+    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
   }
 
-  const cssProperties = ['borderRadius'];
-  const styleFromPropValue = (0, _spacing.getStyleFromPropValue)(cssProperties, transformer);
-  const propValue = props[prop];
-  return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
-}
-
-const borderRadius = props => {
-  const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');
-  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+  return null;
 };
@@ -82,0 +80,0 @@

esm/borders.js

 import responsivePropType from './responsivePropType';
 import style from './style';
 import compose from './compose';
-import { createUnaryUnit, getStyleFromPropValue } from './spacing';
+import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
@@ -44,19 +44,16 @@
 });
+export const borderRadius = props => {
+  const propValue = props.borderRadius;
 
-function resolveCssProperty(props, prop, transformer) {
-  // Using a hash computation over an array iteration could be faster, but with only 28 items,
-  // it isn't worth the bundle size.
-  if (prop !== 'borderRadius') {
-    return null;
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+
+    const styleFromPropValue = () => ({
+      borderRadius: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
   }
 
-  const cssProperties = ['borderRadius'];
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
-
-export const borderRadius = props => {
-  const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
-  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+  return null;
 };
@@ -63,0 +60,0 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {

esm/grid.js

 import style from './style';
 import compose from './compose';
-export const gap = style({
-  prop: 'gap'
-});
-export const columnGap = style({
-  prop: 'columnGap'
-});
-export const rowGap = style({
-  prop: 'rowGap'
-});
+import { createUnaryUnit, getValue } from './spacing';
+import { handleBreakpoints } from './breakpoints';
+import responsivePropType from './responsivePropType';
+export const gap = props => {
+  const propValue = props.gap;
+
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
+
+    const styleFromPropValue = () => ({
+      gap: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+gap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  gap: responsivePropType
+} : {};
+gap.filterProps = ['gap'];
+export const columnGap = props => {
+  const propValue = props.columnGap;
+
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
+
+    const styleFromPropValue = () => ({
+      columnGap: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  columnGap: responsivePropType
+} : {};
+columnGap.filterProps = ['columnGap'];
+export const rowGap = props => {
+  const propValue = props.rowGap;
+
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
+
+    const styleFromPropValue = () => ({
+      rowGap: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  rowGap: responsivePropType
+} : {};
+rowGap.filterProps = ['rowGap'];
 export const gridColumn = style({
@@ -13,0 +64,0 @@ prop: 'gridColumn'

grid.js

@@ -14,14 +14,73 @@ "use strict";
 
-const gap = (0, _style.default)({
-  prop: 'gap'
-});
+var _spacing = require("./spacing");
+
+var _breakpoints = require("./breakpoints");
+
+var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+
+const gap = props => {
+  const propValue = props.gap;
+
+  if (propValue) {
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'gap');
+
+    const styleFromPropValue = () => ({
+      gap: (0, _spacing.getValue)(transformer, propValue)
+    });
+
+    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+
 exports.gap = gap;
-const columnGap = (0, _style.default)({
-  prop: 'columnGap'
-});
+gap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  gap: _responsivePropType.default
+} : {};
+gap.filterProps = ['gap'];
+
+const columnGap = props => {
+  const propValue = props.columnGap;
+
+  if (propValue) {
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'columnGap');
+
+    const styleFromPropValue = () => ({
+      columnGap: (0, _spacing.getValue)(transformer, propValue)
+    });
+
+    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+
 exports.columnGap = columnGap;
-const rowGap = (0, _style.default)({
-  prop: 'rowGap'
-});
+columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  columnGap: _responsivePropType.default
+} : {};
+columnGap.filterProps = ['columnGap'];
+
+const rowGap = props => {
+  const propValue = props.rowGap;
+
+  if (propValue) {
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'rowGap');
+
+    const styleFromPropValue = () => ({
+      rowGap: (0, _spacing.getValue)(transformer, propValue)
+    });
+
+    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+
 exports.rowGap = rowGap;
+rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  rowGap: _responsivePropType.default
+} : {};
+rowGap.filterProps = ['rowGap'];
 const gridColumn = (0, _style.default)({
@@ -28,0 +87,0 @@ prop: 'gridColumn'

index.d.ts

 import * as React from 'react';
 import * as CSS from 'csstype';
 import { CSSProperties } from './CSSProperties';
+import {
+  OverwriteCSSProperties,
+  AliasesCSSProperties,
+  StandardCSSProperties,
+} from './styleFunctionSx';
 // disable automatic export
@@ -291,19 +296,33 @@ export {};
 
-export type SystemProps = PropsFor<
-  ComposedStyleFunction<
-    [
-      typeof borders,
-      typeof display,
-      typeof flexbox,
-      typeof grid,
-      typeof palette,
-      typeof positions,
-      typeof shadows,
-      typeof sizing,
-      typeof spacing,
-      typeof typography
-    ]
-  >
+export type CustomSystemProps = OverwriteCSSProperties & AliasesCSSProperties;
+
+export type SimpleSystemKeys = keyof Omit<
+  PropsFor<
+    ComposedStyleFunction<
+      [
+        typeof borders,
+        typeof display,
+        typeof flexbox,
+        typeof grid,
+        typeof palette,
+        typeof positions,
+        typeof shadows,
+        typeof sizing,
+        typeof spacing,
+        typeof typography
+      ]
+    >
+  >,
+  keyof CustomSystemProps
 >;
 
+// The SimpleSystemKeys are subset of the StandardCSSProperties, so this should be ok
+// This is needed as these are used as keys inside StandardCSSProperties
+type StandardSystemKeys = Extract<SimpleSystemKeys, keyof StandardCSSProperties>;
+
+export type SystemProps = {
+  [K in StandardSystemKeys]?: ResponsiveStyleValue<StandardCSSProperties[K]>;
+} &
+  CustomSystemProps;
+
 export {
@@ -310,0 +329,0 @@ default as unstable_styleFunctionSx,

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.24
+/** @license Material-UI v5.0.0-alpha.25
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/borders.js

 import responsivePropType from './responsivePropType';
 import style from './style';
 import compose from './compose';
-import { createUnaryUnit, getStyleFromPropValue } from './spacing';
+import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
@@ -44,19 +44,18 @@
 });
+export var borderRadius = function borderRadius(props) {
+  var propValue = props.borderRadius;
 
-function resolveCssProperty(props, prop, transformer) {
-  // Using a hash computation over an array iteration could be faster, but with only 28 items,
-  // it isn't worth the bundle size.
-  if (prop !== 'borderRadius') {
-    return null;
+  if (propValue) {
+    var transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+
+    var styleFromPropValue = function styleFromPropValue() {
+      return {
+        borderRadius: getValue(transformer, propValue)
+      };
+    };
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
   }
 
-  var cssProperties = ['borderRadius'];
-  var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  var propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
-
-export var borderRadius = function borderRadius(props) {
-  var transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
-  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+  return null;
 };
@@ -63,0 +62,0 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {

legacy/grid.js

 import style from './style';
 import compose from './compose';
-export var gap = style({
-  prop: 'gap'
-});
-export var columnGap = style({
-  prop: 'columnGap'
-});
-export var rowGap = style({
-  prop: 'rowGap'
-});
+import { createUnaryUnit, getValue } from './spacing';
+import { handleBreakpoints } from './breakpoints';
+import responsivePropType from './responsivePropType';
+export var gap = function gap(props) {
+  var propValue = props.gap;
+
+  if (propValue) {
+    var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
+
+    var styleFromPropValue = function styleFromPropValue() {
+      return {
+        gap: getValue(transformer, propValue)
+      };
+    };
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+gap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  gap: responsivePropType
+} : {};
+gap.filterProps = ['gap'];
+export var columnGap = function columnGap(props) {
+  var propValue = props.columnGap;
+
+  if (propValue) {
+    var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
+
+    var styleFromPropValue = function styleFromPropValue() {
+      return {
+        columnGap: getValue(transformer, propValue)
+      };
+    };
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  columnGap: responsivePropType
+} : {};
+columnGap.filterProps = ['columnGap'];
+export var rowGap = function rowGap(props) {
+  var propValue = props.rowGap;
+
+  if (propValue) {
+    var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
+
+    var styleFromPropValue = function styleFromPropValue() {
+      return {
+        rowGap: getValue(transformer, propValue)
+      };
+    };
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  rowGap: responsivePropType
+} : {};
+rowGap.filterProps = ['rowGap'];
 export var gridColumn = style({
@@ -13,0 +70,0 @@ prop: 'gridColumn'

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.24
+/** @license Material-UI v5.0.0-alpha.25
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/borders.js

 import responsivePropType from './responsivePropType';
 import style from './style';
 import compose from './compose';
-import { createUnaryUnit, getStyleFromPropValue } from './spacing';
+import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
@@ -44,19 +44,16 @@
 });
+export const borderRadius = props => {
+  const propValue = props.borderRadius;
 
-function resolveCssProperty(props, prop, transformer) {
-  // Using a hash computation over an array iteration could be faster, but with only 28 items,
-  // it isn't worth the bundle size.
-  if (prop !== 'borderRadius') {
-    return null;
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+
+    const styleFromPropValue = () => ({
+      borderRadius: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
   }
 
-  const cssProperties = ['borderRadius'];
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
-
-export const borderRadius = props => {
-  const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
-  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+  return null;
 };
@@ -63,0 +60,0 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {

modern/grid.js

 import style from './style';
 import compose from './compose';
-export const gap = style({
-  prop: 'gap'
-});
-export const columnGap = style({
-  prop: 'columnGap'
-});
-export const rowGap = style({
-  prop: 'rowGap'
-});
+import { createUnaryUnit, getValue } from './spacing';
+import { handleBreakpoints } from './breakpoints';
+import responsivePropType from './responsivePropType';
+export const gap = props => {
+  const propValue = props.gap;
+
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
+
+    const styleFromPropValue = () => ({
+      gap: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+gap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  gap: responsivePropType
+} : {};
+gap.filterProps = ['gap'];
+export const columnGap = props => {
+  const propValue = props.columnGap;
+
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
+
+    const styleFromPropValue = () => ({
+      columnGap: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  columnGap: responsivePropType
+} : {};
+columnGap.filterProps = ['columnGap'];
+export const rowGap = props => {
+  const propValue = props.rowGap;
+
+  if (propValue) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
+
+    const styleFromPropValue = () => ({
+      rowGap: getValue(transformer, propValue)
+    });
+
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+
+  return null;
+};
+rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  rowGap: responsivePropType
+} : {};
+rowGap.filterProps = ['rowGap'];
 export const gridColumn = style({
@@ -13,0 +64,0 @@ prop: 'gridColumn'

modern/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.24
+/** @license Material-UI v5.0.0-alpha.25
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

package.json

 {
   "name": "@material-ui/system",
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.25",
   "private": false,
@@ -40,3 +40,3 @@ "author": "Material-UI Team",
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "5.0.0-alpha.24",
+    "@material-ui/utils": "5.0.0-alpha.25",
     "csstype": "^3.0.2",
@@ -43,0 +43,0 @@ "prop-types": "^15.7.2"

styleFunctionSx/styleFunctionSx.d.ts

@@ -58,4 +58,1 @@ import * as CSS from 'csstype';
 export default function unstable_styleFunctionSx(props: object): object;
-
-// utils
-export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

865848

increased by1.85%

Lines of code

4434

increased by3.79%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

60

increased by25%

Dependency changes

• + Added@material-ui/utils@5.0.0-alpha.25(transitive)

• - Removed@material-ui/utils@5.0.0-alpha.24(transitive)

• Updated@material-ui/utils@5.0.0-alpha.25