@chakra-ui/utils - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

 # Change Log
 
+## 1.3.0
+
+### Minor Changes
+
+- [`87cc23e14`](https://github.com/chakra-ui/chakra-ui/commit/87cc23e14814e02cbbfc9737c2356cef682ddd5d)
+  [#3463](https://github.com/chakra-ui/chakra-ui/pull/3463) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Move responsive utilities
+  to utils to prevent duplicate work
+
 ## 1.2.0
@@ -4,0 +13,0 @@

dist/cjs/array.js

@@ -15,3 +15,2 @@ "use strict";
 exports.getNextItemFromSearch = getNextItemFromSearch;
-exports.isCustomBreakpoint = void 0;
 
@@ -185,16 +184,2 @@ function getFirstItem(array) {
 }
-/**
- * since breakpoints are defined as custom properties on an array, you may
- * `Object.keys(theme.breakpoints)` to retrieve both regular numeric indices
- * and custom breakpoints as string.
- *
- * This function returns true given a custom array property.
- */
-
-
-var isCustomBreakpoint = function isCustomBreakpoint(maybeBreakpoint) {
-  return Number.isNaN(Number(maybeBreakpoint));
-};
-
-exports.isCustomBreakpoint = isCustomBreakpoint;
 //# sourceMappingURL=array.js.map

dist/cjs/responsive.js

@@ -8,4 +8,7 @@ "use strict";
 exports.isResponsiveObjectLike = isResponsiveObjectLike;
-exports.breakpoints = void 0;
+exports.analyzeBreakpoints = analyzeBreakpoints;
+exports.isCustomBreakpoint = exports.px = exports.breakpoints = void 0;
 
+var _array = require("./array");
+
 var _assertion = require("./assertion");
@@ -15,5 +18,3 @@
 
-var _array = require("./array");
-
-var breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl"]);
+var breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl", "2xl"]);
 exports.breakpoints = breakpoints;
@@ -88,2 +89,155 @@
 }
+/**
+ * @note
+ * The code below is the recommended way to analyze breakpoints
+ * related stuff. Avoid using functions above, it'll be removed in the
+ * next major
+ */
+
+
+var analyzeCSSValue = function analyzeCSSValue(value) {
+  var num = parseFloat(value.toString());
+  var unit = value.toString().replace(String(num), "");
+  return {
+    unitless: !unit,
+    value: num,
+    unit: unit
+  };
+};
+
+var px = function px(value) {
+  if (value == null) return value;
+
+  var _analyzeCSSValue = analyzeCSSValue(value),
+      unitless = _analyzeCSSValue.unitless;
+
+  return unitless || (0, _assertion.isNumber)(value) ? value + "px" : value;
+};
+
+exports.px = px;
+
+var sortByBreakpointValue = function sortByBreakpointValue(a, b) {
+  return parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1;
+};
+
+var sortBps = function sortBps(breakpoints) {
+  return (0, _object.fromEntries)(Object.entries(breakpoints).sort(sortByBreakpointValue));
+};
+
+function normalize(breakpoints) {
+  var sorted = sortBps(breakpoints);
+  return Object.assign(Object.values(sorted), sorted);
+}
+
+function keys(breakpoints) {
+  var value = Object.keys(sortBps(breakpoints));
+  return new Set(value);
+}
+
+function subtract(value) {
+  if (!value) return value;
+  value = px(value);
+  var factor = value.endsWith("px") ? -1 : // the equivalent of 1px in em using a 16px base
+  -0.0635;
+  return (0, _assertion.isNumber)(value) ? "" + (value + factor) : value.replace(/([0-9]+\.?[0-9]*)/, function (m) {
+    return "" + (parseFloat(m) + factor);
+  });
+}
+
+function queryString(min, max) {
+  var query = [];
+  if (min) query.push("@media screen and (min-width: " + px(min) + ")");
+  if (query.length > 0 && max) query.push("and");
+  if (max) query.push("@media screen and (max-width: " + px(max) + ")");
+  return query.join(" ");
+}
+
+function analyzeBreakpoints(breakpoints) {
+  var _breakpoints$base;
+
+  if (!breakpoints) return null;
+  breakpoints.base = (_breakpoints$base = breakpoints.base) != null ? _breakpoints$base : "0px";
+  var normalized = normalize(breakpoints);
+  var queries = Object.entries(breakpoints).sort(sortByBreakpointValue).map(function (_ref, index, entry) {
+    var _entry;
+
+    var breakpoint = _ref[0],
+        minW = _ref[1];
+
+    var _ref2 = (_entry = entry[index + 1]) != null ? _entry : [],
+        maxW = _ref2[1];
+
+    maxW = parseFloat(maxW) > 0 ? subtract(maxW) : undefined;
+    return {
+      breakpoint: breakpoint,
+      minW: minW,
+      maxW: maxW,
+      maxWQuery: queryString(null, maxW),
+      minWQuery: queryString(minW),
+      minMaxQuery: queryString(minW, maxW)
+    };
+  });
+
+  var _keys = keys(breakpoints);
+
+  var _keysArr = Array.from(_keys.values());
+
+  return {
+    keys: _keys,
+    normalized: normalized,
+    isResponsive: function isResponsive(test) {
+      var keys = Object.keys(test);
+      return keys.length > 0 && keys.every(function (key) {
+        return _keys.has(key);
+      });
+    },
+    asObject: sortBps(breakpoints),
+    asArray: normalize(breakpoints),
+    details: queries,
+    media: [null].concat(normalized.map(function (minW) {
+      return queryString(minW);
+    }).slice(1)),
+    toArrayValue: function toArrayValue(test) {
+      if (!(0, _assertion.isObject)(test)) {
+        throw new Error("toArrayValue: value must be an object");
+      }
+
+      var result = _keysArr.map(function (bp) {
+        var _test$bp;
+
+        return (_test$bp = test[bp]) != null ? _test$bp : null;
+      });
+
+      while ((0, _array.getLastItem)(result) === null) {
+        result.pop();
+      }
+
+      return result;
+    },
+    toObjectValue: function toObjectValue(test) {
+      if (!Array.isArray(test)) {
+        throw new Error("toObjectValue: value must be an array");
+      }
+
+      return test.reduce(function (acc, value, index) {
+        var key = _keysArr[index];
+        if (key != null && value != null) acc[key] = value;
+        return acc;
+      }, {});
+    }
+  };
+}
+
+/**
+ * since breakpoints are defined as custom properties on an array, you may
+ * `Object.keys(theme.breakpoints)` to retrieve both regular numeric indices
+ * and custom breakpoints as string.
+ *
+ * This function returns true given a custom array property.
+ */
+var isCustomBreakpoint = function isCustomBreakpoint(maybeBreakpoint) {
+  return Number.isNaN(Number(maybeBreakpoint));
+};
+
+exports.isCustomBreakpoint = isCustomBreakpoint;
 //# sourceMappingURL=responsive.js.map

dist/esm/array.js

@@ -150,11 +150,2 @@ export function getFirstItem(array) {
 }
-/**
- * since breakpoints are defined as custom properties on an array, you may
- * `Object.keys(theme.breakpoints)` to retrieve both regular numeric indices
- * and custom breakpoints as string.
- *
- * This function returns true given a custom array property.
- */
-
-export var isCustomBreakpoint = maybeBreakpoint => Number.isNaN(Number(maybeBreakpoint));
 //# sourceMappingURL=array.js.map

dist/esm/responsive.js

@@ -1,5 +0,5 @@
-import { isArray, isObject } from "./assertion";
-import { objectKeys } from "./object";
 import { getLastItem } from "./array";
-export var breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl"]);
+import { isArray, isNumber, isObject } from "./assertion";
+import { fromEntries, objectKeys } from "./object";
+export var breakpoints = Object.freeze(["base", "sm", "md", "lg", "xl", "2xl"]);
 export function mapResponsive(prop, mapper) {
@@ -67,2 +67,138 @@ if (isArray(prop)) {
 }
+/**
+ * @note
+ * The code below is the recommended way to analyze breakpoints
+ * related stuff. Avoid using functions above, it'll be removed in the
+ * next major
+ */
+
+var analyzeCSSValue = value => {
+  var num = parseFloat(value.toString());
+  var unit = value.toString().replace(String(num), "");
+  return {
+    unitless: !unit,
+    value: num,
+    unit
+  };
+};
+
+export var px = value => {
+  if (value == null) return value;
+  var {
+    unitless
+  } = analyzeCSSValue(value);
+  return unitless || isNumber(value) ? value + "px" : value;
+};
+
+var sortByBreakpointValue = (a, b) => parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1;
+
+var sortBps = breakpoints => fromEntries(Object.entries(breakpoints).sort(sortByBreakpointValue));
+
+function normalize(breakpoints) {
+  var sorted = sortBps(breakpoints);
+  return Object.assign(Object.values(sorted), sorted);
+}
+
+function keys(breakpoints) {
+  var value = Object.keys(sortBps(breakpoints));
+  return new Set(value);
+}
+
+function subtract(value) {
+  if (!value) return value;
+  value = px(value);
+  var factor = value.endsWith("px") ? -1 : // the equivalent of 1px in em using a 16px base
+  -0.0635;
+  return isNumber(value) ? "" + (value + factor) : value.replace(/([0-9]+\.?[0-9]*)/, m => "" + (parseFloat(m) + factor));
+}
+
+function queryString(min, max) {
+  var query = [];
+  if (min) query.push("@media screen and (min-width: " + px(min) + ")");
+  if (query.length > 0 && max) query.push("and");
+  if (max) query.push("@media screen and (max-width: " + px(max) + ")");
+  return query.join(" ");
+}
+
+export function analyzeBreakpoints(breakpoints) {
+  var _breakpoints$base;
+
+  if (!breakpoints) return null;
+  breakpoints.base = (_breakpoints$base = breakpoints.base) != null ? _breakpoints$base : "0px";
+  var normalized = normalize(breakpoints);
+  var queries = Object.entries(breakpoints).sort(sortByBreakpointValue).map((_ref, index, entry) => {
+    var _entry;
+
+    var [breakpoint, minW] = _ref;
+    var [, maxW] = (_entry = entry[index + 1]) != null ? _entry : [];
+    maxW = parseFloat(maxW) > 0 ? subtract(maxW) : undefined;
+    return {
+      breakpoint,
+      minW,
+      maxW,
+      maxWQuery: queryString(null, maxW),
+      minWQuery: queryString(minW),
+      minMaxQuery: queryString(minW, maxW)
+    };
+  });
+
+  var _keys = keys(breakpoints);
+
+  var _keysArr = Array.from(_keys.values());
+
+  return {
+    keys: _keys,
+    normalized,
+
+    isResponsive(test) {
+      var keys = Object.keys(test);
+      return keys.length > 0 && keys.every(key => _keys.has(key));
+    },
+
+    asObject: sortBps(breakpoints),
+    asArray: normalize(breakpoints),
+    details: queries,
+    media: [null, ...normalized.map(minW => queryString(minW)).slice(1)],
+
+    toArrayValue(test) {
+      if (!isObject(test)) {
+        throw new Error("toArrayValue: value must be an object");
+      }
+
+      var result = _keysArr.map(bp => {
+        var _test$bp;
+
+        return (_test$bp = test[bp]) != null ? _test$bp : null;
+      });
+
+      while (getLastItem(result) === null) {
+        result.pop();
+      }
+
+      return result;
+    },
+
+    toObjectValue(test) {
+      if (!Array.isArray(test)) {
+        throw new Error("toObjectValue: value must be an array");
+      }
+
+      return test.reduce((acc, value, index) => {
+        var key = _keysArr[index];
+        if (key != null && value != null) acc[key] = value;
+        return acc;
+      }, {});
+    }
+
+  };
+}
+
+/**
+ * since breakpoints are defined as custom properties on an array, you may
+ * `Object.keys(theme.breakpoints)` to retrieve both regular numeric indices
+ * and custom breakpoints as string.
+ *
+ * This function returns true given a custom array property.
+ */
+export var isCustomBreakpoint = maybeBreakpoint => Number.isNaN(Number(maybeBreakpoint));
 //# sourceMappingURL=responsive.js.map

dist/types/array.d.ts

@@ -43,9 +43,1 @@ export declare function getFirstItem<T>(array: T[]): T | undefined;
 export declare function getNextItemFromSearch<T>(items: T[], searchString: string, itemToString: (item: T) => string, currentItem: T): T | undefined;
-/**
- * since breakpoints are defined as custom properties on an array, you may
- * `Object.keys(theme.breakpoints)` to retrieve both regular numeric indices
- * and custom breakpoints as string.
- *
- * This function returns true given a custom array property.
- */
-export declare const isCustomBreakpoint: (maybeBreakpoint: string) => boolean;

dist/types/responsive.d.ts

@@ -7,1 +7,29 @@ import { Dict } from "./types";
 export declare function isResponsiveObjectLike(obj: Dict, bps?: readonly string[]): boolean;
+export declare const px: (value: number | string) => string;
+export declare function analyzeBreakpoints(breakpoints: Dict): {
+    keys: Set<string>;
+    normalized: string[];
+    isResponsive(test: Dict): boolean;
+    asObject: Record<string, any>;
+    asArray: string[];
+    details: {
+        breakpoint: string;
+        minW: any;
+        maxW: any;
+        maxWQuery: string;
+        minWQuery: string;
+        minMaxQuery: string;
+    }[];
+    media: (string | null)[];
+    toArrayValue(test: Dict): any[];
+    toObjectValue(test: any[]): any;
+} | null;
+export declare type AnalyzeBreakpointsReturn = ReturnType<typeof analyzeBreakpoints>;
+/**
+ * since breakpoints are defined as custom properties on an array, you may
+ * `Object.keys(theme.breakpoints)` to retrieve both regular numeric indices
+ * and custom breakpoints as string.
+ *
+ * This function returns true given a custom array property.
+ */
+export declare const isCustomBreakpoint: (maybeBreakpoint: string) => boolean;

package.json

 {
   "name": "@chakra-ui/utils",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Common utilties and types for Chakra UI",
@@ -5,0 +5,0 @@ "author": "Segun Adebayo <[e-mail]>",

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

Improved metrics

Total package byte prevSize

242245

increased by11.62%

Lines of code

2433

increased by10.84%

No dependency changes