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

package/lib/SourceCodeEditor/v1/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");
@@ -35,8 +34,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 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)
  *
@@ -66,7 +64,51 @@ var _dec, _dec2, _dec3, _class, _SourceCodeEditor;
 category: components
 ---
 **/
-let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.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.withStyleLegacy)(_styles.default, _theme.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));
@@ -78,21 +120,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
         });
       });
     }
@@ -113,8 +152,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]);
           }
         });
       }
@@ -156,10 +194,10 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
       changes,
       ...(selection ? {
         selection
-      } : void 0),
+      } : undefined),
       ...(userEvent ? {
         userEvent
-      } : void 0)
+      } : undefined)
     });
   }
 
@@ -171,8 +209,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
@@ -181,44 +218,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
@@ -244,13 +253,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();
@@ -338,7 +345,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,
@@ -349,12 +358,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) {
@@ -365,7 +376,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)();
@@ -401,9 +414,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);
@@ -436,9 +450,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) {
@@ -472,7 +487,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;
@@ -494,49 +511,42 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
         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 = (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/v1/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) => {
-  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) => {
       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) => {
         // 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/lib/SourceCodeEditor/v1/theme.js

@@ -34,23 +34,24 @@ exports.default = void 0;
  * @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/lib/SourceCodeEditor/v2/SearchPanel.js

@@ -1,21 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = customSearch;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _search = require("@codemirror/search");
 var _latest = require("@instructure/ui-text-input/latest");
 var _latest2 = require("@instructure/ui-buttons/latest");
 var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
-var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
-var _IconSearchLine2 = require("@instructure/ui-icons/lib/generated/IconSearchLine.js");
+var _IconArrowOpenUpLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
+var _IconSearchLine = require("@instructure/ui-icons/lib/generated/IconSearchLine.js");
 var _client = require("react-dom/client");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
 /*
  * The MIT License (MIT)
  *
@@ -39,14 +36,12 @@ var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 function SearchPanel({
   view,
   searchConfig
 }) {
-  const _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    searchQueryStr = _useState2[0],
-    setSearchQueryStr = _useState2[1];
+  const [searchQueryStr, setSearchQueryStr] = (0, _react.useState)('');
   const handleChange = (_e, value) => {
     setSearchQueryStr(value);
     handleHighlightSearch(value);
@@ -77,7 +72,7 @@ function SearchPanel({
   return (0, _jsxRuntime.jsx)(_latest.TextInput, {
     renderLabel: "",
     inputRef: r => {
-      setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
+      setTimeout(() => r?.focus(), 0);
     },
     size: "small",
     display: "inline-block",
@@ -86,9 +81,9 @@ function SearchPanel({
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
-    renderBeforeInput: _IconSearchLine || (_IconSearchLine = (0, _jsxRuntime.jsx)(_IconSearchLine2.IconSearchLine, {
+    renderBeforeInput: (0, _jsxRuntime.jsx)(_IconSearchLine.IconSearchLine, {
       size: "x-small"
-    })),
+    }),
     renderAfterInput: (0, _jsxRuntime.jsxs)("span", {
       children: [(0, _jsxRuntime.jsx)(_latest2.IconButton, {
         size: "small",
@@ -96,14 +91,14 @@ function SearchPanel({
         withBackground: false,
         onClick: handleFindNext,
         screenReaderLabel: searchConfig.nextResultLabel,
-        children: _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {}))
+        children: (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {})
       }), (0, _jsxRuntime.jsx)(_latest2.IconButton, {
         size: "small",
         withBorder: false,
         withBackground: false,
         onClick: handleFindPrev,
         screenReaderLabel: searchConfig.prevResultLabel,
-        children: _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {}))
+        children: (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine.IconArrowOpenUpLine, {})
       })]
     })
   });