@instructure/ui-responsive 8.33.1 → 8.33.2

package/lib/addElementQueryMatchListener.js

@@ -5,15 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.addElementQueryMatchListener = void 0;
 exports.updateElementMatches = updateElementMatches;
-
 var _parseQuery = require("./parseQuery");
-
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-
 var _debounce = require("@instructure/debounce");
-
 /*
  * The MIT License (MIT)
  *
@@ -95,24 +90,18 @@ var _debounce = require("@instructure/debounce");
  */
 const addElementQueryMatchListener = (query, el, cb) => {
   const node = typeof el === 'function' ? el() : el;
-
   const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(node),
-        width = _getBoundingClientRec.width,
-        height = _getBoundingClientRec.height;
-
+    width = _getBoundingClientRec.width,
+    height = _getBoundingClientRec.height;
   let matches = [];
-
   const update = size => {
     const newMatches = updateElementMatches(query, node, matches, size);
-
     if (newMatches) {
       matches = newMatches;
       cb(matches);
     }
-
     return;
   };
-
   const debounced = (0, _debounce.debounce)(update, 100, {
     leading: false,
     trailing: true
@@ -120,9 +109,8 @@ const addElementQueryMatchListener = (query, el, cb) => {
   const elementResizeListener = new ResizeObserver(entries => {
     for (const entry of entries) {
       const _entry$contentRect = entry.contentRect,
-            newWidth = _entry$contentRect.width,
-            newHeight = _entry$contentRect.height;
-
+        newWidth = _entry$contentRect.width,
+        newHeight = _entry$contentRect.height;
       if (width !== newWidth) {
         debounced({
           width: newWidth,
@@ -141,42 +129,34 @@ const addElementQueryMatchListener = (query, el, cb) => {
       if (elementResizeListener) {
         elementResizeListener.disconnect();
       }
-
       if (debounced) {
         debounced.cancel();
       }
     }
-
   };
 };
-
 exports.addElementQueryMatchListener = addElementQueryMatchListener;
-
 function updateElementMatches(query, el) {
   let matches = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
   let size = arguments.length > 3 ? arguments[3] : void 0;
   const node = (0, _findDOMNode.findDOMNode)(el);
-
   const _ref = size || (0, _getBoundingClientRect.getBoundingClientRect)(node),
-        width = _ref.width,
-        height = _ref.height;
-
+    width = _ref.width,
+    height = _ref.height;
   const matchingQueries = (0, _parseQuery.parseQuery)(query, node)({
     width,
     height
   });
-  const newMatches = Object.keys(matchingQueries).filter(key => matchingQueries[key]).map(key => key); // only return matches if they have changed
+  const newMatches = Object.keys(matchingQueries).filter(key => matchingQueries[key]).map(key => key);
 
+  // only return matches if they have changed
   if (matches.length !== newMatches.length) {
     return newMatches;
   }
-
   if (matches.filter(match => newMatches.indexOf(match) === -1).length > 0) {
     return newMatches;
   }
-
   return null;
 }
-
 var _default = addElementQueryMatchListener;
 exports.default = _default;

package/lib/addMediaQueryMatchListener.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.addMediaQueryMatchListener = void 0;
-
 var _matchMedia = require("@instructure/ui-dom-utils/lib/matchMedia.js");
-
 var _jsonToMediaQuery = require("./jsonToMediaQuery");
-
 /*
  * The MIT License (MIT)
  *
@@ -88,21 +85,16 @@ var _jsonToMediaQuery = require("./jsonToMediaQuery");
 const addMediaQueryMatchListener = function (query, el, cb) {
   let matchMedia = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : _matchMedia.matchMedia;
   const node = typeof el === 'function' ? el() : el;
-
   const updateMediaMatches = mediaQueryLists => {
     const matches = Object.keys(mediaQueryLists).filter(key => mediaQueryLists[key].matches).map(key => key);
     cb(matches);
   };
-
   const mediaQueryLists = {};
-
   const listenerCallback = () => {
     updateMediaMatches(mediaQueryLists);
   };
-
   Object.keys(query).forEach(key => {
     const mediaQueryList = matchMedia((0, _jsonToMediaQuery.jsonToMediaQuery)(query[key], node), node);
-
     if (mediaQueryList) {
       mediaQueryList.addListener(listenerCallback);
       mediaQueryLists[key] = mediaQueryList;
@@ -117,10 +109,8 @@ const addMediaQueryMatchListener = function (query, el, cb) {
         });
       }
     }
-
   };
 };
-
 exports.addMediaQueryMatchListener = addMediaQueryMatchListener;
 var _default = addMediaQueryMatchListener;
 exports.default = _default;

package/lib/index.js

@@ -39,15 +39,9 @@ Object.defineProperty(exports, "parseQuery", {
     return _parseQuery.parseQuery;
   }
 });
-
 var _Responsive = require("./Responsive");
-
 var _addElementQueryMatchListener = require("./addElementQueryMatchListener");
-
 var _addMediaQueryMatchListener = require("./addMediaQueryMatchListener");
-
 var _parseQuery = require("./parseQuery");
-
 var _jsonToMediaQuery = require("./jsonToMediaQuery");
-
 var _ResponsivePropTypes = require("./ResponsivePropTypes");

package/lib/jsonToMediaQuery.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.jsonToMediaQuery = jsonToMediaQuery;
-
 var _px = require("@instructure/ui-utils/lib/px.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -58,35 +56,28 @@ var _px = require("@instructure/ui-utils/lib/px.js");
 function jsonToMediaQuery(query, el) {
   // Ensure the query is of the correct form
   const keys = Object.keys(query);
-
   if (keys.length !== 1) {
     throw new Error('Expected exactly one key in query object.');
   }
-
   const key = keys[0];
   const validKeys = ['minHeight', 'maxHeight', 'minWidth', 'maxWidth'];
-
   if (validKeys.indexOf(key) === -1) {
     throw new Error(`Invalid key \`${key}\` in query object. Valid keys should consist of one of the following: ` + `${validKeys.join(', ')} (case sensitive)`);
   }
+  const value = query[key];
 
-  const value = query[key]; // TS catches this, but we want to throw error in runtime too
-
+  // TS catches this, but we want to throw error in runtime too
   if (typeof value !== 'string' && typeof value !== 'number') {
     throw new Error('The value of the query object must be a string or number.');
   }
-
   if (!value) {
     throw new Error('No value supplied for query object');
   }
-
   return `(${hyphenateQueryKey(key)}: ${(0, _px.px)(value, el)}px)`;
 }
-
 function hyphenateQueryKey(key) {
   const lowerCaseKey = key.toLowerCase();
   return lowerCaseKey.slice(0, 3) + '-' + lowerCaseKey.slice(3);
 }
-
 var _default = jsonToMediaQuery;
 exports.default = _default;

package/lib/parseQuery.js

@@ -1,17 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.parseQuery = parseQuery;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _px = require("@instructure/ui-utils/lib/px.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -53,14 +49,15 @@ var _px = require("@instructure/ui-utils/lib/px.js");
  *  true false if it matches
  */
 function parseQuery(query, el) {
-  const rules = {}; // converting values to numerical values and adding initial values to all query keys
+  const rules = {};
 
+  // converting values to numerical values and adding initial values to all query keys
   Object.keys(query).forEach(selectorName => {
     const _query$selectorName = query[selectorName],
-          minWidth = _query$selectorName.minWidth,
-          maxWidth = _query$selectorName.maxWidth,
-          minHeight = _query$selectorName.minHeight,
-          maxHeight = _query$selectorName.maxHeight;
+      minWidth = _query$selectorName.minWidth,
+      maxWidth = _query$selectorName.maxWidth,
+      minHeight = _query$selectorName.minHeight,
+      maxHeight = _query$selectorName.maxHeight;
     rules[selectorName] = {
       minWidth: minWidth && (0, _px.px)(minWidth, el) || 0,
       maxWidth: maxWidth && (0, _px.px)(maxWidth, el) || Infinity,
@@ -70,22 +67,20 @@ function parseQuery(query, el) {
   });
   return function (_ref) {
     let width = _ref.width,
-        height = _ref.height;
+      height = _ref.height;
     const selectorMap = {};
     Object.entries(rules).forEach(_ref2 => {
       let _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-          selectorName = _ref3[0],
-          query = _ref3[1];
-
+        selectorName = _ref3[0],
+        query = _ref3[1];
       const minWidth = query.minWidth,
-            maxWidth = query.maxWidth,
-            minHeight = query.minHeight,
-            maxHeight = query.maxHeight;
+        maxWidth = query.maxWidth,
+        minHeight = query.minHeight,
+        maxHeight = query.maxHeight;
       selectorMap[selectorName] = minWidth <= width && width <= maxWidth && minHeight <= height && height <= maxHeight;
     });
     return selectorMap;
   };
 }
-
 var _default = parseQuery;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-responsive",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "description": "A component that allows for rendering a component differently based on either the element or the viewport size",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,19 +24,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.33.1",
-    "@instructure/debounce": "8.33.1",
-    "@instructure/shared-types": "8.33.1",
-    "@instructure/ui-dom-utils": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-utils": "8.33.1",
+    "@instructure/console": "8.33.2",
+    "@instructure/debounce": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-dom-utils": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-color-utils": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-color-utils": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"