@k-int/stripes-kint-components 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,15 +1,19 @@
-## 2.3.3 2022-04-04
-  * Fixed inconsistent `retiredName` labelOverride function behaviour, where in `filters` the function accepted the name, and in `view` the function accepted the entire object. The behaviour has been standardised to be the name alone in both scenarios.
-  * Fixed improper custom property count behaviour in view mode, now only _set_ primary properties are included in the count.
-
-## 2.3.2 2022-04-01
+## 2.4.0 2022-04-21
+  * Custom Property component fixes
   * Fix to actionAssigner callback pattern
   * Tweak to remove marginBottom0 warning
   * FormModal buttons have marginBottom0 prop on them now
   * Fixed issue where cusotm property updates would not be reflected on the open view pane in settings
-
-## 2.3.1 2022-03-28
-  * Custom Property component fixes
+  * Fixed inconsistent `retiredName` labelOverride function behaviour, where in `filters` the function accepted the name, and in `view` the function accepted the entire object. The behaviour has been standardised to be the name alone in both scenarios.
+  * Fixed improper custom property count behaviour in view mode, now only _set_ primary properties are included in the count.
+  * ActionListFieldArray changed autofocus to autoFocus to avoid react console noise
+  * Refactored SASQ Components to fix various bugs/oddities
+    * TableBody default now exported as SASQTableBody from module
+    * Table now no longer redraws on row click
+    * Formatting tweaks to fix horizontal scroll issue
+    * Manually clearing the search field now has the same effect as clicking the "x" button to clear, ensuring the items are refetched without a search term.
+    * Implementor can pass props to the filter pane via "filterPaneProps" on SASQRoute/SASQLookupComponent
+    * boldString, highlightString, matchString util functions
 
 ## 2.3.0 2022-03-25
   * FormModal

package/es/index.js

@@ -140,7 +140,7 @@ Object.defineProperty(exports, "RefdataButtons", {
 Object.defineProperty(exports, "SASQLookupComponent", {
   enumerable: true,
   get: function get() {
-    return _SASQLookupComponent.default;
+    return _SASQLookupComponent.SASQLookupComponent;
   }
 });
 Object.defineProperty(exports, "SASQRoute", {
@@ -149,6 +149,12 @@ Object.defineProperty(exports, "SASQRoute", {
     return _SASQRoute.default;
   }
 });
+Object.defineProperty(exports, "SASQTableBody", {
+  enumerable: true,
+  get: function get() {
+    return _SASQLookupComponent.TableBody;
+  }
+});
 Object.defineProperty(exports, "SASQViewComponent", {
   enumerable: true,
   get: function get() {
@@ -185,6 +191,12 @@ Object.defineProperty(exports, "Typedown", {
     return _Typedown.default;
   }
 });
+Object.defineProperty(exports, "boldString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.boldString;
+  }
+});
 Object.defineProperty(exports, "composeValidators", {
   enumerable: true,
   get: function get() {
@@ -210,12 +222,24 @@ Object.defineProperty(exports, "groupCustomPropertiesByCtx", {
     return _utils.groupCustomPropertiesByCtx;
   }
 });
+Object.defineProperty(exports, "highlightString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.highlightString;
+  }
+});
 Object.defineProperty(exports, "invalidNumber", {
   enumerable: true,
   get: function get() {
     return _validators.invalidNumber;
   }
 });
+Object.defineProperty(exports, "matchString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.matchString;
+  }
+});
 Object.defineProperty(exports, "refdataOptions", {
   enumerable: true,
   get: function get() {
@@ -371,7 +395,7 @@ var _SearchField = _interopRequireDefault(require("./lib/SearchField"));
 
 var _SASQRoute = _interopRequireDefault(require("./lib/SASQRoute"));
 
-var _SASQLookupComponent = _interopRequireDefault(require("./lib/SASQLookupComponent"));
+var _SASQLookupComponent = require("./lib/SASQLookupComponent");
 
 var _SASQViewComponent = _interopRequireDefault(require("./lib/SASQViewComponent"));
 

package/es/lib/ActionList/ActionListFieldArray.js

@@ -322,7 +322,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
               returnObj[key] = fieldComponents[key] ? fieldComponents[key]({
                 name: "".concat(fieldName, ".").concat(key)
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-                autofocus: fieldIndex === 0,
+                autoFocus: fieldIndex === 0,
                 component: _components.TextField,
                 marginBottom0: true,
                 name: "".concat(fieldName, ".").concat(key),

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactIntl = require("react-intl");
@@ -19,14 +17,16 @@ var _smartComponents = require("@folio/stripes/smart-components");
 
 var _components = require("@folio/stripes/components");
 
-var _NoResultsMessage = _interopRequireDefault(require("../NoResultsMessage"));
-
 var _utils = require("../utils");
 
 var _hooks = require("../hooks");
 
+var _TableBody = _interopRequireDefault(require("./TableBody"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["data"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (function () {
@@ -48,6 +48,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -64,32 +68,26 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
   return a;
 };
 
-var SASQLookupComponent = function SASQLookupComponent(_ref) {
+var SASQLookupComponent = function SASQLookupComponent(props) {
   var _totalData$pages$redu, _totalData$pages;
 
-  var _children = _ref.children,
-      _ref$fetchParameters = _ref.fetchParameters,
-      fetchParameters = _ref$fetchParameters === void 0 ? {} : _ref$fetchParameters,
-      _ref$FilterPaneHeader = _ref.FilterPaneHeaderComponent,
-      FilterPaneHeaderComponent = _ref$FilterPaneHeader === void 0 ? function () {
+  var _children = props.children,
+      _props$fetchParameter = props.fetchParameters,
+      fetchParameters = _props$fetchParameter === void 0 ? {} : _props$fetchParameter,
+      _props$FilterComponen = props.FilterComponent,
+      FilterComponent = _props$FilterComponen === void 0 ? function () {
     return null;
-  } : _ref$FilterPaneHeader,
-      _ref$FilterComponent = _ref.FilterComponent,
-      FilterComponent = _ref$FilterComponent === void 0 ? function () {
+  } : _props$FilterComponen,
+      _props$FilterPaneHead = props.FilterPaneHeaderComponent,
+      FilterPaneHeaderComponent = _props$FilterPaneHead === void 0 ? function () {
     return null;
-  } : _ref$FilterComponent,
-      history = _ref.history,
-      id = _ref.id,
-      location = _ref.location,
-      mainPaneProps = _ref.mainPaneProps,
-      match = _ref.match,
-      mclProps = _ref.mclProps,
-      noSearchField = _ref.noSearchField,
-      path = _ref.path,
-      _ref$resultColumns = _ref.resultColumns,
-      resultColumns = _ref$resultColumns === void 0 ? [] : _ref$resultColumns,
-      RenderBody = _ref.RenderBody,
-      sasqProps = _ref.sasqProps;
+  } : _props$FilterPaneHead,
+      filterPaneProps = props.filterPaneProps,
+      id = props.id,
+      mainPaneProps = props.mainPaneProps,
+      noSearchField = props.noSearchField,
+      RenderBody = props.RenderBody,
+      sasqProps = props.sasqProps;
 
   var _useKiwtSASQuery = (0, _hooks.useKiwtSASQuery)(),
       query = _useKiwtSASQuery.query,
@@ -102,9 +100,9 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
   var ky = (0, _core.useOkapiKy)();
   var filterPaneVisibileKey = "".concat(namespace, "-").concat(id, "-filterPaneVisibility");
 
-  var fetchPageData = function fetchPageData(_ref2) {
-    var _ref2$pageParam = _ref2.pageParam,
-        pageParam = _ref2$pageParam === void 0 ? 0 : _ref2$pageParam;
+  var fetchPageData = function fetchPageData(_ref) {
+    var _ref$pageParam = _ref.pageParam,
+        pageParam = _ref$pageParam === void 0 ? 0 : _ref$pageParam;
     var queryMap = fetchParameters.SASQ_MAP;
     queryMap.offset = pageParam;
     return ky("".concat(fetchParameters.endpoint).concat((0, _utils.generateKiwtQuery)(queryMap, query))).json();
@@ -122,10 +120,7 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
   var _useInfiniteQuery = (0, _reactQuery.useInfiniteQuery)([namespace, id, 'data', query], fetchPageData),
       _useInfiniteQuery$dat = _useInfiniteQuery.data,
       totalData = _useInfiniteQuery$dat === void 0 ? {} : _useInfiniteQuery$dat,
-      error = _useInfiniteQuery.error,
-      isError = _useInfiniteQuery.isError,
-      isLoading = _useInfiniteQuery.isLoading,
-      fetchNextPage = _useInfiniteQuery.fetchNextPage;
+      restOfInfiniteQueryProps = _objectWithoutProperties(_useInfiniteQuery, _excluded);
 
   var data = (_totalData$pages$redu = (_totalData$pages = totalData.pages) === null || _totalData$pages === void 0 ? void 0 : _totalData$pages.reduce(function (acc, curr) {
     var _acc$results, _curr$results;
@@ -147,22 +142,7 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
     newResults.push.apply(newResults, _toConsumableArray((_curr$results = curr.results) !== null && _curr$results !== void 0 ? _curr$results : []));
     newAcc.results = newResults;
     return newAcc;
-  }, {})) !== null && _totalData$pages$redu !== void 0 ? _totalData$pages$redu : {}; // TODO focus handling to stop redraw movin to top
-
-  var onNeedMoreData = function onNeedMoreData(_askAmount, index) {
-    fetchNextPage({
-      pageParam: index
-    });
-  }; // Build the map of column definitions
-
-
-  var columnMapping = Object.fromEntries(resultColumns.map(function (e) {
-    return [e.propertyPath, e.label];
-  })); // Build the list of visible columns
-
-  var visibleColumns = resultColumns.map(function (e) {
-    return e.propertyPath;
-  });
+  }, {})) !== null && _totalData$pages$redu !== void 0 ? _totalData$pages$redu : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.SearchAndSortQuery, _objectSpread(_objectSpread({
     initialSearchState: {
       query: ''
@@ -170,61 +150,23 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
     queryGetter: queryGetter,
     querySetter: querySetter
   }, sasqProps), {}, {
-    children: function children(_ref3) {
-      var _query$sort;
-
-      var activeFilters = _ref3.activeFilters,
-          filterChanged = _ref3.filterChanged,
-          getFilterHandlers = _ref3.getFilterHandlers,
-          getSearchHandlers = _ref3.getSearchHandlers,
-          onSort = _ref3.onSort,
-          onSubmitSearch = _ref3.onSubmitSearch,
-          resetAll = _ref3.resetAll,
-          searchChanged = _ref3.searchChanged,
-          searchValue = _ref3.searchValue;
+    children: function children(sasqRenderProps) {
+      var activeFilters = sasqRenderProps.activeFilters,
+          filterChanged = sasqRenderProps.filterChanged,
+          getFilterHandlers = sasqRenderProps.getFilterHandlers,
+          getSearchHandlers = sasqRenderProps.getSearchHandlers,
+          onSubmitSearch = sasqRenderProps.onSubmitSearch,
+          resetAll = sasqRenderProps.resetAll,
+          searchChanged = sasqRenderProps.searchChanged,
+          searchValue = sasqRenderProps.searchValue;
       var searchHandlers = getSearchHandlers();
-      var sortOrder = (_query$sort = query.sort) !== null && _query$sort !== void 0 ? _query$sort : '';
       var disableReset = !filterChanged && !searchChanged;
       var filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
-
-      var TableBody = function TableBody() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, _objectSpread({
-          autosize: true,
-          columnMapping: columnMapping,
-          contentData: data === null || data === void 0 ? void 0 : data.results,
-          isEmptyMessage: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoResultsMessage.default, {
-            error: error,
-            isError: isError,
-            isLoading: isLoading,
-            filterPaneIsVisible: filterPaneVisible,
-            searchTerm: query.query,
-            toggleFilterPane: toggleFilterPane
-          }),
-          isSelected: function isSelected(_ref4) {
-            var _match$params;
-
-            var item = _ref4.item;
-            return item.id === (match === null || match === void 0 ? void 0 : (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
-          },
-          onHeaderClick: onSort,
-          onNeedMoreData: onNeedMoreData,
-          onRowClick: function onRowClick(_e, rowData) {
-            history.push("".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id).concat(location === null || location === void 0 ? void 0 : location.search));
-          },
-          pagingType: "click",
-          sortDirection: sortOrder.startsWith('-') ? 'descending' : 'ascending',
-          sortOrder: sortOrder.replace(/^-/, '').replace(/,.*/, ''),
-          totalCount: data.totalRecords,
-          virtualize: true,
-          visibleColumns: visibleColumns
-        }, mclProps));
-      };
-
-      var Body = RenderBody !== null && RenderBody !== void 0 ? RenderBody : TableBody;
+      var Body = RenderBody !== null && RenderBody !== void 0 ? RenderBody : _TableBody.default;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_smartComponents.PersistedPaneset, {
         appId: namespace,
         id: "".concat(id, "-paneset"),
-        children: [filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+        children: [filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "20%",
           lastMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
@@ -236,14 +178,23 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
           }),
           paneTitle: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-smart-components.searchAndFilter"
-          }),
+          })
+        }, filterPaneProps), {}, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
             onSubmit: onSubmitSearch,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterPaneHeaderComponent, {}), !noSearchField && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchField, {
                 autoFocus: true,
                 name: "query",
-                onChange: searchHandlers.query,
+                onChange: function onChange(e) {
+                  var _e$target;
+
+                  if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.value) {
+                    searchHandlers.query(e); // SASQ needs the whole event here
+                  } else {
+                    searchHandlers.reset();
+                  }
+                },
                 onClear: searchHandlers.reset,
                 value: searchValue.query
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
@@ -276,7 +227,7 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
               searchValue: searchValue
             })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "fill",
           firstMenu: !filterPaneVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
@@ -287,6 +238,8 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
               }
             })
           }) : null,
+          noOverflow: true,
+          padContent: false,
           paneSub: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-kint-components.sasqLookupComponent.mainPane.found",
             values: {
@@ -294,22 +247,25 @@ var SASQLookupComponent = function SASQLookupComponent(_ref) {
             }
           })
         }, mainPaneProps), {}, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
-            data: data
-          })
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, _objectSpread(_objectSpread(_objectSpread({
+            data: data,
+            query: query,
+            toggleFilterPane: toggleFilterPane
+          }, restOfInfiniteQueryProps), sasqProps), props))
         })), _children]
       });
     }
   }));
 };
 
-__signature__(SASQLookupComponent, "useKiwtSASQuery{{ query, queryGetter, querySetter }}\nuseNamespace{{ 0: namespace }}\nuseOkapiKy{ky}\nuseLocalStorageState{[filterPaneVisible, setFilterPaneVisible]}\nuseInfiniteQuery{{\n    data: totalData = {},\n    error,\n    isError,\n    isLoading,\n    fetchNextPage,\n  }}", function () {
+__signature__(SASQLookupComponent, "useKiwtSASQuery{{ query, queryGetter, querySetter }}\nuseNamespace{{ 0: namespace }}\nuseOkapiKy{ky}\nuseLocalStorageState{[filterPaneVisible, setFilterPaneVisible]}\nuseInfiniteQuery{{\n    data: totalData = {},\n    ...restOfInfiniteQueryProps\n  }}", function () {
   return [_hooks.useKiwtSASQuery, _core.useNamespace, _core.useOkapiKy, _hooks.useLocalStorageState, _reactQuery.useInfiniteQuery];
 });
 
 SASQLookupComponent.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   fetchParameters: _propTypes.default.object,
+  filterPaneProps: _propTypes.default.object,
   FilterComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   FilterPaneHeaderComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   history: _propTypes.default.object,

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

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _components = require("@folio/stripes/components");
+
+var _NoResultsMessage = _interopRequireDefault(require("../../NoResultsMessage"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var TableBody = function TableBody(_ref) {
+  var _query$sort;
+
+  var data = _ref.data,
+      error = _ref.error,
+      fetchNextPage = _ref.fetchNextPage,
+      filterPaneVisible = _ref.filterPaneVisible,
+      isError = _ref.isError,
+      isLoading = _ref.isLoading,
+      match = _ref.match,
+      mclProps = _ref.mclProps,
+      onSort = _ref.onSort,
+      path = _ref.path,
+      resultColumns = _ref.resultColumns,
+      toggleFilterPane = _ref.toggleFilterPane,
+      query = _ref.query;
+  var sortOrder = (_query$sort = query.sort) !== null && _query$sort !== void 0 ? _query$sort : '';
+  var history = (0, _reactRouterDom.useHistory)();
+  var location = (0, _reactRouterDom.useLocation)();
+
+  var onNeedMoreData = function onNeedMoreData(_askAmount, index) {
+    fetchNextPage({
+      pageParam: index
+    });
+  }; // Build the map of column definitions
+
+
+  var columnMapping = Object.fromEntries(resultColumns.map(function (e) {
+    return [e.propertyPath, e.label];
+  })); // Build the list of visible columns
+
+  var visibleColumns = resultColumns.map(function (e) {
+    return e.propertyPath;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, _objectSpread({
+    autosize: true,
+    columnMapping: columnMapping,
+    contentData: data === null || data === void 0 ? void 0 : data.results,
+    hasMargin: true,
+    isEmptyMessage: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoResultsMessage.default, {
+      error: error,
+      isError: isError,
+      isLoading: isLoading,
+      filterPaneIsVisible: filterPaneVisible,
+      searchTerm: query.query,
+      toggleFilterPane: toggleFilterPane
+    }),
+    isSelected: function isSelected(_ref2) {
+      var _match$params;
+
+      var item = _ref2.item;
+      return item.id === (match === null || match === void 0 ? void 0 : (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
+    },
+    onHeaderClick: onSort,
+    onNeedMoreData: onNeedMoreData,
+    onRowClick: function onRowClick(_e, rowData) {
+      history.push("".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id).concat(location === null || location === void 0 ? void 0 : location.search));
+    },
+    pagingType: "click",
+    sortDirection: sortOrder.startsWith('-') ? 'descending' : 'ascending',
+    sortOrder: sortOrder.replace(/^-/, '').replace(/,.*/, ''),
+    totalCount: data.totalRecords,
+    visibleColumns: visibleColumns
+  }, mclProps));
+};
+
+__signature__(TableBody, "useHistory{history}\nuseLocation{location}", function () {
+  return [_reactRouterDom.useHistory, _reactRouterDom.useLocation];
+});
+
+TableBody.propTypes = {
+  data: _propTypes.default.shape({
+    totalRecords: _propTypes.default.number,
+    results: _propTypes.default.arrayOf(_propTypes.default.object)
+  }),
+  error: _propTypes.default.object,
+  fetchNextPage: _propTypes.default.func,
+  filterPaneVisible: _propTypes.default.bool,
+  history: _propTypes.default.object,
+  isError: _propTypes.default.bool,
+  isLoading: _propTypes.default.bool,
+  location: _propTypes.default.object,
+  match: _propTypes.default.object,
+  mclProps: _propTypes.default.object,
+  onSort: _propTypes.default.func,
+  path: _propTypes.default.string.isRequired,
+  query: _propTypes.default.object,
+  resultColumns: _propTypes.default.arrayOf(_propTypes.default.object),
+  toggleFilterPane: _propTypes.default.func
+};
+var _default = TableBody;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(TableBody, "TableBody", "/home/ethan/FolioModules/stripes-kint-components/src/lib/SASQLookupComponent/TableBody/TableBody.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/SASQLookupComponent/TableBody/TableBody.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TableBody.default;
+  }
+});
+
+var _TableBody = _interopRequireDefault(require("./TableBody"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};

package/es/lib/SASQLookupComponent/index.js

@@ -3,15 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "SASQLookupComponent", {
   enumerable: true,
   get: function get() {
     return _SASQLookupComponent.default;
   }
 });
+Object.defineProperty(exports, "TableBody", {
+  enumerable: true,
+  get: function get() {
+    return _TableBody.default;
+  }
+});
 
 var _SASQLookupComponent = _interopRequireDefault(require("./SASQLookupComponent"));
 
+var _TableBody = _interopRequireDefault(require("./TableBody"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {

package/es/lib/SASQRoute/SASQRoute.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _SASQLookupComponent = _interopRequireDefault(require("../SASQLookupComponent"));
+var _SASQLookupComponent = require("../SASQLookupComponent");
 
 var _SASQViewComponent = _interopRequireDefault(require("../SASQViewComponent"));
 
@@ -60,7 +60,7 @@ var SASQRoute = function SASQRoute(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
     path: "".concat(path, "/:id?"),
     render: function render(routeProps) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQLookupComponent.default, _objectSpread(_objectSpread(_objectSpread({}, routeProps), {}, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQLookupComponent.SASQLookupComponent, _objectSpread(_objectSpread(_objectSpread({}, routeProps), {}, {
         fetchParameters: fetchParameters,
         path: path
       }, props), {}, {

package/es/lib/utils/highlightString.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlightString = exports.boldString = void 0;
+
+var _matchString5 = _interopRequireDefault(require("./matchString"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var highlightString = function highlightString(match, str) {
+  var ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  var _matchString = (0, _matchString5.default)(match, str, ignoreNull),
+      _matchString2 = _slicedToArray(_matchString, 2),
+      parts = _matchString2[0],
+      regex = _matchString2[1];
+
+  return parts.filter(function (part) {
+    return part;
+  }).map(function (part, i) {
+    return regex.test(part) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {
+      children: part
+    }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: part
+    }, i);
+  });
+};
+
+exports.highlightString = highlightString;
+
+var boldString = function boldString(match, str) {
+  var ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  var _matchString3 = (0, _matchString5.default)(match, str, ignoreNull),
+      _matchString4 = _slicedToArray(_matchString3, 2),
+      parts = _matchString4[0],
+      regex = _matchString4[1];
+
+  return parts.filter(function (part) {
+    return part;
+  }).map(function (part, i) {
+    return regex.test(part) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+      children: part
+    }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: part
+    }, i);
+  });
+};
+
+exports.boldString = boldString;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(highlightString, "highlightString", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/highlightString.js");
+  reactHotLoader.register(boldString, "boldString", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/highlightString.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/es/lib/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "boldString", {
+  enumerable: true,
+  get: function get() {
+    return _highlightString.boldString;
+  }
+});
 Object.defineProperty(exports, "buildUrl", {
   enumerable: true,
   get: function get() {
@@ -27,6 +33,18 @@ Object.defineProperty(exports, "groupCustomPropertiesByCtx", {
     return _groupCustomPropertiesByCtx.default;
   }
 });
+Object.defineProperty(exports, "highlightString", {
+  enumerable: true,
+  get: function get() {
+    return _highlightString.highlightString;
+  }
+});
+Object.defineProperty(exports, "matchString", {
+  enumerable: true,
+  get: function get() {
+    return _matchString.default;
+  }
+});
 Object.defineProperty(exports, "refdataOptions", {
   enumerable: true,
   get: function get() {
@@ -92,8 +110,12 @@ var _sortByLabel = _interopRequireDefault(require("./sortByLabel"));
 
 var _toCamelCase = _interopRequireDefault(require("./toCamelCase"));
 
+var _matchString = _interopRequireDefault(require("./matchString"));
+
+var _highlightString = require("./highlightString");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
-}; // I hate that this exists
+};

package/es/lib/utils/matchString.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
+var matchString = function matchString(match, str) {
+  var ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var regex = new RegExp("".concat(match.split(/(\s+)/).filter(function (h) {
+    return h.trim();
+  }).map(function (hl) {
+    return '(' + (0, _escapeRegExp.default)(hl) + ')';
+  }).join('|')), 'gi');
+
+  if (ignoreNull && !match) {
+    var nullRegex = /a^/gi; // Should match nothing
+
+    return [[str], nullRegex];
+  }
+
+  return [str.split(regex), regex];
+};
+
+var _default = matchString;
+var _default2 = _default;
+exports.default = _default2;
+;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(matchString, "matchString", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/matchString.js");
+  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/utils/matchString.js");
+})();
+
+;
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/package.json

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

package/src/index.js

@@ -18,9 +18,12 @@ export {
 
 // Useful utility functions
 export {
+  boldString,
   generateKiwtQuery,
   generateKiwtQueryParams,
   groupCustomPropertiesByCtx,
+  highlightString,
+  matchString,
   refdataOptions,
   refdataQueryKey,
   selectorSafe,
@@ -59,6 +62,7 @@ export {
   default as QueryTypedown
 } from './lib/QueryTypedown';
 
+/* SASQ Stuff */
 // SearchField
 export {
   default as SearchField
@@ -71,7 +75,8 @@ export {
 
 // SASQLookupComponent
 export {
-  default as SASQLookupComponent
+  SASQLookupComponent,
+  TableBody as SASQTableBody
 } from './lib/SASQLookupComponent';
 
 // SASQViewComponent

package/src/lib/ActionList/ActionListFieldArray.js

@@ -228,7 +228,7 @@ const ActionListFieldArray = ({
                   name: `${fieldName}.${key}`
                 }) :
                 <Field
-                  autofocus={fieldIndex === 0}
+                  autoFocus={fieldIndex === 0}
                   component={TextField}
                   marginBottom0
                   name={`${fieldName}.${key}`}

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useInfiniteQuery } from 'react-query';
@@ -17,34 +16,30 @@ import {
   Button,
   IconButton,
   Icon,
-  MultiColumnList,
   Pane,
   PaneMenu,
   SearchField,
 } from '@folio/stripes/components';
-import NoResultsMessage from '../NoResultsMessage';
 
 import { generateKiwtQuery } from '../utils';
 import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 
+import TableBody from './TableBody';
+
+const SASQLookupComponent = (props) => {
+  const {
+    children,
+    fetchParameters = {},
+    FilterComponent = () => null,
+    FilterPaneHeaderComponent = () => null,
+    filterPaneProps,
+    id,
+    mainPaneProps,
+    noSearchField,
+    RenderBody,
+    sasqProps,
+  } = props;
 
-const SASQLookupComponent = ({
-  children,
-  fetchParameters = {},
-  FilterPaneHeaderComponent = () => null,
-  FilterComponent = () => null,
-  history,
-  id,
-  location,
-  mainPaneProps,
-  match,
-  mclProps,
-  noSearchField,
-  path,
-  resultColumns = [],
-  RenderBody,
-  sasqProps,
-}) => {
   const { query, queryGetter, querySetter } = useKiwtSASQuery();
   const { 0: namespace } = useNamespace();
   const ky = useOkapiKy();
@@ -62,10 +57,7 @@ const SASQLookupComponent = ({
 
   const {
     data: totalData = {},
-    error,
-    isError,
-    isLoading,
-    fetchNextPage,
+    ...restOfInfiniteQueryProps
   } = useInfiniteQuery(
     [namespace, id, 'data', query],
     fetchPageData
@@ -93,20 +85,6 @@ const SASQLookupComponent = ({
     {}
   ) ?? {};
 
-  // TODO focus handling to stop redraw movin to top
-
-  const onNeedMoreData = (_askAmount, index) => {
-    fetchNextPage({ pageParam: index });
-  };
-
-  // Build the map of column definitions
-  const columnMapping = Object.fromEntries(
-    resultColumns.map(e => [e.propertyPath, e.label])
-  );
-
-  // Build the list of visible columns
-  const visibleColumns = resultColumns.map(e => e.propertyPath);
-
   return (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
@@ -115,56 +93,23 @@ const SASQLookupComponent = ({
       {...sasqProps}
     >
       {
-        ({
+        (sasqRenderProps) => {
+          const {
           activeFilters,
           filterChanged,
           getFilterHandlers,
           getSearchHandlers,
-          onSort,
           onSubmitSearch,
           resetAll,
           searchChanged,
           searchValue
-        }) => {
+        } = sasqRenderProps;
+
           const searchHandlers = getSearchHandlers();
-          const sortOrder = query.sort ?? '';
           const disableReset = !filterChanged && !searchChanged;
 
           const filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
 
-          const TableBody = () => (
-            <MultiColumnList
-              autosize
-              columnMapping={columnMapping}
-              contentData={data?.results}
-              isEmptyMessage={
-                <NoResultsMessage
-                  {...{
-                    error,
-                    isError,
-                    isLoading,
-                    filterPaneIsVisible: filterPaneVisible,
-                    searchTerm: query.query,
-                    toggleFilterPane
-                  }}
-                />
-              }
-              isSelected={({ item }) => item.id === match?.params?.id}
-              onHeaderClick={onSort}
-              onNeedMoreData={onNeedMoreData}
-              onRowClick={(_e, rowData) => {
-                history.push(`${path}/${rowData?.id}${location?.search}`);
-              }}
-              pagingType="click"
-              sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
-              sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
-              totalCount={data.totalRecords}
-              virtualize
-              visibleColumns={visibleColumns}
-              {...mclProps}
-            />
-          );
-
           const Body = RenderBody ?? TableBody;
 
           return (
@@ -184,6 +129,7 @@ const SASQLookupComponent = ({
                     </PaneMenu>
                   }
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
+                  {...filterPaneProps}
                 >
                   <form onSubmit={onSubmitSearch}>
                     <FilterPaneHeaderComponent />
@@ -192,7 +138,13 @@ const SASQLookupComponent = ({
                         <SearchField
                           autoFocus
                           name="query"
-                          onChange={searchHandlers.query}
+                          onChange={e => {
+                            if (e.target?.value) {
+                              searchHandlers.query(e); // SASQ needs the whole event here
+                            } else {
+                              searchHandlers.reset();
+                            }
+                          }}
                           onClear={searchHandlers.reset}
                           value={searchValue.query}
                         />
@@ -240,10 +192,19 @@ const SASQLookupComponent = ({
                   </PaneMenu>
                 :
                 null}
+                noOverflow
+                padContent={false}
                 paneSub={<FormattedMessage id="stripes-kint-components.sasqLookupComponent.mainPane.found" values={{ total: data?.total }} />}
                 {...mainPaneProps}
               >
-                <Body data={data} />
+                <Body
+                  data={data}
+                  query={query}
+                  toggleFilterPane={toggleFilterPane}
+                  {...restOfInfiniteQueryProps}
+                  {...sasqProps}
+                  {...props}
+                />
               </Pane>
               {children}
             </PersistedPaneset>
@@ -260,6 +221,7 @@ SASQLookupComponent.propTypes = {
     PropTypes.node
   ]),
   fetchParameters: PropTypes.object,
+  filterPaneProps: PropTypes.object,
   FilterComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import {
+  MultiColumnList,
+} from '@folio/stripes/components';
+import NoResultsMessage from '../../NoResultsMessage';
+
+const TableBody = ({
+  data,
+  error,
+  fetchNextPage,
+  filterPaneVisible,
+  isError,
+  isLoading,
+  match,
+  mclProps,
+  onSort,
+  path,
+  resultColumns,
+  toggleFilterPane,
+  query,
+}) => {
+  const sortOrder = query.sort ?? '';
+  const history = useHistory();
+  const location = useLocation();
+
+  const onNeedMoreData = (_askAmount, index) => {
+    fetchNextPage({ pageParam: index });
+  };
+
+  // Build the map of column definitions
+  const columnMapping = Object.fromEntries(
+    resultColumns.map(e => [e.propertyPath, e.label])
+  );
+
+  // Build the list of visible columns
+  const visibleColumns = resultColumns.map(e => e.propertyPath);
+
+  return (
+    <MultiColumnList
+      autosize
+      columnMapping={columnMapping}
+      contentData={data?.results}
+      hasMargin
+      isEmptyMessage={
+        <NoResultsMessage
+          {...{
+            error,
+            isError,
+            isLoading,
+            filterPaneIsVisible: filterPaneVisible,
+            searchTerm: query.query,
+            toggleFilterPane
+          }}
+        />
+      }
+      isSelected={({ item }) => item.id === match?.params?.id}
+      onHeaderClick={onSort}
+      onNeedMoreData={onNeedMoreData}
+      onRowClick={(_e, rowData) => {
+        history.push(`${path}/${rowData?.id}${location?.search}`);
+      }}
+      pagingType="click"
+      sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
+      sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
+      totalCount={data.totalRecords}
+      visibleColumns={visibleColumns}
+      {...mclProps}
+    />
+  );
+};
+
+TableBody.propTypes = {
+  data: PropTypes.shape({
+    totalRecords: PropTypes.number,
+    results: PropTypes.arrayOf(PropTypes.object)
+  }),
+  error: PropTypes.object,
+  fetchNextPage: PropTypes.func,
+  filterPaneVisible: PropTypes.bool,
+  history: PropTypes.object,
+  isError: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  location: PropTypes.object,
+  match: PropTypes.object,
+  mclProps: PropTypes.object,
+  onSort: PropTypes.func,
+  path: PropTypes.string.isRequired,
+  query: PropTypes.object,
+  resultColumns: PropTypes.arrayOf(PropTypes.object),
+  toggleFilterPane: PropTypes.func
+};
+
+export default TableBody;

package/src/lib/SASQLookupComponent/TableBody/index.js

@@ -0,0 +1 @@
+export { default } from './TableBody';

package/src/lib/SASQLookupComponent/index.js

@@ -1 +1,2 @@
-export { default } from './SASQLookupComponent';
+export { default as SASQLookupComponent } from './SASQLookupComponent';
+export { default as TableBody } from './TableBody';

package/src/lib/SASQRoute/SASQRoute.js

@@ -6,7 +6,7 @@ import {
   Switch
 } from 'react-router-dom';
 
-import SASQLookupComponent from '../SASQLookupComponent';
+import { SASQLookupComponent } from '../SASQLookupComponent';
 import SASQViewComponent from '../SASQViewComponent';
 
 const SASQRoute = ({ children, path, fetchParameters, ...props }) => {

package/src/lib/utils/highlightString.js

@@ -0,0 +1,42 @@
+import matchString from './matchString';
+
+const highlightString = (match, str, ignoreNull = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull);
+
+  return (
+    parts.filter(part => part).map((part, i) => (
+      regex.test(part) ?
+        <mark
+          key={i}
+        >
+          {part}
+        </mark> :
+        <span key={i}>
+          {part}
+        </span>
+    ))
+  );
+};
+
+const boldString = (match, str, ignoreNull = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull);
+
+  return (
+    parts.filter(part => part).map((part, i) => (
+      regex.test(part) ?
+        <strong
+          key={i}
+        >
+          {part}
+        </strong> :
+        <span key={i}>
+          {part}
+        </span>
+    ))
+  );
+};
+
+export {
+  boldString,
+  highlightString
+};

package/src/lib/utils/index.js

@@ -15,3 +15,7 @@ export { default as groupCustomPropertiesByCtx } from './groupCustomPropertiesBy
 export { default as renderHelpText } from './renderHelpText';
 export { default as sortByLabel } from './sortByLabel';
 export { default as toCamelCase } from './toCamelCase'; // I hate that this exists
+
+
+export { default as matchString } from './matchString';
+export { boldString, highlightString } from './highlightString';

package/src/lib/utils/matchString.js

@@ -0,0 +1,14 @@
+import escapeRegExp from 'lodash/escapeRegExp';
+
+const matchString = (match, str, ignoreNull = true) => {
+  const regex = new RegExp(`${match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + escapeRegExp(hl) + ')').join('|')}`, 'gi')
+  if (ignoreNull && !match) {
+    const nullRegex = /a^/gi; // Should match nothing
+
+    return [[str], nullRegex];
+  }
+
+  return [str.split(regex), regex];
+};
+
+export default matchString;