@k-int/stripes-kint-components 5.31.4 → 5.33.0

package/src/artifacts/coverage-jest/utils/refdataQueryKey/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/refdataQueryKey/refdataQueryKey.js.html

@@ -97,7 +97,7 @@ export default refdataQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/selectorSafe.js.html

@@ -130,7 +130,7 @@ export default selectorSafe;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/sortByLabel.js.html

@@ -115,7 +115,7 @@ export default sortByLabel;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/toCamelCase.js.html

@@ -112,7 +112,7 @@ export default toCamelCase;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/typedownQueryKey.js.html

@@ -97,7 +97,7 @@ export default typedownQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/validators.js.html

@@ -355,7 +355,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/lib/ButtonTypedown/ButtonTypedown.js

@@ -1,15 +1,38 @@
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { DropdownButton } from '@folio/stripes/components';
+import { DropdownButton, Tooltip } from '@folio/stripes/components';
 
 import SearchField from '../SearchField';
 import Typedown from '../Typedown';
 
 const ButtonTypedown = ({
   id,
+  renderButtonItem,
   renderListItem,
+  tooltipProps: {
+    getTooltipText, // A special prop that selectedValue can be passed into
+    ...tooltipProps
+  } = {},
   ...typedownProps
 }) => {
+  const renderButtonFunc = useCallback((selectedValue) => {
+    if (renderButtonItem) {
+      return renderButtonItem(selectedValue);
+    }
+
+    return renderListItem(selectedValue);
+  }, [renderButtonItem, renderListItem]);
+
+  const usesTypedown = (
+    getTooltipText &&
+      typeof getTooltipText === 'function'
+    ) ||
+    (
+      tooltipProps?.text &&
+      tooltipProps.text !== ''
+    );
+
   return (
     <Typedown
       getDisplayValue={() => false}
@@ -27,18 +50,59 @@ const ButtonTypedown = ({
         triggerComponentRef,
         triggerId,
         typedownTriggerKeyDownHandler
-      }) => (
-        <DropdownButton
-          ref={triggerComponentRef}
-          buttonStyle="dropdownItem"
-          fullWidth
-          id={triggerId}
-          marginBottom0
-          onKeyDown={typedownTriggerKeyDownHandler}
-        >
-          {renderListItem(selectedValue)}
-        </DropdownButton>
-      )}
+      }) => {
+        const renderButton = ({
+          buttonRef,
+          ...buttonProps
+        }) => {
+          return (
+            <DropdownButton
+              ref={buttonRef}
+              buttonStyle="dropdownItem"
+              id={triggerId}
+              marginBottom0
+              onKeyDown={typedownTriggerKeyDownHandler}
+              {...buttonProps}
+            >
+              {renderButtonFunc(selectedValue)}
+            </DropdownButton>
+          );
+        };
+
+        if (!usesTypedown) {
+          return renderButton({
+            buttonRef: triggerComponentRef,
+          });
+        }
+
+        const typedownText = (
+          getTooltipText &&
+          typeof getTooltipText === 'function'
+        ) ?
+          getTooltipText(selectedValue) :
+          (tooltipProps?.text || '');
+
+        return (
+          <Tooltip
+            id={`button-typedown-trigger-${id}`}
+            placement="bottom"
+            text={typedownText}
+          >
+            {({ ref: tooltipRef, ariaIds }) => (
+              renderButton({
+                buttonRef: (node) => {
+                  // Contrive composed node from tooltip AND triggerComponent
+                  triggerComponentRef(node);
+                  if (tooltipRef.current !== node && !!node) {
+                    tooltipRef.current = node;
+                  }
+                },
+                'aria-labelledby': ariaIds.text
+              })
+            )}
+          </Tooltip>
+        );
+      }}
       {...typedownProps}
     />
   );

package/src/lib/Settings/Settings/Settings.js

@@ -0,0 +1,215 @@
+import { useCallback, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Switch,
+  Route,
+} from 'react-router-dom';
+
+import { useStripes } from '@folio/stripes/core';
+
+import {
+  NavList,
+  NavListItem,
+  NavListSection,
+  Pane,
+} from '@folio/stripes/components';
+
+// This is a functional version of the component in stripes-smart-components, onto which we can add some extra functionality
+const Settings = ({
+  additionalRoutes,
+  // activeLink,
+  location,
+  match,
+  navPaneWidth = '30%',
+  paneProps = {},
+  paneTitle,
+  paneTitleRef: passedPaneTitleRef,
+  pages,
+  sections: passedSections,
+}) => {
+  const stripes = useStripes();
+  const internalPaneTitleRef = useRef();
+  const paneTitleRef = passedPaneTitleRef || internalPaneTitleRef;
+
+  const sections = useMemo(() => {
+    if (passedSections) {
+      return passedSections;
+    }
+
+    return ([{ label: '', pages: (pages || []) }]);
+  }, [pages, passedSections]);
+
+  const internalRoutes = useMemo(() => {
+    return sections.flatMap(section => {
+      return section.pages
+        .filter(p => !p.perm || stripes.hasPerm(p.perm))
+        .flatMap(p => ({
+          page: p,
+          component: p.component, // This was previously stripes connected... is this going to cause issues?
+        }));
+    });
+  }, [sections, stripes]);
+
+  const handlePaneFocus = useCallback(({ paneTitleRef: ptr }) => {
+    if (ptr) ptr.current.focus();
+  }, []);
+
+  // links in a given section
+  const navlinks = useCallback((section) => {
+    let activeLink = ''; // Store which link is active... there is DEFINITELY a better way to get this...
+
+    const navItems = section.pages.map((p) => {
+      const search = location.search || '';
+      const link = `${match.path}/${p.route}`;
+      let href = link;
+      let isActive = false;
+
+      // NavListItem allows for isActive to be set independently, rather than
+      // strict internal comparison of the href and the `activeLink`
+      // Since the location can be augmented after navigation through subsequent navigation
+      // or through appending a query string, it's best to
+      // solely rely on the pathname for appying the style vs equality.
+      if (location.pathname.startsWith(link)) {
+        // apply the query string for the active link only.
+        href = link + search;
+        activeLink = link;
+        isActive = true;
+      }
+      if (p.perm && !stripes.hasPerm(p.perm)) return null;
+
+      return (
+        <NavListItem
+          key={p.route}
+          isActive={isActive}
+          to={href}
+        >
+          {p.label}
+        </NavListItem>
+      );
+    }).filter(x => x !== null);
+
+    return (
+      <NavListSection
+        activeLink={activeLink}
+        label={section.label}
+      >
+        {navItems}
+      </NavListSection>
+    );
+  }, [location.pathname, location.search, match.path, stripes]);
+
+  const routes = useMemo(() => internalRoutes.map((internalRoute) => {
+    const { page } = internalRoute;
+    const { component: Component, contextValue, Provider } = page;
+
+    if (Provider) {
+      return (
+        <Route
+          key={internalRoute.page.route}
+          path={`${match.path}/${internalRoute.page.route}`}
+          render={props2 => (
+            <Provider
+              contextValue={contextValue}
+            >
+              <Component
+                {...props2}
+                label={internalRoute.page.label}
+                stripes={stripes}
+              />
+            </Provider>
+          )}
+        />
+      );
+    }
+
+    const Current = internalRoute.component;
+    return (<Route
+      key={internalRoute.page.route}
+      path={`${match.path}/${internalRoute.page.route}`}
+      render={props2 => (
+        <Current
+          {...props2}
+          label={internalRoute.page.label}
+          stripes={stripes}
+        />
+      )}
+    />);
+  }), [internalRoutes, match.path, stripes]);
+
+  return (
+    <>
+      <Pane
+        defaultWidth={navPaneWidth}
+        id="app-settings-nav-pane"
+        onMount={handlePaneFocus}
+        paneTitle={paneTitle || 'Module Settings'}
+        paneTitleRef={paneTitleRef}
+        {...paneProps}
+      >
+        {sections.map((section, index) => {
+          const {
+            label: {
+              props: sectionProps,
+            },
+          } = section;
+          const id = sectionProps && sectionProps.id ? sectionProps.id : 'Module Settings';
+
+          return (
+            <NavList
+              key={index}
+              aria-label={id}
+            >
+              {navlinks(section)}
+            </NavList>
+          );
+        })
+        }
+      </Pane>
+      <Switch>
+        {additionalRoutes}
+        {routes}
+      </Switch>
+    </>
+  );
+};
+
+Settings.propTypes = {
+  activeLink: PropTypes.string,
+  additionalRoutes: PropTypes.arrayOf(
+    PropTypes.object.isRequired,
+  ),
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+    search: PropTypes.string,
+  }),
+  match: PropTypes.shape({
+    path: PropTypes.string.isRequired,
+  }).isRequired,
+  navPaneWidth: PropTypes.string,
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      component: PropTypes.func.isRequired,
+      label: PropTypes.node.isRequired,
+      perm: PropTypes.string,
+      route: PropTypes.string.isRequired,
+    }),
+  ),
+  paneBackLink: PropTypes.string,
+  paneTitle: PropTypes.node,
+  paneTitleRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  sections: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node.isRequired,
+      pages: PropTypes.arrayOf(
+        PropTypes.shape({
+          component: PropTypes.func.isRequired,
+          label: PropTypes.node.isRequired,
+          perm: PropTypes.string,
+          route: PropTypes.string.isRequired,
+        }),
+      ).isRequired,
+    }),
+  ),
+};
+
+export default Settings;

package/src/lib/Settings/Settings/index.js

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

package/src/lib/Settings/hooks/useSettings/README.md

@@ -1,5 +1,9 @@
 # useSettings
 
+>[!WARNING]
+>Legacy Pattern > This hook has become significantly complex and "heavy" due to the need to support legacy stripes-smart-components patterns while managing dynamic context injection.
+> It is possible that this pattern will be significantly reworked in future versions to separate data-fetching logic from UI component generation in a more modular way.
+
 A comprehensive hook that manages the retrieval and configuration of settings data for one or multiple sections. It orchestrates multiple queries with `react-query`, constructs dynamic pages for each settings section, and returns a pre-configured `SettingsComponent` for rendering the settings UI.
 
 ## Overview
@@ -45,24 +49,25 @@ const SettingsContainer = () => {
 
 `useSettings` accepts an optional settings props object (`settingsProps`) that may include the following properties:
 
-| Name                   | Type     | Description                                                                                                                                                                                                                                | Required |
-|------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
-| `allowGlobalEdit`      | `boolean`| Global flag to enable or disable editing of settings. Defaults to `true`.                                                                                                                                                                  | ✕        |
-| `dynamicPageExclusions`| `array`  | Array of section names to be excluded from dynamic page generation.                                                                                                                                                                        | ✕        |
-| `intlKey`              | `string` | Base internationalization key for resolving labels.                                                                                                                                                                                        | ✕        |
-| `intlNS`               | `string` | Internationalization namespace.                                                                                                                                                                                                            | ✕        |
-| `labelOverrides`       | `object` | Custom label overrides for specific settings keys.                                                                                                                                                                                         | ✕        |
-| `pages`                | `array`  | If provided, acts as a passthrough configuration for either sections or standalone pages, disabling query execution.                                                                                                                       | ✕        |
-| `persistentPages`      | `array`  | Array of pages that persist regardless of dynamic query results.                                                                                                                                                                           | ✕        |
-| `preventQueries`       | `boolean`| Flag to disable querying if settings data is provided externally.                                                                                                                                                                          | ✕        |
-| `refdataEndpoint`      | `string` | The API endpoint to retrieve reference data for settings.                                                                                                                                                                                  | ✕        |
-| `renderSingleSection`  | `boolean`| When only one section is available, determines if it should be rendered as a single section with its own label.                                                                                                                            | ✕        |
-| `sectionPermission`    | `string` | Permission string that, if provided, restricts the rendering of a section unless the current user has the specified permission.                                                                                                            | ✕        |
-| `sectionRoute`         | `string` | Base route path to be used when constructing dynamic page routes for settings sections.                                                                                                                                                    | ✕        |
-| `sections`             | `array`  | Array of section configuration objects. Each object can override or extend the global settings props for that specific section. This means that the shape here matches more or less the shape for the props of `useSettings` itself.       | ✕        |
-| `settingEndpoint`      | `string` | The base URL endpoint for fetching and updating settings.                                                                                                                                                                                  | ✕        |
-| `templateEndpoint`     | `string` | The endpoint for retrieving settings templates (if applicable).                                                                                                                                                                            | ✕        |
-| `render`               | `func`   | A custom render function for rendering individual setting fields. This function is passed down to the underlying settings components for specialized display logic. See `EditableSettingsList` for more information on how render is used. | ✕        |
+| Name                    | Type      | Description                                                                                                                                                                                                                                | Required |
+|-------------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
+| `allowGlobalEdit`       | `boolean` | Global flag to enable or disable editing of settings. Defaults to `true`.                                                                                                                                                                  | ✕        |
+| `contextPerPage`        | `boolean` | If `true`, wraps every individual page component in a Context Provider. Set to `false` if encountering redraw issues with SASQ components. Defaults to `true`, see "Performance & Redraws" section below for more information.             | ✕        |
+| `dynamicPageExclusions` | `array`   | Array of section names to be excluded from dynamic page generation.                                                                                                                                                                        | ✕        |
+| `intlKey`               | `string`  | Base internationalization key for resolving labels.                                                                                                                                                                                        | ✕        |
+| `intlNS`                | `string`  | Internationalization namespace.                                                                                                                                                                                                            | ✕        |
+| `labelOverrides`        | `object`  | Custom label overrides for specific settings keys.                                                                                                                                                                                         | ✕        |
+| `pages`                 | `array`   | If provided, acts as a passthrough configuration for either sections or standalone pages, disabling query execution.                                                                                                                       | ✕        |
+| `persistentPages`       | `array`   | Array of pages that persist regardless of dynamic query results.                                                                                                                                                                           | ✕        |
+| `preventQueries`        | `boolean` | Flag to disable querying if settings data is provided externally.                                                                                                                                                                          | ✕        |
+| `refdataEndpoint`       | `string`  | The API endpoint to retrieve reference data for settings.                                                                                                                                                                                  | ✕        |
+| `renderSingleSection`   | `boolean` | When only one section is available, determines if it should be rendered as a single section with its own label.                                                                                                                            | ✕        |
+| `sectionPermission`     | `string`  | Permission string that, if provided, restricts the rendering of a section unless the current user has the specified permission.                                                                                                            | ✕        |
+| `sectionRoute`          | `string`  | Base route path to be used when constructing dynamic page routes for settings sections.                                                                                                                                                    | ✕        |
+| `sections`              | `array`   | Array of section configuration objects. Each object can override or extend the global settings props for that specific section. This means that the shape here matches more or less the shape for the props of `useSettings` itself.       | ✕        |
+| `settingEndpoint`       | `string`  | The base URL endpoint for fetching and updating settings.                                                                                                                                                                                  | ✕        |
+| `templateEndpoint`      | `string`  | The endpoint for retrieving settings templates (if applicable).                                                                                                                                                                            | ✕        |
+| `render`                | `func`    | A custom render function for rendering individual setting fields. This function is passed down to the underlying settings components for specialized display logic. See `EditableSettingsList` for more information on how render is used. | ✕        |
 
 ## Returns
 
@@ -81,4 +86,29 @@ The hook returns an object containing:
   A component pre-configured with the pages and sections that renders the settings UI. This component wraps the settings in the required `Settings` component from `@folio/stripes/smart-components`.
 
 - **`SettingsContextProvider`** (`React Component`):  
-  A context provider component for settings configuration. If only one section is available, it is provided directly; otherwise, it defaults to a pass-through provider.
+  A context provider component for settings configuration. If only one section is available, it is provided directly; otherwise, it defaults to a pass-through provider.
+
+## Performance and redraws
+Because SettingsComponent is generated within the hook, its function reference changes whenever the underlying settings data (like pageList or sections) updates.
+
+In some complex scenarios (e.g., using SearchAndSortQuery inside a settings page), this can cause the entire settings pane to unmount and remount (a "redraw"). If you experience lost input focus or flickering, instead of using the returned SettingsComponent, manually render the Settings component using the pageList or sections provided by the hook:
+
+```javascript
+import { Settings } from '@k-int/stripes-kint-components';
+
+const { isLoading, pageList, sections } = useSettings({
+  contextPerPage: false, // This should be turned off for this pattern
+  ...restOfConfig
+});
+
+if (isLoading) return null;
+
+return (
+  <Settings
+    {...props}
+    pages={pageList}
+    sections={sections}
+    paneTitle={<FormattedMessage id="my-app.settings.title" />}
+  />
+);
+```