@instructure/ui-source-code-editor 8.53.3-snapshot-16 → 8.53.3-snapshot-20

package/CHANGELOG.md

@@ -3,9 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-16](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-16) (2024-03-01)
+## [8.53.3-snapshot-20](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-20) (2024-03-20)
 
-**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+### Bug Fixes
+
+* **ui-source-code-editor:** make search panel work with older react versions ([76cdaac](https://github.com/instructure/instructure-ui/commit/76cdaac296d8bdcbcf337ef1d95eb8d2e538b993))
+* **ui-source-code-editor:** remove warning and fix focus for search panel ([def33a3](https://github.com/instructure/instructure-ui/commit/def33a34e28373b2d6b2455afbae638a3c98685a))
 
 
 

package/es/SourceCodeEditor/SearchPanel.js

@@ -29,12 +29,7 @@ import { setSearchQuery, search, findNext, findPrevious, SearchQuery, closeSearc
 import { TextInput } from '@instructure/ui-text-input';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine, IconSearchLine } from '@instructure/ui-icons';
-let reactdom;
-try {
-  reactdom = require('react-dom/client');
-} catch {
-  reactdom = require('react-dom');
-}
+import ReactDOM from 'react-dom';
 function SearchPanel({
   view,
   searchConfig
@@ -71,7 +66,10 @@ function SearchPanel({
     findPrevious(view);
   };
   return /*#__PURE__*/React.createElement(TextInput, {
-    inputRef: r => r === null || r === void 0 ? void 0 : r.focus(),
+    renderLabel: "",
+    inputRef: r => {
+      setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
+    },
     size: "small",
     display: "inline-block",
     width: "20rem",
@@ -100,16 +98,21 @@ function SearchPanel({
 export default function customSearch(searchConfig) {
   return searchConfig ? search({
     createPanel: view => {
+      var _SearchPanel;
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      if ('createRoot' in reactdom) {
-        const root = reactdom.createRoot(dom);
-        root.render( /*#__PURE__*/React.createElement(SearchPanel, {
-          view: view,
-          searchConfig: searchConfig
-        }));
+      const reactVersionMajor = Number(React.version.split('.')[0]);
+      if (reactVersionMajor >= 18) {
+        // webpack tries to evaluate imports compile time which would lead to an error on older react versions
+        import( /* webpackIgnore: true */'react-dom/client').then(r => {
+          const root = r.createRoot(dom);
+          root.render(_SearchPanel || (_SearchPanel = /*#__PURE__*/React.createElement(SearchPanel, {
+            view: view,
+            searchConfig: searchConfig
+          })));
+        }).catch(e => {});
       } else {
-        reactdom.render( /*#__PURE__*/React.createElement(SearchPanel, {
+        ReactDOM.render( /*#__PURE__*/React.createElement(SearchPanel, {
           view: view,
           searchConfig: searchConfig
         }), dom);

package/lib/SourceCodeEditor/SearchPanel.js

@@ -1,19 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = customSearch;
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard3(require("react"));
 var _search = require("@codemirror/search");
 var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
 var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDownLine.js");
 var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
 var _IconSearchLine2 = require("@instructure/ui-icons/lib/IconSearchLine.js");
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
 /*
  * The MIT License (MIT)
@@ -38,12 +40,6 @@ var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-let reactdom;
-try {
-  reactdom = require('react-dom/client');
-} catch {
-  reactdom = require('react-dom');
-}
 function SearchPanel({
   view,
   searchConfig
@@ -80,7 +76,10 @@ function SearchPanel({
     (0, _search.findPrevious)(view);
   };
   return /*#__PURE__*/_react.default.createElement(_TextInput.TextInput, {
-    inputRef: r => r === null || r === void 0 ? void 0 : r.focus(),
+    renderLabel: "",
+    inputRef: r => {
+      setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
+    },
     size: "small",
     display: "inline-block",
     width: "20rem",
@@ -109,16 +108,21 @@ function SearchPanel({
 function customSearch(searchConfig) {
   return searchConfig ? (0, _search.search)({
     createPanel: view => {
+      var _SearchPanel;
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      if ('createRoot' in reactdom) {
-        const root = reactdom.createRoot(dom);
-        root.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
-          view: view,
-          searchConfig: searchConfig
-        }));
+      const reactVersionMajor = Number(_react.default.version.split('.')[0]);
+      if (reactVersionMajor >= 18) {
+        // webpack tries to evaluate imports compile time which would lead to an error on older react versions
+        Promise.resolve().then(() => (0, _interopRequireWildcard2.default)(require( /* webpackIgnore: true */'react-dom/client'))).then(r => {
+          const root = r.createRoot(dom);
+          root.render(_SearchPanel || (_SearchPanel = /*#__PURE__*/_react.default.createElement(SearchPanel, {
+            view: view,
+            searchConfig: searchConfig
+          })));
+        }).catch(e => {});
       } else {
-        reactdom.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
           view: view,
           searchConfig: searchConfig
         }), dom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "8.53.3-snapshot-16",
+  "version": "8.53.3-snapshot-20",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-16",
-    "@instructure/ui-test-queries": "8.53.3-snapshot-16",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-16",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-20",
+    "@instructure/ui-test-queries": "8.53.3-snapshot-20",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-20",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2"
   },
@@ -44,20 +44,20 @@
     "@codemirror/search": "^6.5.4",
     "@codemirror/state": "^6.3.0",
     "@codemirror/view": "^6.21.3",
-    "@instructure/emotion": "8.53.3-snapshot-16",
-    "@instructure/shared-types": "8.53.3-snapshot-16",
-    "@instructure/ui-a11y-content": "8.53.3-snapshot-16",
-    "@instructure/ui-buttons": "8.53.3-snapshot-16",
-    "@instructure/ui-dom-utils": "8.53.3-snapshot-16",
-    "@instructure/ui-i18n": "8.53.3-snapshot-16",
-    "@instructure/ui-icons": "8.53.3-snapshot-16",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-16",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-16",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-16",
-    "@instructure/ui-testable": "8.53.3-snapshot-16",
-    "@instructure/ui-text-input": "8.53.3-snapshot-16",
-    "@instructure/ui-themes": "8.53.3-snapshot-16",
-    "@instructure/ui-utils": "8.53.3-snapshot-16",
+    "@instructure/emotion": "8.53.3-snapshot-20",
+    "@instructure/shared-types": "8.53.3-snapshot-20",
+    "@instructure/ui-a11y-content": "8.53.3-snapshot-20",
+    "@instructure/ui-buttons": "8.53.3-snapshot-20",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-20",
+    "@instructure/ui-i18n": "8.53.3-snapshot-20",
+    "@instructure/ui-icons": "8.53.3-snapshot-20",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-20",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-20",
+    "@instructure/ui-test-locator": "8.53.3-snapshot-20",
+    "@instructure/ui-testable": "8.53.3-snapshot-20",
+    "@instructure/ui-text-input": "8.53.3-snapshot-20",
+    "@instructure/ui-themes": "8.53.3-snapshot-20",
+    "@instructure/ui-utils": "8.53.3-snapshot-20",
     "@lezer/highlight": "1.1.6",
     "prop-types": "^15.8.1"
   },

package/src/SourceCodeEditor/README.md

@@ -790,10 +790,12 @@ render(<AttachmentExample />)
 
 To enable the search panel use the `searchConfig` prop.
 
-You can open the search panel in the code editor by pressing `cmd/ctrl+f` when it is in focus (otherwise the browser's search will open). The reason you would use this instead of the browser native search is because it will miss results that are far out of view in the text rendered by the editor. This is the limitation of the underlying CodeMirror component.
+You can open the search panel in the code editor by pressing `cmd/ctrl+f` when the editor is in focus (otherwise the browser's search will open). The reason you would use this instead of the browser native search is because it will miss results that are far out of view in the text rendered by the editor. This is the limitation of the underlying CodeMirror component.
 
 Hitting `Enter` jumps to the next result and `Shift+Enter` to the previous. Alternatively you can use the up and down buttons to the right of the input field.
 
+Placement: the search panel will open at the bottom of the editor. This cannot be changed unfortunately due to a limitation in CodeMirror.
+
 ```js
 ---
 type: example

package/src/SourceCodeEditor/SearchPanel.tsx

@@ -40,12 +40,7 @@ import {
   IconSearchLine
 } from '@instructure/ui-icons'
 
-let reactdom: any
-try {
-  reactdom = require('react-dom/client')
-} catch {
-  reactdom = require('react-dom')
-}
+import ReactDOM from 'react-dom'
 
 export type SearchConfig = {
   placeholder: string
@@ -103,7 +98,10 @@ function SearchPanel({
 
   return (
     <TextInput
-      inputRef={(r) => r?.focus()}
+      renderLabel=""
+      inputRef={(r) => {
+        setTimeout(() => r?.focus(), 0)
+      }}
       size="small"
       display="inline-block"
       width="20rem"
@@ -144,11 +142,21 @@ export default function customSearch(searchConfig: SearchConfig | undefined) {
         createPanel: (view) => {
           const dom = document.createElement('div')
           dom.style.padding = '8px'
-          if ('createRoot' in reactdom) {
-            const root = reactdom.createRoot(dom)
-            root.render(<SearchPanel view={view} searchConfig={searchConfig} />)
+          const reactVersionMajor = Number(React.version.split('.')[0])
+          if (reactVersionMajor >= 18) {
+            // webpack tries to evaluate imports compile time which would lead to an error on older react versions
+            import(/* webpackIgnore: true */ 'react-dom/client')
+              .then((r) => {
+                const root = r.createRoot(dom)
+                root.render(
+                  <SearchPanel view={view} searchConfig={searchConfig} />
+                )
+              })
+              .catch((e) => {
+                console.error(e)
+              })
           } else {
-            reactdom.render(
+            ReactDOM.render(
               <SearchPanel view={view} searchConfig={searchConfig} />,
               dom
             )