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

package/es/SourceCodeEditor/v2/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)
  *
@@ -58,7 +56,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec3 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = _dec3(_class = (_SourceCodeEditor = class SourceCodeEditor extends Component {
+let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _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));
@@ -70,21 +112,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
         });
       });
     }
@@ -105,8 +144,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]);
           }
         });
       }
@@ -148,10 +186,10 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       changes,
       ...(selection ? {
         selection
-      } : void 0),
+      } : undefined),
       ...(userEvent ? {
         userEvent
-      } : void 0)
+      } : undefined)
     });
   }
 
@@ -163,8 +201,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
@@ -173,44 +210,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
@@ -236,13 +245,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();
@@ -330,7 +337,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,
@@ -341,12 +350,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) {
@@ -357,7 +368,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();
@@ -393,9 +406,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);
@@ -428,9 +442,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) {
@@ -464,7 +479,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;
@@ -494,50 +511,43 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
           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 = _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/v2/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, sharedTokens) => {
-  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, 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 && {
@@ -111,7 +113,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/lib/SourceCodeEditor/v1/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 _v11_ = require("@instructure/ui-text-input/v11_6");
 var _v11_2 = require("@instructure/ui-buttons/v11_6");
 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)(_v11_.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)(_v11_2.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)(_v11_2.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, {})
       })]
     })
   });