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

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [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,12 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    mainPaneProps,
+    mainPaneProps = {},
     mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
+    queryParameterGenerator = _utils.generateKiwtQuery,
+    // Expects a function which accepts SASQ_MAP and nsValues
     RenderBody,
     rowNavigation = true,
     // Default navigation onRowClick
@@ -40,28 +42,41 @@ 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'];
@@ -97,6 +112,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     },
     queryGetter: queryGetter,
     querySetter: querySetter,
+    syncToLocation: syncToLocation,
     ...sasqProps,
     ...paginationSASQProps,
     children: sasqRenderProps => {
@@ -246,6 +262,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.15.0",
+  "version": "5.16.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,10 +40,11 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    mainPaneProps,
+    mainPaneProps = {},
     mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
+    queryParameterGenerator = generateKiwtQuery, // Expects a function which accepts SASQ_MAP and nsValues
     RenderBody,
     rowNavigation = true, // Default navigation onRowClick
     sasqProps,
@@ -53,25 +54,43 @@ const SASQLookupComponent = forwardRef((props, ref) => {
   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);
@@ -118,6 +137,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
       initialSearchState={{ query: '' }}
       queryGetter={queryGetter}
       querySetter={querySetter}
+      syncToLocation={syncToLocation}
       {...sasqProps}
       {...paginationSASQProps}
     >
@@ -315,6 +335,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