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

package/lib/SourceCodeEditor/v2/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SourceCodeEditor = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
 var _state = require("@codemirror/state");
@@ -34,8 +33,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _customKeybinding = require("./customKeybinding");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-const _excluded = ["label", "styles"];
-var _dec, _dec2, _dec3, _class, _SourceCodeEditor;
+var _dec, _dec2, _dec3, _class;
 /*
  * The MIT License (MIT)
  *
@@ -65,7 +63,51 @@ var _dec, _dec2, _dec3, _class, _SourceCodeEditor;
 category: components
 ---
 **/
-let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = (_SourceCodeEditor = class SourceCodeEditor extends _react.Component {
+let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = class SourceCodeEditor extends _react.Component {
+  static displayName = "SourceCodeEditor";
+  static componentId = 'SourceCodeEditor';
+  static allowedProps = _props.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((0, _requestAnimationFrame.requestAnimationFrame)(callback));
@@ -77,21 +119,18 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
   }
   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
         });
       });
     }
@@ -112,8 +151,7 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
         (0, _commands.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]);
           }
         });
       }
@@ -155,10 +193,10 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
       changes,
       ...(selection ? {
         selection
-      } : void 0),
+      } : undefined),
       ...(userEvent ? {
         userEvent
-      } : void 0)
+      } : undefined)
     });
   }
 
@@ -170,8 +208,7 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     });
   }
   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
@@ -180,44 +217,16 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
   }
   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 = _state.EditorState.create({
       doc: value || defaultValue,
       extensions: this.extensions
@@ -243,13 +252,11 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     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();
@@ -337,7 +344,9 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     return keymaps;
   }
   get commandKeybinding() {
-    const rtlMoveVisually = this.props.rtlMoveVisually;
+    const {
+      rtlMoveVisually
+    } = this.props;
     if (this.direction === 'rtl' && !rtlMoveVisually) {
       const overrideableKeys = _customKeybinding.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,
@@ -348,12 +357,14 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     return _commands.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 = _view.EditorView.theme(styles === null || styles === void 0 ? void 0 : styles.theme);
-    const highlightStyle = (0, _language.syntaxHighlighting)(_language.HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle));
+    const theme = _view.EditorView.theme(styles?.theme);
+    const highlightStyle = (0, _language.syntaxHighlighting)(_language.HighlightStyle.define(styles?.highlightStyle));
 
     // see notes in props.ts
     // if (darkTheme) {
@@ -364,7 +375,9 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     return [theme, highlightStyle];
   }
   get languageExtension() {
-    const language = this.props.language;
+    const {
+      language
+    } = this.props;
     switch (language) {
       case 'json':
         return (0, _langJson.json)();
@@ -400,9 +413,10 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     }
   }
   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);
@@ -435,9 +449,10 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     });
   }
   get focusListenerExtension() {
-    const _this$props5 = this.props,
-      onFocus = _this$props5.onFocus,
-      onBlur = _this$props5.onBlur;
+    const {
+      onFocus,
+      onBlur
+    } = this.props;
     return _view.EditorView.updateListener.of(update => {
       if (update.focusChanged && this._editorView) {
         if (this.hasFocus) {
@@ -471,7 +486,9 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
   }
   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;
@@ -501,49 +518,42 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
           this._editorView.scrollDOM.scrollTop = scrollTop;
         }
       });
-      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 = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
+    const {
+      label,
+      styles,
+      ...restProps
+    } = this.props;
     return (0, _jsxRuntime.jsx)("div", {
       "data-cid": "SourceCodeEditor",
       ref: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.codeEditor,
+      css: styles?.codeEditor,
       ...(0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(restProps, SourceCodeEditor.allowedProps)),
       children: (0, _jsxRuntime.jsxs)("label", {
-        css: styles === null || styles === void 0 ? void 0 : styles.label,
+        css: styles?.label,
         id: this._id,
         children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
           children: label
         }), (0, _jsxRuntime.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 = _props.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);
 var _default = exports.default = SourceCodeEditor;

package/lib/SourceCodeEditor/v2/styles.js

@@ -39,9 +39,11 @@ var _highlight = require("@lezer/highlight");
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, sharedTokens) => {
-  const attachment = props.attachment,
-    height = props.height,
-    width = props.width;
+  const {
+    attachment,
+    height,
+    width
+  } = props;
   const attachmentBorderRadius = {
     top: {
       borderBottomLeftRadius: 0,
@@ -81,9 +83,9 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       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 && {
@@ -117,7 +119,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
         // 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 ${sharedTokens.focusOutline.infoColor}`
+        outline: `${componentTheme?.borderWidth} solid ${sharedTokens.focusOutline.infoColor}`
       },
       '.cm-content': {
         padding: `${componentTheme.verticalPadding} 0`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "11.7.3-snapshot-25",
+  "version": "11.7.3-snapshot-26",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,7 +14,7 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
+    "@babel/runtime": "^7.29.2",
     "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/commands": "^6.6.2",
     "@codemirror/lang-css": "^6.3.0",
@@ -29,24 +29,24 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
     "@lezer/highlight": "1.2.1",
-    "@instructure/emotion": "11.7.3-snapshot-25",
-    "@instructure/ui-buttons": "11.7.3-snapshot-25",
-    "@instructure/ui-a11y-content": "11.7.3-snapshot-25",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-25",
-    "@instructure/shared-types": "11.7.3-snapshot-25",
-    "@instructure/ui-i18n": "11.7.3-snapshot-25",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-25",
-    "@instructure/ui-icons": "11.7.3-snapshot-25",
-    "@instructure/ui-text-input": "11.7.3-snapshot-25",
-    "@instructure/ui-utils": "11.7.3-snapshot-25",
-    "@instructure/ui-themes": "11.7.3-snapshot-25"
+    "@instructure/emotion": "11.7.3-snapshot-26",
+    "@instructure/ui-a11y-content": "11.7.3-snapshot-26",
+    "@instructure/ui-buttons": "11.7.3-snapshot-26",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-26",
+    "@instructure/shared-types": "11.7.3-snapshot-26",
+    "@instructure/ui-i18n": "11.7.3-snapshot-26",
+    "@instructure/ui-icons": "11.7.3-snapshot-26",
+    "@instructure/ui-themes": "11.7.3-snapshot-26",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-text-input": "11.7.3-snapshot-26"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-25"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-26"
   },
   "peerDependencies": {
     "react": ">=18 <=19",