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

package/es/lib/utils/groupCustomPropertiesByCtx.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var groupCustomPropertiesByCtx = function groupCustomPropertiesByCtx(customProperties) {
+  return customProperties.reduce(function (acc, curr) {
+    var _curr$ctx, _acc$ctx;
+
+    var ctx = (_curr$ctx = curr.ctx) !== null && _curr$ctx !== void 0 ? _curr$ctx : 'isNull';
+
+    var returnObj = _objectSpread({}, acc);
+
+    returnObj[ctx] = [].concat(_toConsumableArray((_acc$ctx = acc === null || acc === void 0 ? void 0 : acc[ctx]) !== null && _acc$ctx !== void 0 ? _acc$ctx : []), [curr]);
+    return returnObj;
+  }, {});
+};
+
+var _default = groupCustomPropertiesByCtx;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(groupCustomPropertiesByCtx, "groupCustomPropertiesByCtx", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/groupCustomPropertiesByCtx.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/groupCustomPropertiesByCtx.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/index.js

@@ -21,12 +21,24 @@ Object.defineProperty(exports, "generateKiwtQueryParams", {
     return _generateKiwtQueryParams.default;
   }
 });
+Object.defineProperty(exports, "groupCustomPropertiesByCtx", {
+  enumerable: true,
+  get: function get() {
+    return _groupCustomPropertiesByCtx.default;
+  }
+});
 Object.defineProperty(exports, "refdataOptions", {
   enumerable: true,
   get: function get() {
     return _refdataOptions.default;
   }
 });
+Object.defineProperty(exports, "refdataQueryKey", {
+  enumerable: true,
+  get: function get() {
+    return _refdataQueryKey.default;
+  }
+});
 Object.defineProperty(exports, "renderHelpText", {
   enumerable: true,
   get: function get() {
@@ -51,6 +63,12 @@ Object.defineProperty(exports, "toCamelCase", {
     return _toCamelCase.default;
   }
 });
+Object.defineProperty(exports, "typedownQueryKey", {
+  enumerable: true,
+  get: function get() {
+    return _typedownQueryKey.default;
+  }
+});
 
 var _generateKiwtQuery = _interopRequireDefault(require("./generateKiwtQuery"));
 
@@ -62,6 +80,12 @@ var _buildUrl = _interopRequireDefault(require("./buildUrl"));
 
 var _refdataOptions = _interopRequireDefault(require("./refdataOptions"));
 
+var _refdataQueryKey = _interopRequireDefault(require("./refdataQueryKey"));
+
+var _typedownQueryKey = _interopRequireDefault(require("./typedownQueryKey"));
+
+var _groupCustomPropertiesByCtx = _interopRequireDefault(require("./groupCustomPropertiesByCtx"));
+
 var _renderHelpText = _interopRequireDefault(require("./renderHelpText"));
 
 var _sortByLabel = _interopRequireDefault(require("./sortByLabel"));

package/es/lib/utils/refdataQueryKey.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 refdataQueryKey = function refdataQueryKey(desc) {
+  var keyArray = ['stripes-kint-components', 'refdata'];
+
+  if (desc) {
+    keyArray.push(desc);
+  }
+
+  return keyArray;
+};
+
+var _default = refdataQueryKey;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(refdataQueryKey, "refdataQueryKey", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/refdataQueryKey.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/refdataQueryKey.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/typedownQueryKey.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 typedownQueryKey = function typedownQueryKey(path) {
+  var keyArray = ['stripes-kint-components', 'typedown'];
+
+  if (path) {
+    keyArray.push(path);
+  }
+
+  return keyArray;
+};
+
+var _default = typedownQueryKey;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(typedownQueryKey, "typedownQueryKey", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/typedownQueryKey.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/typedownQueryKey.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/validators.js

@@ -1,16 +1,24 @@
 "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 _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 () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -65,6 +73,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];
@@ -90,6 +148,7 @@ exports.composeValidators = composeValidators;
   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(customPropertyValidator, "customPropertyValidator", "/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");
 })();
 

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.0",
   "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.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);
@@ -147,7 +168,8 @@ const ActionListFieldArray = ({
                 disabled={editing}
                 icon={action.icon}
                 marginBottom0
-                onClick={actionFunction}
+                onClick={() => (actionFunction ? actionFunction() : () => null)}
+                to={action.to}
               />
             );
           }
@@ -158,7 +180,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 +270,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;