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

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-03-06T00:03:21.988Z
+                at 2026-03-12T15:30:01.874Z
             </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-03-06T00:03:21.988Z
+                at 2026-03-12T15:30:01.874Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

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

@@ -0,0 +1,35 @@
+import matchString from '../matchString';
+
+import css from '../../../../styles/stringMatchStyles.css';
+
+const highlightString = (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 (
+          <mark
+            key={`highlight-mark-${part}-${i}`}
+            className={css.whitespacePre}
+          >
+            {part}
+          </mark>
+        );
+      }
+
+      return (
+        <span
+          key={`highlight-span-${part}-${i}`}
+          className={css.whitespacePre}
+        >
+          {part}
+        </span>
+      );
+    })
+  );
+};
+
+export default highlightString;

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

@@ -0,0 +1,67 @@
+// We're using the base render as we don't need any kint harness stuff, and it causes jest artifacts
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import highlightString from './highlightString';
+
+import css from '../../../../styles/stringMatchStyles.css';
+
+const renderHighlighted = (match, str, ignoreNull, simpleSplit) => {
+  const result = highlightString(match, str, ignoreNull, simpleSplit);
+  const { container } = render(<div>{result}</div>);
+  return container;
+};
+
+describe('highlightString', () => {
+  describe('logic and structure', () => {
+    test.each([
+      ['hello', 'say hello world', 1, 'wraps matched text in <mark>'],
+      ['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, expectedMarks) => {
+      const container = renderHighlighted(match, str);
+      expect(container.querySelectorAll('mark')).toHaveLength(expectedMarks);
+      expect(container.textContent).toBe(str);
+    });
+
+    test('returns full string without marks when no match', () => {
+      const container = renderHighlighted('xyz', 'hello world');
+      expect(container.querySelectorAll('mark')).toHaveLength(0);
+      expect(container.textContent).toBe('hello world');
+    });
+  });
+
+  describe('space preservation (all modes)', () => {
+    test.each([
+      // match, str, ignoreNull, simpleSplit
+      ['A', 'AN 2025', true, false],
+      ['AN', 'AN 2025', true, false],
+      ['AN ', 'AN 2025', true, false],
+      ['AN 2025', 'AN 2025', true, false],
+      ['hello', 'hello world', true, false],
+      ['AB', 'AB CD EF', true, false],
+      ['world', 'hello world', true, false],
+      ['a', 'a b a', true, false],
+      ['AN', 'AN 2025', true, true],
+      ['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 = renderHighlighted(match, str, ignore, simple);
+      expect(container.textContent).toBe(str);
+    });
+  });
+
+  describe('whitespace styling', () => {
+    test.each([
+      ['mark', 'AN', 'AN 2025'],
+      ['span', 'AN', 'AN 2025'],
+    ])('%s elements should have whiteSpace: pre', (selector, match, str) => {
+      const container = renderHighlighted(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);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default as highlightString } from './highlightString';
+export { default as boldString } from './boldString';

package/styles/TypeDown.css

@@ -20,8 +20,8 @@
   box-shadow: var(--shadow);
   border: 1px solid #ccc;
   margin-top: 0;
-  max-width: max(var(--searchWidth), 300px);
-  min-width: min(var(--searchWidth), 300px);
+  width: var(--searchWidth);
+  min-width: max(var(--searchWidth), 300px);
   pointer-events: all;
   z-index: 1000;
 }

package/styles/stringMatchStyles.css

@@ -0,0 +1,3 @@
+.whitespacePre {
+    white-space: pre;
+}

package/es/lib/utils/highlightString.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.highlightString = exports.boldString = void 0;
-var _matchString = _interopRequireDefault(require("./matchString"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const highlightString = function (match, str) {
-  let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  const [parts, regex] = (0, _matchString.default)(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 /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {
-        children: part
-      }, i);
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: part
-    }, i);
-  });
-};
-exports.highlightString = highlightString;
-const boldString = function (match, str) {
-  let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  const [parts, regex] = (0, _matchString.default)(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 /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
-        children: part
-      }, i);
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: part
-    }, i);
-  });
-};
-exports.boldString = boldString;