@k-int/stripes-kint-components 4.1.0 → 4.3.0

package/src/index.js

@@ -20,31 +20,8 @@ export {
   useSASQQueryMeta
 } from './lib/hooks';
 
-// Useful utility functions
-export {
-  boldString,
-  generateKiwtQuery,
-  generateKiwtQueryParams,
-  groupCustomPropertiesByCtx,
-  highlightString,
-  matchString,
-  refdataOptions,
-  refdataQueryKey,
-  selectorSafe,
-  typedownQueryKey,
-  parseErrorResponse,
-} from './lib/utils';
-
-// Validators
-export {
-  composeValidators,
-  composeValidatorsWithArgs,
-  invalidNumber,
-  rangeOverflow,
-  rangeUnderflow,
-  required,
-  requiredObject,
-} from './lib/utils';
+// Useful utility stuff
+export * from './lib/utils';
 
 // Contexts
 export {

package/src/lib/ActionList/ActionList.js

@@ -16,6 +16,7 @@ const propTypes = {
   defaultNewObject: PropTypes.object,
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
+  fieldProps: PropTypes.object,
   hideCreateButton: PropTypes.bool,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
@@ -37,6 +38,7 @@ const ActionList = forwardRef(({
   defaultNewObject = {},
   editableFields = {},
   fieldComponents = {},
+  fieldProps = {},
   hideCreateButton,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,

package/src/lib/ActionList/ActionListFieldArray.js

@@ -279,8 +279,15 @@ const ActionListFieldArray = forwardRef(({
                     action={action}
                     aria-describedby={ariaIds.sub}
                     aria-labelledby={ariaIds.text}
-                    disabled={editing}
-                    onClick={() => (actionFunction ? actionFunction() : () => null)}
+                    disabled={!!editing}
+                    onClick={e => {
+                      e.stopPropagation();
+                      if (actionFunction) {
+                        return actionFunction();
+                      }
+
+                      return null;
+                    }}
                     to={action.to}
                   />
                 )}
@@ -294,8 +301,15 @@ const ActionListFieldArray = forwardRef(({
               key={`action-${action.name}[${data.rowIndex}]`}
               action={action}
               ariaLabel={ariaLabel}
-              disabled={editing}
-              onClick={() => (actionFunction ? actionFunction() : () => null)}
+              disabled={!!editing}
+              onClick={e => {
+                e.stopPropagation();
+                if (actionFunction) {
+                  return actionFunction();
+                }
+
+                return null;
+              }}
               to={action.to}
             />
           );
@@ -350,13 +364,18 @@ const ActionListFieldArray = forwardRef(({
               (!cd.id && createFunction(cd)) ||
               (!!cd.id && editFunction(cd))
           ) {
-            const validateFunction = validateFields?.[key] ? validateFields?.[key](cd) : null;
-
+            const passedObject = {
+              allValues: values,
+              index: cd?.fieldIndex,
+              key,
+              name: `${cd.fieldName}.${key}`,
+              rowFieldName: cd.fieldName
+            };
+
+            const validateFunction = validateFields?.[key] ? validateFields?.[key](passedObject) : null;
             returnValue =
               fieldComponents[key] ?
-              fieldComponents[key]({
-                name: `${cd.fieldName}.${key}`
-              }) :
+              fieldComponents[key](passedObject) :
               <Field
                 autoFocus={autoFocus}
                 component={TextField}
@@ -386,7 +405,7 @@ const ActionListFieldArray = forwardRef(({
         </Headline>
         {!hideCreateButton &&
           <Button
-            disabled={editing || !createCallback}
+            disabled={!!editing || !createCallback}
             marginBottom0
             onClick={handleClickCreate}
           >

package/src/lib/ActionList/README.md

@@ -99,10 +99,10 @@ creatableFields | object\<function> | An object with keys from the `visibleField
 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. | {} | ✕ |
 defaultNewObject | object | An object to use when pushing a new entry into the ActionList fields, acting as a way to bootstrap defaults into new items | {} | ✕ |
 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. | | ✕ |
+fieldComponents | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (`allValues`: The full form values, `index`: The current fieldIndex of the editing row, `key`: The object property in question, `name`: The field name for the Field component to glue properly into final-form, `rowFieldName`: The field name in final-form for the whole row object.), 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. | | ✕ |
 hideCreateButton | boolean | A simple bool to hide the create button. Default behaviour without create action is disabled. | false | ✕ |
 onRowClick | function | A function accepting an event and the row data, fired on row click. The presence of this prop will cause the MCL to take on the interactive styling | | ✕ |
-validateFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and either return a validate function for final-form, or null | | ✕ |
+validateFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and either return a validate function for final-form, or null. The validate function will be passed the same properties as fieldComponents, above. THESE WILL NOT BE USED if fieldComponents are defined for the same key. | | ✕ |
 visibleFields | array\<String> | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList | | ✓ |
 ...mclProps | any | Any other props supplied to ActionList will be applied to the MCL directly. *WARNING* Some MCL props may override important functionality within ActionList | | ✕ |

package/src/lib/CustomProperties/Config/CustomPropertiesLookup.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 
 import CustomPropertiesLookup from './CustomPropertiesLookup';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { Button, Pane, PaneHeader } from '@folio/stripes-testing';
 import { MemoryRouter } from 'react-router-dom';
 

package/src/lib/CustomProperties/Config/CustomPropertyForm.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { TextArea, TextField } from '@folio/stripes-testing';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 
 import refdata from '../../../../test/jest/refdata';
 

package/src/lib/CustomProperties/Config/CustomPropertyView.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { KeyValue } from '@folio/stripes-testing';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { waitFor } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';

package/src/lib/CustomProperties/Edit/CustomPropertiesEditCtx.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { waitFor } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';

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

@@ -41,7 +41,6 @@ const CustomPropertiesList = ({
         customProperty => value[customProperty.value] !== undefined
       ));
     }
-    return null;
   }, [availableCustomProperties, dirtying, pristine, value]);
 
   const handleDeleteCustomProperty = (customProperty, i) => {

package/src/lib/CustomProperties/Edit/CustomPropertiesListField.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { Button, KeyValue } from '@folio/stripes-testing';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 import { waitFor } from '@testing-library/react';
 
 import { initialValues } from './testResources';

package/src/lib/CustomProperties/Edit/CustomPropertyField.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { TextArea, MultiSelect, TextInput, Datepicker } from '@folio/stripes-testing';
 
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 import CustomPropertyField from './CustomPropertyField';
 
 import { availableCustomProperties, customProperties, renderWithKintHarness } from '../../../../test/jest';

package/src/lib/CustomProperties/Edit/CustomPropertyFormCard.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 
 import CustomPropertyFormCard from './CustomPropertyFormCard';
 

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { Accordion, Button } from '@folio/stripes-testing';
 

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterField.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FieldArray } from 'react-final-form-arrays';
 
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 import { MemoryRouter } from 'react-router-dom';
 
 import CustomPropertiesFilterField from './CustomPropertiesFilterField';

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterFieldArray.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 import { waitFor } from '@testing-library/react';
 import { Button } from '@folio/stripes-testing';
 import { FieldArray } from 'react-final-form-arrays';

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterForm.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { Button } from '@folio/stripes-testing';
 import CustomPropertyFiltersForm from './CustomPropertiesFilterForm';
 

package/src/lib/CustomProperties/Filter/CustomPropertiesRule.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { Select } from '@folio/stripes-testing';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 
 import CustomPropertiesRule from './CustomPropertiesRule';
 import { renderWithKintHarness } from '../../../../test/jest';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { waitFor } from '@testing-library/react';
 

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
+import get from 'lodash/get';
 
 import { ConfirmationModal } from '@folio/stripes/components';
 import { CalloutContext } from '@folio/stripes/core';
@@ -8,10 +9,11 @@ import { useKintIntl, useMutateRefdataValue, useRefdata } from '../hooks';
 
 import ActionList from '../ActionList';
 import { required } from '../utils/validators';
-import { parseErrorResponse } from '../utils';
+import { parseErrorResponse, selectorSafe } from '../utils';
 
 const propTypes = {
   afterQueryCalls: PropTypes.object,
+  allowSpecial: PropTypes.bool,
   catchQueryCalls: PropTypes.object,
   desc: PropTypes.string,
   intlKey: PropTypes.string,
@@ -26,6 +28,7 @@ const propTypes = {
 
 const EditableRefdataList = ({
   afterQueryCalls,
+  allowSpecial = false, // special characters will be directly stripped out of the value before it is sent to the backend
   catchQueryCalls,
   desc,
   intlKey: passedIntlKey,
@@ -170,13 +173,23 @@ const EditableRefdataList = ({
         creatableFields={{
           value: () => false
         }}
-        createCallback={refdata?.internal ? null : (data) => editRefdataValue(data)}
+        createCallback={
+          refdata?.internal ?
+            null :
+            (data) => {
+              if (allowSpecial) {
+                editRefdataValue(data);
+              } else {
+                editRefdataValue({ ...data, value: selectorSafe(data?.label)?.replaceAll('%20', ' ') });
+              }
+            }
+        }
         editableFields={{
           value: () => false
         }}
         label={label}
         validateFields={{
-          label: () => required
+          label: required
         }}
         visibleFields={['label', 'value']}
       />

package/src/lib/EditableRefdataList/README.md

@@ -18,6 +18,7 @@ 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`. | | ✕ |
+allowSpecial | boolean | A boolean to turn off/on the stripping out of special characters and replacing them with `_`. Generally turning this on will cause problems with queries to KIWT endpoints and internally with Stripes filters, where a refdata value includes `&&`, `||`, `\` or `"`. | false | ✕ |
 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. | | ✕ |

package/src/lib/EditableSettingsList/EditableSettingsListFieldArray.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 import { FieldArray } from 'react-final-form-arrays';
 import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 

package/src/lib/EditableSettingsList/SettingField/EditSettingValue.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 
 import EditSettingValue from './EditSettingValue';
 

package/src/lib/EditableSettingsList/SettingField/RenderSettingValue.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import RenderSettingValue from './RenderSettingValue';
 
 import { renderWithKintHarness } from '../../../../test/jest/helpers';

package/src/lib/EditableSettingsList/SettingField/SettingField.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 
 import { waitFor } from '@testing-library/react';
 
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 import { Button } from '@folio/stripes-testing';
 import { Field } from 'react-final-form';
 import SettingField from './SettingField';

package/src/lib/ResponsiveButtonGroup/README.md

@@ -26,6 +26,7 @@ Name | type | description | default | required
 --- | --- | --- | --- | ---
 children | | Set of `<Button>`s. |  |
 className | string | Add a custom className to ButtonGroup | |
+dropdownTriggerProps | object | Extra props to pass to the Stripes Button which triggers the dropdown menu. | |
 fullWidth | bool | Forces the button group width to 100% |
 selectedIndex | integer | Allows the implementor to pass off "primary" style management to the component. This will style the requisite index as 'primary', if that index is not hidden, or the dropdown menu if it is. |
 tagName | string | Set the HTML tag used to wrap the button set. | 'div' |

package/src/lib/ResponsiveButtonGroup/ResponsiveButtonGroup.js

@@ -17,7 +17,9 @@ import useResponsiveButtonGroupSizing from './useResponsiveButtonGroupSizing';
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  dropdownTriggerProps: PropTypes.object,
   fullWidth: PropTypes.bool,
+  marginBottom0: PropTypes.bool,
   selectedIndex: PropTypes.number,
   tagName: PropTypes.string,
 };
@@ -43,7 +45,9 @@ const ResponsiveButtonGroup = (props) => {
   const {
     children: childButtons, // These MUST consist only of Button components
     className,
+    dropdownTriggerProps = {},
     fullWidth = false, // Only bother with this when buttonGroupWidth < ContainerWidth
+    marginBottom0, // Will ONLL control the margin of the dropdown button
     selectedIndex,
     tagName: Tag = 'div',
     ...rest
@@ -61,21 +65,29 @@ const ResponsiveButtonGroup = (props) => {
 
   const buttonThreshold = calculateCumulativeThreshold(cachedSizeArray, containerWidth);
 
-  const renderActionMenuToggle = useCallback(({ onToggle, triggerRef, keyHandler, open, ariaProps, getTriggerProps }) => (
+  const renderActionMenuToggle = useCallback(({ displayButtons, onToggle, triggerRef, keyHandler, open, ariaProps, getTriggerProps }) => (
     <Button
       ref={triggerRef}
-      buttonClass={css.dropdownButtonClass}
+      aria-label="menu"
+      buttonClass={
+        classnames(
+          css.width100,
+          { [`${css.dropdownButtonClass}`]: (displayButtons?.length ?? 0) > 0 },
+          { [`${css.marginBottom}`]: !marginBottom0 },
+          { [`${css.marginBottom0}`]: marginBottom0 }
+        )
+      }
       buttonStyle={selectedIndex > buttonThreshold ? 'primary' : 'default'}
-      marginBottom0
       onClick={onToggle}
       onKeyDown={keyHandler}
       type="button"
       {...getTriggerProps()}
       {...ariaProps}
+      {...dropdownTriggerProps}
     >
       <Icon icon={open ? 'triangle-up' : 'triangle-down'} iconPosition="end" />
     </Button>
-  ), [buttonThreshold, selectedIndex]);
+  ), [buttonThreshold, dropdownTriggerProps, marginBottom0, selectedIndex]);
 
   const displayButtons = useMemo(() => (
     buttons?.slice(0, buttonThreshold + 1)?.map((button, index) => {
@@ -110,7 +122,7 @@ const ResponsiveButtonGroup = (props) => {
         key="responsiveButtonGroup-dropdown-toggle"
         className={css.dropdownClass}
         renderMenu={renderActionMenuContent}
-        renderTrigger={renderActionMenuToggle}
+        renderTrigger={(triggerProps) => renderActionMenuToggle({ displayButtons, ...triggerProps })}
       />
     ]
   ), [displayButtons, renderActionMenuContent, renderActionMenuToggle]);

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -10,13 +10,14 @@ import {
 } from '@folio/stripes/core';
 
 import {
+  CollapseFilterPaneButton,
+  ExpandFilterPaneButton,
   SearchAndSortQuery,
   PersistedPaneset,
 } from '@folio/stripes/smart-components';
 
 import {
   Button,
-  IconButton,
   Icon,
   Pane,
   PaneMenu,
@@ -137,6 +138,27 @@ const SASQLookupComponent = forwardRef((props, ref) => {
 
           const Body = RenderBody ?? TableBody;
 
+          const {
+            filterPaneFirstMenu,
+            filterPaneLastMenu,
+            ...restOfFilterPaneProps
+            } = filterPaneProps;
+          const {
+            mainPaneFirstMenu,
+            mainPaneLastMenu,
+            ...restOfMainPaneProps
+          } = mainPaneProps;
+
+          const internalStateProps = {
+            activeFilters,
+            filterCount,
+            filterPaneVisible,
+            searchChanged,
+            searchValue,
+            setFilterPaneVisible,
+            toggleFilterPane
+          };
+
           return (
             <PersistedPaneset
               appId={namespace}
@@ -146,17 +168,19 @@ const SASQLookupComponent = forwardRef((props, ref) => {
               {filterPaneVisible &&
                 <Pane
                   defaultWidth="20%"
+                  firstMenu={filterPaneFirstMenu ?
+                    filterPaneFirstMenu(internalStateProps) :
+                    null
+                  }
                   id={`${id}-filter-pane`}
-                  lastMenu={
+                  lastMenu={filterPaneLastMenu ?
+                    filterPaneLastMenu(internalStateProps) :
                     <PaneMenu>
-                      <IconButton
-                        icon="caret-left"
-                        onClick={() => setFilterPaneVisible(false)}
-                      />
+                      <CollapseFilterPaneButton onClick={toggleFilterPane} />
                     </PaneMenu>
                   }
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
-                  {...filterPaneProps}
+                  {...restOfFilterPaneProps}
                 >
                   <form onSubmit={onSubmitSearch}>
                     <FilterPaneHeaderComponent />
@@ -212,17 +236,19 @@ const SASQLookupComponent = forwardRef((props, ref) => {
               }
               <Pane
                 defaultWidth="fill"
-                firstMenu={!filterPaneVisible ?
-                  <PaneMenu>
-                    <IconButton
-                      badgeCount={filterCount}
-                      icon="caret-right"
-                      onClick={() => setFilterPaneVisible(true)}
-                    />
-                  </PaneMenu>
-                :
-                null}
+                firstMenu={mainPaneFirstMenu ?
+                  mainPaneFirstMenu(internalStateProps) :
+                  !filterPaneVisible ?
+                    <PaneMenu>
+                      <ExpandFilterPaneButton filterCount={filterCount} onClick={toggleFilterPane} />
+                    </PaneMenu> :
+                    null
+                }
                 id={`${id}-main-pane`}
+                lastMenu={mainPaneLastMenu ?
+                  mainPaneLastMenu(internalStateProps) :
+                  null
+                }
                 noOverflow
                 padContent={false}
                 paneSub={
@@ -231,7 +257,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                     overrideValue: labelOverrides?.foundValues
                   }, { total: data?.total })
                 }
-                {...mainPaneProps}
+                {...restOfMainPaneProps}
               >
                 <Body
                   data={data}

package/src/lib/hooks/useIntlKeyStore.js

@@ -1,7 +1,7 @@
 // We can use hooks within zustand store functions without violating the laws of hooks
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useNamespace } from '@folio/stripes/core';
-import create from 'zustand';
+import { create } from 'zustand';
 
 const useIntlKeyStore = create((set, get) => ({
   intlKeys: {},