@instructure/ui-responsive 11.6.0 → 11.6.1-pr-snapshot-1779894247159

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.6.1-pr-snapshot-1779894247159](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-pr-snapshot-1779894247159) (2026-05-27)
+
+**Note:** Version bump only for package @instructure/ui-responsive
+
+
+
+
+
 # [11.6.0](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.6.0) (2026-02-18)
 
 **Note:** Version bump only for package @instructure/ui-responsive

package/{lib/Responsive/props.js → babel.config.cjs}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -28,8 +22,16 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-/**
- * Consists of an object where the keys match the breakpoint names used in the query. The values are objects with keys representing prop names and values representing prop values Ex. `{small: { myProp: 'fillscreen' }, large: { myProp: 'fillcontainer' }}`
- */
-
-const allowedProps = exports.allowedProps = ['match', 'query', 'props', 'render', 'children', 'display', 'elementRef'];
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        coverage: Boolean(process.env.COVERAGE),
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/ui-responsive",
-  "version": "11.6.0",
+  "version": "11.6.1-pr-snapshot-1779894247159",
+  "type": "module",
   "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",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -15,19 +15,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/debounce": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/console": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/debounce": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-dom-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-utils": "11.6.1-pr-snapshot-1779894247159"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-color-utils": "11.6.1-pr-snapshot-1779894247159"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -40,10 +40,8 @@
     ".": {
       "types": "./types/index.d.ts",
       "import": "./es/index.js",
-      "require": "./lib/index.js",
       "default": "./es/index.js"
     },
-    "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
@@ -53,7 +51,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "clean": "ui-scripts clean",
-    "build": "ui-scripts build --modules es,cjs",
+    "build": "ui-scripts build",
     "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
     "build:types": "tsc -p tsconfig.build.json",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"

package/lib/QueryType.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/Responsive/index.js

@@ -1,165 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Responsive = void 0;
-var _react = 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");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
----
-category: components
----
-
-**/class Responsive extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this._matchListener = null;
-    this.state = {
-      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
-      }, () => {
-        if (typeof cb === 'function') {
-          cb();
-        }
-      });
-    };
-  }
-  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
-      // listener won't trigger an update, so we handle this update explicitly.
-      const initialMatches = (0, _addElementQueryMatchListener.updateElementMatches)(this.props.query, this) || [];
-      this.setState({
-        matches: initialMatches,
-        hasRendered: true
-      });
-    } else {
-      this.setState({
-        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;
-    if (match !== prevProps.match || !(0, _deepEqual.deepEqual)(query, prevProps.query)) {
-      this.removeMatchListener();
-      this._matchListener = this.addMatchListener(query, this.updateMatches, match);
-    }
-  }
-  addMatchListener(query, updateMatches, match = 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
-      // 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(' '));
-        mergedProps[prop] = matchProps[prop];
-      });
-    });
-    return mergedProps;
-  }
-  render() {
-    const _this$state = this.state,
-      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.
-    // 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 (0, _jsxRuntime.jsx)("div", {
-      ref: this.handleRef,
-      style: {
-        display
-      },
-      "data-cid": this.props['data-cid'],
-      children: renderFunc && renderFunc(this.mergeProps(matches, props), matches)
-    });
-  }
-}
-exports.Responsive = Responsive;
-Responsive.displayName = "Responsive";
-Responsive.allowedProps = _props.allowedProps;
-Responsive.defaultProps = {
-  children: null,
-  match: 'element',
-  props: null
-};
-var _default = exports.default = Responsive;

package/lib/ResponsivePropTypes.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResponsivePropTypes = void 0;
-var _jsonToMediaQuery = require("./jsonToMediaQuery");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const ResponsivePropTypes = exports.ResponsivePropTypes = {
-  /**
-   * Verify that the given prop is a properly formatted query object
-   * with exactly one key and one corresponding valid value of type
-   * string or number. The object key should be one of `minWidth`,
-   * `maxWidth`, `minHeight`, or `maxHeight`. Note that key values
-   * should be camel cased.
-   *
-   *
-   * The following are examples of valid query objects:
-   *
-   * ```js
-   * { minWidth: 350 }
-   * { maxHeight: '400px' }
-   * { maxWidth: '20rem' }
-   * ```
-   *
-   * The following are examples of invalid query objects:
-   *
-   * ```js
-   * { minwidth: 300 } // should be minWidth (case sensitive)
-   * { minHeight: 200, maxHeight: 300 } // should consist of exactly one key
-   * ```
-   * @param {Object} props - object containing the component props
-   * @param {string} propName - name of the given prop
-   * @param {string} componentName - name of the component
-   * @returns {Error} if prop is an invalid query
-   */
-  validQuery(props, propName, componentName) {
-    try {
-      (0, _jsonToMediaQuery.jsonToMediaQuery)(props[propName]);
-      return null;
-    } catch (e) {
-      return new Error(`Invalid query prop supplied to \`${componentName}\`. ${e.message}`);
-    }
-  }
-};
-var _default = exports.default = ResponsivePropTypes;

package/lib/addElementQueryMatchListener.js

@@ -1,163 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- * Given an object of named queries, listens for changes in the
- * element size and notifies which queries match via a function
- * callback. The callback method is only called when the query
- * matches change, not on all element resizes. (If you are looking
- * to call a method on all element resizes use
- * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) instead)
- *
- *
- * This function shares an interface with
- * [addMediaQueryMatchListener](addMediaQueryMatchListener)
- * so that they can be used interchangeably.
- *
- * The [Responsive](Responsive) component with the `match` prop
- * set to `element` utilizes this function. This is a low level
- * utility method and, in most cases, [Responsive](Responsive)
- * should be used instead.
- *
- * ```js-code
- * class MyComponent extends Component {
- *   state = {
- *     matches: []
- *   }
- *
- *   _listener = null
- *
- *   componentDidMount () {
- *     const query = {myFirstQuery: { minWidth: 100 }, mySecondQuery: { maxHeight: '30rem'}}
- *     const el = findDOMNode(this)
- *
- *     this._listener = addElementQueryMatchListener(query, el, this.updateMatches)
- *   }
- *
- *   componentWillUnmount () {
- *     if (this._listener) {
- *       this._listener.remove()
- *     }
- *   }
- *
- *   updateMatches = (matches) => {
- *     this.setState({ matches })
- *   }
- *   ...
- * }
- * ```
- * @module addElementQueryMatchListener
- * @param {Object} query - object consisting of names and query objects
- * @param {Node|Window|React.ReactElement|React.Component|function} el - a DOM node or a function returning a DOM node
- * @param {function} cb - 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 addElementQueryMatchListener = (query, el, cb) => {
-  const node = typeof el === 'function' ? el() : el;
-  const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(node),
-    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
-  });
-  const elementResizeListener = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      const _entry$contentRect = entry.contentRect,
-        newWidth = _entry$contentRect.width,
-        newHeight = _entry$contentRect.height;
-      if (width !== newWidth) {
-        debounced({
-          width: newWidth,
-          height: newHeight
-        });
-      }
-    }
-  });
-  elementResizeListener.observe(node);
-  update({
-    width,
-    height
-  });
-  return {
-    remove() {
-      if (elementResizeListener) {
-        elementResizeListener.disconnect();
-      }
-      if (debounced) {
-        debounced.cancel();
-      }
-    }
-  };
-};
-exports.addElementQueryMatchListener = addElementQueryMatchListener;
-function updateElementMatches(query, el, matches = [], size) {
-  const node = (0, _findDOMNode.findDOMNode)(el);
-  let _ref = size || (0, _getBoundingClientRect.getBoundingClientRect)(node),
-    width = _ref.width,
-    height = _ref.height;
-
-  // round dimensions to make sure matcher can match queries with integer values
-  width = Math.floor(width);
-  height = Math.floor(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
-  if (matches.length !== newMatches.length) {
-    return newMatches;
-  }
-  if (matches.filter(match => newMatches.indexOf(match) === -1).length > 0) {
-    return newMatches;
-  }
-  return null;
-}
-var _default = exports.default = addElementQueryMatchListener;

package/lib/addMediaQueryMatchListener.js

@@ -1,114 +0,0 @@
-"use strict";
-
-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)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- * Given an object of named queries, listens for changes in the
- * window size and notifies which queries match via a function
- * callback. The callback method is only called when the query
- * matches change, not on all window resizes.
- *
- * This function shares an interface with
- * [addElementQueryMatchListener](addElementQueryMatchListener)
- * so that they can be used interchangeably.
- *
- * The [Responsive](Responsive) component with the `match` prop
- * set to `media` utilizes this function. This is a low level utility
- * method and, in most cases, [Responsive](Responsive) should be
- * used instead.
- *
- * ```js-code
- * class MyComponent extends Component {
- *   state = {
- *     matches: []
- *   }
- *
- *   _listener = null
- *
- *   componentDidMount () {
- *     const query = {myFirstQuery: { minWidth: 100 }, mySecondQuery: { maxHeight: '30rem'}}
- *     const el = findDOMNode(this)
- *
- *     this._listener = addMediaQueryMatchListener(query, el, this.updateMatches)
- *   }
- *
- *   componentWillUnmount () {
- *     if (this._listener) {
- *       this._listener.remove()
- *     }
- *   }
- *
- *   updateMatches = (matches) => {
- *     this.setState({ matches })
- *   }
- *   ...
- * }
- * ```
- * @module addMediaQueryMatchListener
- * @param {Object} query - object consisting of names and query objects
- * @param {Node|Window|React.ReactElement|React.Component|function} el - a DOM node or a function returning a DOM node
- * @param {function} cb - called with an array of the names of the currently matching queries whenever a matching query changes
- * @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 = (query, el, cb, matchMedia = _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;
-    }
-  });
-  updateMediaMatches(mediaQueryLists);
-  return {
-    remove() {
-      if (mediaQueryLists) {
-        Object.keys(mediaQueryLists).forEach(key => {
-          mediaQueryLists[key].removeListener(listenerCallback);
-        });
-      }
-    }
-  };
-};
-exports.addMediaQueryMatchListener = addMediaQueryMatchListener;
-var _default = exports.default = addMediaQueryMatchListener;

package/lib/index.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Responsive", {
-  enumerable: true,
-  get: function () {
-    return _Responsive.Responsive;
-  }
-});
-Object.defineProperty(exports, "ResponsivePropTypes", {
-  enumerable: true,
-  get: function () {
-    return _ResponsivePropTypes.ResponsivePropTypes;
-  }
-});
-Object.defineProperty(exports, "addElementQueryMatchListener", {
-  enumerable: true,
-  get: function () {
-    return _addElementQueryMatchListener.addElementQueryMatchListener;
-  }
-});
-Object.defineProperty(exports, "addMediaQueryMatchListener", {
-  enumerable: true,
-  get: function () {
-    return _addMediaQueryMatchListener.addMediaQueryMatchListener;
-  }
-});
-Object.defineProperty(exports, "jsonToMediaQuery", {
-  enumerable: true,
-  get: function () {
-    return _jsonToMediaQuery.jsonToMediaQuery;
-  }
-});
-Object.defineProperty(exports, "parseQuery", {
-  enumerable: true,
-  get: function () {
-    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

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.jsonToMediaQuery = jsonToMediaQuery;
-var _px = require("@instructure/ui-utils/lib/px.js");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- *
- * Given a valid json query object, converts it to a standard media query
- * string. Valid queries should be an object consisting of condition:breakpoint
- * pairs with the following condition types `minWidth`, `maxWidth`, `minHeight`,
- * or `maxHeight` where breakpoint value is either a string or a number.
- *
- * Example input
- * ```js-code
- * { minWidth: 350, maxWidth: 600 }
- * ```
- * Example output
- * ```js-code
- * '(min-width: 350px) and (max-Width: 600px)'
- * ```
- * @module jsonToMediaQuery
- * @param {Object} query - an object consisting of the query type and value
- * @param {Document | Window | Node | React.ReactElement | React.Component} el - component or DOM node which will be passed to the pixel conversion if the unit type is `em`
- * @returns {string} media query string
- */
-function jsonToMediaQuery(query, el) {
-  // Ensure the query is of the correct form
-  const keys = Object.keys(query);
-  if (keys.length > 4) {
-    throw new Error('Expected maximum 4 keys in query object.');
-  }
-  let mediaQuery = '';
-  const QUERY_SEPARATOR = 'and';
-  for (const key of keys) {
-    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];
-
-    // 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');
-    }
-    mediaQuery += `(${hyphenateQueryKey(key)}: ${(0, _px.px)(value, el)}px) ${QUERY_SEPARATOR} `;
-  }
-  return mediaQuery.slice(0, -QUERY_SEPARATOR.length - 2);
-}
-function hyphenateQueryKey(key) {
-  const lowerCaseKey = key.toLowerCase();
-  return lowerCaseKey.slice(0, 3) + '-' + lowerCaseKey.slice(3);
-}
-var _default = exports.default = jsonToMediaQuery;

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/lib/parseQuery.js

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.parseQuery = parseQuery;
-var _px = require("@instructure/ui-utils/lib/px.js");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * An object consisting of query names and boolean true false if it matches
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- *
- * Given a query and an element, return a function that takes
- * size as an argument and returns an object consisting of
- * query names and a boolean true false if it matches.
- * @module parseQuery
- * @param {Object} query - an object consisting of query names
- *  mapped to individual queries
- * @param {Document | Window | Node | null} el - component or DOM node
- * @returns {function} takes size {width, height} as an argument
- *  and returns an object consisting of query names and boolean
- *  true false if it matches
- */
-function parseQuery(query, el) {
-  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;
-    rules[selectorName] = {
-      minWidth: minWidth && (0, _px.px)(minWidth, el) || 0,
-      maxWidth: maxWidth && (0, _px.px)(maxWidth, el) || Infinity,
-      minHeight: minHeight && (0, _px.px)(minHeight, el) || 0,
-      maxHeight: maxHeight && (0, _px.px)(maxHeight, el) || Infinity
-    };
-  });
-  return function ({
-    width,
-    height
-  }) {
-    const selectorMap = {};
-    Object.entries(rules).forEach(([selectorName, query]) => {
-      const minWidth = query.minWidth,
-        maxWidth = query.maxWidth,
-        minHeight = query.minHeight,
-        maxHeight = query.maxHeight;
-      selectorMap[selectorName] = minWidth <= width && width <= maxWidth && minHeight <= height && height <= maxHeight;
-    });
-    return selectorMap;
-  };
-}
-var _default = exports.default = parseQuery;