@instructure/ui-buttons 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)
 
 ### Features

package/es/BaseButton/v1/index.js

@@ -1,310 +1,234 @@
-var _dec, _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 keycode from 'keycode';
 import { getElementType, getInteraction, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { View } from '@instructure/ui-view/v11_6';
-// TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
-// this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
-import { isSafari, safeLinkProps } from '@instructure/ui-utils';
-import { combineDataCid } from '@instructure/ui-utils';
+import { isSafari, safeLinkProps, combineDataCid } from '@instructure/ui-utils';
 import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/**
----
-category: components/Util Components
----
-**/
-let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class BaseButton extends Component {
-  static displayName = 'BaseButton';
-  static componentId = 'BaseButton';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: undefined,
-    color: 'secondary',
-    shape: 'rectangle',
-    display: 'inline-block',
-    textAlign: 'start',
-    withBackground: true,
-    withBorder: true,
-    isCondensed: false,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  ref = null;
-  componentDidMount() {
-    this.props.makeStyles?.(this.makeStylesVariables);
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStylesVariables);
-  }
-  get makeStylesVariables() {
-    return {
-      isDisabled: this.isDisabled,
-      hasOnlyIconVisible: this.hasOnlyIconVisible,
-      isEnabled: this.isEnabled
-    };
-  }
-  get hasOnlyIconVisible() {
-    const {
-      children,
-      renderIcon
-    } = this.props;
-    return !!(renderIcon && !hasVisibleChildren(children));
-  }
-  get elementType() {
-    return getElementType(BaseButton, this.props);
-  }
-  get interaction() {
-    return getInteraction({
-      props: this.props
-    });
-  }
-  get isDisabled() {
-    return this.interaction === 'disabled';
-  }
-  get isReadOnly() {
-    return this.interaction === 'readonly';
-  }
-  get isEnabled() {
-    return this.interaction === 'enabled';
-  }
-  get focusColor() {
-    const {
-      color,
-      focusColor,
-      withBackground
-    } = this.props;
-
-    // Give user specified focusColor preference
-    if (focusColor) {
-      return focusColor;
+class BaseButton extends Component {
+    static{
+        this.displayName = 'BaseButton';
+    }
+    static{
+        this.componentId = 'BaseButton';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            type: 'button',
+            size: 'medium',
+            as: 'button',
+            interaction: undefined,
+            color: 'secondary',
+            shape: 'rectangle',
+            display: 'inline-block',
+            textAlign: 'start',
+            withBackground: true,
+            withBorder: true,
+            isCondensed: false,
+            margin: '0',
+            cursor: 'pointer'
+        };
+    }
+    componentDidMount() {
+        this.props.makeStyles?.(this.makeStylesVariables);
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.(this.makeStylesVariables);
+    }
+    get makeStylesVariables() {
+        return {
+            isDisabled: this.isDisabled,
+            hasOnlyIconVisible: this.hasOnlyIconVisible,
+            isEnabled: this.isEnabled
+        };
+    }
+    get hasOnlyIconVisible() {
+        const { children, renderIcon } = this.props;
+        return !!(renderIcon && !hasVisibleChildren(children));
+    }
+    get elementType() {
+        return getElementType(BaseButton, this.props);
+    }
+    get interaction() {
+        return getInteraction({
+            props: this.props
+        });
     }
-
-    // The `primary-inverse` background has an info focus outline
-    // by default since it is replacing the `light` button variant.
-    // Override the focus color with info even though it is
-    // an inverse color
-    if (color === 'primary-inverse' && withBackground) {
-      return 'info';
+    get isDisabled() {
+        return this.interaction === 'disabled';
     }
-    return color.includes('inverse') ? 'inverse' : 'info';
-  }
-  get focused() {
-    return isActiveElement(this.ref);
-  }
-  focus() {
-    this.ref && this.ref.focus();
-  }
-  handleElementRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+    get isReadOnly() {
+        return this.interaction === 'readonly';
     }
-  };
-  handleClick = event => {
-    const {
-      onClick
-    } = this.props;
-    const {
-      interaction
-    } = this;
-    if (interaction !== 'enabled') {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
+    get isEnabled() {
+        return this.interaction === 'enabled';
     }
-    if (typeof onClick === 'function') {
-      onClick(event);
+    get focusColor() {
+        const { color, focusColor, withBackground } = this.props;
+        if (focusColor) {
+            return focusColor;
+        }
+        if (color === 'primary-inverse' && withBackground) {
+            return 'info';
+        }
+        return color.includes('inverse') ? 'inverse' : 'info';
     }
-  };
-  handleKeyDown = event => {
-    const {
-      onClick,
-      onKeyDown,
-      href
-    } = this.props;
-    const {
-      interaction
-    } = this;
-    if (typeof onKeyDown === 'function') {
-      onKeyDown(event);
+    get focused() {
+        return isActiveElement(this.ref);
     }
-
-    // behave like a button when space key is pressed
-    const {
-      space,
-      enter
-    } = keycode.codes;
-    if (this.elementType !== 'button' && [space, enter].includes(event.keyCode)) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (typeof onClick === 'function' && interaction === 'enabled') {
-        onClick(event);
-      }
-      if (href) {
-        this.ref && this.ref.click();
-      }
+    focus() {
+        this.ref && this.ref.focus();
     }
-  };
-  renderChildren() {
-    const {
-      renderIcon,
-      children,
-      styles
-    } = this.props;
-    const wrappedChildren = _jsx("span", {
-      css: styles?.children,
-      children: children
-    });
-    if (!renderIcon) {
-      return wrappedChildren;
+    renderChildren() {
+        const { renderIcon, children, styles } = this.props;
+        const wrappedChildren = /*#__PURE__*/ _jsx("span", {
+            css: styles?.children,
+            children: children
+        });
+        if (!renderIcon) {
+            return wrappedChildren;
+        }
+        const { hasOnlyIconVisible } = this;
+        const wrappedIcon = /*#__PURE__*/ _jsx("span", {
+            css: styles?.iconSVG,
+            children: callRenderProp(renderIcon)
+        });
+        const flexChildren = hasOnlyIconVisible ? /*#__PURE__*/ _jsxs("span", {
+            css: styles?.iconOnly,
+            children: [
+                wrappedIcon,
+                children
+            ]
+        }) : [
+            /*#__PURE__*/ _jsx("span", {
+                css: styles?.iconWrapper,
+                children: wrappedIcon
+            }, "icon"),
+            /*#__PURE__*/ _jsx("span", {
+                css: styles?.childrenWrapper,
+                children: wrappedChildren
+            }, "children")
+        ];
+        return /*#__PURE__*/ _jsx("span", {
+            css: styles?.childrenLayout,
+            children: flexChildren
+        });
     }
-    const {
-      hasOnlyIconVisible
-    } = this;
-    const wrappedIcon = _jsx("span", {
-      css: styles?.iconSVG,
-      children: callRenderProp(renderIcon)
-    });
-    const flexChildren = hasOnlyIconVisible ? _jsxs("span", {
-      css: styles?.iconOnly,
-      children: [wrappedIcon, children]
-    }) : [_jsx("span", {
-      css: styles?.iconWrapper,
-      children: wrappedIcon
-    }, "icon"), _jsx("span", {
-      css: styles?.childrenWrapper,
-      children: wrappedChildren
-    }, "children")];
-    return _jsx("span", {
-      css: styles?.childrenLayout,
-      children: flexChildren
-    });
-  }
-  render() {
-    const {
-      type,
-      size,
-      elementRef,
-      as,
-      href: rawHref,
-      color,
-      focusColor,
-      textAlign,
-      shape,
-      display,
-      withBackground,
-      withBorder,
-      isCondensed,
-      margin,
-      cursor,
-      onClick,
-      renderIcon,
-      tabIndex,
-      styles,
-      makeStyles,
-      withFocusOutline,
-      ...props
-    } = this.props;
-    const {
-      isDisabled,
-      isReadOnly,
-      elementType
-    } = this;
-    const {
-      href,
-      rel
-    } = safeLinkProps({
-      tag: typeof elementType == 'string' ? elementType : 'button',
-      attr: 'href',
-      href: rawHref,
-      target: props.target,
-      rel: props.rel
-    });
-
-    // only add 0 tabIndex value if it doesn't have it by default, see
-    // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-    let needsZeroTabIndex = true;
-    if (typeof elementType == 'string') {
-      if (['button', 'frame', 'iframe', 'input', 'object', 'select', 'textarea', 'summary'].includes(elementType)) {
-        needsZeroTabIndex = false;
-      }
-      if (href && (elementType === 'a' || elementType === 'area')) {
-        needsZeroTabIndex = false;
-      }
+    render() {
+        const { type, size, elementRef, as, href: rawHref, color, focusColor, textAlign, shape, display, withBackground, withBorder, isCondensed, margin, cursor, onClick, renderIcon, tabIndex, styles, makeStyles, withFocusOutline, ...props } = this.props;
+        const { isDisabled, isReadOnly, elementType } = this;
+        const { href, rel } = safeLinkProps({
+            tag: typeof elementType == 'string' ? elementType : 'button',
+            attr: 'href',
+            href: rawHref,
+            target: props.target,
+            rel: props.rel
+        });
+        let needsZeroTabIndex = true;
+        if (typeof elementType == 'string') {
+            if ([
+                'button',
+                'frame',
+                'iframe',
+                'input',
+                'object',
+                'select',
+                'textarea',
+                'summary'
+            ].includes(elementType)) {
+                needsZeroTabIndex = false;
+            }
+            if (href && (elementType === 'a' || elementType === 'area')) {
+                needsZeroTabIndex = false;
+            }
+        }
+        let tabIndexValue = tabIndex;
+        if (onClick && as && needsZeroTabIndex || isSafari() && as) {
+            tabIndexValue = tabIndex || 0;
+        }
+        return /*#__PURE__*/ _jsx(View, {
+            ...passthroughProps(props),
+            as: elementType,
+            focusColor: this.focusColor,
+            position: "relative",
+            display: display,
+            width: display === 'block' ? '100%' : 'auto',
+            borderRadius: shape === 'circle' ? 'circle' : 'medium',
+            background: "transparent",
+            padding: "none",
+            borderWidth: "none",
+            margin: margin,
+            cursor: isDisabled ? 'not-allowed' : cursor,
+            href: href,
+            rel: rel,
+            type: href ? undefined : type,
+            elementRef: this.handleElementRef,
+            onClick: this.handleClick,
+            onKeyDown: this.handleKeyDown,
+            role: onClick && as !== 'button' ? 'button' : undefined,
+            tabIndex: tabIndexValue,
+            disabled: isDisabled || isReadOnly,
+            css: styles?.baseButton,
+            withFocusOutline: withFocusOutline,
+            "data-cid": combineDataCid('BaseButton', this.props),
+            children: /*#__PURE__*/ _jsx("span", {
+                css: styles?.content,
+                children: this.renderChildren()
+            })
+        });
     }
-    let tabIndexValue = tabIndex;
-    // In Safari, a button cannot get focus unless it has an explicit 0 tabindex
-    if (onClick && as && needsZeroTabIndex || isSafari() && as) {
-      tabIndexValue = tabIndex || 0;
+    constructor(...args){
+        super(...args), this.ref = null, this.handleElementRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        }, this.handleClick = (event)=>{
+            const { onClick } = this.props;
+            const { interaction } = this;
+            if (interaction !== 'enabled') {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (typeof onClick === 'function') {
+                onClick(event);
+            }
+        }, this.handleKeyDown = (event)=>{
+            const { onClick, onKeyDown, href } = this.props;
+            const { interaction } = this;
+            if (typeof onKeyDown === 'function') {
+                onKeyDown(event);
+            }
+            const { space, enter } = keycode.codes;
+            if (this.elementType !== 'button' && [
+                space,
+                enter
+            ].includes(event.keyCode)) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (typeof onClick === 'function' && interaction === 'enabled') {
+                    onClick(event);
+                }
+                if (href) {
+                    this.ref && this.ref.click();
+                }
+            }
+        };
     }
-    return _jsx(View, {
-      ...passthroughProps(props),
-      as: elementType,
-      focusColor: this.focusColor,
-      position: "relative",
-      display: display,
-      width: display === 'block' ? '100%' : 'auto',
-      borderRadius: shape === 'circle' ? 'circle' : 'medium',
-      background: "transparent",
-      padding: "none",
-      borderWidth: "none",
-      margin: margin,
-      cursor: isDisabled ? 'not-allowed' : cursor,
-      href: href,
-      rel: rel,
-      type: href ? undefined : type,
-      elementRef: this.handleElementRef,
-      onClick: this.handleClick,
-      onKeyDown: this.handleKeyDown,
-      role: onClick && as !== 'button' ? 'button' : undefined,
-      tabIndex: tabIndexValue,
-      disabled: isDisabled || isReadOnly,
-      css: styles?.baseButton,
-      withFocusOutline: withFocusOutline,
-      "data-cid": combineDataCid('BaseButton', this.props),
-      children: _jsx("span", {
-        css: styles?.content,
-        children: this.renderChildren()
-      })
-    });
-  }
-}) || _class);
+}
+BaseButton = _ts_decorate([
+    withStyle(generateStyles, generateComponentTheme)
+], BaseButton);
 export { BaseButton };
-export default BaseButton;
+export default BaseButton;

package/es/BaseButton/v1/props.js

@@ -1,26 +1,24 @@
-/*
- * 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 = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'isCondensed', 'margin', 'onClick', 'onKeyDown', 'renderIcon', 'shape', 'size', 'tabIndex', 'textAlign', 'type', 'withBackground', 'withBorder'];
-export { allowedProps };
+const allowedProps = [
+    'as',
+    'children',
+    'color',
+    'cursor',
+    'display',
+    'elementRef',
+    'focusColor',
+    'href',
+    'interaction',
+    'isCondensed',
+    'margin',
+    'onClick',
+    'onKeyDown',
+    'renderIcon',
+    'shape',
+    'size',
+    'tabIndex',
+    'textAlign',
+    'type',
+    'withBackground',
+    'withBorder'
+];
+export { allowedProps };