@k-int/stripes-kint-components 2.5.1 → 2.6.0

package/src/lib/CustomProperties/View/CustomPropertiesView.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { contexts, customProperties, labelOverrides } from './testResources';
+import CustomPropertiesView from './CustomPropertiesView';
+
+jest.mock('./CustomPropertiesViewCtx', () => () => <div>CustomPropertiesViewCtx</div>);
+
+describe('CustomPropertiesView', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <MemoryRouter>
+        <CustomPropertiesView
+          contexts={contexts}
+          customProperties={customProperties}
+          customPropertiesEndpoint="erm/custprops"
+          id="supplementaryProperties"
+          labelOverrides={labelOverrides}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  it('renders CustomPropertiesViewCtx component ', () => {
+    const { getByText } = renderComponent;
+     waitFor(() => expect(getByText('CustomPropertiesViewCtx')).toBeInTheDocument());
+  });
+});

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import '@folio/stripes-erm-components/test/jest/__mock__';
+import { MemoryRouter } from 'react-router-dom';
+import { waitFor } from '@testing-library/react';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
+
+import { data } from './testResources';
+import CustomPropertiesViewCtx from './CustomPropertiesViewCtx';
+
+jest.mock('../../hooks', () => ({
+  useCustomProperties: () => [],
+}));
+
+jest.mock('./CustomPropertyCard', () => () => <div>CustomPropertyCard</div>);
+
+describe('CustomPropertiesViewCtx', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = renderWithKintHarness(
+      <MemoryRouter>
+        <CustomPropertiesViewCtx
+          {...data}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  it('renders CustomPropertyCard component ', () => {
+    const { getByText } = renderComponent;
+    waitFor(() => expect(getByText('CustomPropertyCard')).toBeInTheDocument());
+  });
+});

package/src/lib/CustomProperties/View/CustomPropertyCard.js

@@ -7,6 +7,7 @@ import {
   FormattedUTCDate,
   InfoPopover,
   KeyValue,
+  List,
   NoValue,
   Row,
 } from '@folio/stripes/components';
@@ -69,6 +70,13 @@ const CustomPropertyCard = ({
     }
 
     switch (customPropertyDefinition.type) {
+      case CUSTPROP_TYPES.MULTI_REFDATA_CLASS_NAME:
+        return (
+          <List
+            items={customProperty.value?.map((item) => item?.label ?? item?.value)}
+            listStyle="bullets"
+          />
+        );
       case CUSTPROP_TYPES.REFDATA_CLASS_NAME:
         return customProperty.value?.label ?? customProperty.value?.value;
       case CUSTPROP_TYPES.DECIMAL_CLASS_NAME:

package/src/lib/CustomProperties/View/testResources.js

@@ -0,0 +1,162 @@
+const contexts = [
+  'isNull',
+  'OpenAccess'
+];
+
+const customProperties = {
+  'AuthorIdentification': [{
+    'id': 2,
+    'publicNote': 'public note',
+    'note': 'internal note',
+    'internal': true,
+    'value': {
+      'id': '2c91809c813e654501813e6c3bc50061',
+      'value': 'orcid',
+      'label': 'ORCID'
+    },
+    'type': {
+      'id': '2c91809c813e654501813e6c3c6a0066',
+      'retired': false,
+      'ctx': 'OpenAccess',
+      'name': 'AuthorIdentification',
+      'primary': true,
+      'category': {
+        'id': '2c91809c813e654501813e6c3bbb005e',
+        'desc': 'AuthIdent',
+        'internal': false,
+        'values': [{
+            'id': '2c91809c813e654501813e6c3bc50061',
+            'value': 'orcid',
+            'label': 'ORCID'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bcf0064',
+            'value': 'ringgold_id',
+            'label': 'Ringgold ID'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bcc0063',
+            'value': 'over_ip_range',
+            'label': 'Over IP Range'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bd20065',
+            'value': 'ror_id',
+            'label': 'ROR ID'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bbd005f',
+            'value': 'other',
+            'label': 'Other'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bc90062',
+            'value': 'over_institute',
+            'label': 'Over Institute'
+          },
+          {
+            'id': '2c91809c813e654501813e6c3bc20060',
+            'value': 'email_domain',
+            'label': 'Email Domain'
+          }
+        ]
+      },
+      'defaultInternal': true,
+      'label': 'Author Identification',
+      'description': 'Author Identification',
+      'weight': 0,
+      'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata'
+    }
+  }]
+};
+
+
+const labelOverrides = {
+  'defaultTitle': 'ƒ defaultTitle() {}',
+  'noContext': '<Memo />',
+  'OpenAccess': '<Memo />',
+  'retiredName': 'ƒ retiredName() {}'
+};
+
+const data = {
+  'ctx': 'isNull',
+  'customProperties': {
+    'AuthorIdentification': [{
+      'id': 2,
+      'internal': true,
+      'value': {
+        'id': '2c91809c815d4e6d01815d55adfd0060',
+        'value': 'email_domain',
+        'label': 'Email Domain'
+      },
+      'type': {
+        'id': '2c91809c815d4e6d01815d55af070066',
+        'retired': false,
+        'ctx': 'OpenAccess',
+        'name': 'AuthorIdentification',
+        'primary': true,
+        'category': {
+          'id': '2c91809c815d4e6d01815d55adf7005e',
+          'desc': 'AuthIdent',
+          'internal': false,
+          'values': [{
+              'id': '2c91809c815d4e6d01815d55adf9005f',
+              'value': 'other',
+              'label': 'Other'
+            },
+            {
+              'id': '2c91809c815d4e6d01815d55ae080063',
+              'value': 'over_ip_range',
+              'label': 'Over IP Range'
+            },
+            {
+              'id': '2c91809c815d4e6d01815d55ae050062',
+              'value': 'over_institute',
+              'label': 'Over Institute'
+            },
+            {
+              'id': '2c91809c815d4e6d01815d55ae010061',
+              'value': 'orcid',
+              'label': 'ORCID'
+            },
+            {
+              'id': '2c91809c815d4e6d01815d55ae0c0064',
+              'value': 'ringgold_id',
+              'label': 'Ringgold ID'
+            },
+            {
+              'id': '2c91809c815d4e6d01815d55ae0f0065',
+              'value': 'ror_id',
+              'label': 'ROR ID'
+            },
+            {
+              'id': '2c91809c815d4e6d01815d55adfd0060',
+              'value': 'email_domain',
+              'label': 'Email Domain'
+            }
+          ]
+        },
+        'defaultInternal': true,
+        'label': 'Author Identification',
+        'description': 'Author Identification',
+        'weight': 0,
+        'type': 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata'
+      }
+    }]
+  },
+  'customPropertiesEndpoint': 'erm/custprops',
+  'id': 'supplementaryProperties',
+  'labelOverrides': {
+    'defaultTitle': 'ƒ defaultTitle() {}',
+    'noContext': '<Memo />',
+    'OpenAccess': '<Memo />',
+    'retiredName': 'ƒ retiredName() {}'
+  }
+};
+
+export {
+  contexts,
+  customProperties,
+  labelOverrides,
+  data
+};

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -1,19 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { ConfirmationModal } from '@folio/stripes/components';
+import { CalloutContext } from '@folio/stripes/core';
 
 import { useMutateRefdataValue, useRefdata } from '../hooks';
 
 import ActionList from '../ActionList';
 
 const propTypes = {
+  afterQueryCalls: PropTypes.object,
+  catchQueryCalls: PropTypes.object,
   desc: PropTypes.string,
   label: PropTypes.string,
+  labelOverrides: PropTypes.object,
   refdataEndpoint: PropTypes.string
 };
 
-const EditableRefdataList = ({ desc, label, refdataEndpoint }) => {
+const EditableRefdataList = ({
+  afterQueryCalls,
+  catchQueryCalls,
+  desc,
+  label,
+  labelOverrides, // An object containing translation alternatives
+  refdataEndpoint
+}) => {
   /* A component that allows for editing of refdata values */
+  const callout = useContext(CalloutContext);
+  const intl = useIntl();
 
   // fetch refdata values
   const { data: { 0: refdata } = {}, isLoading: isRefdataLoading } = useRefdata({
@@ -23,6 +38,11 @@ const EditableRefdataList = ({ desc, label, refdataEndpoint }) => {
   });
 
   const [contentData, setContentData] = useState([]);
+  const [deleteModal, setDeleteModal] = useState({
+    visible: false,
+    refdata: null,
+  });
+
   const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
 
   useEffect(() => {
@@ -34,8 +54,38 @@ const EditableRefdataList = ({ desc, label, refdataEndpoint }) => {
   // Edit and Create will use the same PUT mutation
   const { delete: deleteRefdataValue, put: editRefdataValue } = useMutateRefdataValue({
     afterQueryCalls: {
-      delete: json => setContentData(json?.values?.sort(sortByLabel) ?? []),
-      put: json => setContentData(json?.values?.sort(sortByLabel) ?? [])
+      delete: json => {
+        setContentData(json?.values?.sort(sortByLabel) ?? []);
+        if (afterQueryCalls?.delete) {
+          afterQueryCalls.delete(json);
+        }
+      },
+      put: json => {
+        setContentData(json?.values?.sort(sortByLabel) ?? []);
+        if (afterQueryCalls?.put) {
+          afterQueryCalls.put(json);
+        }
+      }
+    },
+    catchQueryCalls: {
+      // Default delete behaviour is to fire a callout, either with kint-components default message
+      // or one provided in labelOverrides, which is passed the error message and refdata in question
+      delete: async (err) => {
+        const errorResp = await err.response.json();
+        callout.sendCallout({
+          message: labelOverrides?.deleteError ? labelOverrides.deleteError(errorResp?.message, deleteModal?.refdata) : (
+            <FormattedMessage
+              id="stripes-kint-components.editableRefdataList.deleteLabel.errorMessage"
+              values={{
+                label: deleteModal?.refdata?.label,
+                error: errorResp?.message
+              }}
+            />
+          ),
+          type: 'error',
+        });
+      },
+      ...catchQueryCalls // override defaults here
     },
     endpoint: refdataEndpoint,
     id: refdata?.id,
@@ -60,7 +110,11 @@ const EditableRefdataList = ({ desc, label, refdataEndpoint }) => {
         name: 'edit',
         label: <FormattedMessage id="stripes-kint-components.editableRefdataList.edit" />,
         icon: 'edit',
-        callback: (data) => editRefdataValue(data)
+        callback: (data) => editRefdataValue(data),
+        ariaLabel: (data) => intl.formatMessage(
+            { id: 'stripes-kint-components.editableRefdataList.editAriaLabel' },
+            { label: data?.label }
+          ),
       }
     ];
 
@@ -69,30 +123,56 @@ const EditableRefdataList = ({ desc, label, refdataEndpoint }) => {
         name: 'delete',
         label: <FormattedMessage id="stripes-kint-components.editableRefdataList.delete" />,
         icon: 'trash',
-        callback: (data) => deleteRefdataValue(data.id)
+        callback: (data) => setDeleteModal({ visible: true, refdata: data }),
+        ariaLabel: (data) => intl.formatMessage(
+            { id: 'stripes-kint-components.editableRefdataList.deleteAriaLabel' },
+            { label: data?.label }
+          ),
       });
     }
     return actionArray;
   };
 
   return (
-    <ActionList
-      actionAssigner={actionAssigner}
-      columnMapping={{
+    <>
+      <ActionList
+        actionAssigner={actionAssigner}
+        columnMapping={{
         label: <FormattedMessage id="stripes-kint-components.editableRefdataList.label" />,
         value: <FormattedMessage id="stripes-kint-components.editableRefdataList.value" />
       }}
-      contentData={contentData}
-      creatableFields={{
+        contentData={contentData}
+        creatableFields={{
         value: () => false
       }}
-      createCallback={refdata?.internal ? null : (data) => editRefdataValue(data)}
-      editableFields={{
+        createCallback={refdata?.internal ? null : (data) => editRefdataValue(data)}
+        editableFields={{
         value: () => false
       }}
-      label={label}
-      visibleFields={['label', 'value']}
-    />
+        label={label}
+        visibleFields={['label', 'value']}
+      />
+      <ConfirmationModal
+        confirmLabel={
+          <FormattedMessage id="stripes-kint-components.editableRefdataList.delete" />
+        }
+        heading={
+          <FormattedMessage id="stripes-kint-components.editableRefdataList.deleteLabel" />
+        }
+        message={
+          <FormattedMessage
+            id="stripes-kint-components.editableRefdataList.deleteLabel.confirmMessage"
+            values={{ name: deleteModal?.refdata?.label }}
+          />
+        }
+        onCancel={() => setDeleteModal({ visible: false, refdata: null })}
+        onConfirm={() => {
+          deleteRefdataValue(deleteModal?.refdata?.id);
+          setDeleteModal({ visible: false, refdata: null });
+        }}
+        open={deleteModal?.visible}
+      />
+    </>
   );
 };
 

package/src/lib/EditableRefdataList/README.md

@@ -17,5 +17,8 @@ import { EditableRefdataList } from '@k-int/stripes-kint-components';
 
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
+afterQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called after the `delete`/`put`. | | ✕ |
+catchQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called with a HTTPError object when the `delete`/`put` calls fail. | `{delete: <Fires a callout of the format "<strong>Error: {label}</strong> was not deleted. {error}">}` | | ✕ |
+labelOverrides | object | An object containing translation overrides. Currently accepts: `deleteError: (err, object) => { ... output a callout message }`. | | ✕ |
 desc | String | A string corresponding to the refdataValue category, usually of the form `DomainClass.Field`. See `useRefdata` for more information. | | ✕ |
 endpoint | String | A string containing the path to the endpoint for refdata | | ✓ |

package/src/lib/FormModal/FormModal.js

@@ -40,7 +40,7 @@ const FormModal = ({
               >
                 {
                   labelOverrides.save ??
-                  <FormattedMessage id="stripes-kint-components.save" />
+                  <FormattedMessage id="stripes-kint-components.saveAndClose" />
                 }
               </Button>
               <Button

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -137,6 +137,7 @@ const SASQLookupComponent = (props) => {
                       <>
                         <SearchField
                           autoFocus
+                          id={`sasq-search-field-${id}`}
                           name="query"
                           onChange={e => {
                             if (e.target?.value) {

package/src/lib/constants/customProperties.js

@@ -5,6 +5,8 @@ export const CONTAINER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.Custo
 export const DECIMAL_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal';
 export const INTEGER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyInteger';
 export const REFDATA_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata';
+export const MULTI_REFDATA_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyMultiRefdata';
 export const REFDATA_DEFINITION_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition';
 export const TEXT_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyText';
 export const DATE_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyLocalDate';
+

package/src/lib/hooks/README.md

@@ -39,8 +39,9 @@ const { delete } = useMutateRefdataValue({
 ### Props
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-afterQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called after the `delete`/`put` | | ✓ |
-endpoint | string | The refdata endpoint | | ✓ |
+afterQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called after the `delete`/`put`. This is for ease of use, you can alternatively manually use a `.then()` on the functions returned from this hook. | | ✓ |
+catchQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called with a HTTPError object when the `delete`/`put` calls fail. This is for ease of use, you can alternatively manually use a `.catch()` on the functions returned from this hook. | | ✕ |
+endpoint | string | The refdata endpoint | | ✕ |
 id | string | The id of the refdata whose values are to be mutated | | ✕ |
 queryParams | object | An object of the form `{delete: obj1, put: obj2}`, where `obj1`/`obj2` are set of queryParameters to hand to react-query's `useMutation` for the delete/put operations respectively | | ✕ |
 returnQueryObject | object | An object of the form `{delete: bool1, put: bool2}` containing switches to return the entirety of the queryObject from useMutation for `delete` and `put` respectively. If `false`, the mutateAsync function will be destructured, if `true` the return will be the full object returned by react-query's `useMutation` | {put: false, delete: false} | ✕ |
@@ -287,4 +288,28 @@ export default Test
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
 name | String | The name of the fieldArray, used to hook into the final form state for that field. | | ✓ |
-submitWholeDeletedObject | bool | a boolean flag to ensure that a deleted object is sent whole to the backend, rather than just as an id. | false | ✕ |
+submitWholeDeletedObject | bool | a boolean flag to ensure that a deleted object is sent whole to the backend, rather than just as an id. | false | ✕ |
+
+## useAppSettings
+A hook for fetching AppSetting values
+### Basic usage
+```
+import { useAppSettings } from '@k-int/stripes-kint-components'
+...
+const data = useAppSettings({ 
+  endpoint: 'oa/settings/appSettings'
+});
+...
+```
+
+This will return a list of AppSettings. If a `keyName` is passed, this will instead return a single AppSetting object.
+
+### Props
+Name | Type | Description | default | required
+--- | --- | --- | --- | ---
+endpoint | string | The endpoint to fetch AppSettings from | | ✓ |
+sectionName | string | A string representing a section of AppSettings to filter on | | ✕ |
+keyName | string | A string representing an individual key of an AppSettings to filter on. The presence of this prop will change the output shape from Array to Object. It is not strictly necessary to use `keyName` in conjunction with `sectionName`, but keys are not guaranteed to be unique between sections. In addition it may marginally improve performance to use both, even if a key is unique, so it is recommended. | | ✕ |
+queryParams | object | A set of queryParameters to hand to react-query's `useQuery` | | ✕ |
+returnQueryObject | bool | A switch to return the entirety of the queryObject from useQuery. If `false`, the data will be destructured, if `true` the return will be the full object returned by react-query's `useQuery` | false | ✕ |
+options | object | An object of the shape SASQ_MAP (See generateKiwtQuery) to pass to the generateKiwtQuery inside. The default | `{perPage: 100, stats: false, filters: [{path: 'section', value: sectionName }, {path: 'key', value: keyName }]}` | ✕ |

package/src/lib/hooks/index.js

@@ -6,7 +6,7 @@ export { default as useKiwtSASQuery } from './useKiwtSASQuery';
 export { default as useHelperApp } from './useHelperApp';
 export { default as useLocalStorageState } from './useLocalStorageState';
 export { default as useQIndex } from './useQIndex';
-export { useSettings, useSettingSection } from './settingsHooks';
+export { useSettings, useSettingSection, useAppSettings } from './settingsHooks';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
 export { default as useCustomProperties } from './useCustomProperties';
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';

package/src/lib/hooks/settingsHooks/index.js

@@ -1,2 +1,3 @@
 export { default as useSettings } from './useSettings';
 export { default as useSettingSection } from './useSettingSection';
+export { default as useAppSettings } from './useAppSettings';

package/src/lib/hooks/settingsHooks/useAppSettings.js

@@ -0,0 +1,69 @@
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+import { generateKiwtQueryParams } from '../../utils';
+
+const useAppSettings = ({
+  endpoint,
+  keyName,
+  options,
+  returnQueryObject = false,
+  sectionName,
+  queryParams
+}) => {
+  const ky = useOkapiKy();
+
+  const defaultQueryParamObject = {
+    perPage: 100,
+    stats: false,
+  };
+
+  const namespaceArray = [endpoint];
+
+  if (sectionName) {
+    defaultQueryParamObject.filters = [
+      ...(defaultQueryParamObject.filters ?? []),
+      {
+        path: 'section',
+        value: sectionName
+      }
+    ];
+
+    namespaceArray.push(sectionName);
+  }
+
+  if (keyName) {
+    defaultQueryParamObject.filters = [
+      ...(defaultQueryParamObject.filters ?? []),
+      {
+        path: 'key',
+        value: keyName
+      }
+    ];
+
+    defaultQueryParamObject.perPage = 1;
+
+    namespaceArray.push(keyName);
+  }
+
+  const queryParamArray = generateKiwtQueryParams(options ?? defaultQueryParamObject, {});
+  namespaceArray.push(queryParamArray);
+
+  const queryObject = useQuery(
+    namespaceArray,
+    () => ky(`${endpoint}?${queryParamArray?.join('&')}`).json(),
+    queryParams
+  );
+
+
+  if (returnQueryObject) {
+    return queryObject;
+  }
+
+  if ((queryParams ?? defaultQueryParamObject)?.perPage && (queryParams ?? defaultQueryParamObject)?.perPage === 1) {
+    return queryObject?.data?.[0] ?? {};
+  }
+
+  return queryObject?.data ?? [];
+};
+
+export default useAppSettings;

package/src/lib/hooks/useCustomProperties.js

@@ -22,6 +22,11 @@ const useCustomProperties = ({
     filterKeys: {
       ContextKey: 'ctx'
     },
+    sort: [
+      {
+        path: 'weight'
+      }
+    ],
     filters: [],
     stats: false,
     max: 100,

package/src/lib/hooks/useMutateCustomProperties.js

@@ -4,6 +4,7 @@ import { useOkapiKy } from '@folio/stripes/core';
 
 const useMutateCustomProperties = ({
   afterQueryCalls,
+  catchQueryCalls,
   endpoint,
   id,
   queryParams,
@@ -20,21 +21,24 @@ const useMutateCustomProperties = ({
   const deleteQueryObject = useMutation(
     ['stripes-kint-components', 'useMutateCustomProperties', 'delete', id],
     async () => ky.delete(`${endpoint}/${id}`).json()
-      .then(afterQueryCalls?.delete),
+      .then(afterQueryCalls?.delete)
+      .catch(catchQueryCalls?.delete),
     queryParams?.delete
   );
 
   const putQueryObject = useMutation(
     ['stripes-kint-components', 'useMutateCustomProperties', 'put', id],
     async (data) => ky.put(`${endpoint}/${id}`, { json: data }).json()
-      .then(afterQueryCalls?.put),
+      .then(afterQueryCalls?.put)
+      .catch(catchQueryCalls?.put),
     queryParams?.put
   );
 
   const postQueryObject = useMutation(
     ['stripes-kint-components', 'useMutateCustomProperties', 'post'],
     async (data) => ky.post(`${endpoint}`, { json: data }).json()
-      .then(afterQueryCalls?.post),
+      .then(afterQueryCalls?.post)
+      .catch(catchQueryCalls?.post),
     queryParams?.post
   );
 

package/src/lib/hooks/useMutateRefdataValue.js

@@ -6,6 +6,7 @@ import useInvalidateRefdata from './useInvalidateRefdata';
 
 const useMutateRefdataValue = ({
   afterQueryCalls,
+  catchQueryCalls,
   endpoint,
   id,
   queryParams,
@@ -36,7 +37,8 @@ const useMutateRefdataValue = ({
       }
     ).json()
       .then(afterQueryCalls?.delete)
-      .then(() => invalidateRefdata()),
+      .then(() => invalidateRefdata())
+      .catch(catchQueryCalls?.delete),
     queryParams?.delete
   );
 
@@ -54,7 +56,8 @@ const useMutateRefdataValue = ({
       }
     ).json()
       .then(afterQueryCalls?.put)
-      .then(() => invalidateRefdata()),
+      .then(() => invalidateRefdata())
+      .catch(catchQueryCalls?.put),
     queryParams?.put
   );
 

package/styles/ActionListFieldArray.css

@@ -3,7 +3,8 @@
 .header {
   display: flex;
   justify-content: space-between;
-  padding: var(--gutter)
+  padding: var(--gutter);
+  padding-left: 0;
 }
 
 .headerText {