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

package/es/InlineList/v1/InlineListItem/index.js

@@ -1,28 +1,5 @@
-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 { View } from '@instructure/ui-view/v11_6';
 import { passthroughProps } from '@instructure/ui-react-utils';
@@ -30,69 +7,64 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle 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";
-/**
----
-parent: InlineList
-id: InlineList.Item
----
-**/
-let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class InlineListItem extends Component {
-  static displayName = 'InlineListItem';
-  static componentId = 'InlineList.Item';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    padding: 'none',
-    spacing: 'none',
-    delimiter: 'none',
-    size: 'medium',
-    lastPlaceholder: false
-  };
-  ref = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+class InlineListItem extends Component {
+    static{
+        this.displayName = 'InlineListItem';
+    }
+    static{
+        this.componentId = 'InlineList.Item';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            padding: 'none',
+            spacing: 'none',
+            delimiter: 'none',
+            size: 'medium',
+            lastPlaceholder: false
+        };
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    render() {
+        const { delimiter, size, margin, padding, elementRef, children, spacing, styles, lastPlaceholder, ...rest } = this.props;
+        return /*#__PURE__*/ _jsxs(View, {
+            ...passthroughProps(rest),
+            css: styles?.inlineListItem,
+            as: "li",
+            margin: margin,
+            padding: padding,
+            display: "inline-block",
+            maxWidth: "100%",
+            elementRef: this.handleRef,
+            "data-cid": "InlineListItem",
+            children: [
+                children,
+                !lastPlaceholder && /*#__PURE__*/ _jsx("span", {
+                    css: styles?.delimiter,
+                    "aria-hidden": "true"
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args), this.ref = null, this.handleRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        };
     }
-  };
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  render() {
-    const {
-      delimiter,
-      size,
-      margin,
-      padding,
-      elementRef,
-      children,
-      spacing,
-      styles,
-      lastPlaceholder,
-      ...rest
-    } = this.props;
-    return _jsxs(View, {
-      ...passthroughProps(rest),
-      css: styles?.inlineListItem,
-      as: "li",
-      margin: margin,
-      padding: padding,
-      display: "inline-block",
-      maxWidth: "100%",
-      elementRef: this.handleRef,
-      "data-cid": "InlineListItem",
-      children: [children, !lastPlaceholder && _jsx("span", {
-        css: styles?.delimiter,
-        "aria-hidden": "true"
-      })]
-    });
-  }
-}) || _class);
+}
+InlineListItem = _ts_decorate([
+    withStyle(generateStyle, generateComponentTheme)
+], InlineListItem);
 export default InlineListItem;
-export { InlineListItem };
+export { InlineListItem };

package/es/InlineList/v1/InlineListItem/props.js

@@ -1,28 +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.
- */
-
-// <unknown> is needed for React 17 compatibility
-
-const allowedProps = ['children', 'delimiter', 'size', 'margin', 'padding', 'spacing', 'elementRef'];
-export { allowedProps };
+const allowedProps = [
+    'children',
+    'delimiter',
+    'size',
+    'margin',
+    'padding',
+    'spacing',
+    'elementRef'
+];
+export { allowedProps };

package/es/InlineList/v1/InlineListItem/styles.js

@@ -1,148 +1,108 @@
-/*
- * 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 { logError as error } from '@instructure/console';
-/**
- * ---
- * 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  {String} props.delimiter
- * @param  {String} props.spacing
- * @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 {
-    size,
-    delimiter,
-    spacing
-  } = props;
-  const withDelimiter = delimiter !== 'none';
-  const withSpacing = spacing !== 'none';
-  error(!(withDelimiter && withSpacing), `[InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`);
-  const sizeVariants = {
-    small: {
-      fontSize: componentTheme.fontSizeSmall
-    },
-    medium: {
-      fontSize: componentTheme.fontSizeMedium
-    },
-    large: {
-      fontSize: componentTheme.fontSizeLarge
-    }
-  };
-  const spacingVariants = {
-    'xxx-small': {
-      marginInlineStart: componentTheme.spacingXXXSmall,
-      marginInlineEnd: componentTheme.spacingXXXSmall
-    },
-    'xx-small': {
-      marginInlineStart: componentTheme.spacingXXSmall,
-      marginInlineEnd: componentTheme.spacingXXSmall
-    },
-    'x-small': {
-      marginInlineStart: componentTheme.spacingXSmall,
-      marginInlineEnd: componentTheme.spacingXSmall
-    },
-    small: {
-      marginInlineStart: componentTheme.spacingSmall,
-      marginInlineEnd: componentTheme.spacingSmall
-    },
-    medium: {
-      marginInlineStart: componentTheme.spacingMedium,
-      marginInlineEnd: componentTheme.spacingMedium
-    },
-    large: {
-      marginInlineStart: componentTheme.spacingLarge,
-      marginInlineEnd: componentTheme.spacingLarge
-    },
-    'x-large': {
-      marginInlineStart: componentTheme.spacingXLarge,
-      marginInlineEnd: componentTheme.spacingXLarge
-    },
-    'xx-large': {
-      marginInlineStart: componentTheme.spacingXXLarge,
-      marginInlineEnd: componentTheme.spacingXXLarge
-    },
-    none: {}
-  };
-  const delimiterVariants = {
-    none: {
-      marginInlineStart: componentTheme.noneSpacing,
-      marginInlineEnd: componentTheme.noneSpacing
-    },
-    pipe: {
-      marginInlineStart: componentTheme.pipeSpacing,
-      marginInlineEnd: componentTheme.pipeSpacing,
-      '&::after': {
-        content: '"\\007C"'
-      }
-    },
-    slash: {
-      marginInlineStart: componentTheme.slashSpacing,
-      marginInlineEnd: componentTheme.slashSpacing,
-      '&::after': {
-        content: '"\\002F"'
-      }
-    },
-    arrow: {
-      marginInlineStart: componentTheme.arrowSpacing,
-      marginInlineEnd: componentTheme.arrowSpacing,
-      '&::after': {
-        content: '"\\003E"'
-      }
-    }
-  };
-  return {
-    inlineListItem: {
-      label: 'inlineListItem',
-      fontWeight: componentTheme.fontWeight,
-      fontFamily: componentTheme.fontFamily,
-      verticalAlign: 'middle',
-      boxSizing: 'border-box',
-      lineHeight: componentTheme.lineHeight,
-      color: componentTheme.color,
-      ...(withSpacing && !withDelimiter && spacingVariants[spacing]),
-      ...sizeVariants[size],
-      '&:first-of-type': {
-        marginInlineStart: 0
-      },
-      '&:last-of-type': {
-        marginInlineEnd: 0
-      }
-    },
-    delimiter: {
-      label: 'inlineListItem__delimiter',
-      ...delimiterVariants[delimiter],
-      '[class$=-inlineListItem]:last-of-type > &:last-child::after': {
-        content: 'none'
-      },
-      color: componentTheme.delimiterColor
-    }
-  };
+const generateStyle = (componentTheme, props)=>{
+    const { size, delimiter, spacing } = props;
+    const withDelimiter = delimiter !== 'none';
+    const withSpacing = spacing !== 'none';
+    error(!(withDelimiter && withSpacing), `[InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`);
+    const sizeVariants = {
+        small: {
+            fontSize: componentTheme.fontSizeSmall
+        },
+        medium: {
+            fontSize: componentTheme.fontSizeMedium
+        },
+        large: {
+            fontSize: componentTheme.fontSizeLarge
+        }
+    };
+    const spacingVariants = {
+        'xxx-small': {
+            marginInlineStart: componentTheme.spacingXXXSmall,
+            marginInlineEnd: componentTheme.spacingXXXSmall
+        },
+        'xx-small': {
+            marginInlineStart: componentTheme.spacingXXSmall,
+            marginInlineEnd: componentTheme.spacingXXSmall
+        },
+        'x-small': {
+            marginInlineStart: componentTheme.spacingXSmall,
+            marginInlineEnd: componentTheme.spacingXSmall
+        },
+        small: {
+            marginInlineStart: componentTheme.spacingSmall,
+            marginInlineEnd: componentTheme.spacingSmall
+        },
+        medium: {
+            marginInlineStart: componentTheme.spacingMedium,
+            marginInlineEnd: componentTheme.spacingMedium
+        },
+        large: {
+            marginInlineStart: componentTheme.spacingLarge,
+            marginInlineEnd: componentTheme.spacingLarge
+        },
+        'x-large': {
+            marginInlineStart: componentTheme.spacingXLarge,
+            marginInlineEnd: componentTheme.spacingXLarge
+        },
+        'xx-large': {
+            marginInlineStart: componentTheme.spacingXXLarge,
+            marginInlineEnd: componentTheme.spacingXXLarge
+        },
+        none: {}
+    };
+    const delimiterVariants = {
+        none: {
+            marginInlineStart: componentTheme.noneSpacing,
+            marginInlineEnd: componentTheme.noneSpacing
+        },
+        pipe: {
+            marginInlineStart: componentTheme.pipeSpacing,
+            marginInlineEnd: componentTheme.pipeSpacing,
+            '&::after': {
+                content: '"\\007C"'
+            }
+        },
+        slash: {
+            marginInlineStart: componentTheme.slashSpacing,
+            marginInlineEnd: componentTheme.slashSpacing,
+            '&::after': {
+                content: '"\\002F"'
+            }
+        },
+        arrow: {
+            marginInlineStart: componentTheme.arrowSpacing,
+            marginInlineEnd: componentTheme.arrowSpacing,
+            '&::after': {
+                content: '"\\003E"'
+            }
+        }
+    };
+    return {
+        inlineListItem: {
+            label: 'inlineListItem',
+            fontWeight: componentTheme.fontWeight,
+            fontFamily: componentTheme.fontFamily,
+            verticalAlign: 'middle',
+            boxSizing: 'border-box',
+            lineHeight: componentTheme.lineHeight,
+            color: componentTheme.color,
+            ...withSpacing && !withDelimiter && spacingVariants[spacing],
+            ...sizeVariants[size],
+            '&:first-of-type': {
+                marginInlineStart: 0
+            },
+            '&:last-of-type': {
+                marginInlineEnd: 0
+            }
+        },
+        delimiter: {
+            label: 'inlineListItem__delimiter',
+            ...delimiterVariants[delimiter],
+            '[class$=-inlineListItem]:last-of-type > &:last-child::after': {
+                content: 'none'
+            },
+            color: componentTheme.delimiterColor
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;

package/es/InlineList/v1/InlineListItem/theme.js

@@ -1,70 +1,36 @@
-/*
- * 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 {
-    colors,
-    spacing,
-    typography,
-    key: themeName
-  } = theme;
-  const themeSpecificStyle = {
-    canvas: {
-      color: theme['ic-brand-font-color-dark']
-    }
-  };
-  const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    fontSizeSmall: typography?.fontSizeSmall,
-    fontSizeMedium: typography?.fontSizeMedium,
-    fontSizeLarge: typography?.fontSizeLarge,
-    color: colors?.contrasts?.grey4570,
-    delimiterColor: colors?.contrasts?.grey125125,
-    lineHeight: typography?.lineHeightCondensed,
-    noneSpacing: spacing?.xSmall,
-    pipeSpacing: spacing?.xSmall,
-    slashSpacing: spacing?.xSmall,
-    arrowSpacing: spacing?.xSmall,
-    marginBottomDefault: spacing?.xxxSmall,
-    spacingXXXSmall: spacing?.xxxSmall,
-    spacingXXSmall: spacing?.xxSmall,
-    spacingXSmall: spacing?.xSmall,
-    spacingSmall: spacing?.small,
-    spacingMedium: spacing?.medium,
-    spacingLarge: spacing?.large,
-    spacingXLarge: spacing?.xLarge,
-    spacingXXLarge: spacing?.xxLarge
-  };
-  return {
-    ...componentVariables,
-    ...themeSpecificStyle[themeName]
-  };
+const generateComponentTheme = (theme)=>{
+    const { colors, spacing, typography, key: themeName } = theme;
+    const themeSpecificStyle = {
+        canvas: {
+            color: theme['ic-brand-font-color-dark']
+        }
+    };
+    const componentVariables = {
+        fontFamily: typography?.fontFamily,
+        fontWeight: typography?.fontWeightNormal,
+        fontSizeSmall: typography?.fontSizeSmall,
+        fontSizeMedium: typography?.fontSizeMedium,
+        fontSizeLarge: typography?.fontSizeLarge,
+        color: colors?.contrasts?.grey4570,
+        delimiterColor: colors?.contrasts?.grey125125,
+        lineHeight: typography?.lineHeightCondensed,
+        noneSpacing: spacing?.xSmall,
+        pipeSpacing: spacing?.xSmall,
+        slashSpacing: spacing?.xSmall,
+        arrowSpacing: spacing?.xSmall,
+        marginBottomDefault: spacing?.xxxSmall,
+        spacingXXXSmall: spacing?.xxxSmall,
+        spacingXXSmall: spacing?.xxSmall,
+        spacingXSmall: spacing?.xSmall,
+        spacingSmall: spacing?.small,
+        spacingMedium: spacing?.medium,
+        spacingLarge: spacing?.large,
+        spacingXLarge: spacing?.xLarge,
+        spacingXXLarge: spacing?.xxLarge
+    };
+    return {
+        ...componentVariables,
+        ...themeSpecificStyle[themeName]
+    };
 };
-export default generateComponentTheme;
+export default generateComponentTheme;