@instructure/ui-responsive 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-pr-snapshot-1792147648392](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-pr-snapshot-1792147648392) (2026-10-16)
+
+### Build System
+
+* **many:** replace babel with swc ([7e36c54](https://github.com/instructure/instructure-ui/commit/7e36c54d240b4fa483801c03ab18e7f860f561e2))
+
+### BREAKING CHANGES
+
+* **many:** `@instructure/ui-babel-preset` and
+  `@instructure/browserslist-config-instui` are removed and will no longer be
+  published. Packages depend on `@swc/helpers` instead of `@babel/runtime`.
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 **Note:** Version bump only for package @instructure/ui-responsive

package/es/Responsive/v1/index.js

@@ -1,27 +1,4 @@
-/*
- * 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.
- */
-
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Component } from 'react';
 import { deepEqual } from '@instructure/ui-utils';
 import { logError as error, warn } from '@instructure/console';
@@ -29,135 +6,109 @@ import { addElementQueryMatchListener, updateElementMatches } from '../../utils/
 import { addMediaQueryMatchListener } from '../../utils/v1/addMediaQueryMatchListener.js';
 import { findDOMNode } from '@instructure/ui-dom-utils';
 import { allowedProps } from './props.js';
-
-/**
----
-category: components
----
-
-**/
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 class Responsive extends Component {
-  static displayName = 'Responsive';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    children: null,
-    match: 'element',
-    props: null
-  };
-  ref = null;
-  _matchListener = null;
-  state = {
-    matches: [],
-    hasRendered: false
-  };
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+    static{
+        this.displayName = 'Responsive';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            children: null,
+            match: 'element',
+            props: null
+        };
+    }
+    componentDidMount() {
+        error(!!(this.props.render || this.props.children), `[Responsive] must have either a \`render\` prop or \`children\` prop.`);
+        if (this.props.match === 'element') {
+            const initialMatches = 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 { match, query } = this.props;
+        if (match !== prevProps.match || !deepEqual(query, prevProps.query)) {
+            this.removeMatchListener();
+            this._matchListener = this.addMatchListener(query, this.updateMatches, match);
+        }
     }
-  };
-  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
-      // listener won't trigger an update, so we handle this update explicitly.
-      const initialMatches = updateElementMatches(this.props.query, this) || [];
-      this.setState({
-        matches: initialMatches,
-        hasRendered: true
-      });
-    } else {
-      this.setState({
-        hasRendered: true
-      });
+    addMatchListener(query, updateMatches, match = this.props.match) {
+        const matchListener = match === 'element' ? addElementQueryMatchListener : addMediaQueryMatchListener;
+        return matchListener(query, ()=>findDOMNode(this), updateMatches);
     }
-    this._matchListener = this.addMatchListener(this.props.query, this.updateMatches);
-  }
-  componentWillUnmount() {
-    this.removeMatchListener();
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      match,
-      query
-    } = this.props;
-    if (match !== prevProps.match || !deepEqual(query, prevProps.query)) {
-      this.removeMatchListener();
-      this._matchListener = this.addMatchListener(query, this.updateMatches, match);
+    removeMatchListener() {
+        if (this._matchListener) {
+            this._matchListener.remove();
+        }
     }
-  }
-  addMatchListener(query, updateMatches, match = 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];
+            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(' '));
+                mergedProps[prop] = matchProps[prop];
+            });
+        });
+        return mergedProps;
     }
-  }
-  updateMatches = (matches, cb) => {
-    this.setState({
-      matches
-    }, () => {
-      if (typeof cb === 'function') {
-        cb();
-      }
-    });
-  };
-  mergeProps(matches, props) {
-    if (!props) {
-      return null;
+    render() {
+        const { matches, hasRendered } = this.state;
+        const { props, render, children, display } = this.props;
+        let renderFunc;
+        if (hasRendered) {
+            renderFunc = children || render;
+        }
+        return /*#__PURE__*/ _jsx("div", {
+            ref: this.handleRef,
+            style: {
+                display
+            },
+            "data-cid": this.props['data-cid'],
+            children: renderFunc && renderFunc(this.mergeProps(matches, props), matches)
+        });
     }
-    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];
-        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 {
-      matches,
-      hasRendered
-    } = this.state;
-    const {
-      props,
-      render,
-      children,
-      display
-    } = this.props;
-    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;
+    constructor(...args){
+        super(...args), this.ref = null, this._matchListener = null, this.state = {
+            matches: [],
+            hasRendered: false
+        }, this.handleRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        }, this.updateMatches = (matches, cb)=>{
+            this.setState({
+                matches
+            }, ()=>{
+                if (typeof cb === 'function') {
+                    cb();
+                }
+            });
+        };
     }
-    return _jsx("div", {
-      ref: this.handleRef,
-      style: {
-        display
-      },
-      "data-cid": this.props['data-cid'],
-      children: renderFunc && renderFunc(this.mergeProps(matches, props), matches)
-    });
-  }
 }
 export default Responsive;
-export { Responsive };
+export { Responsive };

package/es/Responsive/v1/props.js

@@ -1,30 +1,10 @@
-/*
- * 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.
- */
-
-/**
- * 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 = ['match', 'query', 'props', 'render', 'children', 'display', 'elementRef'];
-export { allowedProps };
+const allowedProps = [
+    'match',
+    'query',
+    'props',
+    'render',
+    'children',
+    'display',
+    'elementRef'
+];
+export { allowedProps };

package/es/exports/a.js

@@ -1,30 +1,6 @@
-/*
- * 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.
- */
-
 export { Responsive } from '../Responsive/v1/index.js';
 export { addElementQueryMatchListener } from '../utils/v1/addElementQueryMatchListener.js';
 export { addMediaQueryMatchListener } from '../utils/v1/addMediaQueryMatchListener.js';
 export { parseQuery } from '../utils/v1/parseQuery.js';
 export { jsonToMediaQuery } from '../utils/v1/jsonToMediaQuery.js';
-export { ResponsivePropTypes } from '../utils/v1/ResponsivePropTypes.js';
+export { ResponsivePropTypes } from '../utils/v1/ResponsivePropTypes.js';

package/es/utils/v1/QueryType.js

@@ -1 +1 @@
-export {};
+export { };

package/es/utils/v1/ResponsivePropTypes.js

@@ -1,64 +1,13 @@
-/*
- * 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.
- */
-
 import { jsonToMediaQuery } from './jsonToMediaQuery.js';
 const 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 {
-      jsonToMediaQuery(props[propName]);
-      return null;
-    } catch (e) {
-      return new Error(`Invalid query prop supplied to \`${componentName}\`. ${e.message}`);
+    validQuery (props, propName, componentName) {
+        try {
+            jsonToMediaQuery(props[propName]);
+            return null;
+        } catch (e) {
+            return new Error(`Invalid query prop supplied to \`${componentName}\`. ${e.message}`);
+        }
     }
-  }
 };
 export default ResponsivePropTypes;
-export { ResponsivePropTypes };
+export { ResponsivePropTypes };

package/es/utils/v1/addElementQueryMatchListener.js

@@ -1,157 +1,66 @@
-/*
- * 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.
- */
 import { parseQuery } from './parseQuery.js';
 import { findDOMNode, getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
-/**
- * ---
- * 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 {
-    width,
-    height
-  } = getBoundingClientRect(node);
-  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
-  });
-  const elementResizeListener = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      const {
-        width: newWidth,
-        height: newHeight
-      } = entry.contentRect;
-      if (width !== newWidth) {
-        debounced({
-          width: newWidth,
-          height: newHeight
-        });
-      }
-    }
-  });
-  elementResizeListener.observe(node);
-  update({
-    width,
-    height
-  });
-  return {
-    remove() {
-      if (elementResizeListener) {
-        elementResizeListener.disconnect();
-      }
-      if (debounced) {
-        debounced.cancel();
-      }
-    }
-  };
+const addElementQueryMatchListener = (query, el, cb)=>{
+    const node = typeof el === 'function' ? el() : el;
+    const { width, height } = getBoundingClientRect(node);
+    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
+    });
+    const elementResizeListener = new ResizeObserver((entries)=>{
+        for (const entry of entries){
+            const { width: newWidth, height: newHeight } = entry.contentRect;
+            if (width !== newWidth) {
+                debounced({
+                    width: newWidth,
+                    height: newHeight
+                });
+            }
+        }
+    });
+    elementResizeListener.observe(node);
+    update({
+        width,
+        height
+    });
+    return {
+        remove () {
+            if (elementResizeListener) {
+                elementResizeListener.disconnect();
+            }
+            if (debounced) {
+                debounced.cancel();
+            }
+        }
+    };
 };
 function updateElementMatches(query, el, matches = [], size) {
-  const node = findDOMNode(el);
-  let {
-    width,
-    height
-  } = size || getBoundingClientRect(node);
-
-  // round dimensions to make sure matcher can match queries with integer values
-  width = Math.floor(width);
-  height = Math.floor(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
-  if (matches.length !== newMatches.length) {
-    return newMatches;
-  }
-  if (matches.filter(match => newMatches.indexOf(match) === -1).length > 0) {
-    return newMatches;
-  }
-  return null;
+    const node = findDOMNode(el);
+    let { width, height } = size || getBoundingClientRect(node);
+    width = Math.floor(width);
+    height = Math.floor(height);
+    const matchingQueries = parseQuery(query, node)({
+        width,
+        height
+    });
+    const newMatches = Object.keys(matchingQueries).filter((key)=>matchingQueries[key]).map((key)=>key);
+    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 };
+export { addElementQueryMatchListener, updateElementMatches };