@chakra-ui/media-query - npm Package Compare versions

Comparing version 1.0.0-rc.3 to 1.0.0-rc.4

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# 1.0.0-rc.4 (2020-09-25)
+
+**Note:** Version bump only for package @chakra-ui/media-query
+
+
+
+
+
 # 1.0.0-rc.3 (2020-08-30)
@@ -8,0 +16,0 @@

dist/cjs/create-media-query.js

@@ -12,43 +12,19 @@ "use strict";
 
-/**
- * Create a media query string from the breakpoints,
- * using a combination of `min-width` and `max-width`.
- */
 function createMediaQueries(breakpoints) {
   /**
    * Get the non-number breakpoint keys from the provided breakpoints
+   *
+   * reverse to begin with the largest
    */
-  var keys = Object.keys(breakpoints);
+  var keys = Object.keys(breakpoints).filter(_utils.isCustomBreakpoint).reverse();
   /**
-   * Use only the keys matching the official breakpoints names, and sort them in
-   * largest to smallest order
-   */
-
-  var sorted = _utils.breakpoints.filter(function (bp) {
-    return keys.includes(bp);
-  }).reverse();
-  /**
    * create a min-max media query string
    */
 
-
-  return sorted.map(function (breakpoint, index) {
+  return keys.map(function (breakpoint, index) {
     var minWidth = breakpoints[breakpoint];
-    var next = sorted[index - 1];
+    var next = keys[index - 1];
     var maxWidth = next ? breakpoints[next] : undefined;
-    var query = "";
-
-    if (parseInt(minWidth) >= 0) {
-      query = "(min-width: " + toMediaString(minWidth) + ")";
-    }
-
-    if (maxWidth) {
-      if (query) {
-        query += " and ";
-      }
-
-      query += "(max-width: " + toMediaString(subtract(maxWidth)) + ")";
-    }
-
-    var mediaQuery = {
+    var query = createMediaQueryString(minWidth, maxWidth);
+    return {
       breakpoint: breakpoint,
@@ -59,6 +35,31 @@ maxWidth: maxWidth,
     };
-    return mediaQuery;
   });
 }
+/**
+ * Create a media query string from the breakpoints,
+ * using a combination of `min-width` and `max-width`.
+ */
 
+
+function createMediaQueryString(minWidth, maxWidth) {
+  var hasMinWidth = parseInt(minWidth) >= 0;
+
+  if (!hasMinWidth && !maxWidth) {
+    return "";
+  }
+
+  var query = "(min-width: " + toMediaString(minWidth) + ")";
+
+  if (!maxWidth) {
+    return query;
+  }
+
+  if (query) {
+    query += " and ";
+  }
+
+  query += "(max-width: " + toMediaString(subtract(maxWidth)) + ")";
+  return query;
+}
+
 function subtract(value) {
@@ -65,0 +66,0 @@ return (0, _calculateMeasurement["default"])(value, -0.01);

dist/cjs/media-query.utils.js

@@ -10,9 +10,10 @@ "use strict";
   var index = Object.keys(values).indexOf(breakpoint);
-  if (index !== -1) return values[breakpoint];
 
+  if (index !== -1) {
+    return values[breakpoint];
+  }
+
   var stopIndex = _utils.breakpoints.indexOf(breakpoint);
 
-  var hasFound = false;
-
-  while (stopIndex >= 0 && !hasFound) {
+  while (stopIndex >= 0) {
     var key = _utils.breakpoints[stopIndex];
@@ -22,3 +23,3 @@
       index = stopIndex;
-      hasFound = true;
+      break;
     }
@@ -33,5 +34,3 @@
   }
-
-  return undefined;
 }
 //# sourceMappingURL=media-query.utils.js.map

dist/cjs/use-breakpoint-value.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _system = require("@chakra-ui/system");
+
 /**
@@ -22,6 +24,18 @@ * React hook for getting the value for the current breakpoint from the
   var breakpoint = (0, _useBreakpoint.useBreakpoint)();
-  if (!breakpoint) return;
-  var obj = (0, _utils.isArray)(values) ? (0, _utils.arrayToObjectNotation)(values) : values;
-  return (0, _mediaQuery.getClosestValue)(obj, breakpoint);
+
+  var _useTheme = (0, _system.useTheme)(),
+      breakpoints = _useTheme.breakpoints;
+
+  if (!breakpoint) {
+    return;
+  }
+
+  var obj = (0, _utils.isArray)(values) ? Object.fromEntries(Object.entries((0, _utils.arrayToObjectNotation)(values, breakpoints)).map(function (_ref) {
+    var _ = _ref[0],
+        value = _ref[1];
+    return [value, value];
+  })) : values;
+  var closest = (0, _mediaQuery.getClosestValue)(obj, breakpoint);
+  return closest;
 }
 //# sourceMappingURL=use-breakpoint-value.js.map

dist/cjs/use-breakpoint.js

@@ -78,3 +78,3 @@ "use strict";
 
-      mediaQuery.addListener(handleChange); // push the media query list handleChange
+      mediaQuery.addEventListener("change", handleChange); // push the media query list handleChange
       // so we can use it to remove Listener
@@ -88,3 +88,3 @@
         // clean up 1
-        mediaQuery.removeListener(handleChange);
+        mediaQuery.removeEventListener("change", handleChange);
       };
@@ -97,3 +97,3 @@ });
             handleChange = _ref2.handleChange;
-        mediaQuery.removeListener(handleChange);
+        mediaQuery.removeEventListener("change", handleChange);
       });
@@ -104,4 +104,4 @@ listeners.clear();
 
-  return currentBreakpoint == null ? void 0 : currentBreakpoint.breakpoint;
+  return current;
 }
 //# sourceMappingURL=use-breakpoint.js.map

dist/esm/create-media-query.js

@@ -1,7 +0,3 @@
-import { isNumber, breakpoints as bps } from "@chakra-ui/utils";
+import { isNumber, isCustomBreakpoint } from "@chakra-ui/utils";
 import calculateMeasurement from "calculate-measurement";
-/**
- * Create a media query string from the breakpoints,
- * using a combination of `min-width` and `max-width`.
- */
 
@@ -11,33 +7,16 @@ function createMediaQueries(breakpoints) {
    * Get the non-number breakpoint keys from the provided breakpoints
+   *
+   * reverse to begin with the largest
    */
-  var keys = Object.keys(breakpoints);
+  var keys = Object.keys(breakpoints).filter(isCustomBreakpoint).reverse();
   /**
-   * Use only the keys matching the official breakpoints names, and sort them in
-   * largest to smallest order
-   */
-
-  var sorted = bps.filter(bp => keys.includes(bp)).reverse();
-  /**
    * create a min-max media query string
    */
 
-  return sorted.map((breakpoint, index) => {
+  return keys.map((breakpoint, index) => {
     var minWidth = breakpoints[breakpoint];
-    var next = sorted[index - 1];
+    var next = keys[index - 1];
     var maxWidth = next ? breakpoints[next] : undefined;
-    var query = "";
-
-    if (parseInt(minWidth) >= 0) {
-      query = "(min-width: " + toMediaString(minWidth) + ")";
-    }
-
-    if (maxWidth) {
-      if (query) {
-        query += " and ";
-      }
-
-      query += "(max-width: " + toMediaString(subtract(maxWidth)) + ")";
-    }
-
-    var mediaQuery = {
+    var query = createMediaQueryString(minWidth, maxWidth);
+    return {
       breakpoint,
@@ -48,6 +27,31 @@ maxWidth,
     };
-    return mediaQuery;
   });
 }
+/**
+ * Create a media query string from the breakpoints,
+ * using a combination of `min-width` and `max-width`.
+ */
 
+
+function createMediaQueryString(minWidth, maxWidth) {
+  var hasMinWidth = parseInt(minWidth) >= 0;
+
+  if (!hasMinWidth && !maxWidth) {
+    return "";
+  }
+
+  var query = "(min-width: " + toMediaString(minWidth) + ")";
+
+  if (!maxWidth) {
+    return query;
+  }
+
+  if (query) {
+    query += " and ";
+  }
+
+  query += "(max-width: " + toMediaString(subtract(maxWidth)) + ")";
+  return query;
+}
+
 function subtract(value) {
@@ -54,0 +58,0 @@ return calculateMeasurement(value, -0.01);

dist/esm/media-query.utils.js

 import { breakpoints } from "@chakra-ui/utils";
 export function getClosestValue(values, breakpoint) {
   var index = Object.keys(values).indexOf(breakpoint);
-  if (index !== -1) return values[breakpoint];
+
+  if (index !== -1) {
+    return values[breakpoint];
+  }
+
   var stopIndex = breakpoints.indexOf(breakpoint);
-  var hasFound = false;
 
-  while (stopIndex >= 0 && !hasFound) {
+  while (stopIndex >= 0) {
     var key = breakpoints[stopIndex];
@@ -13,3 +16,3 @@
       index = stopIndex;
-      hasFound = true;
+      break;
     }
@@ -24,5 +27,3 @@
   }
-
-  return undefined;
 }
 //# sourceMappingURL=media-query.utils.js.map

dist/esm/use-breakpoint-value.js

 import { getClosestValue } from "./media-query.utils";
 import { useBreakpoint } from "./use-breakpoint";
 import { isArray, arrayToObjectNotation } from "@chakra-ui/utils";
+import { useTheme } from "@chakra-ui/system";
 /**
@@ -14,6 +15,17 @@ * React hook for getting the value for the current breakpoint from the
   var breakpoint = useBreakpoint();
-  if (!breakpoint) return;
-  var obj = isArray(values) ? arrayToObjectNotation(values) : values;
-  return getClosestValue(obj, breakpoint);
+  var {
+    breakpoints
+  } = useTheme();
+
+  if (!breakpoint) {
+    return;
+  }
+
+  var obj = isArray(values) ? Object.fromEntries(Object.entries(arrayToObjectNotation(values, breakpoints)).map((_ref) => {
+    var [_, value] = _ref;
+    return [value, value];
+  })) : values;
+  var closest = getClosestValue(obj, breakpoint);
+  return closest;
 }
 //# sourceMappingURL=use-breakpoint-value.js.map

dist/esm/use-breakpoint.js

@@ -60,3 +60,3 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-      mediaQuery.addListener(handleChange); // push the media query list handleChange
+      mediaQuery.addEventListener("change", handleChange); // push the media query list handleChange
       // so we can use it to remove Listener
@@ -70,3 +70,3 @@
         // clean up 1
-        mediaQuery.removeListener(handleChange);
+        mediaQuery.removeEventListener("change", handleChange);
       };
@@ -81,3 +81,3 @@ });
         } = _ref2;
-        mediaQuery.removeListener(handleChange);
+        mediaQuery.removeEventListener("change", handleChange);
       });
@@ -87,4 +87,4 @@ listeners.clear();
   }, [mediaQueries, breakpoints, update]);
-  return currentBreakpoint == null ? void 0 : currentBreakpoint.breakpoint;
+  return current;
 }
 //# sourceMappingURL=use-breakpoint.js.map

dist/types/create-media-query.d.ts

@@ -1,7 +0,2 @@
-import { Dict } from "@chakra-ui/utils";
-/**
- * Create a media query string from the breakpoints,
- * using a combination of `min-width` and `max-width`.
- */
-declare function createMediaQueries(breakpoints: Dict): MediaQuery[];
+declare function createMediaQueries(breakpoints: string[]): MediaQuery[];
 interface MediaQuery {
@@ -8,0 +3,0 @@ breakpoint: string;

package.json

 {
   "name": "@chakra-ui/media-query",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "A React hook for changing properties or visibility of a component based on css media query",
@@ -49,15 +49,16 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "1.0.0-rc.3",
+    "@chakra-ui/utils": "1.0.0-rc.4",
     "calculate-measurement": "0.1.0"
   },
   "devDependencies": {
-    "@chakra-ui/system": "1.0.0-rc.3",
-    "@chakra-ui/test-utils": "1.0.0-rc.3",
+    "@chakra-ui/system": "1.0.0-rc.4",
+    "@chakra-ui/test-utils": "1.0.0-rc.4",
     "jest-matchmedia-mock": "^1.0.1"
   },
   "peerDependencies": {
-    "@chakra-ui/system": "1.0.0-rc.2",
+    "@chakra-ui/system": ">=1.0.0-rc.3",
+    "@chakra-ui/theme": "1.0.0-rc.3",
     "react": "16.x"
   },
-  "gitHead": "a0b689f3a2b1589d58e4d9b0c8a9bbd02ed90f6e"
+  "gitHead": "830b8587c572a4c20d6b56b256accd6686255819"
 }

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

71689

increased by2.41%

Lines of code

690

increased by2.53%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@chakra-ui/anatomy@2.2.2(transitive)

• + Added@chakra-ui/color-mode@2.2.0(transitive)

• + Added@chakra-ui/object-utils@2.1.0(transitive)

• + Added@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• + Added@chakra-ui/react-utils@2.0.12(transitive)

• + Added@chakra-ui/shared-utils@2.0.5(transitive)

• + Added@chakra-ui/styled-system@2.9.2(transitive)

• + Added@chakra-ui/system@2.6.2(transitive)

• + Added@chakra-ui/theme@1.0.0-rc.33.3.1(transitive)

• + Added@chakra-ui/theme-tools@1.0.0-rc.32.1.2(transitive)

• + Added@chakra-ui/theme-utils@2.0.21(transitive)

• + Added@chakra-ui/utils@1.0.0-rc.42.0.15(transitive)

• + Added@emotion/babel-plugin@11.12.0(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/serialize@1.3.2(transitive)

• + Added@emotion/styled@11.13.0(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@emotion/utils@1.4.1(transitive)

• + Added@types/lodash.mergewith@4.6.64.6.7(transitive)

• + Added@types/object-assign@4.0.30(transitive)

• + Added@types/tinycolor2@1.4.2(transitive)

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcolor2k@2.0.3(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• + Addedframesync@6.1.2(transitive)

• + Addedlodash.mergewith@4.6.2(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-fast-compare@3.2.2(transitive)

• + Addedstylis@4.2.0(transitive)

• + Addedtinycolor2@1.4.1(transitive)

• + Addedtslib@2.4.0(transitive)

• - Removed@chakra-ui/utils@1.0.0-rc.3(transitive)

• Updated@chakra-ui/utils@1.0.0-rc.4