@k-int/stripes-kint-components 5.31.3 → 5.32.0

package/es/lib/SASQLookupComponent/SASQLookupComponent.test.js

@@ -0,0 +1,532 @@
+"use strict";
+
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _react2 = require("@folio/jest-config-stripes/testing-library/react");
+var _core = require("@folio/stripes/core");
+var _components = require("@folio/stripes/components");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _reactQuery = require("react-query");
+var _jest = require("../../../test/jest");
+var _SASQLookupComponent = _interopRequireDefault(require("./SASQLookupComponent"));
+var _helpers = _interopRequireDefault(require("../../../test/helpers"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+jest.mock('react-query', () => {
+  const {
+    mockReactQuery
+  } = jest.requireActual('@folio/stripes-erm-testing');
+  return _objectSpread(_objectSpread(_objectSpread({}, jest.requireActual('react-query')), mockReactQuery), {}, {
+    useQuery: jest.fn((_key, func, opts) => {
+      const defaultData = {
+        results: [{
+          id: 1,
+          someData: false,
+          test: 'wibble'
+        }, {
+          id: 2,
+          someData: true,
+          test: 'wobble'
+        }],
+        totalRecords: 2
+      };
+
+      // Mock ensures the function is called so we can test outcomes
+      if (opts.enabled) {
+        func();
+      }
+      if (opts.select) {
+        return {
+          data: opts.select(defaultData),
+          extraProp: 'extraProp'
+        };
+      }
+      return {
+        data: defaultData,
+        extraProp: 'extraProp'
+      };
+    })
+  });
+});
+
+// TODO why does unmocking react-router-dom cause module hierarchy issues?
+// EXAMPLE mocking react-router-dom
+const mockHistoryPush = jest.fn();
+const mockHistoryReplace = jest.fn();
+jest.mock('react-router-dom', () => {
+  const {
+    mockReactRouterDom
+  } = jest.requireActual('@folio/stripes-erm-testing');
+  const actualReactRouterDom = jest.requireActual('react-router-dom');
+  return _objectSpread(_objectSpread(_objectSpread({}, actualReactRouterDom), mockReactRouterDom), {}, {
+    useHistory: jest.fn(() => ({
+      push: mockHistoryPush,
+      replace: mockHistoryReplace
+    })),
+    useLocation: actualReactRouterDom.useLocation // Bit ugly... idk why I need to put this back specifically like this instead of just unmocking react-router-dom
+  });
+});
+jest.mock('./TableBody', () => jest.fn(_ref => {
+  let {
+    mclProps
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "TableBody"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      onClick: () => mclProps.onNeedMoreData(null, 1),
+      children: "Next Page"
+    })]
+  });
+}));
+jest.mock('../SearchKeyControl', () => jest.fn(() => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  children: "SearchKeyControl"
+})));
+const fetchParameters = {
+  endpoint: '/wibble',
+  SASQ_MAP: {
+    searchKey: 'test.test1.test2,test3',
+    filterKeys: {
+      status: 'status.value',
+      wobble: 'wobble.value'
+    }
+  }
+};
+const baseSASQLookupProps = {
+  id: 'testing-sasq-lookup-component',
+  path: 'the-path',
+  // Required as it's needed for children
+  fetchParameters
+};
+const baseSASQObj = {
+  filters: '',
+  qindex: undefined,
+  query: ''
+};
+const getBaseExpectedQueryNamespace = function () {
+  let obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : baseSASQLookupProps;
+  return ['@folio/test-implementor', 'SASQ', 'testing-sasq-lookup-component', 'viewAll', obj, 1];
+};
+let renderComponent;
+let theRef;
+describe('SASQLookupComponent', () => {
+  describe.each([{
+    testLabel: 'default behaviour',
+    props: baseSASQLookupProps,
+    expectQueryFire: false,
+    expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1'
+  }, {
+    testLabel: 'with searchable indexes',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      searchableIndexes: [{
+        key: 'name',
+        label: 'Name'
+      }]
+    }),
+    expectQueryFire: false,
+    // No actual query yet
+    expectedSearchKeyControl: true
+  }, {
+    testLabel: 'starting with filters',
+    props: baseSASQLookupProps,
+    startingLocation: '/wibble?filters=status.testFilter',
+    expectedQueryNamespace: getBaseExpectedQueryNamespace({
+      filters: 'status.testFilter',
+      qindex: undefined,
+      query: ''
+    }),
+    expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedMockKyCallAfterSearch: '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedRef: {
+      lookupQueryProps: {
+        data: {
+          results: [{
+            'id': 1,
+            'someData': false,
+            'test': 'wibble'
+          }, {
+            'id': 2,
+            'someData': true,
+            'test': 'wobble'
+          }],
+          totalRecords: 2
+        },
+        'extraProp': 'extraProp'
+      },
+      queryParams: '?filters=status.value%3D%3DtestFilter&stats=true&page=1'
+    }
+  }, {
+    testLabel: 'starting with qindex and no query',
+    props: baseSASQLookupProps,
+    startingLocation: '/wibble?qindex=test.test1.test2',
+    expectQueryFire: false,
+    expectedQueryNamespace: getBaseExpectedQueryNamespace({
+      filters: '',
+      qindex: 'test.test1.test2',
+      query: ''
+    }),
+    expectedMockKyCallAfterSearch: '/wibble?match=test.test1.test2&term=some%20test%20query&stats=true&page=1'
+  }, {
+    testLabel: 'starting with qindex and query',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      sasqProps: {
+        initialSearchState: {
+          query: 'hello',
+          qindex: 'test.test1.test2'
+        }
+      }
+    }),
+    startingLocation: '/wibble?qindex=some.new.qindex.path&query=hello',
+    expectedQueryNamespace: getBaseExpectedQueryNamespace({
+      filters: '',
+      qindex: 'some.new.qindex.path',
+      query: 'hello'
+    }),
+    expectedMockKyCall: '/wibble?match=some.new.qindex.path&term=hello&stats=true&page=1',
+    expectedMockKyCallAfterSearch: '/wibble?match=some.new.qindex.path&term=some%20test%20query&stats=true&page=1',
+    expectedRef: {
+      lookupQueryProps: {
+        data: {
+          results: [{
+            'id': 1,
+            'someData': false,
+            'test': 'wibble'
+          }, {
+            'id': 2,
+            'someData': true,
+            'test': 'wobble'
+          }],
+          totalRecords: 2
+        },
+        'extraProp': 'extraProp'
+      },
+      queryParams: '?match=some.new.qindex.path&term=hello&stats=true&page=1'
+    }
+  }, {
+    testLabel: 'with FilterComponent',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      FilterComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "FilterComponent"
+      })
+    }),
+    expectQueryFire: false,
+    expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedFilterComponent: 'FilterComponent'
+  }, {
+    testLabel: 'with filter pane disabled',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      hasFilterPane: false
+    }),
+    expectQueryFire: false,
+    expectedSearchField: false,
+    expectedFilterPane: false
+  }, {
+    testLabel: 'with FilterHeaderComponent',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      FilterPaneHeaderComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "FilterPaneHeaderComponent"
+      })
+    }),
+    expectQueryFire: false,
+    expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedFilterHeaderComponent: 'FilterPaneHeaderComponent'
+  }, {
+    testLabel: 'no search field mode',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      noSearchField: true
+    }),
+    expectQueryFire: false,
+    expectedSearchField: false
+  }, {
+    testLabel: 'with RenderBody',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      RenderBody: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "TheBodyComponent"
+      })
+    }),
+    expectQueryFire: false,
+    expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedBodyComponent: 'TheBodyComponent'
+  }, {
+    testLabel: 'with custom lookupQueryNamespaceGenerator',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      lookupQueryNamespaceGenerator: _ref2 => {
+        let {
+          currentPage,
+          namespace,
+          id: passedId
+        } = _ref2;
+        return ["testing-".concat(currentPage), "testing-".concat(namespace), "testing-".concat(passedId)];
+      }
+    }),
+    expectedQueryNamespace: ['testing-1', 'testing-@folio/test-implementor', 'testing-testing-sasq-lookup-component'],
+    startingLocation: '/wibble?filters=status.testFilter',
+    expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedMockKyCallAfterSearch: '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    expectedRef: {
+      lookupQueryProps: {
+        data: {
+          results: [{
+            'id': 1,
+            'someData': false,
+            'test': 'wibble'
+          }, {
+            'id': 2,
+            'someData': true,
+            'test': 'wobble'
+          }],
+          totalRecords: 2
+        },
+        'extraProp': 'extraProp'
+      },
+      queryParams: '?filters=status.value%3D%3DtestFilter&stats=true&page=1'
+    }
+  }, {
+    testLabel: 'with lookupResponseTransform',
+    props: _objectSpread(_objectSpread({}, baseSASQLookupProps), {}, {
+      sasqProps: {
+        initialSearchState: {
+          query: 'test',
+          qindex: 'test.test1.test2'
+        }
+      },
+      // Wrap results in an extra object to prove transform works
+      lookupResponseTransform: resp => ({
+        originalData: resp,
+        transformed: true
+      })
+    }),
+    startingLocation: '/wibble?query=test',
+    expectedQueryNamespace: getBaseExpectedQueryNamespace({
+      filters: '',
+      qindex: undefined,
+      query: 'test'
+    }),
+    expectedMockKyCall: '/wibble?match=test.test1.test2&match=test3&term=test&stats=true&page=1',
+    expectedRef: {
+      lookupQueryProps: {
+        data: {
+          originalData: {
+            results: [{
+              'id': 1,
+              'someData': false,
+              'test': 'wibble'
+            }, {
+              'id': 2,
+              'someData': true,
+              'test': 'wobble'
+            }],
+            totalRecords: 2
+          },
+          transformed: true
+        },
+        'extraProp': 'extraProp'
+      },
+      queryParams: '?match=test.test1.test2&match=test3&term=test&stats=true&page=1'
+    },
+    expectedNumberOfResults: 0
+  }])('$testLabel', _ref3 => {
+    let {
+      props,
+      startingLocation = '/wibble',
+      expectQueryFire = true,
+      expectedQueryNamespace = getBaseExpectedQueryNamespace(baseSASQObj),
+      expectedMockKyCall = '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&stats=true&page=1',
+      expectedMockKyCallAfterSearch = '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&stats=true&page=1',
+      expectedFilterComponent,
+      expectedFilterHeaderComponent,
+      expectedFilterPane = true,
+      expectedBodyComponent,
+      expectedNumberOfResults = 2,
+      expectedSearchField = true,
+      expectedSearchKeyControl = false,
+      expectedRef
+    } = _ref3;
+    beforeEach(() => {
+      // CLEAR MOCKS
+      _core.mockKy.mockClear();
+      _reactQuery.useQuery.mockClear();
+
+      // CLEAR LOCAL STORAGE to ensure filter pane starts open
+      window.localStorage.clear();
+
+      // SET UP REF
+      theRef = /*#__PURE__*/(0, _react.createRef)();
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+        initialEntries: [startingLocation],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQLookupComponent.default, _objectSpread(_objectSpread({
+          ref: theRef
+        }, props), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "CHILD COMPONENT"
+          })
+        }))
+      }), undefined, _helpers.default);
+    });
+    test('renders children', () => {
+      const {
+        getByText
+      } = renderComponent;
+      expect(getByText('CHILD COMPONENT')).toBeInTheDocument();
+    });
+    test('renders the main pane', async () => {
+      await (0, _stripesErmTesting.Pane)({
+        id: "".concat(props.id, "-main-pane")
+      }).exists();
+    });
+
+    // This MUST happen before the Searching block as that will clear the mocks
+    describe('Initial lookup', () => {
+      // Called once without SASQ props, then once without page, then finally as expected, so call 2
+      test('useQuery namespace was as expected', () => {
+        expect(_reactQuery.useQuery.mock.calls[3][0]).toEqual(expectedQueryNamespace);
+      });
+      if (expectQueryFire) {
+        test('mockKy was called with expected values', () => {
+          expect(_core.mockKy).toHaveBeenCalledWith(expectedMockKyCall);
+        });
+        test('ref has gained lookup data', async () => {
+          await (0, _react2.waitFor)(() => {
+            expect(theRef.current).toEqual(expectedRef);
+          });
+        });
+      } else {
+        test('mockKy was not called', () => {
+          expect(_core.mockKy).toHaveBeenCalledTimes(0);
+        });
+      }
+    });
+    describe('Searching', () => {
+      if (expectedSearchKeyControl) {
+        test('renders SearchKeyControl', () => {
+          const {
+            getByText
+          } = renderComponent;
+          expect(getByText('SearchKeyControl')).toBeInTheDocument();
+        });
+      }
+      if (!expectedSearchField) {
+        test('does not render SearchField', async () => {
+          await (0, _stripesErmTesting.SearchField)().absent();
+        });
+      } else {
+        test('renders SearchField', async () => {
+          await (0, _stripesErmTesting.SearchField)().exists();
+        });
+        test('mockKy has not yet been called with expected search', async () => {
+          await (0, _react2.waitFor)(() => {
+            expect(_core.mockKy).not.toHaveBeenCalledWith(expectedMockKyCallAfterSearch);
+          });
+        });
+        describe('running a search', () => {
+          beforeEach(async () => {
+            _core.mockKy.mockClear();
+            await (0, _react2.waitFor)(async () => {
+              await (0, _stripesErmTesting.SearchField)().fillIn('some test query');
+              await (0, _stripesErmTesting.Button)('Search').click();
+            });
+          });
+          test('mockKy behaves as expected after search', async () => {
+            await (0, _react2.waitFor)(() => {
+              expect(_core.mockKy).toHaveBeenCalledWith(expectedMockKyCallAfterSearch);
+            });
+          });
+          describe('resetting search', () => {
+            beforeEach(async () => {
+              _core.mockKy.mockClear();
+              await (0, _react2.waitFor)(async () => {
+                await (0, _stripesErmTesting.Button)('Reset all').click();
+              });
+            });
+            if (expectQueryFire) {
+              test('mockKy was called with expected values after reset', async () => {
+                await (0, _react2.waitFor)(() => {
+                  expect(_core.mockKy).toHaveBeenCalledWith(expectedMockKyCall);
+                });
+              });
+            } else {
+              test('mockKy was not called  after reset', () => {
+                expect(_core.mockKy).toHaveBeenCalledTimes(0);
+              });
+            }
+          });
+        });
+      }
+    });
+
+    // TESTING TOTAL RECORDS DISPLAY
+    test('displays the correct number of found values', async () => {
+      // SASQ uses paneSub for "found X values"
+      await (0, _stripesErmTesting.Pane)({
+        subtitle: "Found ".concat(expectedNumberOfResults, " values")
+      }).exists();
+    });
+    if (expectedBodyComponent) {
+      test('renders the RenderBody', () => {
+        const {
+          getByText
+        } = renderComponent;
+        expect(getByText(expectedBodyComponent)).toBeInTheDocument();
+      });
+    } else {
+      test('renders the TableBody', () => {
+        const {
+          getByText
+        } = renderComponent;
+        expect(getByText('TableBody')).toBeInTheDocument();
+      });
+    }
+    if (expectedFilterPane) {
+      describe('Filter pane', () => {
+        test('renders the filter pane', async () => {
+          await (0, _stripesErmTesting.Pane)({
+            id: "".concat(props.id, "-filter-pane")
+          }).exists();
+        });
+        test('collapse filter pane button exists', async () => {
+          await (0, _stripesErmTesting.IconButton)('caret-left').exists();
+        });
+        test('expand filter pane button does not exist', async () => {
+          await (0, _stripesErmTesting.IconButton)('caret-right').absent();
+        });
+        describe('toggling the filter pane', () => {
+          beforeEach(async () => {
+            // Find the collapse button in the filter pane
+            await (0, _react2.waitFor)(async () => {
+              await (0, _stripesErmTesting.IconButton)('caret-left').click();
+            });
+          });
+          test('expand button appears in main pane', async () => {
+            await (0, _stripesErmTesting.IconButton)('caret-right').exists();
+          });
+          test('filter pane is removed from DOM', async () => {
+            await (0, _stripesErmTesting.Pane)({
+              id: "".concat(props.id, "-filter-pane")
+            }).absent();
+          });
+        });
+        if (expectedFilterComponent) {
+          test('FilterComponent renders', () => {
+            const {
+              getByText
+            } = renderComponent;
+            expect(getByText(expectedFilterComponent)).toBeInTheDocument();
+          });
+        }
+        if (expectedFilterHeaderComponent) {
+          test('FilterHeaderComponent renders', () => {
+            const {
+              getByText
+            } = renderComponent;
+            expect(getByText(expectedFilterHeaderComponent)).toBeInTheDocument();
+          });
+        }
+      });
+    }
+  });
+});

package/es/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -10,34 +10,43 @@ var _reactRouterDom = require("react-router-dom");
 var _components = require("@folio/stripes/components");
 var _NoResultsMessage = _interopRequireDefault(require("../../NoResultsMessage"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["formatter"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const TableBody = _ref => {
+  var _query$sort, _match$params2;
   let {
-    data,
-    error,
-    fetchNextPage,
-    filterPaneVisible,
-    intlKey: passedIntlKey,
-    intlNS: passedIntlNS,
-    isError,
-    isLoading,
-    labelOverrides = {},
-    match,
-    mclProps: {
-      formatter = {},
-      ...mclProps
-    } = {},
-    noResultsProps = {},
-    onSort,
-    path,
-    resultColumns,
-    rowNavigation = true,
-    // Default navigation onRowClick
-    getNavigationIdentifier = row => row?.id,
-    toggleFilterPane,
-    query
-  } = _ref;
-  const sortOrder = query.sort ?? '';
+      data,
+      error,
+      fetchNextPage,
+      filterPaneVisible,
+      intlKey: passedIntlKey,
+      intlNS: passedIntlNS,
+      isError,
+      isLoading,
+      labelOverrides = {},
+      match,
+      mclProps: {
+        formatter = {}
+      } = {},
+      noResultsProps = {},
+      onSort,
+      path,
+      resultColumns,
+      rowNavigation = true,
+      // Default navigation onRowClick
+      getNavigationIdentifier = row => row === null || row === void 0 ? void 0 : row.id,
+      toggleFilterPane,
+      query
+    } = _ref,
+    mclProps = _objectWithoutProperties(_ref.mclProps, _excluded);
+  const sortOrder = (_query$sort = query.sort) !== null && _query$sort !== void 0 ? _query$sort : '';
   const history = (0, _reactRouterDom.useHistory)();
   const location = (0, _reactRouterDom.useLocation)();
   const onNeedMoreData = (_askAmount, index) => {
@@ -52,9 +61,10 @@ const TableBody = _ref => {
   // Build the list of visible columns
   const visibleColumns = resultColumns.map(e => e.propertyPath);
   const getRowUrl = (0, _react.useCallback)(rowData => {
-    const baseUrl = `${path}/${getNavigationIdentifier(rowData)}`;
+    var _location$search;
+    const baseUrl = "".concat(path, "/").concat(getNavigationIdentifier(rowData));
     return {
-      url: `${baseUrl}${location?.search}`,
+      url: "".concat(baseUrl).concat((_location$search = location === null || location === void 0 ? void 0 : location.search) !== null && _location$search !== void 0 ? _location$search : ''),
       path,
       baseUrl,
       location
@@ -63,10 +73,13 @@ const TableBody = _ref => {
   const getEnhancedFormatter = (0, _react.useCallback)(() => {
     const enhancedFormatter = {};
     for (const [key, value] of Object.entries(formatter)) {
-      enhancedFormatter[key] = item => value({
-        ...item,
-        defaultRowUrl: getRowUrl(item)
-      });
+      if (typeof value === 'function') {
+        enhancedFormatter[key] = item => value(_objectSpread(_objectSpread({}, item), {}, {
+          defaultRowUrl: getRowUrl(item)
+        }));
+      } else {
+        enhancedFormatter[key] = value;
+      }
     }
     return enhancedFormatter;
   }, [formatter, getRowUrl]);
@@ -79,21 +92,25 @@ const TableBody = _ref => {
     return null;
   }, [getRowUrl, history, rowNavigation]);
   const isSelected = (0, _react.useCallback)(_ref2 => {
+    var _match$params;
     let {
       item
     } = _ref2;
-    return getNavigationIdentifier(item) === match?.params?.id;
-  }, [getNavigationIdentifier, match?.params?.id]);
-  const NoResultsComponent = (0, _react.useMemo)(() => noResultsProps?.component ?? _NoResultsMessage.default, [noResultsProps?.component]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, {
+    return getNavigationIdentifier(item) === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
+  }, [getNavigationIdentifier, match === null || match === void 0 || (_match$params2 = match.params) === null || _match$params2 === void 0 ? void 0 : _match$params2.id]);
+  const NoResultsComponent = (0, _react.useMemo)(() => {
+    var _noResultsProps$compo;
+    return (_noResultsProps$compo = noResultsProps === null || noResultsProps === void 0 ? void 0 : noResultsProps.component) !== null && _noResultsProps$compo !== void 0 ? _noResultsProps$compo : _NoResultsMessage.default;
+  }, [noResultsProps === null || noResultsProps === void 0 ? void 0 : noResultsProps.component]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, _objectSpread({
     autosize: true,
     columnMapping: columnMapping,
-    contentData: data?.results,
+    contentData: data === null || data === void 0 ? void 0 : data.results,
     formatter: getEnhancedFormatter() // Pass enhanced formatter
     ,
     hasMargin: true,
     interactive: rowNavigation,
-    isEmptyMessage: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoResultsComponent, {
+    isEmptyMessage: /*#__PURE__*/(0, _jsxRuntime.jsx)(NoResultsComponent, _objectSpread({}, _objectSpread({
       error,
       filterPaneIsVisible: filterPaneVisible,
       intlKey: passedIntlKey,
@@ -102,9 +119,8 @@ const TableBody = _ref => {
       isLoading,
       labelOverrides,
       searchTerm: query.query,
-      toggleFilterPane,
-      ...noResultsProps // Anything passed in directly takes precedence
-    }),
+      toggleFilterPane
+    }, noResultsProps))),
     isSelected: isSelected,
     onHeaderClick: onSort,
     onNeedMoreData: onNeedMoreData,
@@ -113,9 +129,8 @@ const TableBody = _ref => {
     sortDirection: sortOrder.startsWith('-') ? 'descending' : 'ascending',
     sortOrder: sortOrder.replace(/^-/, '').replace(/,.*/, ''),
     totalCount: data.totalRecords,
-    visibleColumns: visibleColumns,
-    ...mclProps
-  });
+    visibleColumns: visibleColumns
+  }, mclProps));
 };
 TableBody.propTypes = {
   data: _propTypes.default.shape({