@instructure/ui-position 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-position

package/es/Position/index.js

@@ -1,28 +1,5 @@
-var _dec, _dec2, _class;
-/*
- * 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 { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Component } from 'react';
 import { callRenderProp, ensureSingleChild, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
 import { addPositionChangeListener, findDOMNode } from '@instructure/ui-dom-utils';
@@ -34,237 +11,223 @@ import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
 import { calculateElementPosition } from '../calculateElementPosition.js';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/**
----
-category: components/Util Components
----
-**/
-let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Position extends Component {
-  static displayName = 'Position';
-  static componentId = 'Position';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    placement: 'bottom center',
-    mountNode: null,
-    insertAt: 'bottom',
-    constrain: 'window',
-    offsetX: 0,
-    offsetY: 0,
-    shouldTrackPosition: true,
-    shouldPositionOverTarget: false,
-    children: null
-  };
-  static locatorAttribute = 'data-position';
-  static targetLocatorAttribute = 'data-position-target';
-  static contentLocatorAttribute = 'data-position-content';
-  constructor(props) {
-    super(props);
-    const initial = this.calculatePosition(props);
-    this._availableHeight = initial.availableHeight;
-    this._availableWidth = initial.availableWidth;
-    this.state = {
-      positioned: false,
-      placement: initial.placement,
-      style: initial.style
-    };
-    this.position = debounce(this.position, 0, {
-      leading: false,
-      trailing: true
-    });
-    this._id = this.props.id || props.deterministicId();
-  }
-  ref = null;
-  _id;
-  _timeouts = [];
-  _listener = null;
-  _content;
-  _target;
-  _availableHeight;
-  _availableWidth;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+class Position extends Component {
+    static{
+        this.displayName = 'Position';
     }
-  };
-  shouldComponentUpdate(nextProps, nextState, nextContext) {
-    return !deepEqual(this.state, nextState) || !shallowEqual(this.props, nextProps) || !shallowEqual(this.context, nextContext);
-  }
-  componentDidMount() {
-    this.toggleLocatorAttributes(true);
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate(prevProps, prevState) {
-    this.position();
-    this.toggleLocatorAttributes(true);
-    if (this.props.shouldTrackPosition !== prevProps.shouldTrackPosition) {
-      this.props.shouldTrackPosition ? this.startTracking() : this.stopTracking();
+    static{
+        this.componentId = 'Position';
     }
-    const {
-      style,
-      placement
-    } = this.state;
-    if (style && prevState.style && (placement !== prevState.placement || style.top !== prevState.style.top || style.left !== prevState.style.left) && typeof this.props.onPositionChanged === 'function') {
-      this.props.onPositionChanged({
-        top: style.top,
-        left: style.left,
-        placement
-      });
+    static{
+        this.allowedProps = allowedProps;
     }
-    this.props.makeStyles?.();
-  }
-  componentWillUnmount() {
-    ;
-    this.position.cancel();
-    this.stopTracking();
-    this._timeouts.forEach(timeout => clearTimeout(timeout));
-    this.toggleLocatorAttributes(false);
-  }
-  toggleLocatorAttributes(set) {
-    // We have to find the actual DOM nodes and append the attributes
-    // directly, as we can't be sure when safe cloning the child that
-    // it will accept the data attribute as a prop
-    this.toggleLocatorAttribute(findDOMNode(this._content), Position.contentLocatorAttribute, set);
-    this.toggleLocatorAttribute(findDOMNode(this._target), Position.targetLocatorAttribute, set);
-  }
-  toggleLocatorAttribute(node, locator, set) {
-    if (node && node.hasAttribute) {
-      if (set && !node.hasAttribute(locator)) {
-        ;
-        node.setAttribute(locator, this._id);
-      }
-      if (!set && node.hasAttribute(locator)) {
+    static{
+        this.defaultProps = {
+            placement: 'bottom center',
+            mountNode: null,
+            insertAt: 'bottom',
+            constrain: 'window',
+            offsetX: 0,
+            offsetY: 0,
+            shouldTrackPosition: true,
+            shouldPositionOverTarget: false,
+            children: null
+        };
+    }
+    static{
+        this.locatorAttribute = 'data-position';
+    }
+    static{
+        this.targetLocatorAttribute = 'data-position-target';
+    }
+    static{
+        this.contentLocatorAttribute = 'data-position-content';
+    }
+    constructor(props){
+        super(props), this.ref = null, this._timeouts = [], this._listener = null, this.handleRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        }, this.handlePortalOpen = ()=>{
+            this.position();
+            if (this.props.shouldTrackPosition) {
+                this.startTracking();
+            }
+            this._timeouts.push(setTimeout(()=>{
+                if (this.state.positioned && typeof this.props.onPositioned === 'function') {
+                    this.props.onPositioned({
+                        top: this.state.style.top,
+                        left: this.state.style.left,
+                        placement: this.state.placement
+                    });
+                }
+            }, 0));
+        }, this.position = ()=>{
+            const { placement, style, availableHeight, availableWidth } = this.calculatePosition(this.props);
+            this._availableHeight = availableHeight;
+            this._availableWidth = availableWidth;
+            this.applyAvailableSpaceCustomProperties();
+            this.setState({
+                positioned: true,
+                placement,
+                style
+            });
+        };
+        const initial = this.calculatePosition(props);
+        this._availableHeight = initial.availableHeight;
+        this._availableWidth = initial.availableWidth;
+        this.state = {
+            positioned: false,
+            placement: initial.placement,
+            style: initial.style
+        };
+        this.position = debounce(this.position, 0, {
+            leading: false,
+            trailing: true
+        });
+        this._id = this.props.id || props.deterministicId();
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        return !deepEqual(this.state, nextState) || !shallowEqual(this.props, nextProps) || !shallowEqual(this.context, nextContext);
+    }
+    componentDidMount() {
+        this.toggleLocatorAttributes(true);
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        this.position();
+        this.toggleLocatorAttributes(true);
+        if (this.props.shouldTrackPosition !== prevProps.shouldTrackPosition) {
+            this.props.shouldTrackPosition ? this.startTracking() : this.stopTracking();
+        }
+        const { style, placement } = this.state;
+        if (style && prevState.style && (placement !== prevState.placement || style.top !== prevState.style.top || style.left !== prevState.style.left) && typeof this.props.onPositionChanged === 'function') {
+            this.props.onPositionChanged({
+                top: style.top,
+                left: style.left,
+                placement
+            });
+        }
+        this.props.makeStyles?.();
+    }
+    componentWillUnmount() {
         ;
-        node.removeAttribute(locator);
-      }
+        this.position.cancel();
+        this.stopTracking();
+        this._timeouts.forEach((timeout)=>clearTimeout(timeout));
+        this.toggleLocatorAttributes(false);
+    }
+    toggleLocatorAttributes(set) {
+        this.toggleLocatorAttribute(findDOMNode(this._content), Position.contentLocatorAttribute, set);
+        this.toggleLocatorAttribute(findDOMNode(this._target), Position.targetLocatorAttribute, set);
+    }
+    toggleLocatorAttribute(node, locator, set) {
+        if (node && node.hasAttribute) {
+            if (set && !node.hasAttribute(locator)) {
+                ;
+                node.setAttribute(locator, this._id);
+            }
+            if (!set && node.hasAttribute(locator)) {
+                ;
+                node.removeAttribute(locator);
+            }
+        }
     }
-  }
-  handlePortalOpen = () => {
-    this.position();
-    if (this.props.shouldTrackPosition) {
-      this.startTracking();
+    applyAvailableSpaceCustomProperties() {
+        const node = findDOMNode(this._content);
+        if (!node?.style) return;
+        const set = (name, value)=>{
+            if (typeof value === 'number' && Number.isFinite(value)) {
+                node.style.setProperty(name, `${value}px`);
+            } else {
+                node.style.removeProperty(name);
+            }
+        };
+        set('--ui-position-available-height', this._availableHeight);
+        set('--ui-position-available-width', this._availableWidth);
     }
-    this._timeouts.push(setTimeout(() => {
-      if (this.state.positioned && typeof this.props.onPositioned === 'function') {
-        this.props.onPositioned({
-          top: this.state.style.top,
-          left: this.state.style.left,
-          placement: this.state.placement
+    calculatePosition(props) {
+        return calculateElementPosition(this._content, this._target, {
+            placement: props.placement,
+            offsetX: props.offsetX,
+            offsetY: props.offsetY,
+            constrain: props.constrain,
+            container: props.mountNode,
+            over: props.shouldPositionOverTarget
         });
-      }
-    }, 0));
-  };
-
-  // Write `--ui-position-available-{height,width}` directly on the content
-  // node's inline style
-  applyAvailableSpaceCustomProperties() {
-    const node = findDOMNode(this._content);
-    if (!node?.style) return;
-    const set = (name, value) => {
-      if (typeof value === 'number' && Number.isFinite(value)) {
-        node.style.setProperty(name, `${value}px`);
-      } else {
-        node.style.removeProperty(name);
-      }
-    };
-    set('--ui-position-available-height', this._availableHeight);
-    set('--ui-position-available-width', this._availableWidth);
-  }
-  calculatePosition(props) {
-    return calculateElementPosition(this._content, this._target, {
-      placement: props.placement,
-      offsetX: props.offsetX,
-      offsetY: props.offsetY,
-      constrain: props.constrain,
-      container: props.mountNode,
-      over: props.shouldPositionOverTarget
-    });
-  }
-  position = () => {
-    const {
-      placement,
-      style,
-      availableHeight,
-      availableWidth
-    } = this.calculatePosition(this.props);
-    this._availableHeight = availableHeight;
-    this._availableWidth = availableWidth;
-    this.applyAvailableSpaceCustomProperties();
-    this.setState({
-      positioned: true,
-      placement,
-      style
-    });
-  };
-  startTracking() {
-    this._listener = this._listener || addPositionChangeListener(this._target, this.position);
-  }
-  stopTracking() {
-    if (this._listener) {
-      this._listener.remove();
-      this._listener = null;
     }
-  }
-
-  // content that needs to be positioned relative to the target
-  renderContent() {
-    let content = ensureSingleChild(this.props.children);
-    if (content) {
-      content = safeCloneElement(content, {
-        ref: el => {
-          this._content = el;
-        },
-        style: {
-          boxSizing: 'border-box',
-          zIndex: this.props.styles?.zIndex,
-          ...content.props.style,
-          ...this.state.style
-        },
-        ...(content.props.className && {
-          className: content.props.className
-        }),
-        [Position.contentLocatorAttribute]: this._id
-      });
-      content = _jsx(Portal, {
-        open: true,
-        onOpen: this.handlePortalOpen,
-        mountNode: this.props.mountNode,
-        insertAt: this.props.insertAt,
-        children: content
-      });
+    startTracking() {
+        this._listener = this._listener || addPositionChangeListener(this._target, this.position);
     }
-    return content;
-  }
-  renderTarget() {
-    const target = callRenderProp(this.props.renderTarget);
-    if (target) {
-      return safeCloneElement(target, {
-        ref: el => {
-          this._target = el;
-        },
-        [Position.targetLocatorAttribute]: this._id
-      });
-    } else if (this.props.target) {
-      this._target = callRenderProp(this.props.target);
+    stopTracking() {
+        if (this._listener) {
+            this._listener.remove();
+            this._listener = null;
+        }
+    }
+    renderContent() {
+        let content = ensureSingleChild(this.props.children);
+        if (content) {
+            content = safeCloneElement(content, {
+                ref: (el)=>{
+                    this._content = el;
+                },
+                style: {
+                    boxSizing: 'border-box',
+                    zIndex: this.props.styles?.zIndex,
+                    ...content.props.style,
+                    ...this.state.style
+                },
+                ...content.props.className && {
+                    className: content.props.className
+                },
+                [Position.contentLocatorAttribute]: this._id
+            });
+            content = /*#__PURE__*/ _jsx(Portal, {
+                open: true,
+                onOpen: this.handlePortalOpen,
+                mountNode: this.props.mountNode,
+                insertAt: this.props.insertAt,
+                children: content
+            });
+        }
+        return content;
+    }
+    renderTarget() {
+        const target = callRenderProp(this.props.renderTarget);
+        if (target) {
+            return safeCloneElement(target, {
+                ref: (el)=>{
+                    this._target = el;
+                },
+                [Position.targetLocatorAttribute]: this._id
+            });
+        } else if (this.props.target) {
+            this._target = callRenderProp(this.props.target);
+        }
+        return null;
+    }
+    render() {
+        const props = {
+            [Position.locatorAttribute]: this._id
+        };
+        return /*#__PURE__*/ _jsxs("span", {
+            ...props,
+            css: this.props.styles?.position,
+            ref: this.handleRef,
+            "data-cid": combineDataCid('Position', this.props),
+            children: [
+                this.renderTarget(),
+                this.renderContent()
+            ]
+        });
     }
-    return null;
-  }
-  render() {
-    const props = {
-      [Position.locatorAttribute]: this._id
-    };
-    return _jsxs("span", {
-      ...props,
-      css: this.props.styles?.position,
-      ref: this.handleRef,
-      "data-cid": combineDataCid('Position', this.props),
-      children: [this.renderTarget(), this.renderContent()]
-    });
-  }
-}) || _class) || _class);
+}
+Position = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyle, generateComponentTheme)
+], Position);
 export default Position;
-export { Position };
+export { Position };

package/es/Position/props.js

@@ -1,26 +1,19 @@
-/*
- * 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 allowedProps = ['renderTarget', 'target', 'placement', 'mountNode', 'insertAt', 'constrain', 'offsetX', 'offsetY', 'id', 'shouldTrackPosition', 'shouldPositionOverTarget', 'onPositionChanged', 'onPositioned', 'children', 'containerDisplay', 'elementRef'];
-export { allowedProps };
+const allowedProps = [
+    'renderTarget',
+    'target',
+    'placement',
+    'mountNode',
+    'insertAt',
+    'constrain',
+    'offsetX',
+    'offsetY',
+    'id',
+    'shouldTrackPosition',
+    'shouldPositionOverTarget',
+    'onPositionChanged',
+    'onPositioned',
+    'children',
+    'containerDisplay',
+    'elementRef'
+];
+export { allowedProps };

package/es/Position/styles.js

@@ -1,44 +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.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props) => {
-  return {
-    position: {
-      label: 'position',
-      display: props.containerDisplay
-    },
-    zIndex: componentTheme.zIndex
-  };
+const generateStyle = (componentTheme, props)=>{
+    return {
+        position: {
+            label: 'position',
+            display: props.containerDisplay
+        },
+        zIndex: componentTheme.zIndex
+    };
 };
-export default generateStyle;
+export default generateStyle;

package/es/Position/theme.js

@@ -1,41 +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.
- */
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = theme => {
-  const {
-    stacking
-  } = theme;
-  const componentVariables = {
-    zIndex: stacking?.topmost
-  };
-  return {
-    ...componentVariables
-  };
+const generateComponentTheme = (theme)=>{
+    const { stacking } = theme;
+    const componentVariables = {
+        zIndex: stacking?.topmost
+    };
+    return {
+        ...componentVariables
+    };
 };
-export default generateComponentTheme;
+export default generateComponentTheme;