upgrade rjsf and mui (#1523)

* upgrade rjsf and mui

* add jsdom

* smaller change to package-lock

* update processSelectValue with code direct from rjsf

---------

Co-authored-by: burnettk <burnettk@users.noreply.github.com>

spiffworkflow-frontend/package.json

@@ -18,9 +18,9 @@
     "@mui/material": "^5.15.15",
     "@prefresh/vite": "^2.4.5",
     "@react-icons/all-files": "^4.1.0",
-    "@rjsf/core": "5.0.0-beta.20",
-    "@rjsf/mui": "5.0.0-beta.20",
-    "@rjsf/utils": "5.0.0-beta.20",
+    "@rjsf/core": "5.18.3",
+    "@rjsf/mui": "5.18.3",
+    "@rjsf/utils": "5.18.3",
     "@rjsf/validator-ajv8": "5.0.0",
     "@tanstack/react-query": "^5.28.6",
     "@tanstack/react-query-devtools": "^5.28.6",
@@ -124,6 +124,7 @@
     "eslint-plugin-sonarjs": "^0.15.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "inherits-browser": "^0.0.1",
+    "jsdom": "^24.0.0",
     "prettier": "^2.7.1",
     "safe-regex": "^2.1.1",
     "tiny-svg": "^2.2.3",

spiffworkflow-frontend/src/components/CustomForm.tsx

@@ -74,7 +74,7 @@ export default function CustomForm({
   }
 
   const rjsfTemplates: any = {};
-  if (restrictedWidth) {
+  if (restrictedWidth && reactJsonSchemaFormTheme === 'carbon') {
     rjsfTemplates.ObjectFieldTemplate = ObjectFieldRestrictedGridTemplate;
   }
 

spiffworkflow-frontend/src/rjsf/carbon_theme/SelectWidget/SelectWidget.tsx

@@ -1,7 +1,58 @@
 import { Select, SelectItem } from '@carbon/react';
-import { WidgetProps, processSelectValue } from '@rjsf/utils';
+import { WidgetProps } from '@rjsf/utils';
 import { getCommonAttributes } from '../../helpers';
 
+// this processSelectValue code is pulled from rjsf/utils version 5.0.0-beta.20
+// the function was removed.
+var nums = /*#__PURE__*/ new Set(['number', 'integer']);
+/** Returns the real value for a select widget due to a silly limitation in the DOM which causes option change event
+ * values to always be retrieved as strings. Uses the `schema` to help determine the value's true type. If the value is
+ * an empty string, then the `emptyValue` from the `options` is returned, falling back to undefined.
+ *
+ * @param schema - The schema to used to determine the value's true type
+ * @param [value] - The value to convert
+ * @param [options] - The UIOptionsType from which to potentially extract the emptyValue
+ * @returns - The `value` converted to the proper type
+ */
+function processSelectValue(schema, value, options) {
+  var schemaEnum = schema['enum'],
+    type = schema.type,
+    items = schema.items;
+  if (value === '') {
+    return options && options.emptyValue !== undefined
+      ? options.emptyValue
+      : undefined;
+  }
+  if (type === 'array' && items && nums.has(get(items, 'type'))) {
+    return value.map(asNumber);
+  }
+  if (type === 'boolean') {
+    return value === 'true';
+  }
+  if (nums.has(type)) {
+    return asNumber(value);
+  }
+  // If type is undefined, but an enum is present, try and infer the type from
+  // the enum values
+  if (Array.isArray(schemaEnum)) {
+    if (
+      schemaEnum.every(function (x) {
+        return nums.has(guessType(x));
+      })
+    ) {
+      return asNumber(value);
+    }
+    if (
+      schemaEnum.every(function (x) {
+        return guessType(x) === 'boolean';
+      })
+    ) {
+      return value === 'true';
+    }
+  }
+  return value;
+}
+
 function SelectWidget({
   schema,
   id,