@k-int/stripes-kint-components 5.32.0 → 5.33.1

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-17T13:52:17.739Z
+                at 2026-03-09T14:50:53.363Z
             </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-17T13:52:17.739Z
+                at 2026-03-09T14:50:53.363Z
             </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-17T13:52:17.739Z
+                at 2026-03-09T14:50:53.363Z
             </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-17T13:52:17.739Z
+                at 2026-03-09T14:50:53.363Z
             </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-17T13:52:17.739Z
+                at 2026-03-09T14:50:53.363Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -99,11 +99,40 @@ const Settings = ({
   }, [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} />}
+      render={props2 => (
+        <Current
+          {...props2}
+          label={internalRoute.page.label}
+          stripes={stripes}
+        />
+      )}
     />);
   }), [internalRoutes, match.path, stripes]);
 

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" />}
+  />
+);
+```

package/src/lib/Settings/hooks/useSettings/useSettings.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-
 import { useQueries } from 'react-query';
+
 import { useOkapiKy, useStripes } from '@folio/stripes/core';
 
 // We have swapped from the stripes-smart components settings page to our own internal one.
@@ -13,12 +13,30 @@ import { SettingPage, SettingPagePane } from '../../SettingPage';
 import { SettingsContext } from '../../contexts';
 
 import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../../utils';
-import { useKintIntl, useIntlKey } from '../../../hooks';
+import { useIntlKey, useKintIntl } from '../../../hooks';
+
+const InternalSettingsContextProvider = ({ children, contextValue }) => (
+  <SettingsContext.Provider value={contextValue}>
+    {children}
+  </SettingsContext.Provider>
+);
+
+InternalSettingsContextProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  contextValue: PropTypes.object,
+};
 
 // TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
 const useSettings = (settingsProps = {}) => {
   const {
     allowGlobalEdit = true,
+    // DEPRECATED This prop will eventually be set to FALSE in a breaking change.
+    // This is a LEGACY prop, which ensured each page had context pre-wrapped.
+    // This is NOT required while using Settings component within kint-components
+    // to render dynamic pages, but the dynamic pages break if context is missing with
+    // the stripes smart components model
+    // Turn this OFF if having difficulties with settings page redraws (When using SASQ in particular)
+    contextPerPage = true,
     dynamicPageExclusions,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
@@ -40,6 +58,7 @@ const useSettings = (settingsProps = {}) => {
   const ky = useOkapiKy();
   const stripes = useStripes();
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
 
   // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
 
@@ -154,50 +173,42 @@ const useSettings = (settingsProps = {}) => {
 
   const finalSections = useMemo(() => {
     return sectionMetaArray.map(((sma, idx) => {
-      const SettingsContextProvider = ({ children }) => {
-        const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
-
-        const contextValue = useMemo(() => ({
-          intlKey: sma.intlKey ?? intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
-          refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
-          settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
-          templateEndpoint: sma.templateEndpoint ?? templateEndpoint,
-        }), [intlKey]);
-
-        return (
-          <SettingsContext.Provider
-            value={contextValue}
-          >
-            {children}
-          </SettingsContext.Provider>
-        );
-      };
-
-      SettingsContextProvider.propTypes = {
-        children: PropTypes.oneOfType([
-          PropTypes.func,
-          PropTypes.node
-        ])
+      const contextValue = {
+        intlKey: sma.intlKey ?? intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
+        refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
+        settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
+        templateEndpoint: sma.templateEndpoint ?? templateEndpoint,
       };
 
       const finalPermission = sma.sectionPermission ?? sectionPermission;
       if (!finalPermission || stripes.hasPerm(finalPermission)) {
         const dynamicPagesFromQueryReturn = getDynamicPages(queryReturnArray[idx], sma);
 
-        const finalPages = sma.pages ?? pages ?? (sma.persistentPages ?? persistentPages).concat(dynamicPagesFromQueryReturn.dynamic).sort(sortByLabel).map((p) => {
-          return {
-            ...p,
-            component: (pCProps) => (
-              <SettingsContextProvider>
-                <p.component {...pCProps} />
-              </SettingsContextProvider>
-            )
-          };
-        });
+        const finalPages = sma.pages ?? pages ??
+          (sma.persistentPages ?? persistentPages)
+            .concat(dynamicPagesFromQueryReturn.dynamic)
+            .sort(sortByLabel)
+            .map((p) => {
+              let component = p.component;
+              if (contextPerPage) {
+                component = (cprops) => (
+                  <InternalSettingsContextProvider contextValue={contextValue}>
+                    <p.component {...cprops} />
+                  </InternalSettingsContextProvider>
+                );
+              }
+
+              return {
+                ...p,
+                component,
+                Provider: InternalSettingsContextProvider,
+                contextValue,
+              };
+            });
 
         return {
           ...sma,
-          SettingsContextProvider,
+          SettingsContextProvider: InternalSettingsContextProvider,
           ...dynamicPagesFromQueryReturn,
           pageList: finalPages, // DEPRECATED Here for backwards compatibility
           pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
@@ -205,46 +216,47 @@ const useSettings = (settingsProps = {}) => {
       }
       return null;
     })).filter(Boolean);
-  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
+  }, [contextPerPage, getDynamicPages, intlKey, pages, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
 
-  const pageList = useMemo(() => {
+  const outputPages = useMemo(() => {
     let finalPages = null;
-    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+    if (finalSections?.length === 1 && !renderSingleSection) {
       finalPages = pages ?? finalSections[0].pages;
     }
 
     return finalPages;
   }, [finalSections, pages, renderSingleSection]);
 
-  const passedSections = useMemo(() => {
+  const outputSections = useMemo(() => {
     if (finalSections.length > 1 || (finalSections.length === 1 && renderSingleSection)) {
       return finalSections;
     }
     return null;
   }, [finalSections, renderSingleSection]);
 
-  const SettingsComponent = (props) => {
+  const SettingsComponent = useCallback((props) => {
     return (
       <Settings
-        pages={pageList}
+        pages={outputPages}
         paneTitle={
           kintIntl.formatKintMessage({
             id: 'meta.title'
           })}
-        sections={passedSections}
+        sections={outputSections}
         {...props}
       />
     );
-  };
+  }, [kintIntl, outputPages, outputSections]);
 
   return {
     isLoading,
-    pageList,
-    sections: finalSections,
+    pageList: outputPages,
+    sections: outputSections,
     SettingsComponent,
     // This doesn't make much sense if there is more than one section, here to avoid breaking changes
-    SettingsContextProvider: (finalSections && finalSections.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
+    SettingsContextProvider: (finalSections?.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
   };
 };
 
 export default useSettings;
+

package/src/lib/Settings/index.js

@@ -9,6 +9,9 @@ export {
   SettingPagePane,
 } from './SettingPage';
 
+// Internal replacement for stripes-smart-components Settings component
+export { default as Settings } from './Settings';
+
 // EditableSettingsList
 export * from './EditableSettingsList';
 

package/src/lib/utils/index.js

@@ -17,7 +17,7 @@ export { default as toCamelCase } from './toCamelCase'; // I hate that this exis
 
 
 export { default as matchString } from './matchString';
-export { boldString, highlightString } from './highlightString';
+export * from './stringStyling';
 
 export {
   parseKiwtQueryGroups,

package/src/lib/utils/matchString/index.js

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

package/src/lib/utils/matchString/matchString.js

@@ -0,0 +1,44 @@
+import escapeRegExp from 'lodash/escapeRegExp';
+
+const matchString = (match, str, ignoreNull = true, simpleSplit = true) => {
+  // Simple regex split -- this is default behaviour
+  const regexSimple = new RegExp(
+    `${match.split(/(\s+)/)
+      .filter(h => h.trim())
+      .map(hl => '(' + escapeRegExp(hl) + ')')
+      .join('|')}`,
+    'gi'
+  );
+
+  // Split Elvis "The King" Presley into [Elvis, The King, Presley]
+  const quotedParts = match.match(/"[^"]*"|\S+/g) || [];
+  const regex = new RegExp(
+    `${
+      quotedParts
+        .filter(h => h.trim())
+        .map(quotedSection => {
+          if (quotedSection.charAt(0) === '"' && quotedSection.charAt(quotedSection.length - 1) === '"') {
+            return quotedSection.slice(1, -1);
+          }
+          return quotedSection;
+        })
+        .map(hl => '(' + escapeRegExp(hl) + ')')
+        .join('|')
+    }`,
+    'gi'
+  );
+
+  if (ignoreNull && !match) {
+    const nullRegex = /a^/gi; // Should match nothing
+
+    return [[str], nullRegex];
+  }
+
+  if (simpleSplit) {
+    return [str.split(regexSimple)?.filter(s => s != null && s !== ''), regexSimple];
+  }
+
+  return [str.split(regex)?.filter(s => s != null && s !== ''), regex];
+};
+
+export default matchString;

package/src/lib/utils/matchString/matchString.test.js

@@ -0,0 +1,68 @@
+import matchString from './matchString';
+
+describe('matchString', () => {
+  describe('simpleSplit=true (default)', () => {
+    test.each([
+      ['hello', 'say hello world', 'hello', 'splits by matched term'],
+      ['HELLO', 'say hello world', 'hello', 'match is case insensitive'],
+      ['foo bar', 'foo baz bar', 'foo', 'highlights individual words'],
+      ['foo bar', 'foo baz bar', 'bar', 'highlights individual words (second word)'],
+      ['foo.bar', 'foo.bar baz', 'foo.bar', 'handles regex special characters'],
+      ['(test)', '(test) value', '(test)', 'handles parentheses'],
+    ])('%s: when searching "%s", parts should contain "%s"', (term, str, expected) => {
+      const [parts] = matchString(term, str);
+      expect(parts).toContain(expected);
+    });
+
+    test.each([
+      ['AN', 'AN 2025', 'start of string'],
+      ['AN 2025', 'AN 2025', 'full match'],
+      ['AB', 'AB CD EF', 'multiple spaces'],
+      ['world', 'hello world', 'end of string'],
+      ['a', 'a b a', 'multiple matches'],
+      ['A', 'AN 2025', 'single character'],
+      ['AN ', 'AN 2025', 'trailing space'],
+    ])('preserves original string structure for "%s" in "%s" (%s)', (term, str) => {
+      const [parts] = matchString(term, str);
+      expect(parts.join('')).toBe(str);
+    });
+
+    test('returns full string when no match found', () => {
+      const [parts] = matchString('xyz', 'hello world');
+      expect(parts).toEqual(['hello world']);
+    });
+
+    test('returns regex as second element with correct flags', () => {
+      const [, regex] = matchString('test', 'this is a test');
+      expect(regex).toBeInstanceOf(RegExp);
+      expect(regex.flags).toMatch(/g/);
+      expect(regex.flags).toMatch(/i/);
+    });
+  });
+
+  describe('simpleSplit=false (quoted string support)', () => {
+    test.each([
+      ['"The King"', 'Elvis The King Presley', 'The King', 'quoted phrases as single term'],
+      ['AN', 'AN 2025', 'AN', 'start of string'],
+      ['AN ', 'AN 2025', 'AN', 'trailing space'],
+      ['"AN 2025"', 'AN 2025', 'AN 2025', 'full match of quoted phrase'],
+      ['hello', 'hello world', 'hello', 'partial match'],
+      ['AB', 'AB CD EF', 'AB', 'multiple spaces'],
+      ['world', 'hello world', 'world', 'end of string'],
+      ['a', 'a b a', 'a', 'multiple matches'],
+      ['A', 'AN 2025', 'A', 'single character'],
+    ])('simpleSplit=false: %s in "%s" should preserve string and contain "%s"', (term, str, expected) => {
+      const [parts] = matchString(term, str, true, false);
+      expect(parts.join('')).toBe(str);
+      expect(parts).toContain(expected);
+    });
+  });
+
+  describe('ignoreNull behavior', () => {
+    test('returns full string with non-matching regex when match is empty and ignoreNull=true', () => {
+      const [parts, regex] = matchString('', 'hello world', true);
+      expect(parts).toEqual(['hello world']);
+      expect(regex.exec('anything')).toBeNull();
+    });
+  });
+});

package/src/lib/utils/stringStyling/boldString.js

@@ -0,0 +1,35 @@
+import matchString from '../matchString';
+
+import css from '../../../../styles/stringMatchStyles.css';
+
+const boldString = (match, str, ignoreNull = true, simpleSplit = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull, simpleSplit);
+
+  return (
+    parts.map((part, i) => {
+      // RegExp is stateful, set up a new one to work with
+      const immutableRegex = new RegExp(regex);
+      if (immutableRegex.exec(part) !== null) {
+        return (
+          <strong
+            key={`bold-strong-${part}-${i}`}
+            className={css.whitespacePre}
+          >
+            {part}
+          </strong>
+        );
+      }
+
+      return (
+        <span
+          key={`bold-span-${part}-${i}`}
+          className={css.whitespacePre}
+        >
+          {part}
+        </span>
+      );
+    })
+  );
+};
+
+export default boldString;

package/src/lib/utils/stringStyling/boldString.test.js

@@ -0,0 +1,59 @@
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import boldString from './boldString';
+
+import css from '../../../../styles/stringMatchStyles.css';
+
+const renderBolded = (match, str, ignoreNull, simpleSplit) => {
+  const result = boldString(match, str, ignoreNull, simpleSplit);
+  const { container } = render(<div>{result}</div>);
+  return container;
+};
+
+describe('boldString', () => {
+  describe('logic and structure', () => {
+    test.each([
+      ['hello', 'say hello world', 1, 'wraps matched text in <strong>'],
+      ['HELLO', 'say hello world', 1, 'match is case insensitive'],
+      ['o', 'foo boo', 4, 'highlights multiple occurrences (o in foo boo)'],
+      ['oo', 'foo boo', 2, 'highlights multiple occurrences (oo in foo boo)'],
+    ])('%s: %s', (match, str, expectedBolds) => {
+      const container = renderBolded(match, str);
+      expect(container.querySelectorAll('strong')).toHaveLength(expectedBolds);
+      expect(container.textContent).toBe(str);
+    });
+
+    test('returns full string without strong tags when no match', () => {
+      const container = renderBolded('xyz', 'hello world');
+      expect(container.querySelectorAll('strong')).toHaveLength(0);
+      expect(container.textContent).toBe('hello world');
+    });
+  });
+
+  describe('space preservation (all modes)', () => {
+    test.each([
+      ['A', 'AN 2025', true, false],
+      ['AN ', 'AN 2025', true, false],
+      ['AN 2025', 'AN 2025', true, true],
+      ['world', 'hello world', true, true],
+    ])('searching "%s" in "%s" (simpleSplit: %s) preserves spaces', (match, str, ignore, simple) => {
+      const container = renderBolded(match, str, ignore, simple);
+      expect(container.textContent).toBe(str);
+    });
+  });
+
+  describe('whitespace styling', () => {
+    test.each([
+      ['strong', 'AN', 'AN 2025'],
+      ['span', 'AN', 'AN 2025'],
+    ])('%s elements should have whiteSpace: pre', (selector, match, str) => {
+      const container = renderBolded(match, str, true, false);
+      const elements = container.querySelectorAll(selector);
+
+      expect(elements.length).toBeGreaterThan(0);
+      elements.forEach(el => {
+        // Compare classname to "whitespacePre" from css
+        expect(el.classList.contains(css.whitespacePre)).toBe(true);
+      });
+    });
+  });
+});