@k-int/stripes-kint-components 5.8.2 → 5.9.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [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)
+
+
+### Bug Fixes
+
+* ERM-3391--NumberField doesnt update display value from form state changes ([cb44d06](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/cb44d063aed221cb544204b8b5d9df6dc313e9c2))
+
 ## [5.8.2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.1...v5.8.2) (2024-09-11)
 
 

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.js

@@ -31,13 +31,18 @@ const NumberField = props => {
 
   // Allow direct control of field
   (0, _react.useEffect)(() => {
-    if (value && numValue !== value) {
-      setNumValue(value);
+    const valueToUse = value ?? input.value;
+    if (!valueToUse && numValue) {
+      // Make sure to empty out if it's cleared. Treating '' as empty instead of undefined
+      setNumValue('');
+    }
+    if (valueToUse && numValue !== valueToUse) {
+      setNumValue(valueToUse);
     }
-    if (numValue && forceControl !== numValue) {
+    if (forceControl !== numValue) {
       setForceControl(numValue);
     }
-  }, [forceControl, numValue, value]);
+  }, [forceControl, numValue, value, input]);
   const handleChange = e => {
     // Actually set the value in the form
     if (input?.onChange) {
@@ -55,7 +60,7 @@ const NumberField = props => {
   const handleUserChange = e => {
     const parsedValue = parseFloat(e.target.value);
 
-    // ReturnValue needed for contorlled components
+    // ReturnValue needed for controlled components
     if (parsedValue || parsedValue === 0) {
       setNumValue(parsedValue);
       changeField(parsedValue);
@@ -83,6 +88,7 @@ const NumberField = props => {
       ref: inputRef,
       ...input,
       hidden: true,
+      id: input?.name,
       onChange: handleChange,
       type: "number",
       value: numValue
@@ -93,6 +99,7 @@ NumberField.propTypes = {
   onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,
   input: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
     onChange: _propTypes.default.func.isRequired,
     onBlur: _propTypes.default.func,
     value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])

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

@@ -0,0 +1,192 @@
+"use strict";
+
+var _react = require("react");
+var _reactFinalForm = require("react-final-form");
+var _userEvent = _interopRequireDefault(require("@folio/jest-config-stripes/testing-library/user-event"));
+var _react2 = require("@folio/jest-config-stripes/testing-library/react");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _components = require("@folio/stripes/components");
+var _NumberField = _interopRequireDefault(require("./NumberField"));
+var _helpers = require("../../../test/jest/helpers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onSubmit = jest.fn();
+const NUMBER_FIELD_LABEL = 'TEST NUMBER FIELD';
+const NUMBER_FIELD_ID = 'number-field-test';
+const NUMBER_FIELD_INPUT_ID = 'input-id-test';
+const RESET_BUTTON_LABEL = 'RESET NUMBER FIELD';
+
+// We need to use jest selectors instead of interactors as the TextField interactor
+// can't handle the double-text-field nature of NumberField
+const getTextField = () => {
+  // Spinbutton because it's a "number" type textField...
+  return _react2.screen.getByRole('spinbutton', {
+    name: NUMBER_FIELD_LABEL
+  });
+};
+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 = () => {
+  const {
+    change
+  } = (0, _reactFinalForm.useForm)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    onClick: () => change(NUMBER_FIELD_INPUT_ID, undefined),
+    children: RESET_BUTTON_LABEL
+  });
+};
+const NonControlledComponent = () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecialResetButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _NumberField.default,
+      id: NUMBER_FIELD_ID,
+      label: NUMBER_FIELD_LABEL,
+      name: NUMBER_FIELD_INPUT_ID
+    })]
+  });
+};
+const ControlledComponent = () => {
+  const [value, setValue] = (0, _react.useState)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecialResetButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _NumberField.default,
+      id: NUMBER_FIELD_ID,
+      label: NUMBER_FIELD_LABEL,
+      name: NUMBER_FIELD_INPUT_ID,
+      onChange: e => setValue(e.target.value),
+      value: value
+    })]
+  });
+};
+
+// EXAMPLE nesting repeated tests with describe.each or test.each might speed up some of our test writing
+describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlledComponent, {})], ['Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlledComponent, {})]])('NumberField', (controlType, component) => {
+  let _renderComponent;
+  let textField;
+  describe(`Regular usage (${controlType})`, () => {
+    beforeEach(async () => {
+      onSubmit.mockClear();
+      _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        initialValues: {},
+        onSubmit: onSubmit,
+        children: component
+      }));
+      textField = getTextField();
+    });
+    it('renders text field as expected', () => {
+      expect(textField).toBeInTheDocument();
+    });
+    describe.each([['non-numeric characters', 'sdhukjasklfs', '', {}], ['numeric characters', '12345', '12345', {
+      [NUMBER_FIELD_INPUT_ID]: '12345'
+    }], ['scientific notation', '1e5', '100000', {
+      [NUMBER_FIELD_INPUT_ID]: '100000'
+    }], ['negative numbers', '-100', '-100', {
+      [NUMBER_FIELD_INPUT_ID]: '-100'
+    }]])('Typing', (characterType, typedChars, expectedDisplay, expectedSubmit) => {
+      describe(`typing ${characterType}`, () => {
+        beforeEach(async () => {
+          await (0, _react2.waitFor)(async () => {
+            await _userEvent.default.type(textField, typedChars);
+          });
+        });
+        it('does not render typed characters', async () => {
+          expect(textField).toHaveDisplayValue(expectedDisplay);
+        });
+        testSubmitValues(expectedSubmit);
+      });
+    });
+  });
+  describe.each([['numeric initialvalues', {
+    [NUMBER_FIELD_INPUT_ID]: '7654321'
+  }, '7654321', {
+    [NUMBER_FIELD_INPUT_ID]: '7654321'
+  }], ['regular scientific initialvalue NOTE: scientific value parsing does NOT work from initialValues', {
+    [NUMBER_FIELD_INPUT_ID]: '3e7'
+  }, '3e7', {
+    [NUMBER_FIELD_INPUT_ID]: '3e7'
+  }], ['negative initialvalue', {
+    [NUMBER_FIELD_INPUT_ID]: '-100'
+  }, '-100', {
+    [NUMBER_FIELD_INPUT_ID]: '-100'
+  }]])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, expectedSubmit) => {
+    describe(describeTitle, () => {
+      beforeEach(async () => {
+        onSubmit.mockClear();
+        _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+          initialValues: initialValues,
+          onSubmit: onSubmit,
+          children: component
+        }));
+        textField = getTextField();
+      });
+      it('renders initial value', async () => {
+        expect(textField).toHaveDisplayValue(displayValue);
+      });
+      testSubmitValues(expectedSubmit);
+    });
+  });
+  describe.each([['Clear after typing', async () => {
+    onSubmit.mockClear();
+    _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      initialValues: {},
+      onSubmit: onSubmit,
+      children: component
+    }));
+    textField = getTextField();
+    await (0, _react2.waitFor)(async () => {
+      await _userEvent.default.type(textField, '32786843');
+    });
+  }], ['Clear from initialValues', async () => {
+    onSubmit.mockClear();
+    _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      initialValues: {
+        [NUMBER_FIELD_INPUT_ID]: '32786843'
+      },
+      onSubmit: onSubmit,
+      children: component
+    }));
+    textField = getTextField();
+  }]])(`ERM-3391: state change underneath component (${controlType})`, (clearType, beforeEachFunc) => {
+    describe(clearType, () => {
+      beforeEach(beforeEachFunc);
+      it('renders text field', () => {
+        expect(textField).toBeInTheDocument();
+      });
+      it('renders special reset button', async () => {
+        await (0, _stripesErmTesting.Button)(RESET_BUTTON_LABEL).exists();
+      });
+      describe.each([['Control', false, '32786843', {
+        [NUMBER_FIELD_INPUT_ID]: '32786843'
+      }], ['After reset', true, '', {}]])('Test reset', (describeTitle, clearField, expectedValue, expectedSubmit) => {
+        describe(describeTitle, () => {
+          beforeEach(async () => {
+            onSubmit.mockClear();
+            if (clearField) {
+              await (0, _react2.waitFor)(async () => {
+                await (0, _stripesErmTesting.Button)(RESET_BUTTON_LABEL).click();
+              });
+            }
+          });
+          it(`renders text field with display value: ${expectedValue}`, async () => {
+            await (0, _react2.waitFor)(() => {
+              expect(textField).toHaveDisplayValue(expectedValue);
+            });
+          });
+          testSubmitValues(expectedSubmit);
+        });
+      });
+    });
+  });
+});

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/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;