@chakra-ui/utils - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+# [1.0.0-next.5](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/utils@1.0.0-next.4...@chakra-ui/utils@1.0.0-next.5) (2020-07-15)
+
+### Bug Fixes
+
+- [#1180](https://github.com/chakra-ui/chakra-ui/issues/1180) slider moving
+  incorrectly when min is odd and step is even
+  ([4038ad4](https://github.com/chakra-ui/chakra-ui/commit/4038ad4b5ee52f275919b046cc916cdfe73800f8))
+
+### Features
+
+- **css:** allow object notation for responsive props in css
+  ([08c0029](https://github.com/chakra-ui/chakra-ui/commit/08c00290034ee096ee2cb56ae1402b632cc509ad))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # 1.0.0-next.4 (2020-07-01)
@@ -8,0 +26,0 @@

dist/cjs/number.js

@@ -93,2 +93,3 @@ "use strict";
  * @param value the value to round
+ * @param from the number that stepping started from
  * @param step the specified step
@@ -98,4 +99,4 @@ */
 
-function roundValueToStep(value, step) {
-  var nextValue = Math.round(value / step) * step;
+function roundValueToStep(value, from, step) {
+  var nextValue = Math.round((value - from) / step) * step + from;
   var precision = countDecimalPlaces(step);
@@ -102,0 +103,0 @@ return toPrecision(nextValue, precision);

dist/cjs/object.js

@@ -12,5 +12,5 @@ "use strict";
 
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
+var _lodash = _interopRequireDefault(require("lodash.merge"));
 
-exports.merge = _deepmerge["default"];
+exports.merge = _lodash["default"];
 
@@ -17,0 +17,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

dist/cjs/react-helpers.js

@@ -31,3 +31,3 @@ "use strict";
       _options$errorMessage = _options.errorMessage,
-      errorMessage = _options$errorMessage === void 0 ? "useContext must be inside a Provider with a value" : _options$errorMessage,
+      errorMessage = _options$errorMessage === void 0 ? "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider" : _options$errorMessage,
       name = _options.name;
@@ -39,3 +39,7 @@ var Context = /*#__PURE__*/React.createContext(undefined);
     var context = React.useContext(Context);
-    if (!context && strict) throw new Error(errorMessage);
+
+    if (!context && strict) {
+      throw new Error(errorMessage);
+    }
+
     return context;
@@ -42,0 +46,0 @@ }

dist/cjs/responsive.js

@@ -6,2 +6,5 @@ "use strict";
 exports.objectToArrayNotation = objectToArrayNotation;
+exports.arrayToObjectNotation = arrayToObjectNotation;
+exports.isResponsiveObjectLike = isResponsiveObjectLike;
+exports.breakpoints = void 0;
 
@@ -14,2 +17,5 @@ var _assertion = require("./assertion");
 
+var breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl"]);
+exports.breakpoints = breakpoints;
+
 function mapResponsive(prop, mapper) {
@@ -40,28 +46,44 @@ if ((0, _assertion.isArray)(prop)) {
 
-function objectToArrayNotation(obj) {
-  var base = [["base", null], ["sm", null], ["md", null], ["lg", null]];
-  var entries = (0, _object.merge)(base, Object.entries(obj));
-  var mergedObj = Object.fromEntries(entries);
-  var array = Object.values(mergedObj);
-  var isNullBetweenValues = false;
-  array.forEach(function (item, index) {
-    var next = array[index + 1];
+function objectToArrayNotation(obj, bps) {
+  if (bps === void 0) {
+    bps = breakpoints;
+  }
 
-    if (item === null && next != null) {
-      isNullBetweenValues = true;
-    }
+  var result = bps.map(function (br) {
+    var _obj$br;
+
+    return (_obj$br = obj[br]) != null ? _obj$br : null;
   });
 
-  if (!isNullBetweenValues) {
-    array = array.filter(function (item) {
-      return item !== null;
-    });
+  while ((0, _array.getLastItem)(result) === null) {
+    result.pop();
   }
 
-  while ((0, _array.getLastItem)(array) === null) {
-    array.pop();
+  return result;
+}
+
+function arrayToObjectNotation(values, bps) {
+  if (bps === void 0) {
+    bps = breakpoints;
   }
 
-  return array;
+  var result = {};
+  values.forEach(function (value, index) {
+    var key = bps[index];
+    if (value == null) return;
+    result[key] = value;
+  });
+  return result;
 }
+
+function isResponsiveObjectLike(obj, bps) {
+  if (bps === void 0) {
+    bps = breakpoints;
+  }
+
+  var keys = Object.keys(obj);
+  return keys.length > 0 && keys.every(function (key) {
+    return bps.includes(key);
+  });
+}
 //# sourceMappingURL=responsive.js.map

dist/esm/number.js

@@ -74,7 +74,8 @@ import { isNotNumber } from "./assertion";
  * @param value the value to round
+ * @param from the number that stepping started from
  * @param step the specified step
  */
 
-export function roundValueToStep(value, step) {
-  var nextValue = Math.round(value / step) * step;
+export function roundValueToStep(value, from, step) {
+  var nextValue = Math.round((value - from) / step) * step + from;
   var precision = countDecimalPlaces(step);
@@ -81,0 +82,0 @@ return toPrecision(nextValue, precision);

dist/esm/object.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import merge from "deepmerge";
+import merge from "lodash.merge";
 export function omit(object, keys) {
@@ -5,0 +5,0 @@ var result = {};

dist/esm/react-helpers.js

@@ -16,3 +16,3 @@ import * as React from "react";
     strict = true,
-    errorMessage = "useContext must be inside a Provider with a value",
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
     name
@@ -25,3 +25,7 @@ } = options;
     var context = React.useContext(Context);
-    if (!context && strict) throw new Error(errorMessage);
+
+    if (!context && strict) {
+      throw new Error(errorMessage);
+    }
+
     return context;
@@ -28,0 +32,0 @@ }

dist/esm/responsive.js

 import { isArray, isObject } from "./assertion";
-import { objectKeys, merge } from "./object";
+import { objectKeys } from "./object";
 import { getLastItem } from "./array";
+export var breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl"]);
 export function mapResponsive(prop, mapper) {
@@ -28,26 +29,40 @@ if (isArray(prop)) {
 }
-export function objectToArrayNotation(obj) {
-  var base = [["base", null], ["sm", null], ["md", null], ["lg", null]];
-  var entries = merge(base, Object.entries(obj));
-  var mergedObj = Object.fromEntries(entries);
-  var array = Object.values(mergedObj);
-  var isNullBetweenValues = false;
-  array.forEach((item, index) => {
-    var next = array[index + 1];
+export function objectToArrayNotation(obj, bps) {
+  if (bps === void 0) {
+    bps = breakpoints;
+  }
 
-    if (item === null && next != null) {
-      isNullBetweenValues = true;
-    }
+  var result = bps.map(br => {
+    var _obj$br;
+
+    return (_obj$br = obj[br]) != null ? _obj$br : null;
   });
 
-  if (!isNullBetweenValues) {
-    array = array.filter(item => item !== null);
+  while (getLastItem(result) === null) {
+    result.pop();
   }
 
-  while (getLastItem(array) === null) {
-    array.pop();
+  return result;
+}
+export function arrayToObjectNotation(values, bps) {
+  if (bps === void 0) {
+    bps = breakpoints;
   }
 
-  return array;
+  var result = {};
+  values.forEach((value, index) => {
+    var key = bps[index];
+    if (value == null) return;
+    result[key] = value;
+  });
+  return result;
 }
+export function isResponsiveObjectLike(obj, bps) {
+  if (bps === void 0) {
+    bps = breakpoints;
+  }
+
+  var keys = Object.keys(obj);
+  return keys.length > 0 && keys.every(key => bps.includes(key));
+}
 //# sourceMappingURL=responsive.js.map

dist/types/number.d.ts

@@ -38,5 +38,6 @@ export declare const minSafeInteger: number;
  * @param value the value to round
+ * @param from the number that stepping started from
  * @param step the specified step
  */
-export declare function roundValueToStep(value: number, step: number): string;
+export declare function roundValueToStep(value: number, from: number, step: number): string;
 /**
@@ -43,0 +44,0 @@ * Clamps a value to ensure it stays within the min and max range.

dist/types/object.d.ts

 import { Dict } from "./types";
-import merge from "deepmerge";
+import merge from "lodash.merge";
 export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Pick<T, Exclude<keyof T, K>>;
@@ -4,0 +4,0 @@ export declare function pick<T extends Dict, K extends keyof T>(object: T, keys: K[]): { [P in K]: T[P]; };

dist/types/responsive.d.ts

 import { Dict } from "./types";
+export declare const breakpoints: readonly string[];
 export declare function mapResponsive(prop: any, mapper: (val: any) => any): any;
-export declare function objectToArrayNotation(obj: Dict): any[];
+export declare function objectToArrayNotation(obj: Dict, bps?: readonly string[]): any[];
+export declare function arrayToObjectNotation(values: any[], bps?: readonly string[]): Record<string, any>;
+export declare function isResponsiveObjectLike(obj: Dict, bps?: readonly string[]): boolean;
 //# sourceMappingURL=responsive.d.ts.map

package.json

 {
   "name": "@chakra-ui/utils",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "Common utilties and types for Chakra UI",
@@ -42,9 +42,12 @@ "author": "Segun Adebayo <[e-mail]>",
     "css-box-model": "1.2.1",
-    "deepmerge": "4.2.2",
+    "lodash.merge": "4.6.2",
     "memoize-one": "5.1.1"
   },
+  "devDependencies": {
+    "@types/lodash.merge": "4.6.6"
+  },
   "peerDependencies": {
     "react": "16.x"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

src/number.ts

@@ -74,6 +74,7 @@ import { isNotNumber } from "./assertion"
  * @param value the value to round
+ * @param from the number that stepping started from
  * @param step the specified step
  */
-export function roundValueToStep(value: number, step: number) {
-  const nextValue = Math.round(value / step) * step
+export function roundValueToStep(value: number, from: number, step: number) {
+  const nextValue = Math.round((value - from) / step) * step + from
   const precision = countDecimalPlaces(step)
@@ -80,0 +81,0 @@ return toPrecision(nextValue, precision)

src/object.ts

 import { Omit, Dict } from "./types"
-import merge from "deepmerge"
+import merge from "lodash.merge"
 
@@ -4,0 +4,0 @@ export function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]) {

src/react-helpers.ts

@@ -30,3 +30,3 @@ import * as React from "react"
     strict = true,
-    errorMessage = "useContext must be inside a Provider with a value",
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
     name,
@@ -41,3 +41,7 @@ } = options
     const context = React.useContext(Context)
-    if (!context && strict) throw new Error(errorMessage)
+
+    if (!context && strict) {
+      throw new Error(errorMessage)
+    }
+
     return context
@@ -44,0 +48,0 @@ }

src/responsive.ts

 import { isArray, isObject } from "./assertion"
 import { Dict } from "./types"
-import { objectKeys, merge } from "./object"
+import { objectKeys } from "./object"
 import { getLastItem } from "./array"
 
+export const breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl"])
+
 export function mapResponsive(prop: any, mapper: (val: any) => any) {
@@ -30,32 +32,23 @@ if (isArray(prop)) {
 
-export function objectToArrayNotation(obj: Dict) {
-  const base = [
-    ["base", null],
-    ["sm", null],
-    ["md", null],
-    ["lg", null],
-  ]
+export function objectToArrayNotation(obj: Dict, bps = breakpoints) {
+  const result = bps.map((br) => obj[br] ?? null)
+  while (getLastItem(result) === null) {
+    result.pop()
+  }
+  return result
+}
 
-  const entries = merge(base, Object.entries(obj))
-  const mergedObj = Object.fromEntries(entries)
-  let array = Object.values(mergedObj)
-
-  let isNullBetweenValues = false
-
-  array.forEach((item, index) => {
-    const next = array[index + 1]
-    if (item === null && next != null) {
-      isNullBetweenValues = true
-    }
+export function arrayToObjectNotation(values: any[], bps = breakpoints) {
+  const result = {} as Dict
+  values.forEach((value, index) => {
+    const key = bps[index]
+    if (value == null) return
+    result[key] = value
   })
+  return result
+}
 
-  if (!isNullBetweenValues) {
-    array = array.filter((item) => item !== null)
-  }
-
-  while (getLastItem(array) === null) {
-    array.pop()
-  }
-
-  return array
+export function isResponsiveObjectLike(obj: Dict, bps = breakpoints) {
+  const keys = Object.keys(obj)
+  return keys.length > 0 && keys.every((key) => bps.includes(key))
 }

New 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

226862

increased by1.53%

Lines of code

2799

increased by1.41%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.merge@4.6.2

• + Addedlodash.merge@4.6.2(transitive)

• - Removeddeepmerge@4.2.2

• - Removeddeepmerge@4.2.2(transitive)