@k-int/stripes-kint-components 5.36.0 → 5.37.0

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -17,169 +17,190 @@ var _TableBody = _interopRequireDefault(require("./TableBody"));
 var _SearchKeyControl = _interopRequireDefault(require("../SearchKeyControl"));
 var _SASQLookupComponent = _interopRequireDefault(require("../../../styles/SASQLookupComponent.css"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["data"],
+  _excluded2 = ["filterPaneFirstMenu", "filterPaneLastMenu"],
+  _excluded3 = ["mainPaneFirstMenu", "mainPaneLastMenu"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    children,
-    fetchParameters = {},
-    FilterComponent = () => null,
-    FilterPaneHeaderComponent = () => null,
-    filterPaneProps = {},
-    hasFilterPane = true,
-    // Ability to entirely turn off filter pane
-    id,
-    intlKey: passedIntlKey,
-    intlNS: passedIntlNS,
-    labelOverrides = {},
-    lookupQueryNamespaceGenerator = _ref => {
-      let {
-        currentPage,
-        namespace,
-        id: passedId,
-        query
-      } = _ref;
+  var _fetchParameters$SASQ, _fetchParameters$quer;
+  const children = props.children,
+    _props$fetchParameter = props.fetchParameters,
+    fetchParameters = _props$fetchParameter === void 0 ? {} : _props$fetchParameter,
+    _props$FilterComponen = props.FilterComponent,
+    FilterComponent = _props$FilterComponen === void 0 ? () => null : _props$FilterComponen,
+    _props$FilterPaneHead = props.FilterPaneHeaderComponent,
+    FilterPaneHeaderComponent = _props$FilterPaneHead === void 0 ? () => null : _props$FilterPaneHead,
+    _props$filterPaneProp = props.filterPaneProps,
+    filterPaneProps = _props$filterPaneProp === void 0 ? {} : _props$filterPaneProp,
+    _props$hasFilterPane = props.hasFilterPane,
+    hasFilterPane = _props$hasFilterPane === void 0 ? true : _props$hasFilterPane,
+    id = props.id,
+    passedIntlKey = props.intlKey,
+    passedIntlNS = props.intlNS,
+    _props$labelOverrides = props.labelOverrides,
+    labelOverrides = _props$labelOverrides === void 0 ? {} : _props$labelOverrides,
+    _props$lookupQueryNam = props.lookupQueryNamespaceGenerator,
+    lookupQueryNamespaceGenerator = _props$lookupQueryNam === void 0 ? _ref => {
+      let currentPage = _ref.currentPage,
+        namespace = _ref.namespace,
+        passedId = _ref.id,
+        query = _ref.query;
       const queryNamespace = [namespace, 'SASQ'];
       if (passedId) {
         queryNamespace.push(passedId);
       }
       queryNamespace.push('viewAll', query, currentPage);
       return queryNamespace;
-    },
-    lookupQueryPromise = _ref2 => {
-      let {
-        endpoint,
-        ky,
-        queryParams
-      } = _ref2;
-      return ky.get(`${endpoint}${queryParams}`).json();
-    },
-    lookupResponseTransform = response => response,
-    // Function to transform the response from the query
-    mainPaneProps = {},
-    mclProps = {},
-    noResultsProps = {},
-    noSearchField,
-    persistedPanesetProps = {},
-    queryParameterGenerator = _utils.generateKiwtQuery,
-    // Expects a function which accepts SASQ_MAP and nsValues
-    RenderBody,
-    rowNavigation = true,
-    // Default navigation onRowClick
-    sasqProps,
-    searchableIndexes = [],
-    SearchComponent: PassedSearchComponent,
-    searchFieldAriaLabel,
-    searchFieldProps = {}
-  } = props;
+    } : _props$lookupQueryNam,
+    _props$lookupQueryPro = props.lookupQueryPromise,
+    lookupQueryPromise = _props$lookupQueryPro === void 0 ? _ref2 => {
+      let endpoint = _ref2.endpoint,
+        ky = _ref2.ky,
+        queryParams = _ref2.queryParams;
+      return ky.get("".concat(endpoint).concat(queryParams)).json();
+    } : _props$lookupQueryPro,
+    _props$lookupResponse = props.lookupResponseTransform,
+    lookupResponseTransform = _props$lookupResponse === void 0 ? response => response : _props$lookupResponse,
+    _props$mainPaneProps = props.mainPaneProps,
+    mainPaneProps = _props$mainPaneProps === void 0 ? {} : _props$mainPaneProps,
+    _props$mclProps = props.mclProps,
+    mclProps = _props$mclProps === void 0 ? {} : _props$mclProps,
+    _props$noResultsProps = props.noResultsProps,
+    noResultsProps = _props$noResultsProps === void 0 ? {} : _props$noResultsProps,
+    noSearchField = props.noSearchField,
+    _props$persistedPanes = props.persistedPanesetProps,
+    persistedPanesetProps = _props$persistedPanes === void 0 ? {} : _props$persistedPanes,
+    _props$queryParameter = props.queryParameterGenerator,
+    queryParameterGenerator = _props$queryParameter === void 0 ? _utils.generateKiwtQuery : _props$queryParameter,
+    RenderBody = props.RenderBody,
+    _props$rowNavigation = props.rowNavigation,
+    rowNavigation = _props$rowNavigation === void 0 ? true : _props$rowNavigation,
+    sasqProps = props.sasqProps,
+    _props$searchableInde = props.searchableIndexes,
+    searchableIndexes = _props$searchableInde === void 0 ? [] : _props$searchableInde,
+    PassedSearchComponent = props.SearchComponent,
+    searchFieldAriaLabel = props.searchFieldAriaLabel,
+    _props$searchFieldPro = props.searchFieldProps,
+    searchFieldProps = _props$searchFieldPro === void 0 ? {} : _props$searchFieldPro;
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
-  const [count, setCount] = (0, _react.useState)(0);
+  const _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
 
   // Grab things we might need from sasqProps if passed
-  const {
-    query: sasqPropsQuery,
-    // If these are overriden we need to make use of them
-    queryGetter: sasqPropsQueryGetter,
-    querySetter: sasqPropsQuerySetter,
-    syncToLocation = true
-  } = sasqProps ?? {};
+  const _ref3 = sasqProps !== null && sasqProps !== void 0 ? sasqProps : {},
+    sasqPropsQuery = _ref3.query,
+    sasqPropsQueryGetter = _ref3.queryGetter,
+    sasqPropsQuerySetter = _ref3.querySetter,
+    _ref3$syncToLocation = _ref3.syncToLocation,
+    syncToLocation = _ref3$syncToLocation === void 0 ? true : _ref3$syncToLocation;
 
   // We manage our internal state of pagination (URL vs MCL page state) using usePrevNextPagination.
   // Below the queryParameterGenerator can then choose to use the outputs (namely totalRecords and page) as it sees fit.
-  const {
-    currentPage,
-    paginationMCLProps,
-    paginationSASQProps
-  } = (0, _hooks.usePrevNextPagination)({
-    count,
-    // totalRecord
-    pageSize: fetchParameters.SASQ_MAP?.perPage,
-    syncToLocation
-  });
-  const {
-    query: kintSASQQuery,
-    queryGetter: kintSASQQueryGetter,
-    querySetter: kintSASQQuerySetter
-  } = (0, _hooks.useKiwtSASQuery)();
-  const query = (0, _react.useMemo)(() => sasqPropsQuery ?? kintSASQQuery, [sasqPropsQuery, kintSASQQuery]);
-  const queryGetter = (0, _react.useMemo)(() => sasqPropsQueryGetter ?? kintSASQQueryGetter, [sasqPropsQueryGetter, kintSASQQueryGetter]);
-  const querySetter = (0, _react.useMemo)(() => sasqPropsQuerySetter ?? kintSASQQuerySetter, [sasqPropsQuerySetter, kintSASQQuerySetter]);
-  const {
-    0: namespace
-  } = (0, _core.useNamespace)();
+  const _usePrevNextPaginatio = (0, _hooks.usePrevNextPagination)({
+      count,
+      // totalRecord
+      pageSize: (_fetchParameters$SASQ = fetchParameters.SASQ_MAP) === null || _fetchParameters$SASQ === void 0 ? void 0 : _fetchParameters$SASQ.perPage,
+      syncToLocation
+    }),
+    currentPage = _usePrevNextPaginatio.currentPage,
+    paginationMCLProps = _usePrevNextPaginatio.paginationMCLProps,
+    paginationSASQProps = _usePrevNextPaginatio.paginationSASQProps;
+  const _useKiwtSASQuery = (0, _hooks.useKiwtSASQuery)(),
+    kintSASQQuery = _useKiwtSASQuery.query,
+    kintSASQQueryGetter = _useKiwtSASQuery.queryGetter,
+    kintSASQQuerySetter = _useKiwtSASQuery.querySetter;
+  const query = (0, _react.useMemo)(() => sasqPropsQuery !== null && sasqPropsQuery !== void 0 ? sasqPropsQuery : kintSASQQuery, [sasqPropsQuery, kintSASQQuery]);
+  const queryGetter = (0, _react.useMemo)(() => sasqPropsQueryGetter !== null && sasqPropsQueryGetter !== void 0 ? sasqPropsQueryGetter : kintSASQQueryGetter, [sasqPropsQueryGetter, kintSASQQueryGetter]);
+  const querySetter = (0, _react.useMemo)(() => sasqPropsQuerySetter !== null && sasqPropsQuerySetter !== void 0 ? sasqPropsQuerySetter : kintSASQQuerySetter, [sasqPropsQuerySetter, kintSASQQuerySetter]);
+  const _useNamespace = (0, _core.useNamespace)(),
+    namespace = _useNamespace[0];
   const ky = (0, _core.useOkapiKy)();
-  const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
-  const queryParams = (0, _react.useMemo)(() => queryParameterGenerator(
-  // With Typescript this would be a type of SASQ_MAP, and so totalRecords is a valid property in our new shape
+  const filterPaneVisibileKey = "".concat(namespace, "-").concat(id, "-filterPaneVisibility");
+  const queryParams = (0, _react.useMemo)(() => queryParameterGenerator(// With Typescript this would be a type of SASQ_MAP, and so totalRecords is a valid property in our new shape
   // In generateKiwtQueryParams we can choose to ignore totalRecords, which while being a valid property is not necessary for KIWT queries
-  {
+  _objectSpread({
     page: currentPage,
-    totalRecords: count,
-    ...fetchParameters.SASQ_MAP
-  }, query ?? {}), [count, currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
-  const [filterPaneVisible, setFilterPaneVisible] = (0, _hooks.useLocalStorageState)(filterPaneVisibileKey, true);
+    totalRecords: count
+  }, fetchParameters.SASQ_MAP), query !== null && query !== void 0 ? query : {}), [count, currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
+  const _useLocalStorageState = (0, _hooks.useLocalStorageState)(filterPaneVisibileKey, true),
+    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
+    filterPaneVisible = _useLocalStorageState2[0],
+    setFilterPaneVisible = _useLocalStorageState2[1];
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
-  const {
-    data = {},
-    ...restOfQueryProps
-  } = (0, _reactQuery.useQuery)(lookupQueryNamespaceGenerator({
-    currentPage,
-    endpoint: fetchParameters.endpoint,
-    namespace,
-    id,
-    query,
-    queryParams
-  }), () => {
-    return lookupQueryPromise({
-      ky,
-      queryParams,
-      endpoint: fetchParameters.endpoint
-    });
-  }, {
-    enabled: (!!query?.filters || !!query?.query) && !!currentPage,
-    ...(fetchParameters.queryOptions ?? {}),
-    // select is a parameter supported by useQuery to transform the response
-    // Could be possible to instead pass this down along with the queryOptions
-    // Additionally this is assuming the lookupResponseTransform is a func as opposed to an object
-    select: selectData => {
-      return lookupResponseTransform(selectData);
-    }
-  });
+  const _useQuery = (0, _reactQuery.useQuery)(lookupQueryNamespaceGenerator({
+      currentPage,
+      endpoint: fetchParameters.endpoint,
+      namespace,
+      id,
+      query,
+      queryParams
+    }), () => {
+      return lookupQueryPromise({
+        ky,
+        queryParams,
+        endpoint: fetchParameters.endpoint
+      });
+    }, _objectSpread(_objectSpread({
+      enabled: (!!(query !== null && query !== void 0 && query.filters) || !!(query !== null && query !== void 0 && query.query)) && !!currentPage
+    }, (_fetchParameters$quer = fetchParameters.queryOptions) !== null && _fetchParameters$quer !== void 0 ? _fetchParameters$quer : {}), {}, {
+      // select is a parameter supported by useQuery to transform the response
+      // Could be possible to instead pass this down along with the queryOptions
+      // Additionally this is assuming the lookupResponseTransform is a func as opposed to an object
+      select: selectData => {
+        return lookupResponseTransform(selectData);
+      }
+    })),
+    _useQuery$data = _useQuery.data,
+    data = _useQuery$data === void 0 ? {} : _useQuery$data,
+    restOfQueryProps = _objectWithoutProperties(_useQuery, _excluded);
   (0, _react.useEffect)(() => {
-    if (count !== data?.totalRecords) {
-      setCount(data?.totalRecords);
+    if (count !== (data === null || data === void 0 ? void 0 : data.totalRecords)) {
+      setCount(data === null || data === void 0 ? void 0 : data.totalRecords);
     }
   }, [count, data.totalRecords]);
   (0, _react.useImperativeHandle)(ref, () => ({
-    lookupQueryProps: {
-      data,
-      ...restOfQueryProps
-    },
+    lookupQueryProps: _objectSpread({
+      data
+    }, restOfQueryProps),
     queryParams
   }));
-  const InternalSearchComponent = (0, _react.useCallback)(_ref3 => {
-    let {
-      disableReset,
-      resetAll,
-      searchHandlers,
-      searchValue
-    } = _ref3;
+  const InternalSearchComponent = (0, _react.useCallback)(_ref4 => {
+    let disableReset = _ref4.disableReset,
+      resetAll = _ref4.resetAll,
+      searchHandlers = _ref4.searchHandlers,
+      searchValue = _ref4.searchValue;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchField, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchField, _objectSpread({
         ariaLabel: searchFieldAriaLabel,
         autoFocus: true,
-        id: `sasq-search-field-${id}`,
+        id: "sasq-search-field-".concat(id),
         name: "query",
         onChange: e => {
-          if (e.target?.value) {
+          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,
-        ...searchFieldProps
-      }), searchableIndexes?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchKeyControl.default, {
+        value: searchValue.query
+      }, searchFieldProps)), (searchableIndexes === null || searchableIndexes === void 0 ? void 0 : searchableIndexes.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchKeyControl.default, {
         options: searchableIndexes
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
         buttonStyle: "primary",
@@ -203,40 +224,34 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       })]
     });
   }, [id, searchFieldAriaLabel, searchFieldProps, searchableIndexes]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.SearchAndSortQuery, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.SearchAndSortQuery, _objectSpread(_objectSpread(_objectSpread({
     initialSearchState: {
       query: ''
     },
     queryGetter: queryGetter,
     querySetter: querySetter,
-    syncToLocation: syncToLocation,
-    ...sasqProps,
-    ...paginationSASQProps,
+    syncToLocation: syncToLocation
+  }, sasqProps), paginationSASQProps), {}, {
     children: sasqRenderProps => {
-      const {
-        activeFilters,
-        filterChanged,
-        getFilterHandlers,
-        getSearchHandlers,
-        onSubmitSearch,
-        resetAll,
-        searchChanged,
-        searchValue
-      } = sasqRenderProps;
+      var _ref5, _data$total;
+      const activeFilters = sasqRenderProps.activeFilters,
+        filterChanged = sasqRenderProps.filterChanged,
+        getFilterHandlers = sasqRenderProps.getFilterHandlers,
+        getSearchHandlers = sasqRenderProps.getSearchHandlers,
+        onSubmitSearch = sasqRenderProps.onSubmitSearch,
+        resetAll = sasqRenderProps.resetAll,
+        searchChanged = sasqRenderProps.searchChanged,
+        searchValue = sasqRenderProps.searchValue;
       const searchHandlers = getSearchHandlers();
       const disableReset = !filterChanged && !searchChanged;
       const filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
-      const Body = RenderBody ?? _TableBody.default;
-      const {
-        filterPaneFirstMenu,
-        filterPaneLastMenu,
-        ...restOfFilterPaneProps
-      } = filterPaneProps;
-      const {
-        mainPaneFirstMenu,
-        mainPaneLastMenu,
-        ...restOfMainPaneProps
-      } = mainPaneProps;
+      const Body = RenderBody !== null && RenderBody !== void 0 ? RenderBody : _TableBody.default;
+      const filterPaneFirstMenu = filterPaneProps.filterPaneFirstMenu,
+        filterPaneLastMenu = filterPaneProps.filterPaneLastMenu,
+        restOfFilterPaneProps = _objectWithoutProperties(filterPaneProps, _excluded2);
+      const mainPaneFirstMenu = mainPaneProps.mainPaneFirstMenu,
+        mainPaneLastMenu = mainPaneProps.mainPaneLastMenu,
+        restOfMainPaneProps = _objectWithoutProperties(mainPaneProps, _excluded3);
       const internalStateProps = {
         activeFilters,
         filterCount,
@@ -260,15 +275,15 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         }
         return null;
       };
-      const SearchComponent = PassedSearchComponent ?? InternalSearchComponent;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_smartComponents.PersistedPaneset, {
+      const SearchComponent = PassedSearchComponent !== null && PassedSearchComponent !== void 0 ? PassedSearchComponent : InternalSearchComponent;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_smartComponents.PersistedPaneset, _objectSpread(_objectSpread({
         appId: namespace,
-        id: `${id}-paneset`,
-        ...persistedPanesetProps,
-        children: [hasFilterPane && filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+        id: "".concat(id, "-paneset")
+      }, persistedPanesetProps), {}, {
+        children: [hasFilterPane && filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "20%",
           firstMenu: filterPaneFirstMenu ? filterPaneFirstMenu(internalStateProps) : null,
-          id: `${id}-filter-pane`,
+          id: "".concat(id, "-filter-pane"),
           lastMenu: filterPaneLastMenu ? filterPaneLastMenu(internalStateProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.CollapseFilterPaneButton, {
               onClick: toggleFilterPane
@@ -276,8 +291,8 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
           }),
           paneTitle: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-smart-components.searchAndFilter"
-          }),
-          ...restOfFilterPaneProps,
+          })
+        }, restOfFilterPaneProps), {}, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
             onSubmit: onSubmitSearch,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterPaneHeaderComponent, {}), !noSearchField && /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchComponent, {
@@ -296,22 +311,22 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
               searchValue: searchValue
             })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "fill",
           firstMenu: renderFirstMenu(),
-          id: `${id}-main-pane`,
+          id: "".concat(id, "-main-pane"),
           lastMenu: mainPaneLastMenu ? mainPaneLastMenu(internalStateProps) : null,
           noOverflow: true,
           padContent: false,
           paneSub: kintIntl.formatKintMessage({
             id: 'found#Values',
-            overrideValue: labelOverrides?.foundValues
+            overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.foundValues
           },
           // DEPRECATED data.total should NOT be the first call here, but staying for backwards compatibility. Elsewhere we use data.totalRecords
           {
-            total: data?.total ?? data?.totalRecords ?? 0
-          }),
-          ...restOfMainPaneProps,
+            total: (_ref5 = (_data$total = data === null || data === void 0 ? void 0 : data.total) !== null && _data$total !== void 0 ? _data$total : data === null || data === void 0 ? void 0 : data.totalRecords) !== null && _ref5 !== void 0 ? _ref5 : 0
+          })
+        }, restOfMainPaneProps), {}, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: _SASQLookupComponent.default.mainPaneContainer,
             children: [!hasFilterPane && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -336,37 +351,29 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: _SASQLookupComponent.default.bodyContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
                 data: data,
                 filterPaneVisible: filterPaneVisible,
                 intlKey: passedIntlKey,
                 intlNS: passedIntlNS,
                 labelOverrides: labelOverrides,
-                noResultsProps: {
-                  ...noResultsProps,
-                  iconPresets: {
-                    noTermsWhenFilterPane: hasFilterPane ? null : 'arrow-up',
-                    ...noResultsProps.iconPresets
-                  }
-                },
+                noResultsProps: _objectSpread(_objectSpread({}, noResultsProps), {}, {
+                  iconPresets: _objectSpread({
+                    noTermsWhenFilterPane: hasFilterPane ? null : 'arrow-up'
+                  }, noResultsProps.iconPresets)
+                }),
                 query: query,
                 rowNavigation: rowNavigation,
-                toggleFilterPane: toggleFilterPane,
-                ...restOfQueryProps,
-                ...sasqRenderProps,
-                ...sasqProps,
-                ...props,
-                mclProps: {
-                  ...paginationMCLProps,
-                  ...mclProps
-                }
-              })
+                toggleFilterPane: toggleFilterPane
+              }, restOfQueryProps), sasqRenderProps), sasqProps), _objectSpread(_objectSpread({}, props), {}, {
+                mclProps: _objectSpread(_objectSpread({}, paginationMCLProps), mclProps)
+              })))
             })]
           })
-        }), children]
-      });
+        })), children]
+      }));
     }
-  });
+  }));
 });
 SASQLookupComponent.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),