@k-int/stripes-kint-components 2.2.0 → 2.3.2

package/es/lib/utils/renderHelpText.js

@@ -15,15 +15,6 @@ 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,
@@ -86,24 +77,4 @@ var renderHelpText = function renderHelpText(id) {
 };
 
 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);
-})();
+exports.default = _default;

package/es/lib/utils/selectorSafe.js

@@ -5,38 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 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;
-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);
-})();
+exports.default = _default;

package/es/lib/utils/sortByLabel.js

@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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;
 
@@ -32,24 +23,4 @@ var sortByLabel = function sortByLabel(a, b) {
 };
 
 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);
-})();
+exports.default = _default;

package/es/lib/utils/toCamelCase.js

@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 ' '
@@ -25,24 +16,4 @@ var toCamelCase = function toCamelCase(str) {
 };
 
 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);
-})();
+exports.default = _default;

package/es/lib/utils/typedownQueryKey.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var typedownQueryKey = function typedownQueryKey(path) {
+  var keyArray = ['stripes-kint-components', 'typedown'];
+
+  if (path) {
+    keyArray.push(path);
+  }
+
+  return keyArray;
+};
+
+var _default = typedownQueryKey;
+exports.default = _default;

package/es/lib/utils/validators.js

@@ -1,29 +1,28 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.requiredObject = exports.required = exports.invalidNumber = exports.composeValidators = void 0;
+exports.requiredObject = exports.required = exports.invalidNumber = exports.customPropertyValidator = exports.composeValidators = void 0;
 
 var _reactIntl = require("react-intl");
 
+var CUSTOM_PROPERTY_TYPES = _interopRequireWildcard(require("../constants/customProperties"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["_delete"];
 
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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 invalidNumber = function invalidNumber(value) {
   return value || value === 0 ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
     id: "stripes-kint-components.errors.invalidNumber"
@@ -65,6 +64,56 @@ var requiredObject = function requiredObject() {
 
 exports.requiredObject = requiredObject;
 
+var customPropertyValidator = function customPropertyValidator(fieldValue, allValues, customProperty) {
+  var _allValues$customProp, _allValues$customProp2, _allValues$customProp3;
+
+  var _ref = (_allValues$customProp = allValues === null || allValues === void 0 ? void 0 : (_allValues$customProp2 = allValues.customProperties) === null || _allValues$customProp2 === void 0 ? void 0 : (_allValues$customProp3 = _allValues$customProp2[customProperty === null || customProperty === void 0 ? void 0 : customProperty.value]) === null || _allValues$customProp3 === void 0 ? void 0 : _allValues$customProp3[0]) !== null && _allValues$customProp !== void 0 ? _allValues$customProp : {},
+      note = _ref.note,
+      publicNote = _ref.publicNote,
+      currentValue = _ref.value;
+
+  if (note && !currentValue || publicNote && !currentValue) {
+    if (customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME || customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+        id: "stripes-kint-components.errors.customPropertyNoteInvalidNumber"
+      });
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+        id: "stripes-kint-components.errors.customPropertyNoteWithoutValue"
+      });
+    }
+  }
+
+  if (customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME) {
+    var regexp = /^-?[\d]*(\.[\d]{0,2})?$/;
+    return fieldValue && !regexp.test(fieldValue) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      id: "stripes-kint-components.errors.customPropertyMaxTwoDecimals"
+    }) : undefined;
+  }
+
+  if (customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME) {
+    var min = Number.MIN_SAFE_INTEGER;
+    var max = Number.MAX_SAFE_INTEGER;
+    return fieldValue && !Number.isInteger(+fieldValue) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      id: "stripes-kint-components.errors.customPropertyValueNotInRange",
+      values: {
+        min: min,
+        max: max
+      }
+    }) : undefined;
+  }
+
+  if (!customProperty.primary && !currentValue) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      id: "stripes-core.label.missingRequiredField"
+    });
+  }
+
+  return undefined;
+};
+
+exports.customPropertyValidator = customPropertyValidator;
+
 var composeValidators = function composeValidators() {
   for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
     validators[_key] = arguments[_key];
@@ -77,25 +126,4 @@ var composeValidators = function composeValidators() {
   };
 };
 
-exports.composeValidators = composeValidators;
-;
-
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-
-  if (!reactHotLoader) {
-    return;
-  }
-
-  reactHotLoader.register(invalidNumber, "invalidNumber", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/validators.js");
-  reactHotLoader.register(required, "required", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/validators.js");
-  reactHotLoader.register(requiredObject, "requiredObject", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/validators.js");
-  reactHotLoader.register(composeValidators, "composeValidators", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/validators.js");
-})();
-
-;
-
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
+exports.composeValidators = composeValidators;

package/git_translate.sh

@@ -0,0 +1,8 @@
+git stash
+
+./translate.sh
+
+git add ./translations
+git commit -m "chore: translations"
+git push
+git stash pop

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "2.2.0",
+  "version": "2.3.2",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/index.js

@@ -1,8 +1,10 @@
 // Useful hooks
 export {
   useActiveElement,
+  useAvailableCustomProperties,
   useCustomProperties,
   useHelperApp,
+  useInvalidateRefdata,
   useKiwtFieldArray,
   useKiwtSASQuery,
   useLocalStorageState,
@@ -18,8 +20,11 @@ export {
 export {
   generateKiwtQuery,
   generateKiwtQueryParams,
+  groupCustomPropertiesByCtx,
   refdataOptions,
-  selectorSafe
+  refdataQueryKey,
+  selectorSafe,
+  typedownQueryKey,
 } from './lib/utils';
 
 // Validators (Some/all copied from stripes-erm-components but this gives another way to acquire them)
@@ -85,9 +90,28 @@ export { default as FormModal } from './lib/FormModal';
 
 // Custom properties
 export {
+  // Config
   CustomPropertiesLookup,
   CustomPropertiesSettings,
-  CustomPropertiesView
-} from './lib/CustomProperties/Config';
+  CustomPropertyView,
+  CustomPropertyForm,
+  // Edit
+  CustomPropertiesEdit,
+  CustomPropertiesEditCtx,
+  CustomPropertiesListField,
+  CustomPropertyFormCard,
+  CustomPropertyField,
+  // View
+  CustomPropertiesView,
+  CustomPropertiesViewCtx,
+  CustomPropertyCard,
+  // Filter
+  CustomPropertiesFilter,
+  CustomPropertiesFilterForm,
+  CustomPropertiesFilterField,
+  CustomPropertiesFilterFieldArray,
+  useOperators,
+  useParseActiveFilterStrings
+} from './lib/CustomProperties';
 
 export * as customPropertyContants from './lib/constants/customProperties';

package/src/lib/ActionList/ActionList.js

@@ -13,6 +13,7 @@ const propTypes = {
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
   creatableFields: PropTypes.object,
+  createCallback: PropTypes.func,
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
   hideCreateButton: PropTypes.bool,
@@ -21,10 +22,11 @@ const propTypes = {
 
 const ActionList = ({
   actionAssigner,
-  actionCalls = {},
+  actionCalls = {}, // DEPRECATED
   columnMapping,
   contentData,
   creatableFields = {},
+  createCallback,
   editableFields = {},
   fieldComponents = {},
   hideCreateButton,
@@ -37,7 +39,7 @@ const ActionList = ({
         enableReinitialize
         initialValues={{ contentData }}
         mutators={arrayMutators}
-        onSubmit={actionCalls.edit}
+        onSubmit={() => null}
         subscription={{ contentData: true }}
       >
         {() => (
@@ -48,6 +50,7 @@ const ActionList = ({
               columnMapping={columnMapping}
               component={ActionListFieldArray}
               creatableFields={creatableFields}
+              createCallback={createCallback}
               editableFields={editableFields}
               fieldComponents={fieldComponents}
               hideCreateButton={hideCreateButton}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -16,6 +16,7 @@ const propTypes = {
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   creatableFields: PropTypes.object,
+  createCallback: PropTypes.func,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
   fieldComponents: PropTypes.object,
@@ -26,9 +27,10 @@ const propTypes = {
 
 const ActionListFieldArray = ({
   actionAssigner,
-  actionCalls,
+  actionCalls, // DEPRECATED
   columnMapping,
   creatableFields,
+  createCallback,
   editableFields,
   fields,
   fieldComponents,
@@ -55,15 +57,26 @@ const ActionListFieldArray = ({
     }
   };
 
-
   const handleSave = (index) => {
     const { actionListActions: _a, ...rowData } = fields.value[index];
-    actionCalls.edit(rowData);
+
+    // Find "edit" entry in actionAssigner
+    const editCallback = actionAssigner(rowData)?.find(act => act.name === 'edit')?.callback;
+    if (editCallback) {
+      editCallback(rowData);
+    } else {
+      actionCalls.edit(rowData); // DEPRECATED
+    }
   };
 
   const handleCreate = (index) => {
     const { actionListActions: _a, ...rowData } = fields.value[index];
-    actionCalls.create(rowData);
+
+    if (createCallback) {
+      createCallback(rowData);
+    } else {
+      actionCalls.create(rowData); // DEPRECATED
+    }
   };
 
  const getColumnWidths = () => {
@@ -133,7 +146,15 @@ const ActionListFieldArray = ({
     return (
       <div>
         {actions?.map(action => {
-          let actionFunction = () => actionCalls[action.name](rest);
+          let actionFunction;
+          if (action.callback) {
+            actionFunction = () => action.callback(rest);
+          }
+
+          if (!actionFunction && actionCalls[action.name]) {
+            actionFunction = () => actionCalls[action.name](rest); // DEPRECATED
+          }
+
           // Edit has special action functionality, revealing fields etc.
           if (action.name === 'edit') {
             actionFunction = () => toggleEditing(data.id);
@@ -146,8 +167,8 @@ const ActionListFieldArray = ({
                 key={`action-${action.name}[${data.rowIndex}]`}
                 disabled={editing}
                 icon={action.icon}
-                marginBottom0
-                onClick={actionFunction}
+                onClick={() => (actionFunction ? actionFunction() : () => null)}
+                to={action.to}
               />
             );
           }
@@ -158,7 +179,8 @@ const ActionListFieldArray = ({
               key={`action-${action.name}[${data.rowIndex}]`}
               disabled={editing}
               marginBottom0
-              onClick={actionFunction}
+              onClick={() => (actionFunction ? actionFunction() : () => null)}
+              to={action.to}
             >
               {action.label ?? action.name}
             </Button>
@@ -247,7 +269,7 @@ const ActionListFieldArray = ({
       {!hideCreateButton &&
         <Button
           buttonClass={css.buttonRight}
-          disabled={!actionCalls.create}
+          disabled={(!actionCalls.create && !createCallback)} // DEPRECATED actionCalls
           onClick={() => {
             toggleEditing('NEW_ROW');
             fields.push({});

package/src/lib/ActionList/README.md

@@ -23,32 +23,34 @@ const [contentData, setContentData] = useState({
 
 const actionAssigner = () => {
   return [
-    { name: 'edit' },
-    { name: 'delete' }
+    {
+      name: 'edit',
+      callback: (data) => setContentData({
+        ...contentData,
+        data
+      )}
+    },
+    {
+      name: 'delete',
+      callback: (data) => {
+        setContentData(contentData.filter(cd => cd.id !== data.id))
+      }
+    }
   ];
 };
 
-const actionCalls = {
-  create: (data) => setContentData({
-    ...contentData,
-    {
-      id: generateUUID(),
-      ...data
-    }
-  }),
-  edit: (data) => setContentData({
-    ...contentData,
-    data
-  ),
-  delete: (data) => {
-    setContentData(contentData.filter(cd => cd.id !== data.id))
+createCallback = (data) => setContentData({
+  ...contentData,
+  {
+    id: generateUUID(),
+    ...data
   }
-};
+});
 
 <ActionList
   actionAssigner={actionAssigner}
-  actionCalls={actionCalls}
   contentData={contentData}
+  createCallback={createCallback}
   visibleFields={['name', 'occupation']}
 />
 ```
@@ -57,11 +59,12 @@ const actionCalls = {
 
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon' }`. The prop `name` is required, but `label` and `icon` are optional props. | | ✓ |
-actionCalls | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. | {} | ✕ |
+actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
+actionCalls (DEPRECATED) | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |
 creatableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not. | | ✕ |
+createCallback | <function> | A callback to be used for the built in "create" action (ie "save" on a new row). Will be prioritised ahead of a `create` entry in the deprecated actionCalls prop. | {} | ✕ |
 editableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. No key for a given field will be interpreted as () => true, so a field is editable by default. | | ✕ |
 fieldComponents | object<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (currently only the name of the field `name`), and returns a Field component to be used in "edit mode" for the visible field specified. | | ✕ |
 formatter | object<function> | A "formatter" object that takes the same shape as an MCL formatter, and is used in the same way whilst a row is NOT being edited. While editing a given row, this formatter entry is ignored. | | ✕ |

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -14,7 +14,7 @@ import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
 import FormModal from '../../FormModal/FormModal';
 
 import CustomPropertiesLookup from './CustomPropertiesLookup';
-import CustomPropertiesView from './CustomPropertiesView';
+import CustomPropertyView from './CustomPropertyView';
 import CustomPropertiesForm from './CustomPropertyForm';
 import { useMutateCustomProperties, useRefdata } from '../../hooks';
 
@@ -160,7 +160,7 @@ const CustomPropertiesSettings = ({
             renderViewPaneTitle ?? customProperty?.label ?? customProperty?.name
           }
         >
-          <CustomPropertiesView
+          <CustomPropertyView
             customProperty={customProperty}
             labelOverrides={labelOverrides}
           />

package/src/lib/CustomProperties/Config/{CustomPropertiesView.js → CustomPropertyView.js}

@@ -5,7 +5,7 @@ import { Col, KeyValue, NoValue, Row } from '@folio/stripes/components';
 import { REFDATA_CLASS_NAME } from '../../constants/customProperties';
 
 // A default option for CustProp view pane, with the ability to override labels for fields
-const CustomPropertiesView = ({
+const CustomPropertyView = ({
   customProperty,
   labelOverrides
 }) => {
@@ -149,7 +149,7 @@ const CustomPropertiesView = ({
   );
 };
 
-CustomPropertiesView.propTypes = {
+CustomPropertyView.propTypes = {
   customProperty: PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string,
@@ -169,4 +169,4 @@ CustomPropertiesView.propTypes = {
   labelOverrides: PropTypes.object
 };
 
-export default CustomPropertiesView;
+export default CustomPropertyView;

package/src/lib/CustomProperties/Config/index.js

@@ -1,4 +1,4 @@
 export { default as CustomPropertiesLookup } from './CustomPropertiesLookup';
-export { default as CustomPropertiesView } from './CustomPropertiesLookup';
+export { default as CustomPropertyView } from './CustomPropertyView';
 export { default as CustomPropertiesSettings } from './CustomPropertiesSettings';
 export { default as CustomPropertyForm } from './CustomPropertyForm';

package/src/lib/CustomProperties/Edit/CustomPropertiesEdit.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import CustomPropertiesEditCtx from './CustomPropertiesEditCtx';
+
+const CustomPropertiesEdit = ({
+  contexts = [],
+  customPropertiesEndpoint,
+  id,
+  labelOverrides = {},
+  nameOverride
+}) => {
+  return (
+    contexts.map(ctx => (
+      <CustomPropertiesEditCtx
+        key={`customPropertiesEdit-${ctx}`}
+        {...{
+          ctx,
+          customPropertiesEndpoint,
+          id,
+          labelOverrides,
+          nameOverride
+        }}
+      />
+    ))
+  );
+};
+
+CustomPropertiesEdit.propTypes = {
+  contexts: PropTypes.arrayOf(PropTypes.string),
+  customPropertiesEndpoint: PropTypes.string,
+  id: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  nameOverride: PropTypes.string
+};
+
+export default CustomPropertiesEdit;