@k-int/stripes-kint-components 5.8.3 → 5.10.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [5.10.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.9.0...v5.10.0) (2025-02-04)
+
+
+### Features
+
+* Typedown delay ([c736865](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/c736865cec8f4b5cbe2ad473393452fd7ec34dc8))
+
+# [5.9.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.3...v5.9.0) (2025-01-31)
+
+
+### Bug Fixes
+
+* Ensure first field always gets focus ([144624e](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/144624e290e5f11db558e6345a979979ee84af34))
+
+
+### Features
+
+* useMutateGeneric ([7e9a1e6](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/7e9a1e6ceaef4157adf5ffe08da03269006d86f9))
+
 ## [5.8.3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.2...v5.8.3) (2024-10-23)
 
 

package/es/lib/ActionList/ActionListFieldArray.js

@@ -327,13 +327,14 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     formatter,
     ...restOfMclProps
   } = mclProps; // Destructure formatter part of mclProps
+
   const fieldAwareFormatter = () => {
     const returnObj = {};
     // For each visible field, if it's being edited then ignore passed formatters, else use them
 
-    // Track whether we've autoFocused on a field yet
-    let autoFocus = true;
-    visibleFields.forEach(key => {
+    visibleFields.forEach((key, index) => {
+      // Work out now whether or not to autofocus, so that gets cemented into the returnObj function
+      const shouldAutoFocus = index === 0;
       returnObj[key] = cd => {
         // Row is being edited if it has no id, or its id is in the editing string
         const editingRow = cd.id === editing || !cd.id;
@@ -368,15 +369,14 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
             returnValue = fieldComponents[key] ? fieldComponents[key](passedObject) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
               ariaLabel: key // TODO at the moment the only way to override this is passing in an entire fieldComponent.
               ,
-              autoFocus: autoFocus,
+              autoFocus: shouldAutoFocus // TODO at the moment this will always be the first field, even if it's not editable
+              ,
               component: _components.TextField,
               marginBottom0: true,
               name: `${cd.fieldName}.${key}`,
               parse: v => v,
               validate: validateFunction
             });
-            // After first field, every other field should not autofocus
-            autoFocus = false;
           }
         }
         return returnValue;

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

@@ -72,6 +72,9 @@ const CustomPropertiesSettings = _ref => {
       })
     }];
   }
+
+  // TODO consider moving some of the invalidations etc into the useMutateCustomProperties hook?
+  // Also all around patterns for defaulting afterQueryCalls etc are not ideal
   const {
     post: createCustprop,
     put: editCustProp,

package/es/lib/CustomProperties/Edit/CustomPropertyField.js

@@ -162,7 +162,7 @@ const CustomPropertyField = _ref => {
           component: _components.MultiSelection,
           // The "not set" value is not relevant for a multi select
           dataOptions: (0, _orderBy.default)(customProperty.options?.filter(opt => !!opt?.value), 'label'),
-          renderToOverlay: true
+          renderToOverlay: true // FIXME Switch to usePortal for stripes v10
         };
         // MultiSelection passes the changed array as a value not an event
         handleChange = refdataArray => {

package/es/lib/EditableRefdataList/EditableRefdataList.js

@@ -92,6 +92,7 @@ const EditableRefdataList = _ref => {
   }, [isRefdataLoading, refdata]);
 
   // Edit and Create will use the same PUT mutation
+  // TODO I believe after the changes to refactor to useMutateGeneric, we can now use POST separately to get differing callouts etc
   const {
     delete: deleteRefdataValue,
     put: editRefdataValue
@@ -115,6 +116,7 @@ const EditableRefdataList = _ref => {
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async err => {
         const errorResp = await (0, _utils.parseErrorResponse)(err.response);
+        console.log("ERRORRESP: %o", errorResp);
         callout.sendCallout({
           message: kintIntl.formatKintMessage({
             id: 'refdata.deleteRefdataValue.errorMessage',

package/es/lib/NumberField/NumberField.test.js

@@ -24,9 +24,18 @@ const getTextField = () => {
     name: NUMBER_FIELD_LABEL
   });
 };
-const submitForm = async () => {
-  await (0, _react2.waitFor)(async () => {
-    await (0, _stripesErmTesting.Button)('Submit').click();
+const testSubmitValues = expectedValues => {
+  describe('submitting the form', () => {
+    beforeEach(async () => {
+      await (0, _react2.waitFor)(async () => {
+        await (0, _stripesErmTesting.Button)('Submit').click();
+      });
+    });
+    it('submits with expected values', async () => {
+      await (0, _react2.waitFor)(() => {
+        expect(onSubmit.mock.calls?.[0]?.[0]).toEqual(expectedValues);
+      });
+    });
   });
 };
 const SpecialResetButton = () => {
@@ -95,12 +104,7 @@ describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlle
         it('does not render typed characters', async () => {
           expect(textField).toHaveDisplayValue(expectedDisplay);
         });
-        describe('submitting the form', () => {
-          beforeEach(submitForm);
-          it('submits with expected values', () => {
-            expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
-          });
-        });
+        testSubmitValues(expectedSubmit);
       });
     });
   });
@@ -116,7 +120,7 @@ describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlle
     [NUMBER_FIELD_INPUT_ID]: '-100'
   }, '-100', {
     [NUMBER_FIELD_INPUT_ID]: '-100'
-  }]])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, submitValue) => {
+  }]])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, expectedSubmit) => {
     describe(describeTitle, () => {
       beforeEach(async () => {
         onSubmit.mockClear();
@@ -130,12 +134,7 @@ describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlle
       it('renders initial value', async () => {
         expect(textField).toHaveDisplayValue(displayValue);
       });
-      describe('submitting the form', () => {
-        beforeEach(submitForm);
-        it('submits with expected values', () => {
-          expect(onSubmit.mock.calls[0][0]).toEqual(submitValue);
-        });
-      });
+      testSubmitValues(expectedSubmit);
     });
   });
   describe.each([['Clear after typing', async () => {
@@ -185,14 +184,7 @@ describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlle
               expect(textField).toHaveDisplayValue(expectedValue);
             });
           });
-          describe('submitting', () => {
-            describe('submitting the form', () => {
-              beforeEach(submitForm);
-              it('submits with expected values', () => {
-                expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
-              });
-            });
-          });
+          testSubmitValues(expectedSubmit);
         });
       });
     });

package/es/lib/Typedown/Typedown.js

@@ -22,8 +22,11 @@ const Typedown = _ref => {
     className,
     dataOptions,
     displayClearItem = true,
+    displayValueWhileOpen = true,
     endOfList,
     id,
+    initialOpenDelay = 800,
+    // Initial opening delay of 800ms (handles any stripes animations)
     input,
     isSelected,
     filterPath,
@@ -89,7 +92,9 @@ const Typedown = _ref => {
       resizeRef,
       searchWidth
     }
-  } = (0, _typedownHooks.useTypedown)(input.name);
+  } = (0, _typedownHooks.useTypedown)(input.name, {
+    timeout: initialOpenDelay
+  });
   const renderItem = (0, _react.useCallback)(function (option) {
     let optionIsSelected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -157,6 +162,9 @@ const Typedown = _ref => {
       })
     });
   };
+  const displayValue = (0, _react.useMemo)(() => {
+    return !!selectedUniqueId && (!open || displayValueWhileOpen);
+  }, [displayValueWhileOpen, open, selectedUniqueId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: resizeRef,
     className: (0, _classnames.default)(_TypeDown.default.typedown, className),
@@ -185,7 +193,7 @@ const Typedown = _ref => {
       overlayRef: overlayRef,
       portal: portal,
       children: dropDown()
-    }, "typedown-menu-toggle"), selectedUniqueId && !open && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }, "typedown-menu-toggle"), displayValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)(_TypeDown.default.selectedDisplay),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _TypeDown.default.selectedItem,
@@ -202,9 +210,11 @@ Typedown.propTypes = {
   className: _propTypes.default.string,
   dataOptions: _propTypes.default.arrayOf(_propTypes.default.object),
   displayClearItem: _propTypes.default.bool,
+  displayValueWhileOpen: _propTypes.default.bool,
   endOfList: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.element]),
   filterPath: _propTypes.default.string,
   id: _propTypes.default.string,
+  initialOpenDelay: _propTypes.default.number,
   input: _propTypes.default.object,
   isSelected: _propTypes.default.func,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),

package/es/lib/hooks/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "useMutateCustomProperties", {
     return _useMutateCustomProperties.default;
   }
 });
+Object.defineProperty(exports, "useMutateGeneric", {
+  enumerable: true,
+  get: function () {
+    return _useMutateGeneric.default;
+  }
+});
 Object.defineProperty(exports, "useMutateModConfigEntry", {
   enumerable: true,
   get: function () {
@@ -125,7 +131,6 @@ Object.defineProperty(exports, "useTemplates", {
 });
 var _useRefdata = _interopRequireDefault(require("./useRefdata"));
 var _useTemplates = _interopRequireDefault(require("./useTemplates"));
-var _useMutateRefdataValue = _interopRequireDefault(require("./useMutateRefdataValue"));
 var _useActiveElement = _interopRequireDefault(require("./useActiveElement"));
 var _useKiwtSASQuery = _interopRequireDefault(require("./useKiwtSASQuery"));
 var _useHelperApp = _interopRequireDefault(require("./useHelperApp"));
@@ -133,14 +138,16 @@ var _useLocalStorageState = _interopRequireDefault(require("./useLocalStorageSta
 var _useQIndex = _interopRequireDefault(require("./useQIndex"));
 var _useKiwtFieldArray = _interopRequireDefault(require("./useKiwtFieldArray"));
 var _useCustomProperties = _interopRequireDefault(require("./useCustomProperties"));
-var _useMutateCustomProperties = _interopRequireDefault(require("./useMutateCustomProperties"));
 var _useInvalidateRefdata = _interopRequireDefault(require("./useInvalidateRefdata"));
-var _useMutateRefdataCategory = _interopRequireDefault(require("./useMutateRefdataCategory"));
 var _useKintIntl = _interopRequireDefault(require("./useKintIntl"));
 var _useIntlKeyStore = _interopRequireDefault(require("./useIntlKeyStore"));
 var _useIntlKey = _interopRequireDefault(require("./useIntlKey"));
 var _useSASQQueryMeta = _interopRequireDefault(require("./useSASQQueryMeta"));
 var _useModConfigEntries = _interopRequireDefault(require("./useModConfigEntries"));
-var _useMutateModConfigEntry = _interopRequireDefault(require("./useMutateModConfigEntry"));
 var _useActionListRef = _interopRequireDefault(require("./useActionListRef"));
+var _useMutateGeneric = _interopRequireDefault(require("./useMutateGeneric"));
+var _useMutateRefdataValue = _interopRequireDefault(require("./useMutateRefdataValue"));
+var _useMutateRefdataCategory = _interopRequireDefault(require("./useMutateRefdataCategory"));
+var _useMutateCustomProperties = _interopRequireDefault(require("./useMutateCustomProperties"));
+var _useMutateModConfigEntry = _interopRequireDefault(require("./useMutateModConfigEntry"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/hooks/typedownHooks/useTypedown.js

@@ -11,7 +11,10 @@ var _eventCodes = require("../../constants/eventCodes");
 var _selectorSafe = _interopRequireDefault(require("../../utils/selectorSafe"));
 var _useTypedownToggle = _interopRequireDefault(require("./useTypedownToggle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useTypedown = name => {
+const useTypedown = function (name) {
+  let {
+    timeout = 800
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // SEARCHFIELD COMPONENT
   const searchFieldComponent = document.getElementById(`typedown-searchField-${(0, _selectorSafe.default)(name)}`);
 
@@ -101,6 +104,16 @@ const useTypedown = name => {
   const {
     open
   } = (0, _useTypedownToggle.default)(name);
+  const [useOpen, setUseOpen] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    // Use setTimeout to update the message after 2000 milliseconds (2 seconds)
+    const timeoutId = setTimeout(() => {
+      setUseOpen(true);
+    }, timeout); // Wait 0.8 seconds for open prop to get used
+
+    // Cleanup function to clear the timeout if the component unmounts
+    return () => clearTimeout(timeoutId);
+  }, [timeout]);
 
   // RESIZE STUFF
   const {
@@ -123,7 +136,7 @@ const useTypedown = name => {
       searchFieldKeyDownHandler
     },
     variables: {
-      open,
+      open: useOpen ? open : false,
       portal,
       resizeRef,
       searchWidth

package/es/lib/hooks/useMutateCustomProperties.js

@@ -4,45 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactQuery = require("react-query");
-var _core = require("@folio/stripes/core");
+var _useMutateGeneric = _interopRequireDefault(require("./useMutateGeneric"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useMutateCustomProperties = _ref => {
   let {
-    afterQueryCalls,
-    catchQueryCalls,
     endpoint,
     id,
-    queryParams,
-    returnQueryObject = {
-      post: false,
-      put: false,
-      delete: false
-    }
+    ...mutateGenericProps
   } = _ref;
-  const returnObj = {};
-  const ky = (0, _core.useOkapiKy)();
-  const deleteQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'useMutateCustomProperties', 'delete', id], async () => ky.delete(`${endpoint}/${id}`).json().then(afterQueryCalls?.delete).catch(catchQueryCalls?.delete), queryParams?.delete);
-  const putQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'useMutateCustomProperties', 'put', id], async data => ky.put(`${endpoint}/${id}`, {
-    json: data
-  }).json().then(afterQueryCalls?.put).catch(catchQueryCalls?.put), queryParams?.put);
-  const postQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'useMutateCustomProperties', 'post'], async data => ky.post(`${endpoint}`, {
-    json: data
-  }).json().then(afterQueryCalls?.post).catch(catchQueryCalls?.post), queryParams?.post);
-  if (returnQueryObject?.delete) {
-    returnObj.delete = deleteQueryObject;
-  } else {
-    returnObj.delete = deleteQueryObject.mutateAsync;
-  }
-  if (returnQueryObject?.put) {
-    returnObj.put = putQueryObject;
-  } else {
-    returnObj.put = putQueryObject.mutateAsync;
-  }
-  if (returnQueryObject?.post) {
-    returnObj.post = postQueryObject;
-  } else {
-    returnObj.post = postQueryObject.mutateAsync;
-  }
-  return returnObj;
+  return (0, _useMutateGeneric.default)({
+    endpoint,
+    endpointMutators: {
+      delete: () => `${endpoint}/${id}`,
+      put: () => `${endpoint}/${id}`
+    },
+    id,
+    queryKey: ['stripes-kint-components', 'useMutateCustomProperties', id],
+    ...mutateGenericProps
+  });
 };
 var _default = exports.default = useMutateCustomProperties;

package/es/lib/hooks/useMutateGeneric.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactQuery = require("react-query");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _core = require("@folio/stripes/core");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// DEFAULT ASSUMES PUT/POST goes to ENDPOINT/id and that POST goes to ENDPOINT
+// A utility function to provide this all-in-one functionality used in various places
+
+const useMutateGeneric = function () {
+  let {
+    afterQueryCalls: {
+      delete: afterQueryDelete = _noop.default,
+      post: afterQueryPost = _noop.default,
+      put: afterQueryPut = _noop.default
+    } = {},
+    catchQueryCalls: {
+      delete: catchQueryDelete = _noop.default,
+      post: catchQueryPost = _noop.default,
+      put: catchQueryPut = _noop.default
+    } = {},
+    endpoint,
+    endpointMutators: {
+      delete: endpointMutatorDelete = id => `${endpoint}/${id}`,
+      post: endpointMutatorPost = () => endpoint,
+      put: endpointMutatorPut = data => `${endpoint}/${data.id}`
+    } = {},
+    payloadMutators: {
+      post: payloadMutatorPost = data => ({
+        json: data
+      }),
+      put: payloadMutatorPut = data => ({
+        json: data
+      })
+    } = {},
+    promiseReturns: {
+      delete: promiseReturnDelete = (id, ky) => ky.delete(endpointMutatorDelete(id)).json(),
+      post: promiseReturnPost = (data, ky) => ky.post(endpointMutatorPost(data), payloadMutatorPost(data)).json(),
+      put: promiseReturnPut = (data, ky) => ky.put(endpointMutatorPut(data), payloadMutatorPut(data)).json()
+    } = {},
+    queryKey = [],
+    // Must be type: array
+    queryKeyMutators: {
+      delete: queryKeyMutatorDelete = () => [...queryKey, 'delete'],
+      post: queryKeyMutatorPost = () => [...queryKey, 'create'],
+      put: queryKeyMutatorPut = () => [...queryKey, 'edit']
+    } = {},
+    queryParams: {
+      delete: queryParamsDelete = {},
+      post: queryParamsPost = {},
+      put: queryParamsPut = {}
+    } = {},
+    returnQueryObject: {
+      delete: returnQueryObjectDelete = false,
+      post: returnQueryObjectPost = false,
+      put: returnQueryObjectPut = false
+    } = {}
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const ky = (0, _core.useOkapiKy)();
+
+  // DELETE Object
+  const deleteQueryObject = (0, _reactQuery.useMutation)(queryKeyMutatorDelete(), async id => promiseReturnDelete(id, ky).then(res => afterQueryDelete(res)).catch(catchQueryDelete), queryParamsDelete);
+
+  // Edit Object
+  const putQueryObject = (0, _reactQuery.useMutation)(queryKeyMutatorPut(), async data => promiseReturnPut(data, ky).then(afterQueryPut).catch(catchQueryPut), queryParamsPut);
+
+  // Create Object
+  const postQueryObject = (0, _reactQuery.useMutation)(queryKeyMutatorPost(), async data => promiseReturnPost(data, ky).then(afterQueryPost).catch(catchQueryPost), queryParamsPost);
+  const returnObj = {};
+  if (returnQueryObjectDelete) {
+    returnObj.delete = deleteQueryObject;
+  } else {
+    returnObj.delete = deleteQueryObject.mutateAsync;
+  }
+  if (returnQueryObjectPut) {
+    returnObj.put = putQueryObject;
+  } else {
+    returnObj.put = putQueryObject.mutateAsync;
+  }
+  if (returnQueryObjectPost) {
+    returnObj.post = postQueryObject;
+  } else {
+    returnObj.post = postQueryObject.mutateAsync;
+  }
+  return returnObj;
+};
+var _default = exports.default = useMutateGeneric;

package/es/lib/hooks/useMutateRefdataCategory.js

@@ -4,41 +4,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactQuery = require("react-query");
-var _core = require("@folio/stripes/core");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _useInvalidateRefdata = _interopRequireDefault(require("./useInvalidateRefdata"));
+var _useMutateGeneric = _interopRequireDefault(require("./useMutateGeneric"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useMutateRefdataCategory = _ref => {
   let {
-    afterQueryCalls,
-    catchQueryCalls,
+    afterQueryCalls: {
+      delete: afterQueryDelete = _noop.default,
+      post: afterQueryPost = _noop.default,
+      put: afterQueryPut = _noop.default
+    } = {},
     endpoint,
-    queryParams,
-    returnQueryObject = {
-      post: false,
-      delete: false
-    }
+    ...mutateGenericProps
   } = _ref;
-  const returnObj = {};
-  const ky = (0, _core.useOkapiKy)();
   const invalidateRefdata = (0, _useInvalidateRefdata.default)();
-  const deleteQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'useMutateRefdataCategory', 'delete'], async id => ky.delete(`${endpoint}/${id}`).json().then(afterQueryCalls?.delete).then(() => invalidateRefdata()).catch(catchQueryCalls?.delete), queryParams?.delete);
-  const postQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'useMutateRefdataCategory', 'post'], async payload => ky.post(endpoint, {
-    json: {
-      ...payload,
-      values: []
-    }
-  }).json().then(afterQueryCalls?.post).then(() => invalidateRefdata()).catch(catchQueryCalls?.post), queryParams?.post);
-  if (returnQueryObject?.delete) {
-    returnObj.delete = deleteQueryObject;
-  } else {
-    returnObj.delete = deleteQueryObject.mutateAsync;
-  }
-  if (returnQueryObject?.post) {
-    returnObj.post = postQueryObject;
-  } else {
-    returnObj.post = postQueryObject.mutateAsync;
-  }
-  return returnObj;
+  return (0, _useMutateGeneric.default)({
+    afterQueryCalls: {
+      delete: res => {
+        invalidateRefdata().then(() => {
+          afterQueryDelete(res);
+        });
+      },
+      post: res => {
+        invalidateRefdata().then(() => {
+          afterQueryPost(res);
+        });
+      },
+      put: res => {
+        invalidateRefdata().then(() => {
+          afterQueryPut(res);
+        });
+      }
+    },
+    endpoint,
+    payloadMutators: {
+      post: data => ({
+        json: {
+          ...data,
+          values: []
+        }
+      })
+    },
+    queryKey: ['stripes-kint-components', 'useMutateRefdataCategory'],
+    ...mutateGenericProps
+  });
 };
 var _default = exports.default = useMutateRefdataCategory;

package/es/lib/hooks/useMutateRefdataValue.js

@@ -4,50 +4,67 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactQuery = require("react-query");
-var _core = require("@folio/stripes/core");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _useInvalidateRefdata = _interopRequireDefault(require("./useInvalidateRefdata"));
+var _useMutateGeneric = _interopRequireDefault(require("./useMutateGeneric"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useMutateRefdataValue = _ref => {
   let {
-    afterQueryCalls,
-    catchQueryCalls,
+    afterQueryCalls: {
+      delete: afterQueryDelete = _noop.default,
+      post: afterQueryPost = _noop.default,
+      put: afterQueryPut = _noop.default
+    } = {},
     endpoint,
     id,
-    queryParams,
-    returnQueryObject = {
-      put: false,
-      delete: false
-    }
+    ...mutateGenericProps
   } = _ref;
-  const returnObj = {};
-  const ky = (0, _core.useOkapiKy)();
   const invalidateRefdata = (0, _useInvalidateRefdata.default)();
-  const deleteQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'useMutateRefdataValue', 'delete', id], async data => ky.put(`${endpoint}/${id}`, {
-    json: {
-      id,
-      values: [{
-        id: data,
-        _delete: true
-      }]
-    }
-  }).json().then(afterQueryCalls?.delete).then(() => invalidateRefdata()).catch(catchQueryCalls?.delete), queryParams?.delete);
-  const putQueryObject = (0, _reactQuery.useMutation)(['stripes-kint-components', 'editableRefdataList', 'editValue', id], async data => ky.put(`${endpoint}/${id}`, {
-    json: {
-      id,
-      values: [data]
-    }
-  }).json().then(afterQueryCalls?.put).then(() => invalidateRefdata()).catch(catchQueryCalls?.put), queryParams?.put);
-  if (returnQueryObject?.delete) {
-    returnObj.delete = deleteQueryObject;
-  } else {
-    returnObj.delete = deleteQueryObject.mutateAsync;
-  }
-  if (returnQueryObject?.put) {
-    returnObj.put = putQueryObject;
-  } else {
-    returnObj.put = putQueryObject.mutateAsync;
-  }
-  return returnObj;
+  return (0, _useMutateGeneric.default)({
+    afterQueryCalls: {
+      delete: res => {
+        invalidateRefdata().then(() => {
+          afterQueryDelete(res);
+        });
+      },
+      post: res => {
+        invalidateRefdata().then(() => {
+          afterQueryPost(res);
+        });
+      },
+      put: res => {
+        invalidateRefdata().then(() => {
+          afterQueryPut(res);
+        });
+      }
+    },
+    endpoint,
+    id,
+    promiseReturns: {
+      delete: (delId, ky) => ky.put(`${endpoint}/${id}`, {
+        json: {
+          id,
+          values: [{
+            id: delId,
+            _delete: true
+          }]
+        }
+      }).json(),
+      post: (data, ky) => ky.put(`${endpoint}/${id}`, {
+        json: {
+          id,
+          values: [data]
+        }
+      }).json(),
+      put: (data, ky) => ky.put(`${endpoint}/${id}`, {
+        json: {
+          id,
+          values: [data]
+        }
+      }).json()
+    },
+    queryKey: ['stripes-kint-components', 'useMutateRefdataValue', id],
+    ...mutateGenericProps
+  });
 };
 var _default = exports.default = useMutateRefdataValue;

package/package.json

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