Upgrades to React 18 and fixes minor bugs

kirki-packages/control-color-palette/src/KirkiColorPaletteControl.js

@@ -1,5 +1,16 @@
 import KirkiColorPaletteForm from './KirkiColorPaletteForm';
 
+const wpReactRender = ( target, reactNode ) => {
+	if ( target ) {
+
+    if ( wp.element.createRoot ) {
+			wp.element.createRoot( target ).render( wp.element.reactNode );
+    } else {
+			wp.element.render( reactNode, target );
+    }
+	}
+};
+
 /**
  * KirkiColorPaletteControl.
  *
@@ -65,17 +76,18 @@ const KirkiColorPaletteControl = wp.customize.Control.extend({
 	renderContent: function renderContent() {
 		const control = this;
 
-		ReactDOM.render(
+		const reactElement = (
 			<KirkiColorPaletteForm
 				{...control.params}
 				control={control}
 				customizerSetting={control.setting}
 				setNotificationContainer={control.setNotificationCotainer}
 				value={control.params.value}
-			/>,
-			control.container[0]
+			/>
 		);
 
+		wpReactRender(control.container[0], reactElement)
+
 		if (false !== control.params.choices.allowCollapse) {
 			control.container.addClass('allowCollapse');
 		}

kirki-packages/control-generic/src/control.js

@@ -1,11 +1,11 @@
 wp.customize.controlConstructor["kirki-generic"] =
   wp.customize.kirkiDynamicControl.extend({
-    initKirkiControl: function (control) {
-      control = control || this;
+    initKirkiControl: function (_control) {
+      const control = _control ?? this;
       const params = control.params;
 
       control.container.find("input, textarea").on("change input", function () {
-        const value = jQuery(this).val();
+        let value = jQuery(this).val();
 
         if (
           "kirki-generic" === params.type &&

kirki-packages/control-react-select/src/KirkiSelectControl.js

@@ -1,6 +1,17 @@
 /* global wp, jQuery, React, ReactDOM, _ */
 import KirkiSelectForm from "./KirkiSelectForm";
 
+const wpReactRender = ( target, reactNode ) => {
+	if ( target ) {
+
+    if ( wp.element.createRoot ) {
+			wp.element.createRoot( target ).render( wp.element.reactNode );
+    } else {
+			wp.element.render( reactNode, target );
+    }
+	}
+};
+
 /**
  * KirkiSelectControl.
  *
@@ -87,7 +98,7 @@ const KirkiSelectControl = wp.customize.Control.extend({
         maxSelectionNumber={control.params.maxSelectionNumber}
       />
     );
-    ReactDOM.render(form, control.container[0]);
+    wpReactRender(control.container[0], form);
   },
 
   /**

kirki-packages/control-slider/src/KirkiSliderControl.js

@@ -1,5 +1,16 @@
 import KirkiSliderForm from './KirkiSliderForm';
 
+const wpReactRender = ( target, reactNode ) => {
+	if ( target ) {
+
+    if ( wp.element.createRoot ) {
+			wp.element.createRoot( target ).render( wp.element.reactNode );
+    } else {
+			wp.element.render( reactNode, target );
+    }
+	}
+};
+
 /**
  * KirkiSliderControl.
  *
@@ -65,17 +76,18 @@ const KirkiSliderControl = wp.customize.Control.extend({
 	renderContent: function renderContent() {
 		const control = this;
 
-		ReactDOM.render(
+		const reactElement = (
 			<KirkiSliderForm
 				{...control.params}
 				control={control}
 				customizerSetting={control.setting}
 				setNotificationContainer={control.setNotificationCotainer}
 				value={control.params.value}
-			/>,
-			control.container[0]
+			/>
 		);
 
+		wpReactRender(control.container[0], reactElement);
+
 		if (false !== control.params.choices.allowCollapse) {
 			control.container.addClass('allowCollapse');
 		}

kirki.mjs

@@ -72,10 +72,10 @@ const definedPackages = {
         path: "kirki-packages/control-repeater",
         sources: ["src/control.js"],
     },
-    "control-select": {
-        path: "kirki-packages/control-select",
-        sources: ["src/control.js"],
-    },
+    // "control-select": {
+    //     path: "kirki-packages/control-select",
+    //     sources: ["src/control.js"],
+    // },
     "control-slider": {
         path: "kirki-packages/control-slider",
         sources: ["src/control.js"],
@@ -156,13 +156,23 @@ const program = sade("kirki");
 program.version("5.1.0");
 
 program
-    .command("build <packageName>")
+    .command("build [packageName]")
     .describe("Build a package by package name")
     .option("-d, --debug", "Build as unminified code for debugging purpose")
+		.option("-a, --all", "Build all packages, overriding the name supplied")
     .example("build control-base")
     .example("build control-base --debug")
     .action((packageName, opts) => {
-        runParcel("build", packageName, opts);
+			if (opts.a) {
+				Object.keys(definedPackages).forEach(name => {
+					console.log(name);
+					runParcel("build", name, opts)
+				});
+			} else {
+				if (packageName) {
+					runParcel("build", packageName, opts);
+				}
+			}
     });
 
 program
@@ -186,4 +196,4 @@ program
         shell.exec("bash build.sh");
     });
 
-program.parse(process.argv);
+program.parse(process.argv);

package.json

@@ -15,9 +15,10 @@
     "dependencies": {
         "colord": "^2.9.3",
         "jquery": "^3.6.3",
-        "react": "^17.0.2",
+        "react": "^18.3.1",
         "react-colorful": "^5.6.1",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
+        "react-select": "^5.8.0",
         "reactcss": "^1.2.3",
         "sade": "^1.8.1",
         "shelljs": "^0.8.5"