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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
-## 2.3.1 2022-03-28
+## 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
+  * 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

@@ -137,14 +137,14 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
   };
 
   var handleSave = function handleSave(index) {
-    var _actionAssigner$find;
+    var _actionAssigner, _actionAssigner$find;
 
     var _fields$value$index = fields.value[index],
         _a = _fields$value$index.actionListActions,
         rowData = _objectWithoutProperties(_fields$value$index, _excluded2); // Find "edit" entry in actionAssigner
 
 
-    var editCallback = (_actionAssigner$find = actionAssigner.find(function (act) {
+    var editCallback = (_actionAssigner = actionAssigner(rowData)) === null || _actionAssigner === void 0 ? void 0 : (_actionAssigner$find = _actionAssigner.find(function (act) {
       return act.name === 'edit';
     })) === null || _actionAssigner$find === void 0 ? void 0 : _actionAssigner$find.callback;
 
@@ -255,7 +255,6 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
             disabled: editing,
             icon: action.icon,
-            marginBottom0: true,
             onClick: function onClick() {
               return actionFunction ? actionFunction() : function () {
                 return null;
@@ -323,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/CustomProperties/Config/CustomPropertiesSettings.js

@@ -134,20 +134,23 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
 
   var _useMutateCustomPrope = (0, _hooks.useMutateCustomProperties)({
     afterQueryCalls: {
-      put: function put() {
+      put: function put(res) {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
-        afterQueryCallsSafe.put();
+        setCustomProperty(res);
+        afterQueryCallsSafe.put(res);
       },
-      post: function post() {
+      post: function post(res) {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
-        afterQueryCallsSafe.post();
+        setCustomProperty(res);
+        afterQueryCallsSafe.post(res);
       },
-      delete: function _delete() {
+      delete: function _delete(res) {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
-        afterQueryCallsSafe.delete();
+        setCustomProperty();
+        afterQueryCallsSafe.delete(res);
       }
     },
     endpoint: customPropertiesEndpoint,

package/es/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -41,7 +41,7 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 };
 
 var CustomPropertiesViewCtx = function CustomPropertiesViewCtx(_ref) {
-  var _custprops$filter$len, _custprops$filter, _Object$entries$filte, _Object$entries, _Object$entries$filte2;
+  var _custprops$filter$len, _custprops$filter;
 
   var ctx = _ref.ctx,
       _ref$customProperties = _ref.customProperties,
@@ -112,30 +112,37 @@ var CustomPropertiesViewCtx = function CustomPropertiesViewCtx(_ref) {
       label: getAccordionLabel(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
     });
-  } // We need to display any set properties, along with any non-set primary properties
+  }
+
+  var countSetProperties = function countSetProperties(primary) {
+    var _Object$entries$filte, _Object$entries, _Object$entries$filte2;
+
+    return (_Object$entries$filte = (_Object$entries = Object.entries(customProperties)) === null || _Object$entries === void 0 ? void 0 : (_Object$entries$filte2 = _Object$entries.filter(function (_ref2) {
+      var _cp$, _cp$$type, _cp$2, _cp$2$type, _cp$3, _cp$3$type;
+
+      var _ref3 = _slicedToArray(_ref2, 2),
+          _key = _ref3[0],
+          cp = _ref3[1];
+
+      return (((_cp$ = cp[0]) === null || _cp$ === void 0 ? void 0 : (_cp$$type = _cp$.type) === null || _cp$$type === void 0 ? void 0 : _cp$$type.ctx) === ctx || ctx === 'isNull' && !((_cp$2 = cp[0]) !== null && _cp$2 !== void 0 && (_cp$2$type = _cp$2.type) !== null && _cp$2$type !== void 0 && _cp$2$type.ctx)) && // Either the ctx string matches, or isNull matches blank
+      ((_cp$3 = cp[0]) === null || _cp$3 === void 0 ? void 0 : (_cp$3$type = _cp$3.type) === null || _cp$3$type === void 0 ? void 0 : _cp$3$type.primary) === primary // Only count non-primary set custprops
+      ;
+    })) === null || _Object$entries$filte2 === void 0 ? void 0 : _Object$entries$filte2.length) !== null && _Object$entries$filte !== void 0 ? _Object$entries$filte : 0;
+  }; // We need to display any set properties, along with any non-set primary properties
 
 
   var primaryCount = (_custprops$filter$len = custprops === null || custprops === void 0 ? void 0 : (_custprops$filter = custprops.filter(function (cp) {
     return cp.primary === true;
   })) === null || _custprops$filter === void 0 ? void 0 : _custprops$filter.length) !== null && _custprops$filter$len !== void 0 ? _custprops$filter$len : 0;
-  var optionalCount = (_Object$entries$filte = (_Object$entries = Object.entries(customProperties)) === null || _Object$entries === void 0 ? void 0 : (_Object$entries$filte2 = _Object$entries.filter(function (_ref2) {
-    var _cp$, _cp$$type, _cp$2, _cp$2$type, _cp$3, _cp$3$type;
-
-    var _ref3 = _slicedToArray(_ref2, 2),
-        _key = _ref3[0],
-        cp = _ref3[1];
-
-    return (((_cp$ = cp[0]) === null || _cp$ === void 0 ? void 0 : (_cp$$type = _cp$.type) === null || _cp$$type === void 0 ? void 0 : _cp$$type.ctx) === ctx || ctx === 'isNull' && !((_cp$2 = cp[0]) !== null && _cp$2 !== void 0 && (_cp$2$type = _cp$2.type) !== null && _cp$2$type !== void 0 && _cp$2$type.ctx)) && // Either the ctx string matches, or isNull matches blank
-    ((_cp$3 = cp[0]) === null || _cp$3 === void 0 ? void 0 : (_cp$3$type = _cp$3.type) === null || _cp$3$type === void 0 ? void 0 : _cp$3$type.primary) === false // Only count non-primary set custprops
-    ;
-  })) === null || _Object$entries$filte2 === void 0 ? void 0 : _Object$entries$filte2.length) !== null && _Object$entries$filte !== void 0 ? _Object$entries$filte : 0;
+  var optionalCount = countSetProperties(false);
+  var setPrimaryCount = countSetProperties(true);
   return primaryCount + optionalCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Accordion, {
     closedByDefault: true,
     displayWhenClosed: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Badge, {
-      children: primaryCount + optionalCount
+      children: setPrimaryCount + optionalCount
     }),
     displayWhenOpen: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Badge, {
-      children: primaryCount + optionalCount
+      children: setPrimaryCount + optionalCount
     }),
     id: "".concat(id, "-accordion-").concat(ctx),
     label: getAccordionLabel(),

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

@@ -37,7 +37,8 @@ var CustomPropertyCard = function CustomPropertyCard(_ref) {
 
   var ctx = _ref.ctx,
       customProperty = _ref.customProperty,
-      customPropertyDefinition = _ref.customPropertyDefinition,
+      _ref$customPropertyDe = _ref.customPropertyDefinition,
+      customPropertyDefinition = _ref$customPropertyDe === void 0 ? {} : _ref$customPropertyDe,
       index = _ref.index,
       labelOverrides = _ref.labelOverrides;
   // We only need to display primary and set properties
@@ -54,7 +55,7 @@ var CustomPropertyCard = function CustomPropertyCard(_ref) {
 
     // Label override for default card title,
     if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
-      return labelOverrides.retiredName(customPropertyDefinition);
+      return labelOverrides.retiredName(customPropertyDefinition.name);
     } // Label override for default title or finally built in default
 
 

package/es/lib/FormModal/FormModal.js

@@ -75,11 +75,13 @@ var FormModal = function FormModal(_ref) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ModalFooter, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             buttonStyle: "primary",
+            marginBottom0: true,
             onClick: handleSubmit,
             children: (_labelOverrides$save = labelOverrides.save) !== null && _labelOverrides$save !== void 0 ? _labelOverrides$save : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
               id: "stripes-kint-components.save"
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            marginBottom0: true,
             onClick: handleClose,
             children: (_labelOverrides$cance = labelOverrides.cancel) !== null && _labelOverrides$cance !== void 0 ? _labelOverrides$cance : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
               id: "stripes-kint-components.cancel"

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,