@instructure/ui-source-code-editor 8.53.1 → 8.53.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.53.2](https://github.com/instructure/instructure-ui/compare/v8.53.1...v8.53.2) (2024-02-15)
+
+
+### Bug Fixes
+
+* **ui-source-code-editor:** make search panel react version agnostic ([f917e20](https://github.com/instructure/instructure-ui/commit/f917e20c588d93a30e0681a5c0b1a42e262f7d3e))
+
+
+
+
+
 ## [8.53.1](https://github.com/instructure/instructure-ui/compare/v8.53.0...v8.53.1) (2024-02-09)
 
 

package/es/SourceCodeEditor/SearchPanel.js

@@ -25,11 +25,16 @@ var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
  */
 
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { setSearchQuery, search, findNext, findPrevious, SearchQuery, closeSearchPanel } from '@codemirror/search';
 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');
+}
 function SearchPanel({
   view,
   searchConfig
@@ -97,11 +102,18 @@ export default function customSearch(searchConfig) {
     createPanel: view => {
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      const root = createRoot(dom);
-      root.render( /*#__PURE__*/React.createElement(SearchPanel, {
-        view: view,
-        searchConfig: searchConfig
-      }));
+      if ('createRoot' in reactdom) {
+        const root = reactdom.createRoot(dom);
+        root.render( /*#__PURE__*/React.createElement(SearchPanel, {
+          view: view,
+          searchConfig: searchConfig
+        }));
+      } else {
+        reactdom.render( /*#__PURE__*/React.createElement(SearchPanel, {
+          view: view,
+          searchConfig: searchConfig
+        }), dom);
+      }
       return {
         dom
       };

package/lib/SourceCodeEditor/SearchPanel.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = customSearch;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _client = require("react-dom/client");
 var _search = require("@codemirror/search");
 var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
@@ -39,6 +38,12 @@ 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
@@ -106,11 +111,18 @@ function customSearch(searchConfig) {
     createPanel: view => {
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      const root = (0, _client.createRoot)(dom);
-      root.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
-        view: view,
-        searchConfig: searchConfig
-      }));
+      if ('createRoot' in reactdom) {
+        const root = reactdom.createRoot(dom);
+        root.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+          view: view,
+          searchConfig: searchConfig
+        }));
+      } else {
+        reactdom.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+          view: view,
+          searchConfig: searchConfig
+        }), dom);
+      }
       return {
         dom
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "8.53.1",
+  "version": "8.53.2",
   "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.1",
-    "@instructure/ui-test-queries": "8.53.1",
-    "@instructure/ui-test-utils": "8.53.1",
+    "@instructure/ui-babel-preset": "8.53.2",
+    "@instructure/ui-test-queries": "8.53.2",
+    "@instructure/ui-test-utils": "8.53.2",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0"
   },
@@ -44,26 +44,26 @@
     "@codemirror/search": "^6.5.4",
     "@codemirror/state": "^6.3.0",
     "@codemirror/view": "^6.21.3",
-    "@instructure/emotion": "8.53.1",
-    "@instructure/shared-types": "8.53.1",
-    "@instructure/ui-a11y-content": "8.53.1",
-    "@instructure/ui-buttons": "8.53.1",
-    "@instructure/ui-dom-utils": "8.53.1",
-    "@instructure/ui-i18n": "8.53.1",
-    "@instructure/ui-icons": "8.53.1",
-    "@instructure/ui-prop-types": "8.53.1",
-    "@instructure/ui-react-utils": "8.53.1",
-    "@instructure/ui-test-locator": "8.53.1",
-    "@instructure/ui-testable": "8.53.1",
-    "@instructure/ui-text-input": "8.53.1",
-    "@instructure/ui-themes": "8.53.1",
-    "@instructure/ui-utils": "8.53.1",
+    "@instructure/emotion": "8.53.2",
+    "@instructure/shared-types": "8.53.2",
+    "@instructure/ui-a11y-content": "8.53.2",
+    "@instructure/ui-buttons": "8.53.2",
+    "@instructure/ui-dom-utils": "8.53.2",
+    "@instructure/ui-i18n": "8.53.2",
+    "@instructure/ui-icons": "8.53.2",
+    "@instructure/ui-prop-types": "8.53.2",
+    "@instructure/ui-react-utils": "8.53.2",
+    "@instructure/ui-test-locator": "8.53.2",
+    "@instructure/ui-testable": "8.53.2",
+    "@instructure/ui-text-input": "8.53.2",
+    "@instructure/ui-themes": "8.53.2",
+    "@instructure/ui-utils": "8.53.2",
     "@lezer/highlight": "1.1.6",
-    "prop-types": "^15.8.1",
-    "react-dom": "^18.2.0"
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": ">=16.8 <=18"
+    "react": ">=16.8 <=18",
+    "react-dom": ">=16.8 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/SourceCodeEditor/SearchPanel.tsx

@@ -23,7 +23,6 @@
  */
 
 import React, { useState } from 'react'
-import { createRoot } from 'react-dom/client'
 import {
   setSearchQuery,
   search,
@@ -41,6 +40,13 @@ import {
   IconSearchLine
 } from '@instructure/ui-icons'
 
+let reactdom: any
+try {
+  reactdom = require('react-dom/client')
+} catch {
+  reactdom = require('react-dom')
+}
+
 export type SearchConfig = {
   placeholder: string
   nextResultLabel: string
@@ -138,8 +144,15 @@ export default function customSearch(searchConfig: SearchConfig | undefined) {
         createPanel: (view) => {
           const dom = document.createElement('div')
           dom.style.padding = '8px'
-          const root = createRoot(dom)
-          root.render(<SearchPanel view={view} searchConfig={searchConfig} />)
+          if ('createRoot' in reactdom) {
+            const root = reactdom.createRoot(dom)
+            root.render(<SearchPanel view={view} searchConfig={searchConfig} />)
+          } else {
+            reactdom.render(
+              <SearchPanel view={view} searchConfig={searchConfig} />,
+              dom
+            )
+          }
           return { dom }
         }
       })