@k-int/stripes-kint-components 5.15.0 → 5.17.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [5.17.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.16.0...v5.17.0) (2025-03-14)
+
+
+### Features
+
+* Added the ability to generate a custom queryNamespace on SASQLookup and SASQView components ([df68645](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/df686452ed854fffc7724bad40a6b4de2d651a42))
+
+# [5.16.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.15.0...v5.16.0) (2025-03-14)
+
+
+### Features
+
+* Added ability for SASQLookupComponent to accept sasqProps.syncToLocation/query(Getter/Setter) and have that impact on results ([351b503](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/351b50313e0a320191b24fa1df6227103021f106))
+* SASQRoute allow tweaking of SASQLookupComponent and SASQViewComponent component directly in SASQRoute ([6c812b2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/6c812b2c4c10a049b8a9e56e624cc3dceee3a8fe))
+* SASQRoute override paths for lookup/view ([994b976](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/994b976cbec3af6382066bc6bf6dd945d4a3e239))
+
 # [5.15.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.14.0...v5.15.0) (2025-02-21)
 
 

package/es/lib/NoResultsMessage/NoResultsMessage.js

@@ -34,25 +34,26 @@ const NoResultsMessage = _ref => {
       searchTerm
     }
   });
-
-  // No search term but no results
-  if (!searchTerm) {
+  if (!isLoading && !searchTerm) {
+    // No search term and not loading
+    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+      id: "stripes-smart-components.sas.noResults.noTerms"
+    });
+  } else if (!isLoading) {
+    // Search term but not loading
     icon = 'search';
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.noResults"
     });
-  }
-
-  // Loading results
-  if (isLoading) {
+  } else if (isLoading) {
+    // Loading
     icon = 'spinner-ellipsis';
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.loading"
     });
-  }
-
-  // Request failure
-  if (isError) {
+  } else if (isError) {
+    // Request failure
     icon = 'exclamation-circle';
     label = error?.message;
   }

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -27,10 +27,28 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    mainPaneProps,
+    lookupQueryNamespaceGenerator = _ref => {
+      let {
+        currentPage,
+        namespace,
+        id: passedId,
+        query
+      } = _ref;
+      const queryNamespace = [namespace, 'SASQ'];
+      if (passedId) {
+        queryNamespace.push(passedId);
+      }
+      queryNamespace.push('viewAll');
+      queryNamespace.push(query);
+      queryNamespace.push(currentPage);
+      return queryNamespace;
+    },
+    mainPaneProps = {},
     mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
+    queryParameterGenerator = _utils.generateKiwtQuery,
+    // Expects a function which accepts SASQ_MAP and nsValues
     RenderBody,
     rowNavigation = true,
     // Default navigation onRowClick
@@ -40,44 +58,58 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   } = props;
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   const [count, setCount] = (0, _react.useState)(0);
+
+  // 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 {
     currentPage,
     paginationMCLProps,
     paginationSASQProps
   } = (0, _hooks.usePrevNextPagination)({
     count,
-    pageSize: fetchParameters.SASQ_MAP?.perPage
+    pageSize: fetchParameters.SASQ_MAP?.perPage,
+    syncToLocation
   });
   const {
-    query,
-    queryGetter,
-    querySetter
+    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 ky = (0, _core.useOkapiKy)();
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
-  const queryParams = (0, _react.useMemo)(() => (0, _utils.generateKiwtQuery)({
+  const queryParams = (0, _react.useMemo)(() => queryParameterGenerator({
     ...fetchParameters.SASQ_MAP,
     page: currentPage
-  }, query ?? {}), [currentPage, fetchParameters.SASQ_MAP, query]);
+  }, query ?? {}), [currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
   const [filterPaneVisible, setFilterPaneVisible] = (0, _hooks.useLocalStorageState)(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('viewAll');
-  queryNamespace.push(query);
-  queryNamespace.push(currentPage);
   const {
     data = {},
     ...restOfQueryProps
-  } = (0, _reactQuery.useQuery)(queryNamespace, () => {
+  } = (0, _reactQuery.useQuery)(lookupQueryNamespaceGenerator({
+    currentPage,
+    endpoint: fetchParameters.endpoint,
+    namespace,
+    id,
+    query,
+    queryParams
+  }), () => {
     return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
   }, {
-    enabled: (!!query?.filters || !!query?.query) && !!currentPage
+    enabled: (!!query?.filters || !!query?.query) && !!currentPage,
+    ...(fetchParameters.queryOptions ?? {})
   });
   (0, _react.useEffect)(() => {
     if (count !== data?.totalRecords) {
@@ -97,6 +129,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     },
     queryGetter: queryGetter,
     querySetter: querySetter,
+    syncToLocation: syncToLocation,
     ...sasqProps,
     ...paginationSASQProps,
     children: sasqRenderProps => {
@@ -246,6 +279,7 @@ SASQLookupComponent.propTypes = {
   filterPaneProps: _propTypes.default.object,
   FilterComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   FilterPaneHeaderComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  queryParameterGenerator: _propTypes.default.func,
   history: _propTypes.default.object,
   id: _propTypes.default.string.isRequired,
   intlKey: _propTypes.default.string,

package/es/lib/SASQRoute/SASQRoute.js

@@ -15,7 +15,11 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     fetchParameters,
+    getPathLookup = path => `${path}/:id?`,
+    getPathView = path => `${path}/:id`,
+    SASQLookupComponent: RouteLookupComponent = _SASQLookupComponent.SASQLookupComponent,
     path,
+    SASQViewComponent: RouteViewComponent = _SASQViewComponent.default,
     ...props
   } = _ref;
   // Grab the SASQ_MAP and tweak it
@@ -36,9 +40,9 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   // Reinsert the SASQ_MAP
   fetchParameters.SASQ_MAP = SASQ_MAP;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
-    path: `${path}/:id?`,
+    path: getPathLookup(path),
     render: routeProps => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQLookupComponent.SASQLookupComponent, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteLookupComponent, {
         ref: lookupRef,
         ...routeProps,
         fetchParameters: fetchParameters,
@@ -46,8 +50,8 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         ...props,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Switch, {
           children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
-            path: `${path}/:id`,
-            render: innerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQViewComponent.default, {
+            path: getPathView(path),
+            render: innerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteViewComponent, {
               ref: viewRef,
               ...innerProps,
               fetchParameters: fetchParameters,
@@ -64,7 +68,11 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 SASQRoute.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.element, _propTypes.default.func]),
   fetchParameters: _propTypes.default.object,
+  getPathLookup: _propTypes.default.func,
+  getPathView: _propTypes.default.func,
   path: _propTypes.default.string,
+  SASQLookupComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  SASQViewComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   ViewComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
 };
 var _default = exports.default = SASQRoute;

package/es/lib/SASQViewComponent/SASQViewComponent.js

@@ -19,6 +19,20 @@ const SASQViewComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     match,
     path,
     ViewComponent,
+    viewQueryNamespaceGenerator = _ref2 => {
+      let {
+        namespace,
+        componentId,
+        id: passedId
+      } = _ref2;
+      const queryNamespace = [namespace, 'SASQ'];
+      if (componentId) {
+        queryNamespace.push(componentId);
+      }
+      queryNamespace.push('view');
+      queryNamespace.push(passedId);
+      return queryNamespace;
+    },
     ...props
   } = _ref;
   const {
@@ -27,17 +41,17 @@ const SASQViewComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   // If itemEndpoint is available, use that, otherwise use standard endpoint
   const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('view');
-  queryNamespace.push(match?.params?.id);
   const ky = (0, _core.useOkapiKy)();
   const {
     data = {},
     ...rest
-  } = (0, _reactQuery.useQuery)(queryNamespace, () => ky(`${endpoint}/${match?.params?.id}`).json(), {
+  } = (0, _reactQuery.useQuery)(viewQueryNamespaceGenerator({
+    componentId: id,
+    namespace,
+    endpoint,
+    id: match?.params?.id,
+    match
+  }), () => ky(`${endpoint}/${match?.params?.id}`).json(), {
     enabled: !!match?.params?.id
   });
   (0, _react.useImperativeHandle)(ref, () => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.15.0",
+  "version": "5.17.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -44,7 +44,7 @@
     "@folio/jest-config-stripes": "^2.0.0 || ^3.0.0",
     "@folio/stripes": "^9.0.0 || ^10.0.0",
     "@folio/stripes-cli": "^3.0.0 || ^4.0.0",
-    "@folio/stripes-erm-testing": "^2.0.0",
+    "@folio/stripes-erm-testing": "^2.0.0 || ^3.0.0",
     "@formatjs/cli": "^6.6.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -23,20 +23,20 @@ const NoResultsMessage = ({
   let icon = 'search';
   let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
 
-  // No search term but no results
-  if (!searchTerm) {
+  if (!isLoading && !searchTerm) {
+    // No search term and not loading
+    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    label = <FormattedMessage id="stripes-smart-components.sas.noResults.noTerms" />;
+  } else if (!isLoading) {
+    // Search term but not loading
     icon = 'search';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
-  }
-
-  // Loading results
-  if (isLoading) {
+  } else if (isLoading) {
+    // Loading
     icon = 'spinner-ellipsis';
     label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
-  }
-
-  // Request failure
-  if (isError) {
+  } else if (isError) {
+    // Request failure
     icon = 'exclamation-circle';
     label = error?.message;
   }

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -40,60 +40,90 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    mainPaneProps,
+    lookupQueryNamespaceGenerator = ({ currentPage, namespace, id: passedId, query }) => {
+      const queryNamespace = [namespace, 'SASQ'];
+      if (passedId) {
+        queryNamespace.push(passedId);
+      }
+      queryNamespace.push('viewAll');
+      queryNamespace.push(query);
+      queryNamespace.push(currentPage);
+
+      return queryNamespace;
+    },
+    mainPaneProps = {},
     mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
+    queryParameterGenerator = generateKiwtQuery, // Expects a function which accepts SASQ_MAP and nsValues
     RenderBody,
     rowNavigation = true, // Default navigation onRowClick
     sasqProps,
     searchFieldAriaLabel,
-    searchFieldProps
+    searchFieldProps,
   } = props;
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
   const [count, setCount] = useState(0);
 
+  // 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 { currentPage, paginationMCLProps, paginationSASQProps } = usePrevNextPagination({
     count,
-    pageSize: fetchParameters.SASQ_MAP?.perPage
+    pageSize: fetchParameters.SASQ_MAP?.perPage,
+    syncToLocation
   });
 
-  const { query, queryGetter, querySetter } = useKiwtSASQuery();
+  const {
+    query: kintSASQQuery,
+    queryGetter: kintSASQQueryGetter,
+    querySetter: kintSASQQuerySetter
+  } = useKiwtSASQuery();
+
+  const query = useMemo(() => sasqPropsQuery ?? kintSASQQuery, [sasqPropsQuery, kintSASQQuery]);
+  const queryGetter = useMemo(() => sasqPropsQueryGetter ?? kintSASQQueryGetter, [sasqPropsQueryGetter, kintSASQQueryGetter]);
+  const querySetter = useMemo(() => sasqPropsQuerySetter ?? kintSASQQuerySetter, [sasqPropsQuerySetter, kintSASQQuerySetter]);
+
   const { 0: namespace } = useNamespace();
   const ky = useOkapiKy();
 
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
 
   const queryParams = useMemo(() => (
-    generateKiwtQuery(
+    queryParameterGenerator(
       {
         ...fetchParameters.SASQ_MAP,
         page: currentPage,
       }, (query ?? {})
     )
-  ), [currentPage, fetchParameters.SASQ_MAP, query]);
+  ), [currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
 
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('viewAll');
-  queryNamespace.push(query);
-  queryNamespace.push(currentPage);
-
   const {
     data = {},
     ...restOfQueryProps
   } = useQuery(
-    queryNamespace,
+    lookupQueryNamespaceGenerator({
+      currentPage,
+      endpoint: fetchParameters.endpoint,
+      namespace,
+      id,
+      query,
+      queryParams
+    }),
     () => {
       return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
     },
     {
       enabled: (!!query?.filters || !!query?.query) && !!currentPage,
+      ...(fetchParameters.queryOptions ?? {})
     }
   );
 
@@ -118,6 +148,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       initialSearchState={{ query: '' }}
       queryGetter={queryGetter}
       querySetter={querySetter}
+      syncToLocation={syncToLocation}
       {...sasqProps}
       {...paginationSASQProps}
     >
@@ -315,6 +346,7 @@ SASQLookupComponent.propTypes = {
     PropTypes.func,
     PropTypes.node
   ]),
+  queryParameterGenerator: PropTypes.func,
   history: PropTypes.object,
   id: PropTypes.string.isRequired,
   intlKey: PropTypes.string,

package/src/lib/SASQRoute/SASQRoute.js

@@ -12,7 +12,11 @@ import SASQViewComponent from '../SASQViewComponent';
 const SASQRoute = forwardRef(({
   children,
   fetchParameters,
+  getPathLookup = (path) => `${path}/:id?`,
+  getPathView = (path) => `${path}/:id`,
+  SASQLookupComponent: RouteLookupComponent = SASQLookupComponent,
   path,
+  SASQViewComponent: RouteViewComponent = SASQViewComponent,
   ...props
 }, ref) => {
   // Grab the SASQ_MAP and tweak it
@@ -37,10 +41,10 @@ const SASQRoute = forwardRef(({
 
   return (
     <Route
-      path={`${path}/:id?`}
+      path={getPathLookup(path)}
       render={routeProps => {
         return (
-          <SASQLookupComponent
+          <RouteLookupComponent
             ref={lookupRef}
             {...routeProps}
             fetchParameters={fetchParameters}
@@ -50,9 +54,9 @@ const SASQRoute = forwardRef(({
             <Switch>
               {children}
               <Route
-                path={`${path}/:id`}
+                path={getPathView(path)}
                 render={innerProps => (
-                  <SASQViewComponent
+                  <RouteViewComponent
                     ref={viewRef}
                     {...innerProps}
                     fetchParameters={fetchParameters}
@@ -63,7 +67,7 @@ const SASQRoute = forwardRef(({
                 )}
               />
             </Switch>
-          </SASQLookupComponent>
+          </RouteLookupComponent>
         );
       }}
     />
@@ -77,7 +81,17 @@ SASQRoute.propTypes = {
     PropTypes.func
   ]),
   fetchParameters: PropTypes.object,
+  getPathLookup: PropTypes.func,
+  getPathView: PropTypes.func,
   path: PropTypes.string,
+  SASQLookupComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  SASQViewComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
   ViewComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node

package/src/lib/SASQViewComponent/SASQViewComponent.js

@@ -16,6 +16,16 @@ const SASQViewComponent = forwardRef(({
   match,
   path,
   ViewComponent,
+  viewQueryNamespaceGenerator = ({ namespace, componentId, id: passedId }) => {
+    const queryNamespace = [namespace, 'SASQ'];
+    if (componentId) {
+      queryNamespace.push(componentId);
+    }
+    queryNamespace.push('view');
+    queryNamespace.push(passedId);
+
+    return queryNamespace;
+  },
   ...props
 }, ref) => {
   const { 0: namespace } = useNamespace();
@@ -23,16 +33,15 @@ const SASQViewComponent = forwardRef(({
   // If itemEndpoint is available, use that, otherwise use standard endpoint
   const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
 
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('view');
-  queryNamespace.push(match?.params?.id);
-
   const ky = useOkapiKy();
   const { data = {}, ...rest } = useQuery(
-    queryNamespace,
+    viewQueryNamespaceGenerator({
+      componentId: id,
+      namespace,
+      endpoint,
+      id: match?.params?.id,
+      match,
+    }),
     () => ky(`${endpoint}/${match?.params?.id}`).json(),
     {
       enabled: !!match?.params?.id