@instructure/ui-responsive 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-responsive
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-responsive

package/es/Responsive/index.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { Component } from 'react';
 import { deepEqual } from '@instructure/ui-utils';
 import { logError as error, warn } from '@instructure/console';
@@ -28,13 +29,13 @@ import { addElementQueryMatchListener, updateElementMatches } from '../addElemen
 import { addMediaQueryMatchListener } from '../addMediaQueryMatchListener';
 import { findDOMNode } from '@instructure/ui-dom-utils';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 class Responsive extends Component {
   constructor() {
     super(...arguments);
@@ -44,16 +45,13 @@ class Responsive extends Component {
       matches: [],
       hasRendered: false
     };
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.updateMatches = (matches, cb) => {
       this.setState({
         matches
@@ -64,10 +62,8 @@ class Responsive extends Component {
       });
     };
   }
-
   componentDidMount() {
     error(!!(this.props.render || this.props.children), `[Responsive] must have either a \`render\` prop or \`children\` prop.`);
-
     if (this.props.match === 'element') {
       // Because Responsive renders an empty div initially, it always needs to
       // re-render with the children provided. If there are no matches the match
@@ -82,49 +78,42 @@ class Responsive extends Component {
         hasRendered: true
       });
     }
-
     this._matchListener = this.addMatchListener(this.props.query, this.updateMatches);
   }
-
   componentWillUnmount() {
     this.removeMatchListener();
   }
-
   componentDidUpdate(prevProps) {
     const _this$props = this.props,
-          match = _this$props.match,
-          query = _this$props.query;
-
+      match = _this$props.match,
+      query = _this$props.query;
     if (match !== prevProps.match || !deepEqual(query, prevProps.query)) {
       this.removeMatchListener();
       this._matchListener = this.addMatchListener(query, this.updateMatches, match);
     }
   }
-
   addMatchListener(query, updateMatches) {
     let match = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : this.props.match;
     const matchListener = match === 'element' ? addElementQueryMatchListener : addMediaQueryMatchListener;
     return matchListener(query, () => findDOMNode(this), updateMatches);
   }
-
   removeMatchListener() {
     if (this._matchListener) {
       this._matchListener.remove();
     }
   }
-
   mergeProps(matches, props) {
     if (!props) {
       return null;
     }
-
     const mergedProps = {};
     matches.forEach(match => {
-      const matchProps = props[match]; // Iterate over the props for the current match. If that the prop is
+      const matchProps = props[match];
+
+      // Iterate over the props for the current match. If that the prop is
       // already in `mergedProps` that means that the prop was defined for
       // multiple breakpoints, and more than one of those breakpoints is being
       // currently applied so we log a warning.
-
       Object.keys(matchProps).forEach(prop => {
         const currentValue = mergedProps[prop];
         warn(!(prop in mergedProps), [`[Responsive] The prop \`${prop}\` is defined at 2 or more breakpoints`, `which are currently applied at the same time. Its current value, \`${currentValue}\`,`, `will be overwritten as \`${matchProps[prop]}\`.`].join(' '));
@@ -133,26 +122,24 @@ class Responsive extends Component {
     });
     return mergedProps;
   }
-
   render() {
     const _this$state = this.state,
-          matches = _this$state.matches,
-          hasRendered = _this$state.hasRendered;
+      matches = _this$state.matches,
+      hasRendered = _this$state.hasRendered;
     const _this$props2 = this.props,
-          props = _this$props2.props,
-          render = _this$props2.render,
-          children = _this$props2.children,
-          display = _this$props2.display;
-    let renderFunc; // Responsive needs to render once to measure the dom and obtain matches.
+      props = _this$props2.props,
+      render = _this$props2.render,
+      children = _this$props2.children,
+      display = _this$props2.display;
+    let renderFunc;
+    // Responsive needs to render once to measure the dom and obtain matches.
     // Calling the render prop on this initial render can cause visual side
     // effects and is slower than rendering an empty div.
-
     if (hasRendered) {
       // Render via the children or render method, whichever is supplied. If
       // both are supplied, give preference to children.
       renderFunc = children || render;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       ref: this.handleRef,
       style: {
@@ -160,9 +147,7 @@ class Responsive extends Component {
       }
     }, renderFunc && renderFunc(this.mergeProps(matches, props), matches));
   }
-
 }
-
 Responsive.displayName = "Responsive";
 Responsive.allowedProps = allowedProps;
 Responsive.propTypes = propTypes;

package/es/Responsive/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ResponsivePropTypes } from '../ResponsivePropTypes';
 const propTypes = {

package/es/ResponsivePropTypes.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { jsonToMediaQuery } from './jsonToMediaQuery';
 const ResponsivePropTypes = {
   /**
@@ -58,7 +59,6 @@ const ResponsivePropTypes = {
       return new Error(`Invalid query prop supplied to \`${componentName}\`. ${e.message}`);
     }
   }
-
 };
 export default ResponsivePropTypes;
 export {

package/es/addElementQueryMatchListener.js

@@ -24,7 +24,6 @@
 import { parseQuery } from './parseQuery';
 import { findDOMNode, getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
-
 /**
  * ---
  * category: utilities/layout
@@ -82,24 +81,18 @@ import { debounce } from '@instructure/debounce';
  */
 const addElementQueryMatchListener = (query, el, cb) => {
   const node = typeof el === 'function' ? el() : el;
-
   const _getBoundingClientRec = 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 = debounce(update, 100, {
     leading: false,
     trailing: true
@@ -107,9 +100,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,
@@ -128,40 +120,33 @@ const addElementQueryMatchListener = (query, el, cb) => {
       if (elementResizeListener) {
         elementResizeListener.disconnect();
       }
-
       if (debounced) {
         debounced.cancel();
       }
     }
-
   };
 };
-
 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 = findDOMNode(el);
-
   const _ref = size || getBoundingClientRect(node),
-        width = _ref.width,
-        height = _ref.height;
-
+    width = _ref.width,
+    height = _ref.height;
   const matchingQueries = 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;
 }
-
 export default addElementQueryMatchListener;
 export { addElementQueryMatchListener, updateElementMatches };

package/es/addMediaQueryMatchListener.js

@@ -23,6 +23,7 @@
  */
 import { matchMedia as defaultMatchMedia } from '@instructure/ui-dom-utils';
 import { jsonToMediaQuery } from './jsonToMediaQuery';
+
 /**
  * ---
  * category: utilities/layout
@@ -75,25 +76,19 @@ import { jsonToMediaQuery } from './jsonToMediaQuery';
  * @param {object} matchMedia - called with an array of the names of the currently matching queries whenever a matching query changes
  * @returns {function} remove() function to call to remove the listener
  */
-
 const addMediaQueryMatchListener = function (query, el, cb) {
   let matchMedia = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : defaultMatchMedia;
   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(jsonToMediaQuery(query[key], node), node);
-
     if (mediaQueryList) {
       mediaQueryList.addListener(listenerCallback);
       mediaQueryLists[key] = mediaQueryList;
@@ -108,9 +103,7 @@ const addMediaQueryMatchListener = function (query, el, cb) {
         });
       }
     }
-
   };
 };
-
 export default addMediaQueryMatchListener;
 export { addMediaQueryMatchListener };

package/es/index.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { Responsive } from './Responsive';
 export { addElementQueryMatchListener } from './addElementQueryMatchListener';
 export { addMediaQueryMatchListener } from './addMediaQueryMatchListener';

package/es/jsonToMediaQuery.js

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 import { px } from '@instructure/ui-utils';
-
 /**
  * ---
  * category: utilities/layout
@@ -49,35 +48,28 @@ import { px } from '@instructure/ui-utils';
 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)}: ${px(value, el)}px)`;
 }
-
 function hyphenateQueryKey(key) {
   const lowerCaseKey = key.toLowerCase();
   return lowerCaseKey.slice(0, 3) + '-' + lowerCaseKey.slice(3);
 }
-
 export default jsonToMediaQuery;
 export { jsonToMediaQuery };

package/es/parseQuery.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
 /*
  * The MIT License (MIT)
  *
@@ -24,7 +23,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * SOFTWARE.
  */
 import { px } from '@instructure/ui-utils';
-
 /**
  * ---
  * category: utilities/layout
@@ -42,14 +40,15 @@ import { px } from '@instructure/ui-utils';
  *  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 && px(minWidth, el) || 0,
       maxWidth: maxWidth && px(maxWidth, el) || Infinity,
@@ -59,22 +58,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 = _slicedToArray(_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;
   };
 }
-
 export default parseQuery;
 export { parseQuery };

package/lib/Responsive/index.js

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Responsive = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
-
 var _console = require("@instructure/console");
-
 var _addElementQueryMatchListener = require("../addElementQueryMatchListener");
-
 var _addMediaQueryMatchListener = require("../addMediaQueryMatchListener");
-
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-
 var _props = require("./props");
-
 /*
  * The MIT License (MIT)
  *
@@ -60,16 +51,13 @@ class Responsive extends _react.Component {
       matches: [],
       hasRendered: false
     };
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.updateMatches = (matches, cb) => {
       this.setState({
         matches
@@ -80,10 +68,8 @@ class Responsive extends _react.Component {
       });
     };
   }
-
   componentDidMount() {
     (0, _console.logError)(!!(this.props.render || this.props.children), `[Responsive] must have either a \`render\` prop or \`children\` prop.`);
-
     if (this.props.match === 'element') {
       // Because Responsive renders an empty div initially, it always needs to
       // re-render with the children provided. If there are no matches the match
@@ -98,49 +84,42 @@ class Responsive extends _react.Component {
         hasRendered: true
       });
     }
-
     this._matchListener = this.addMatchListener(this.props.query, this.updateMatches);
   }
-
   componentWillUnmount() {
     this.removeMatchListener();
   }
-
   componentDidUpdate(prevProps) {
     const _this$props = this.props,
-          match = _this$props.match,
-          query = _this$props.query;
-
+      match = _this$props.match,
+      query = _this$props.query;
     if (match !== prevProps.match || !(0, _deepEqual.deepEqual)(query, prevProps.query)) {
       this.removeMatchListener();
       this._matchListener = this.addMatchListener(query, this.updateMatches, match);
     }
   }
-
   addMatchListener(query, updateMatches) {
     let match = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : this.props.match;
     const matchListener = match === 'element' ? _addElementQueryMatchListener.addElementQueryMatchListener : _addMediaQueryMatchListener.addMediaQueryMatchListener;
     return matchListener(query, () => (0, _findDOMNode.findDOMNode)(this), updateMatches);
   }
-
   removeMatchListener() {
     if (this._matchListener) {
       this._matchListener.remove();
     }
   }
-
   mergeProps(matches, props) {
     if (!props) {
       return null;
     }
-
     const mergedProps = {};
     matches.forEach(match => {
-      const matchProps = props[match]; // Iterate over the props for the current match. If that the prop is
+      const matchProps = props[match];
+
+      // Iterate over the props for the current match. If that the prop is
       // already in `mergedProps` that means that the prop was defined for
       // multiple breakpoints, and more than one of those breakpoints is being
       // currently applied so we log a warning.
-
       Object.keys(matchProps).forEach(prop => {
         const currentValue = mergedProps[prop];
         (0, _console.warn)(!(prop in mergedProps), [`[Responsive] The prop \`${prop}\` is defined at 2 or more breakpoints`, `which are currently applied at the same time. Its current value, \`${currentValue}\`,`, `will be overwritten as \`${matchProps[prop]}\`.`].join(' '));
@@ -149,26 +128,24 @@ class Responsive extends _react.Component {
     });
     return mergedProps;
   }
-
   render() {
     const _this$state = this.state,
-          matches = _this$state.matches,
-          hasRendered = _this$state.hasRendered;
+      matches = _this$state.matches,
+      hasRendered = _this$state.hasRendered;
     const _this$props2 = this.props,
-          props = _this$props2.props,
-          render = _this$props2.render,
-          children = _this$props2.children,
-          display = _this$props2.display;
-    let renderFunc; // Responsive needs to render once to measure the dom and obtain matches.
+      props = _this$props2.props,
+      render = _this$props2.render,
+      children = _this$props2.children,
+      display = _this$props2.display;
+    let renderFunc;
+    // Responsive needs to render once to measure the dom and obtain matches.
     // Calling the render prop on this initial render can cause visual side
     // effects and is slower than rendering an empty div.
-
     if (hasRendered) {
       // Render via the children or render method, whichever is supplied. If
       // both are supplied, give preference to children.
       renderFunc = children || render;
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.handleRef,
       style: {
@@ -176,9 +153,7 @@ class Responsive extends _react.Component {
       }
     }, renderFunc && renderFunc(this.mergeProps(matches, props), matches));
   }
-
 }
-
 exports.Responsive = Responsive;
 Responsive.displayName = "Responsive";
 Responsive.allowedProps = _props.allowedProps;

package/lib/Responsive/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ResponsivePropTypes = require("../ResponsivePropTypes");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _ResponsivePropTypes = require("../ResponsivePropTypes");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   match: _propTypes.default.oneOf(['element', 'media']),
   query: _propTypes.default.objectOf(_ResponsivePropTypes.ResponsivePropTypes.validQuery).isRequired,

package/lib/ResponsivePropTypes.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ResponsivePropTypes = void 0;
-
 var _jsonToMediaQuery = require("./jsonToMediaQuery");
-
 /*
  * The MIT License (MIT)
  *
@@ -30,6 +28,7 @@ var _jsonToMediaQuery = require("./jsonToMediaQuery");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const ResponsivePropTypes = {
   /**
    * Verify that the given prop is a properly formatted query object
@@ -66,7 +65,6 @@ const ResponsivePropTypes = {
       return new Error(`Invalid query prop supplied to \`${componentName}\`. ${e.message}`);
     }
   }
-
 };
 exports.ResponsivePropTypes = ResponsivePropTypes;
 var _default = ResponsivePropTypes;