@k-int/stripes-kint-components 1.5.0 → 2.0.0

package/es/lib/utils/generateKiwtQueryParams.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _excluded = ["searchKey", "filterKeys", "sortKeys", "stats"];
 
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
@@ -32,6 +37,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
 var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues) {
   var qindex = nsValues.qindex,
       query = nsValues.query,
@@ -122,4 +131,24 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
 };
 
 var _default = generateKiwtQueryParams;
-exports["default"] = _default;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(generateKiwtQueryParams, "generateKiwtQueryParams", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/generateKiwtQueryParams.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/generateKiwtQueryParams.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/index.js

@@ -6,25 +6,49 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "buildUrl", {
   enumerable: true,
   get: function get() {
-    return _buildUrl["default"];
+    return _buildUrl.default;
   }
 });
 Object.defineProperty(exports, "generateKiwtQuery", {
   enumerable: true,
   get: function get() {
-    return _generateKiwtQuery["default"];
+    return _generateKiwtQuery.default;
   }
 });
 Object.defineProperty(exports, "generateKiwtQueryParams", {
   enumerable: true,
   get: function get() {
-    return _generateKiwtQueryParams["default"];
+    return _generateKiwtQueryParams.default;
+  }
+});
+Object.defineProperty(exports, "refdataOptions", {
+  enumerable: true,
+  get: function get() {
+    return _refdataOptions.default;
+  }
+});
+Object.defineProperty(exports, "renderHelpText", {
+  enumerable: true,
+  get: function get() {
+    return _renderHelpText.default;
   }
 });
 Object.defineProperty(exports, "selectorSafe", {
   enumerable: true,
   get: function get() {
-    return _selectorSafe["default"];
+    return _selectorSafe.default;
+  }
+});
+Object.defineProperty(exports, "sortByLabel", {
+  enumerable: true,
+  get: function get() {
+    return _sortByLabel.default;
+  }
+});
+Object.defineProperty(exports, "toCamelCase", {
+  enumerable: true,
+  get: function get() {
+    return _toCamelCase.default;
   }
 });
 
@@ -36,4 +60,16 @@ var _selectorSafe = _interopRequireDefault(require("./selectorSafe"));
 
 var _buildUrl = _interopRequireDefault(require("./buildUrl"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _refdataOptions = _interopRequireDefault(require("./refdataOptions"));
+
+var _renderHelpText = _interopRequireDefault(require("./renderHelpText"));
+
+var _sortByLabel = _interopRequireDefault(require("./sortByLabel"));
+
+var _toCamelCase = _interopRequireDefault(require("./toCamelCase"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+}; // I hate that this exists

package/es/lib/utils/refdataOptions.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var _default = {
+  filterKeys: {
+    DescKey: 'desc'
+  },
+  stats: false,
+  max: 100
+};
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/refdataOptions.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/renderHelpText.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _renderHelpText = _interopRequireDefault(require("../../../styles/renderHelpText.css"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var renderHelpText = function renderHelpText(id) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _renderHelpText.default.help,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      id: id,
+      values: {
+        b: function b(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+            children: chunks
+          });
+        },
+        i: function i(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            children: chunks
+          });
+        },
+        em: function em(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
+            children: chunks
+          });
+        },
+        strong: function strong(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+            children: chunks
+          });
+        },
+        span: function span(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: chunks
+          });
+        },
+        div: function div(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: chunks
+          });
+        },
+        p: function p(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: chunks
+          });
+        },
+        ul: function ul(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+            children: chunks
+          });
+        },
+        ol: function ol(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
+            children: chunks
+          });
+        },
+        li: function li(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: chunks
+          });
+        }
+      }
+    })
+  });
+};
+
+var _default = renderHelpText;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(renderHelpText, "renderHelpText", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/renderHelpText.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/renderHelpText.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/selectorSafe.js

@@ -3,11 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
 
 var selectorSafe = function selectorSafe(string) {
   return string.replaceAll(/[^a-zA-Z0-9\-_]/g, '_');
 };
 
 var _default = selectorSafe;
-exports["default"] = _default;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(selectorSafe, "selectorSafe", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/selectorSafe.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/selectorSafe.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/sortByLabel.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var sortByLabel = function sortByLabel(a, b) {
+  var _a$label$toLowerCase, _a$label, _a$id, _b$label$toLowerCase, _b$label, _b$id;
+
+  var al = (_a$label$toLowerCase = (_a$label = a.label) === null || _a$label === void 0 ? void 0 : _a$label.toLowerCase()) !== null && _a$label$toLowerCase !== void 0 ? _a$label$toLowerCase : (_a$id = a.id) === null || _a$id === void 0 ? void 0 : _a$id.toLowerCase();
+  var bl = (_b$label$toLowerCase = (_b$label = b.label) === null || _b$label === void 0 ? void 0 : _b$label.toLowerCase()) !== null && _b$label$toLowerCase !== void 0 ? _b$label$toLowerCase : (_b$id = b.id) === null || _b$id === void 0 ? void 0 : _b$id.toLowerCase();
+
+  if (al < bl) {
+    return -1;
+  }
+
+  if (al > bl) {
+    return 1;
+  }
+
+  return 0;
+};
+
+var _default = sortByLabel;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(sortByLabel, "sortByLabel", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/sortByLabel.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/sortByLabel.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/toCamelCase.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var toCamelCase = function toCamelCase(str) {
+  return (// First split string on any capital letters
+    str.split(/(?=[A-Z])/).join(' ') // Remove all non alpha-numeric chars, and replace _ with ' '
+    .replace(/[_]/gi, ' ').replace(/[^0-9a-zA-Z\s]/gi, '') // CamelCase the remains
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (ltr, idx) {
+      return idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase();
+    }).replace(/\s+/g, '')
+  );
+};
+
+var _default = toCamelCase;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(toCamelCase, "toCamelCase", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/toCamelCase.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/toCamelCase.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/jest.config.js

@@ -1 +1,15 @@
-module.exports = require('@folio/stripes-erm-components/jest.config');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const path = require('path');
+const jestConfig = require('@folio/stripes-erm-components/jest.config');
+
+const thisConfig = {
+  ...jestConfig,
+  rootDir: 'src',
+  transform: { '^.+\\.(js|jsx)$': path.join(__dirname, './test/jest/jest-transformer.js') },
+  moduleDirectories: ['node_modules'],
+  setupFiles: [
+    path.join(__dirname, './test/jest/setupTests.js')
+  ]
+};
+
+module.exports = thisConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -10,7 +10,7 @@
     "node": ">=10.0.0"
   },
   "scripts": {
-    "lint": "eslint lib",
+    "lint": "eslint src",
     "test": "yarn run test:jest",
     "test:jest": "jest --ci --coverage",
     "build:es": "rm -rf ./es && babel --extensions .js --ignore ./src/**/tests/**/* ./src --out-dir es",
@@ -20,7 +20,10 @@
     "prepare": "yarn build"
   },
   "dependencies": {
-    "react-resize-detector": "^6.7.6"
+    "react-resize-detector": "^6.7.6",
+    "@rehooks/local-storage": "2.4.0",
+    "@folio/react-intl-safe-html": "^3.1.0",
+    "compose-function": "^3.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
@@ -29,13 +32,17 @@
     "@babel/plugin-proposal-decorators": "^7.12.1",
     "@babel/plugin-proposal-function-sent": "^7.14.5",
     "@babel/plugin-proposal-throw-expressions": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.16.4",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.12.5",
-    "@folio/eslint-config-stripes": "^5.1.0",
+    "@folio/eslint-config-stripes": "^6.0.0",
+    "@folio/stripes-erm-components": "^6.0.0",
+    "@folio/stripes-testing": "^4.0.0",
     "@testing-library/dom": "^7.26.5",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.1",
     "@testing-library/user-event": "^12.2.0",
+    "@folio/stripes-cli": ">=2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-const-enum": "^1.0.1",
@@ -45,7 +52,7 @@
     "babel-polyfill": "^6.26.0",
     "eslint": "^6.2.1",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-jest-dom": "^3.2.4",
     "eslint-plugin-testing-library": "^3.10.0",
     "jest": "^26.6.3",
@@ -54,18 +61,20 @@
     "jest-junit": "^12.0.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "@folio/stripes": ">=7.0.3",
+    "react-intl": ">=5.8.1",
+    "regenerator-runtime": "^0.13.9"
   },
   "peerDependencies": {
-    "@folio/stripes": ">=6.1.4",
-    "@folio/stripes-cli": ">=2.1.1",
+    "@folio/stripes": ">=7.0.3",
+    "classnames": ">=2.2.6",
     "final-form": ">=4.18.4",
     "final-form-arrays": ">=3.0.1",
+    "lodash": ">=4.17.0",
     "prop-types": ">=15.6.0",
     "prop-types-extra": ">=1.1.0",
-    "lodash": ">=4.17.0",
     "query-string": ">=6.6.0",
-    "classnames": ">=2.2.6",
     "react": "*",
     "react-final-form": ">=6.3.0",
     "react-final-form-arrays": ">=3.1.0",

package/src/index.js

@@ -1,40 +1,43 @@
 // Useful hooks
 export {
   useActiveElement,
+  useCustomProperties,
   useHelperApp,
   useKiwtFieldArray,
   useKiwtSASQuery,
   useLocalStorageState,
+  useMutateCustomProperties,
   useMutateRefdataValue,
   useQIndex,
   useRefdata,
   useTemplates,
+  useSettings
 } from './lib/hooks';
 
 // Useful utility functions
 export {
   generateKiwtQuery,
   generateKiwtQueryParams,
+  refdataOptions,
   selectorSafe
 } from './lib/utils';
 
-// Settings Components
+// Contexts
 export {
   SettingsContext,
+} from './lib/contexts';
+
+// Setting Page Components
+export {
   SettingPage,
   SettingPagePane,
-  useSettings
-} from './lib/Settings';
+} from './lib/SettingPage';
 
 // ActionList & RefdataEditor components
-export { ActionList } from './lib/ActionList';
-export { EditableRefdataList } from './lib/EditableRefdataList';
+export { default as ActionList } from './lib/ActionList';
+export { default as EditableRefdataList } from './lib/EditableRefdataList';
 
 // Typedown
-export {
-  default as TypeDown
-} from './lib/TypeDown';
-
 export {
   default as Typedown
 } from './lib/Typedown';
@@ -64,4 +67,16 @@ export {
 } from './lib/SASQViewComponent';
 
 // NoResultsMessage
-export { NoResultsMessage } from './lib/NoResultsMessage';
+export { default as NoResultsMessage } from './lib/NoResultsMessage';
+
+// RefdataButtons
+export { default as RefdataButtons } from './lib/RefdataButtons';
+
+// Custom properties
+export {
+  CustomPropertiesLookup,
+  CustomPropertiesSettings,
+  CustomPropertiesView
+} from './lib/CustomProperties/Config';
+
+export * as customPropertyContants from './lib/constants/customProperties';

package/src/lib/ActionList/ActionList.js

@@ -12,7 +12,9 @@ const propTypes = {
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
+  fieldComponents: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -21,31 +23,39 @@ const ActionList = ({
   actionCalls = {},
   columnMapping,
   contentData,
+  creatableFields = {},
   editableFields = {},
-  visibleFields
+  fieldComponents = {},
+  visibleFields,
+  ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
   return (
-    <Form
-      enableReinitialize
-      initialValues={{ contentData }}
-      mutators={arrayMutators}
-      onSubmit={actionCalls.edit}
-      subscription={{ contentData: true }}
-    >
-      {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <FieldArray
-            actionAssigner={actionAssigner}
-            actionCalls={actionCalls}
-            columnMapping={columnMapping}
-            component={ActionListFieldArray}
-            editableFields={editableFields}
-            name="contentData"
-            visibleFields={visibleFields}
-          />
-        </form>
-      )}
-    </Form>
+    <>
+      <Form
+        enableReinitialize
+        initialValues={{ contentData }}
+        mutators={arrayMutators}
+        onSubmit={actionCalls.edit}
+        subscription={{ contentData: true }}
+      >
+        {() => (
+          <form onSubmit={e => { e.preventDefault(); }}>
+            <FieldArray
+              actionAssigner={actionAssigner}
+              actionCalls={actionCalls}
+              columnMapping={columnMapping}
+              component={ActionListFieldArray}
+              creatableFields={creatableFields}
+              editableFields={editableFields}
+              fieldComponents={fieldComponents}
+              name="contentData"
+              visibleFields={visibleFields}
+              {...mclProps}
+            />
+          </form>
+        )}
+      </Form>
+    </>
   );
 };