@instructure/ui-source-code-editor 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/SourceCodeEditor/v1/SearchPanel.js

@@ -1,5 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
 /*
  * The MIT License (MIT)
  *
@@ -35,10 +33,7 @@ function SearchPanel({
   view,
   searchConfig
 }) {
-  const _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchQueryStr = _useState2[0],
-    setSearchQueryStr = _useState2[1];
+  const [searchQueryStr, setSearchQueryStr] = useState('');
   const handleChange = (_e, value) => {
     setSearchQueryStr(value);
     handleHighlightSearch(value);
@@ -69,7 +64,7 @@ function SearchPanel({
   return _jsx(TextInput, {
     renderLabel: "",
     inputRef: r => {
-      setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
+      setTimeout(() => r?.focus(), 0);
     },
     size: "small",
     display: "inline-block",
@@ -78,9 +73,9 @@ function SearchPanel({
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
-    renderBeforeInput: _IconSearchLine || (_IconSearchLine = _jsx(IconSearchLine, {
+    renderBeforeInput: _jsx(IconSearchLine, {
       size: "x-small"
-    })),
+    }),
     renderAfterInput: _jsxs("span", {
       children: [_jsx(IconButton, {
         size: "small",
@@ -88,14 +83,14 @@ function SearchPanel({
         withBackground: false,
         onClick: handleFindNext,
         screenReaderLabel: searchConfig.nextResultLabel,
-        children: _IconArrowOpenDownLin || (_IconArrowOpenDownLin = _jsx(IconArrowOpenDownLine, {}))
+        children: _jsx(IconArrowOpenDownLine, {})
       }), _jsx(IconButton, {
         size: "small",
         withBorder: false,
         withBackground: false,
         onClick: handleFindPrev,
         screenReaderLabel: searchConfig.prevResultLabel,
-        children: _IconArrowOpenUpLine || (_IconArrowOpenUpLine = _jsx(IconArrowOpenUpLine, {}))
+        children: _jsx(IconArrowOpenUpLine, {})
       })]
     })
   });

package/es/SourceCodeEditor/v1/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "styles"];
-var _dec, _dec2, _dec3, _class, _SourceCodeEditor;
+var _dec, _dec2, _dec3, _class;
 /*
  * The MIT License (MIT)
  *
@@ -59,7 +57,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = _dec3(_class = (_SourceCodeEditor = class SourceCodeEditor extends Component {
+let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = _dec3(_class = class SourceCodeEditor extends Component {
+  static displayName = "SourceCodeEditor";
+  static componentId = 'SourceCodeEditor';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    language: 'jsx',
+    readOnly: false,
+    editable: true,
+    lineNumbers: false,
+    foldGutter: false,
+    highlightActiveLine: false,
+    highlightActiveLineGutter: false,
+    lineWrapping: false,
+    autofocus: false,
+    spellcheck: false,
+    rtlMoveVisually: true,
+    indentOnLoad: false,
+    indentWithTab: false,
+    defaultValue: '',
+    height: 'auto'
+  };
+  _id;
+  ref = null;
+  _containerRef;
+  _editorView;
+  _raf = [];
+  _newSelectionAfterValueChange;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+  handleContainerRef = el => {
+    const {
+      containerRef
+    } = this.props;
+    this._containerRef = el || undefined;
+    if (typeof containerRef === 'function') {
+      containerRef(el);
+    }
+  };
   addAnimationFrame(callback) {
     if (typeof callback === 'function') {
       this._raf.push(requestAnimationFrame(callback));
@@ -71,21 +113,18 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
   }
   focus() {
     this.addAnimationFrame(() => {
-      var _this$_editorView;
-      (_this$_editorView = this._editorView) === null || _this$_editorView === void 0 ? void 0 : _this$_editorView.focus();
+      this._editorView?.focus();
     });
   }
   get hasFocus() {
-    var _this$_editorView2;
-    return (_this$_editorView2 = this._editorView) === null || _this$_editorView2 === void 0 ? void 0 : _this$_editorView2.hasFocus;
+    return this._editorView?.hasFocus;
   }
   selectAll() {
     if (this._editorView) {
       this.addAnimationFrame(() => {
-        var _this$currentDocValue;
         this.dispatchViewSelection({
           anchor: 0,
-          head: (_this$currentDocValue = this.currentDocValue) === null || _this$currentDocValue === void 0 ? void 0 : _this$currentDocValue.length
+          head: this.currentDocValue?.length
         });
       });
     }
@@ -106,8 +145,7 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
         indentSelection({
           state: this._editorView.state,
           dispatch: transaction => {
-            var _this$_editorView3;
-            (_this$_editorView3 = this._editorView) === null || _this$_editorView3 === void 0 ? void 0 : _this$_editorView3.update([transaction]);
+            this._editorView?.update([transaction]);
           }
         });
       }
@@ -149,10 +187,10 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       changes,
       ...(selection ? {
         selection
-      } : void 0),
+      } : undefined),
       ...(userEvent ? {
         userEvent
-      } : void 0)
+      } : undefined)
     });
   }
 
@@ -164,8 +202,7 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     });
   }
   get currentDocValue() {
-    var _this$_editorView4;
-    return (_this$_editorView4 = this._editorView) === null || _this$_editorView4 === void 0 ? void 0 : _this$_editorView4.state.doc;
+    return this._editorView?.state.doc;
   }
 
   // when value is passed, the editor should be controlled
@@ -174,44 +211,16 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
   }
   constructor(props) {
     super(props);
-    this._id = void 0;
-    this.ref = null;
-    this._containerRef = void 0;
-    this._editorView = void 0;
-    this._raf = [];
-    this._newSelectionAfterValueChange = void 0;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.handleContainerRef = el => {
-      const containerRef = this.props.containerRef;
-      this._containerRef = el || void 0;
-      if (typeof containerRef === 'function') {
-        containerRef(el);
-      }
-    };
-    this.assignAriaLabel = () => {
-      if (this._containerRef) {
-        const editorDiv = this._containerRef.querySelector('[role="textbox"]');
-        if (editorDiv) {
-          editorDiv.setAttribute('aria-labelledby', `${this._id}`);
-        }
-      }
-    };
     this._id = props.deterministicId();
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    const _this$props = this.props,
-      value = _this$props.value,
-      defaultValue = _this$props.defaultValue,
-      autofocus = _this$props.autofocus,
-      indentOnLoad = _this$props.indentOnLoad;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    const {
+      value,
+      defaultValue,
+      autofocus,
+      indentOnLoad
+    } = this.props;
+    this.props.makeStyles?.();
     const state = EditorState.create({
       doc: value || defaultValue,
       extensions: this.extensions
@@ -237,13 +246,11 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     this.assignAriaLabel();
   }
   componentWillUnmount() {
-    var _this$_editorView5;
-    (_this$_editorView5 = this._editorView) === null || _this$_editorView5 === void 0 ? void 0 : _this$_editorView5.destroy();
+    this._editorView?.destroy();
     this.cancelAnimationFrames();
   }
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.props.makeStyles?.();
     if (this._editorView) {
       if (this.props.value !== prevProps.value) {
         this.refreshEditorValue();
@@ -331,7 +338,9 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     return keymaps;
   }
   get commandKeybinding() {
-    const rtlMoveVisually = this.props.rtlMoveVisually;
+    const {
+      rtlMoveVisually
+    } = this.props;
     if (this.direction === 'rtl' && !rtlMoveVisually) {
       const overrideableKeys = rtlHorizontalArrowKeymap.map(binding => binding.key ? binding.key : binding.mac ? binding.mac : binding);
       // we have to remove the binding we want to override from the original,
@@ -342,12 +351,14 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     return defaultKeymap;
   }
   get themeExtension() {
-    const styles = this.props.styles;
-    if (!(styles !== null && styles !== void 0 && styles.theme) || !styles.highlightStyle) {
-      return void 0;
+    const {
+      styles
+    } = this.props;
+    if (!styles?.theme || !styles.highlightStyle) {
+      return undefined;
     }
-    const theme = EditorView.theme(styles === null || styles === void 0 ? void 0 : styles.theme);
-    const highlightStyle = syntaxHighlighting(HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle));
+    const theme = EditorView.theme(styles?.theme);
+    const highlightStyle = syntaxHighlighting(HighlightStyle.define(styles?.highlightStyle));
 
     // see notes in props.ts
     // if (darkTheme) {
@@ -358,7 +369,9 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     return [theme, highlightStyle];
   }
   get languageExtension() {
-    const language = this.props.language;
+    const {
+      language
+    } = this.props;
     switch (language) {
       case 'json':
         return json();
@@ -394,9 +407,10 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     }
   }
   callOnChangeHandler(newValue) {
-    const _this$props4 = this.props,
-      onChange = _this$props4.onChange,
-      value = _this$props4.value;
+    const {
+      onChange,
+      value
+    } = this.props;
     this.addAnimationFrame(() => {
       if (typeof onChange === 'function' && newValue !== value) {
         onChange(newValue);
@@ -429,9 +443,10 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     });
   }
   get focusListenerExtension() {
-    const _this$props5 = this.props,
-      onFocus = _this$props5.onFocus,
-      onBlur = _this$props5.onBlur;
+    const {
+      onFocus,
+      onBlur
+    } = this.props;
     return EditorView.updateListener.of(update => {
       if (update.focusChanged && this._editorView) {
         if (this.hasFocus) {
@@ -465,7 +480,9 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
   }
   refreshEditorValue() {
     if (!this._editorView) return;
-    const value = this.props.value;
+    const {
+      value
+    } = this.props;
     const currentValue = this._editorView.state.doc.toString();
     if (typeof value !== 'undefined' && currentValue !== value) {
       let userEvent;
@@ -487,50 +504,43 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
         selection: this._newSelectionAfterValueChange,
         userEvent: userEvent
       });
-      this._newSelectionAfterValueChange = void 0;
+      this._newSelectionAfterValueChange = undefined;
     }
     if (this.props.indentOnLoad) {
       this.indentAll();
     }
   }
+  assignAriaLabel = () => {
+    if (this._containerRef) {
+      const editorDiv = this._containerRef.querySelector('[role="textbox"]');
+      if (editorDiv) {
+        editorDiv.setAttribute('aria-labelledby', `${this._id}`);
+      }
+    }
+  };
   render() {
-    const _this$props6 = this.props,
-      label = _this$props6.label,
-      styles = _this$props6.styles,
-      restProps = _objectWithoutProperties(_this$props6, _excluded);
+    const {
+      label,
+      styles,
+      ...restProps
+    } = this.props;
     return _jsx("div", {
       "data-cid": "SourceCodeEditor",
       ref: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.codeEditor,
+      css: styles?.codeEditor,
       ...passthroughProps(omitProps(restProps, SourceCodeEditor.allowedProps)),
       children: _jsxs("label", {
-        css: styles === null || styles === void 0 ? void 0 : styles.label,
+        css: styles?.label,
         id: this._id,
         children: [_jsx(ScreenReaderContent, {
           children: label
         }), _jsx("div", {
           ref: this.handleContainerRef,
-          css: styles === null || styles === void 0 ? void 0 : styles.codeEditorContainer
+          css: styles?.codeEditorContainer
         })]
       })
     });
   }
-}, _SourceCodeEditor.displayName = "SourceCodeEditor", _SourceCodeEditor.componentId = 'SourceCodeEditor', _SourceCodeEditor.allowedProps = allowedProps, _SourceCodeEditor.defaultProps = {
-  language: 'jsx',
-  readOnly: false,
-  editable: true,
-  lineNumbers: false,
-  foldGutter: false,
-  highlightActiveLine: false,
-  highlightActiveLineGutter: false,
-  lineWrapping: false,
-  autofocus: false,
-  spellcheck: false,
-  rtlMoveVisually: true,
-  indentOnLoad: false,
-  indentWithTab: false,
-  defaultValue: '',
-  height: 'auto'
-}, _SourceCodeEditor)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default SourceCodeEditor;
 export { SourceCodeEditor };

package/es/SourceCodeEditor/v1/styles.js

@@ -33,9 +33,11 @@ import { tags } from '@lezer/highlight';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const attachment = props.attachment,
-    height = props.height,
-    width = props.width;
+  const {
+    attachment,
+    height,
+    width
+  } = props;
   const attachmentBorderRadius = {
     top: {
       borderBottomLeftRadius: 0,
@@ -75,9 +77,9 @@ const generateStyle = (componentTheme, props) => {
       label: 'codeEditorContainer',
       height: '100%',
       width: '100%',
-      borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderColor,
+      borderColor: componentTheme?.borderColor,
       borderStyle: 'solid',
-      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth,
+      borderWidth: componentTheme?.borderWidth,
       borderRadius: componentTheme.borderRadius,
       marginBottom: '1rem',
       ...(attachment && {
@@ -111,7 +113,7 @@ const generateStyle = (componentTheme, props) => {
         // are, for some reason, drawn behind the element content, which
         // will cause things like the active line background to cover
         // the outline (#297).
-        outline: `${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth} solid ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.focusBorderColor}`
+        outline: `${componentTheme?.borderWidth} solid ${componentTheme?.focusBorderColor}`
       },
       '.cm-content': {
         padding: `${componentTheme.verticalPadding} 0`

package/es/SourceCodeEditor/v1/theme.js

@@ -28,23 +28,24 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
-  const colors = theme.colors,
-    borders = theme.borders,
-    typography = theme.typography,
-    spacing = theme.spacing;
+  const {
+    colors,
+    borders,
+    typography,
+    spacing
+  } = theme;
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyMonospace,
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
-    gutterBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1111,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey3045,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
-    horizontalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    verticalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
+    fontFamily: typography?.fontFamilyMonospace,
+    fontSize: typography?.fontSizeSmall,
+    background: colors?.contrasts?.white1010,
+    color: colors?.contrasts?.grey125125,
+    gutterBackground: colors?.contrasts?.grey1111,
+    borderWidth: borders?.widthSmall,
+    borderColor: colors?.contrasts?.grey3045,
+    borderRadius: borders?.radiusMedium,
+    focusBorderColor: colors?.contrasts?.blue4570,
+    horizontalPadding: spacing?.xSmall,
+    verticalPadding: spacing?.xxSmall
   };
   return {
     ...componentVariables

package/es/SourceCodeEditor/v2/SearchPanel.js

@@ -1,5 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
 /*
  * The MIT License (MIT)
  *
@@ -35,10 +33,7 @@ function SearchPanel({
   view,
   searchConfig
 }) {
-  const _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchQueryStr = _useState2[0],
-    setSearchQueryStr = _useState2[1];
+  const [searchQueryStr, setSearchQueryStr] = useState('');
   const handleChange = (_e, value) => {
     setSearchQueryStr(value);
     handleHighlightSearch(value);
@@ -69,7 +64,7 @@ function SearchPanel({
   return _jsx(TextInput, {
     renderLabel: "",
     inputRef: r => {
-      setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
+      setTimeout(() => r?.focus(), 0);
     },
     size: "small",
     display: "inline-block",
@@ -78,9 +73,9 @@ function SearchPanel({
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
-    renderBeforeInput: _IconSearchLine || (_IconSearchLine = _jsx(IconSearchLine, {
+    renderBeforeInput: _jsx(IconSearchLine, {
       size: "x-small"
-    })),
+    }),
     renderAfterInput: _jsxs("span", {
       children: [_jsx(IconButton, {
         size: "small",
@@ -88,14 +83,14 @@ function SearchPanel({
         withBackground: false,
         onClick: handleFindNext,
         screenReaderLabel: searchConfig.nextResultLabel,
-        children: _IconArrowOpenDownLin || (_IconArrowOpenDownLin = _jsx(IconArrowOpenDownLine, {}))
+        children: _jsx(IconArrowOpenDownLine, {})
       }), _jsx(IconButton, {
         size: "small",
         withBorder: false,
         withBackground: false,
         onClick: handleFindPrev,
         screenReaderLabel: searchConfig.prevResultLabel,
-        children: _IconArrowOpenUpLine || (_IconArrowOpenUpLine = _jsx(IconArrowOpenUpLine, {}))
+        children: _jsx(IconArrowOpenUpLine, {})
       })]
     })
   });