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

package/es/Options/v1/Item/index.js

@@ -1,138 +1,109 @@
-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, createElement } from 'react';
 import { omitProps, getElementType, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
 import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-
-/**
----
-parent: Options
-id: Options.Item
----
-**/
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec(_class = _dec2(_class = class Item extends Component {
-  static displayName = 'Item';
-  static componentId = 'Options.Item';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    as: 'span',
-    variant: 'default',
-    role: 'listitem',
-    voiceoverRoleBugWorkaround: false,
-    beforeLabelContentVAlign: 'center',
-    afterLabelContentVAlign: 'center',
-    isSelected: false
-  };
-  ref = null;
-  _descriptionId;
-  constructor(props) {
-    super(props);
-    this._descriptionId = props.deterministicId('OptionsItem-description');
-  }
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  renderContent(renderLabel, contentVariant) {
-    const {
-      styles,
-      variant,
-      as,
-      role,
-      children
-    } = this.props;
-    let labelContent;
-    if (typeof renderLabel === 'function') {
-      labelContent = /*#__PURE__*/createElement(renderLabel, {
-        variant,
-        as,
-        role
-      }, children);
-    } else {
-      labelContent = renderLabel;
+class Item extends Component {
+    static{
+        this.displayName = 'Item';
+    }
+    static{
+        this.componentId = 'Options.Item';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            as: 'span',
+            variant: 'default',
+            role: 'listitem',
+            voiceoverRoleBugWorkaround: false,
+            beforeLabelContentVAlign: 'center',
+            afterLabelContentVAlign: 'center',
+            isSelected: false
+        };
     }
-    return _jsx("span", {
-      css: [styles?.content, contentVariant],
-      role: "presentation",
-      "aria-hidden": "true",
-      children: labelContent
-    });
-  }
-  render() {
-    const {
-      as,
-      href,
-      role,
-      styles,
-      description,
-      descriptionRole,
-      renderBeforeLabel,
-      renderAfterLabel,
-      elementRef,
-      children,
-      voiceoverRoleBugWorkaround
-    } = this.props;
-    const ElementType = getElementType(Item, this.props, () => as);
-    const InnerElementType = href ? 'a' : 'span';
-    const passthroughProps = omitProps(this.props, Item.allowedProps);
-    const childrenContent = callRenderProp(children);
-    const descriptionContent = callRenderProp(description);
-    const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : undefined);
-    return _jsxs(ElementType, {
-      role: voiceoverRoleBugWorkaround ? role : 'none',
-      "data-cid": "Options.Item",
-      css: styles?.item,
-      ref: element => {
-        this.ref = element;
-        if (typeof elementRef === 'function') {
-          elementRef(element);
+    constructor(props){
+        super(props), this.ref = null;
+        this._descriptionId = props.deterministicId('OptionsItem-description');
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    renderContent(renderLabel, contentVariant) {
+        const { styles, variant, as, role, children } = this.props;
+        let labelContent;
+        if (typeof renderLabel === 'function') {
+            labelContent = /*#__PURE__*/ createElement(renderLabel, {
+                variant,
+                as,
+                role
+            }, children);
+        } else {
+            labelContent = renderLabel;
         }
-      },
-      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined,
-      children: [_jsxs(InnerElementType, {
-        ...passthroughProps,
-        css: styles?.container,
-        role: href || voiceoverRoleBugWorkaround ? undefined : role,
-        href: href,
-        "aria-describedby": voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy,
-        children: [childrenContent, descriptionContent && _jsx("span", {
-          css: styles?.description,
-          role: descriptionRole,
-          id: this._descriptionId,
-          children: descriptionContent
-        })]
-      }), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter)]
-    });
-  }
-}) || _class) || _class);
+        return /*#__PURE__*/ _jsx("span", {
+            css: [
+                styles?.content,
+                contentVariant
+            ],
+            role: "presentation",
+            "aria-hidden": "true",
+            children: labelContent
+        });
+    }
+    render() {
+        const { as, href, role, styles, description, descriptionRole, renderBeforeLabel, renderAfterLabel, elementRef, children, voiceoverRoleBugWorkaround } = this.props;
+        const ElementType = getElementType(Item, this.props, ()=>as);
+        const InnerElementType = href ? 'a' : 'span';
+        const passthroughProps = omitProps(this.props, Item.allowedProps);
+        const childrenContent = callRenderProp(children);
+        const descriptionContent = callRenderProp(description);
+        const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : undefined);
+        return /*#__PURE__*/ _jsxs(ElementType, {
+            role: voiceoverRoleBugWorkaround ? role : 'none',
+            "data-cid": "Options.Item",
+            css: styles?.item,
+            ref: (element)=>{
+                this.ref = element;
+                if (typeof elementRef === 'function') {
+                    elementRef(element);
+                }
+            },
+            "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined,
+            children: [
+                /*#__PURE__*/ _jsxs(InnerElementType, {
+                    ...passthroughProps,
+                    css: styles?.container,
+                    role: href || voiceoverRoleBugWorkaround ? undefined : role,
+                    href: href,
+                    "aria-describedby": voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy,
+                    children: [
+                        childrenContent,
+                        descriptionContent && /*#__PURE__*/ _jsx("span", {
+                            css: styles?.description,
+                            role: descriptionRole,
+                            id: this._descriptionId,
+                            children: descriptionContent
+                        })
+                    ]
+                }),
+                renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore),
+                renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter)
+            ]
+        });
+    }
+}
+Item = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyles, generateComponentTheme)
+], Item);
 export default Item;
-export { Item };
+export { Item };

package/es/Options/v1/Item/props.js

@@ -1,26 +1,17 @@
-/*
- * 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', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children', 'isSelected'];
-export { allowedProps };
+const allowedProps = [
+    'as',
+    'variant',
+    'role',
+    'renderBeforeLabel',
+    'renderAfterLabel',
+    'beforeLabelContentVAlign',
+    'afterLabelContentVAlign',
+    'description',
+    'descriptionRole',
+    'voiceoverRoleBugWorkaround',
+    'href',
+    'elementRef',
+    'children',
+    'isSelected'
+];
+export { allowedProps };

package/es/Options/v1/Item/styles.js

@@ -1,191 +1,146 @@
-/*
- * 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 { matchComponentTypes } from '@instructure/ui-react-utils';
-/**
- * ---
- * 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) => {
-  const {
-    variant,
-    children,
-    renderBeforeLabel: hasContentBeforeLabel,
-    renderAfterLabel: hasContentAfterLabel,
-    beforeLabelContentVAlign,
-    afterLabelContentVAlign
-  } = props;
-  // TODO if children are () => ReactNode this wont match anything
-  const containsList = matchComponentTypes(children, ['Options']);
-
-  // used for label and description too
-  const variantVariants = {
-    highlighted: {
-      background: componentTheme.highlightedBackground,
-      color: componentTheme.highlightedLabelColor
-    },
-    selected: {
-      background: componentTheme.selectedBackground,
-      color: componentTheme.highlightedLabelColor
-    },
-    disabled: {
-      cursor: 'not-allowed',
-      opacity: 0.68
-    },
-    'highlighted-disabled': {
-      background: componentTheme.highlightedBackground,
-      color: componentTheme.highlightedLabelColor,
-      cursor: 'not-allowed'
-    },
-    'selected-highlighted': {
-      background: componentTheme.selectedHighlightedBackground,
-      color: componentTheme.highlightedLabelColor
-    },
-    default: {
-      transition: 'background 200ms'
-    }
-  };
-  const getContentVAlign = type => {
-    const vAlign = type === 'before' ? beforeLabelContentVAlign : afterLabelContentVAlign;
-    const vOffset = type === 'before' ? componentTheme.beforeLabelContentVOffset : componentTheme.afterLabelContentVOffset;
+const generateStyle = (componentTheme, props)=>{
+    const { variant, children, renderBeforeLabel: hasContentBeforeLabel, renderAfterLabel: hasContentAfterLabel, beforeLabelContentVAlign, afterLabelContentVAlign } = props;
+    const containsList = matchComponentTypes(children, [
+        'Options'
+    ]);
+    const variantVariants = {
+        highlighted: {
+            background: componentTheme.highlightedBackground,
+            color: componentTheme.highlightedLabelColor
+        },
+        selected: {
+            background: componentTheme.selectedBackground,
+            color: componentTheme.highlightedLabelColor
+        },
+        disabled: {
+            cursor: 'not-allowed',
+            opacity: 0.68
+        },
+        'highlighted-disabled': {
+            background: componentTheme.highlightedBackground,
+            color: componentTheme.highlightedLabelColor,
+            cursor: 'not-allowed'
+        },
+        'selected-highlighted': {
+            background: componentTheme.selectedHighlightedBackground,
+            color: componentTheme.highlightedLabelColor
+        },
+        default: {
+            transition: 'background 200ms'
+        }
+    };
+    const getContentVAlign = (type)=>{
+        const vAlign = type === 'before' ? beforeLabelContentVAlign : afterLabelContentVAlign;
+        const vOffset = type === 'before' ? componentTheme.beforeLabelContentVOffset : componentTheme.afterLabelContentVOffset;
+        return ({
+            start: {
+                alignItems: 'flex-start',
+                paddingBlockStart: vOffset
+            },
+            center: {
+                alignItems: 'center',
+                paddingBlockStart: vOffset,
+                paddingBlockEnd: vOffset
+            },
+            end: {
+                alignItems: 'flex-end',
+                paddingBlockEnd: vOffset
+            }
+        })[vAlign];
+    };
+    const linkStyles = {
+        textDecoration: 'none',
+        color: 'currentColor'
+    };
     return {
-      start: {
-        alignItems: 'flex-start',
-        paddingBlockStart: vOffset
-      },
-      center: {
-        alignItems: 'center',
-        paddingBlockStart: vOffset,
-        paddingBlockEnd: vOffset
-      },
-      end: {
-        alignItems: 'flex-end',
-        paddingBlockEnd: vOffset
-      }
-    }[vAlign];
-  };
-  const linkStyles = {
-    textDecoration: 'none',
-    color: 'currentColor'
-  };
-  return {
-    item: {
-      label: 'optionItem',
-      background: componentTheme.background,
-      color: componentTheme.color,
-      cursor: 'pointer',
-      display: 'block',
-      fontSize: componentTheme.fontSize,
-      fontFamily: componentTheme.fontFamily,
-      fontWeight: props.isSelected ? componentTheme.fontWeightSelected : componentTheme.fontWeight,
-      lineHeight: componentTheme.lineHeight,
-      outline: 'none',
-      position: 'relative',
-      userSelect: 'none',
-      ...variantVariants[variant],
-      ...(containsList && {
-        cursor: 'default'
-      }),
-      // for nested items
-      '[class*=-optionItem] &': {
-        // except if it has icon before
-        ...(!hasContentBeforeLabel && {
-          '[class$=-optionItem__container]': {
-            paddingInlineStart: componentTheme.nestedPadding
-          },
-          '[class$=-optionItem__content--before]': {
-            insetInlineStart: componentTheme.nestedPadding
-          }
-        })
-      }
-    },
-    container: {
-      label: 'optionItem__container',
-      display: 'block',
-      outline: 'none',
-      padding: componentTheme.padding,
-      ...(containsList && {
-        padding: '0'
-      }),
-      ...(hasContentBeforeLabel && {
-        paddingInlineEnd: componentTheme.iconPadding,
-        paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
-      }),
-      ...(hasContentAfterLabel && {
-        paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
-        paddingInlineStart: componentTheme.iconPadding
-      }),
-      ...(hasContentBeforeLabel && hasContentAfterLabel && {
-        paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
-        paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
-      }),
-      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
-      '&:is(a)': {
-        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
-      },
-      '&:-webkit-any(a)': {
-        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
-      }
-    },
-    content: {
-      label: 'optionItem__content',
-      display: 'flex',
-      height: '100%',
-      boxSizing: 'border-box',
-      pointerEvents: 'none',
-      position: 'absolute',
-      top: '0'
-    },
-    contentBefore: {
-      label: 'optionItem__content--before',
-      insetInlineEnd: 'auto',
-      insetInlineStart: componentTheme.iconPadding,
-      ...getContentVAlign('before')
-    },
-    contentAfter: {
-      label: 'optionItem__content--after',
-      insetInlineEnd: componentTheme.iconPadding,
-      insetInlineStart: 'auto',
-      ...getContentVAlign('after')
-    },
-    description: {
-      label: 'optionItem__description',
-      display: 'block',
-      paddingBlockStart: componentTheme.descriptionPaddingStart,
-      fontWeight: componentTheme.descriptionFontWeight,
-      fontSize: componentTheme.descriptionFontSize,
-      lineHeight: componentTheme.descriptionLineHeight,
-      color: componentTheme.descriptionColor,
-      ...variantVariants[variant],
-      background: 'none' // needed to clear variant background
-    }
-  };
+        item: {
+            label: 'optionItem',
+            background: componentTheme.background,
+            color: componentTheme.color,
+            cursor: 'pointer',
+            display: 'block',
+            fontSize: componentTheme.fontSize,
+            fontFamily: componentTheme.fontFamily,
+            fontWeight: props.isSelected ? componentTheme.fontWeightSelected : componentTheme.fontWeight,
+            lineHeight: componentTheme.lineHeight,
+            outline: 'none',
+            position: 'relative',
+            userSelect: 'none',
+            ...variantVariants[variant],
+            ...containsList && {
+                cursor: 'default'
+            },
+            '[class*=-optionItem] &': {
+                ...!hasContentBeforeLabel && {
+                    '[class$=-optionItem__container]': {
+                        paddingInlineStart: componentTheme.nestedPadding
+                    },
+                    '[class$=-optionItem__content--before]': {
+                        insetInlineStart: componentTheme.nestedPadding
+                    }
+                }
+            }
+        },
+        container: {
+            label: 'optionItem__container',
+            display: 'block',
+            outline: 'none',
+            padding: componentTheme.padding,
+            ...containsList && {
+                padding: '0'
+            },
+            ...hasContentBeforeLabel && {
+                paddingInlineEnd: componentTheme.iconPadding,
+                paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
+            },
+            ...hasContentAfterLabel && {
+                paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
+                paddingInlineStart: componentTheme.iconPadding
+            },
+            ...hasContentBeforeLabel && hasContentAfterLabel && {
+                paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
+                paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
+            },
+            '&:is(a)': {
+                '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+            },
+            '&:-webkit-any(a)': {
+                '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+            }
+        },
+        content: {
+            label: 'optionItem__content',
+            display: 'flex',
+            height: '100%',
+            boxSizing: 'border-box',
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: '0'
+        },
+        contentBefore: {
+            label: 'optionItem__content--before',
+            insetInlineEnd: 'auto',
+            insetInlineStart: componentTheme.iconPadding,
+            ...getContentVAlign('before')
+        },
+        contentAfter: {
+            label: 'optionItem__content--after',
+            insetInlineEnd: componentTheme.iconPadding,
+            insetInlineStart: 'auto',
+            ...getContentVAlign('after')
+        },
+        description: {
+            label: 'optionItem__description',
+            display: 'block',
+            paddingBlockStart: componentTheme.descriptionPaddingStart,
+            fontWeight: componentTheme.descriptionFontWeight,
+            fontSize: componentTheme.descriptionFontSize,
+            lineHeight: componentTheme.descriptionLineHeight,
+            color: componentTheme.descriptionColor,
+            ...variantVariants[variant],
+            background: 'none'
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;