release of v10.95.2 (#6483)

Author: tujoworker

AGENTS.md

@@ -28,3 +28,4 @@
 - Tests should always be written for new functionality and bug fixes.
 - Tests act as a contract to verify the intention of the functionality.
 - Write tests before implementing a fix - this ensures the test captures the expected behavior and verifies the fix works correctly.
+- Prefer document.querySelector over screen from @testing-library/react.

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/tools.mdx

@@ -12,9 +12,19 @@ order: 3
 
 If your AI coding agent supports the Model Context Protocol (MCP), you can run a small local MCP server that exposes the packaged documentation from `/docs`.
 
+But first, make sure you have installed `@dnb/eufemia` in your project:
+
+```bash
+npm install @dnb/eufemia
+# or
+yarn add @dnb/eufemia
+# or
+pnpm add @dnb/eufemia
+```
+
 Run the server from your project (where `@dnb/eufemia` is installed):
 
-Example MCP config (e.g. `.vscode/mcp.json`):
+### Example MCP config (e.g. `.vscode/mcp.json`):
 
 ```json
 {
@@ -29,12 +39,18 @@ Example MCP config (e.g. `.vscode/mcp.json`):
 }
 ```
 
-CLI (Claude MCP):
+### Using Claude CLI with MCP:
 
 ```bash
 claude mcp add --transport stdio eufemia -- node node_modules/@dnb/eufemia/mcp/mcp-docs-server.js
 ```
 
+### Using raicode CLI with MCP (using Claude):
+
+```bash
+raicode mcp add --transport stdio eufemia -- node node_modules/@dnb/eufemia/mcp/mcp-docs-server.js
+```
+
 ### How to use
 
 - The MCP server helps AI apply Eufemia patterns more accurately in code, but results can still be imperfect. So always review the output carefully!

packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap

@@ -97,6 +97,7 @@ export default {
   '--color-emerald-green-50': '#89aaac',
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
+  '--internal-color-background-selected-subtle': '#e4eed7',
   '--ca-font-family-heading': '"ArizonaFlare", var(--font-family-default)',
   '--ca-color-ocean-green': '#00343e',
   '--ca-color-burgundy-red': '#5c0022',
@@ -296,6 +297,7 @@ export default {
   '--color-emerald-green-50': '#89aaac',
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
+  '--internal-color-background-selected-subtle': '#e4eed7',
   '--ca-font-family-heading': '"ArizonaFlare", var(--font-family-default)',
   '--ca-color-ocean-green': '#00343e',
   '--ca-color-burgundy-red': '#5c0022',

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

@@ -1376,67 +1376,72 @@ class AutocompleteInstance extends React.PureComponent {
         ? '' // when searching numbers, we don't care about word boundaries
         : '^|\\s'
 
+    // Pre-compile regex patterns for performance
+    const searchWordsData = searchWords.map((word, wordIndex) => {
+      const processedWord = searchNumbers
+        ? word.replace(/[^\p{L}\p{N}]+/gu, '')
+        : escapeRegexChars(word)
+      const wordBoundary = getWordBoundary(wordIndex)
+
+      return {
+        originalWord: word,
+        processedWord,
+        wordIndex,
+        // Pre-compile regex for filter phase
+        filterRegex: new RegExp(
+          wordIndex >= inWordIndex
+            ? `${processedWord}`
+            : `(${wordBoundary})${processedWord}`,
+          'i'
+        ),
+        // Pre-compile regex for scoring phase
+        scoreRegex: new RegExp(
+          `(${wordBoundary})${escapeRegexChars(word)}`,
+          'ig'
+        ),
+      }
+    })
+
+    // Pre-compile first word regex if needed
+    const firstWordRegex =
+      searchWords.length > 0
+        ? new RegExp(`^${escapeRegexChars(searchWords[0])}`, 'i')
+        : null
+
     const findSearchWords = (contentChunk) => {
       if (typeof contentChunk !== 'string') {
         return []
       }
 
-      return searchWords
-        .map((word, wordIndex) => ({ word, wordIndex }))
-        .filter(({ word, wordIndex }) => {
-          if (searchNumbers) {
-            // Remove all other chars, except numbers, so we can compare
-            word = word.replace(/[^\p{L}\p{N}]+/gu, '')
-          } else {
-            // To ensure we escape regex chars
-            word = escapeRegexChars(word)
-          }
-
-          const wordBoundary = getWordBoundary(wordIndex)
-
-          // if the uses reached word 3, then we go inside words as well
-          const regexWord = new RegExp(
-            wordIndex >= inWordIndex
-              ? `${word}`
-              : `(${wordBoundary})${word}`,
-            'i'
-          )
-
-          if (regexWord.test(contentChunk)) {
+      return searchWordsData
+        .filter(({ filterRegex, processedWord }) => {
+          if (filterRegex.test(contentChunk)) {
             return true
           }
 
           if (
             searchNumbers &&
-            regexWord.test(contentChunk.replace(/[^0-9]/g, ''))
+            filterRegex.test(contentChunk.replace(/[^0-9]/g, ''))
           ) {
             return true
           }
 
           return false
         })
-        .map(({ word, wordIndex }) => {
+        .map(({ originalWord, wordIndex, scoreRegex }) => {
           // Use 1 to ensure we never have 0, because we filter out words with 0 later
           let wordScore = 0
 
           // Check how ofter the current written word is inside the content,
           // and give a score for each one
-          wordScore += (
-            contentChunk.match(
-              new RegExp(
-                `(${getWordBoundary(wordIndex)})${escapeRegexChars(word)}`,
-                'ig'
-              )
-            ) || []
-          ).length
+          wordScore += (contentChunk.match(scoreRegex) || []).length
 
           // Give the first word extra points
-          if (wordIndex === 0) {
+          if (wordIndex === 0 && firstWordRegex) {
             // Check if the first chunk starts the first written word
-            const isFirstWord = new RegExp(
-              `^${escapeRegexChars(searchWords[0])}`,
-              'i'
-            ).test(contentChunk.split(' ')[0])
+            const isFirstWord = firstWordRegex.test(
+              contentChunk.split(' ')[0]
+            )
 
             // If yes, add the amount of possible words + 1
             if (isFirstWord) {
@@ -1445,7 +1450,7 @@ class AutocompleteInstance extends React.PureComponent {
           }
 
           return {
-            word,
+            word: originalWord,
             wordIndex,
             wordScore,
           }
@@ -1566,14 +1571,17 @@ class AutocompleteInstance extends React.PureComponent {
 
           if (segment.includes(strS)) {
             // to make sure we don't have several in a row
+            const startRepeatRegex = new RegExp(`(${strS})+`, 'g')
+            const endRepeatRegex = new RegExp(`(${strE})+`, 'g')
+            const adjacentRegex = new RegExp(`(${strE}${strS})`, 'g')
+            const splitRegex = new RegExp(`(${strS}|${strE})`, 'g')
+
             const normalized = segment
-              .replace(new RegExp(`(${strS})+`, 'g'), strS)
-              .replace(new RegExp(`(${strE})+`, 'g'), strE)
-              .replace(new RegExp(`(${strE}${strS})`, 'g'), '')
+              .replace(startRepeatRegex, strS)
+              .replace(endRepeatRegex, strE)
+              .replace(adjacentRegex, '')
 
-            const tokens = normalized
-              .split(new RegExp(`(${strS}|${strE})`, 'g'))
-              .filter(Boolean)
+            const tokens = normalized.split(splitRegex).filter(Boolean)
 
             let isHighlighted = false
             let highlightIndex = 0

packages/dnb-eufemia/src/components/copy-on-click/__tests__/CopyOnClick.test.tsx

@@ -180,7 +180,7 @@ describe('CopyOnClick', () => {
     const originalWrite = navigator.clipboard.writeText
     navigator.clipboard.writeText = jest
       .fn()
-      .mockRejectedValue(new Error('permission denied'))
+      .mockRejectedValue(new Error('Permission denied'))
 
     // Ensure fallback does not succeed
     document.execCommand = jest.fn(() => false)

packages/dnb-eufemia/src/components/input-masked/addons/emailPipe.ts

@@ -10,6 +10,10 @@ const dotDot = '..'
 const emptyArray = []
 const allDotsRegExp = /\./g
 
+function createEmptyEmailRegex(placeholderChar: string) {
+  return new RegExp(`[^@\\s.${placeholderChar}]`)
+}
+
 export default function emailPipe(conformedValue, config) {
   const {
     currentCaretPosition,
@@ -25,7 +29,7 @@ export default function emailPipe(conformedValue, config) {
   const indexOfAtDot = value.indexOf(atDot)
 
   const emptyEmail =
-    rawValue.match(new RegExp(`[^@\\s.${placeholderChar}]`)) === null
+    rawValue.match(createEmptyEmailRegex(placeholderChar)) === null
 
   if (emptyEmail) {
     return emptyString

packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.tsx

@@ -1738,7 +1738,7 @@ describe('NumberFormat copy tooltip', () => {
     )
 
     if (!selection) {
-      throw new Error('selection element is missing')
+      throw new Error('Selection element is missing')
     }
 
     fireEvent.copy(selection)

packages/dnb-eufemia/src/components/popover/PopoverContainer.tsx

@@ -834,6 +834,21 @@ function PopoverContainer(props: PopoverContainerProps) {
     return null
   }
 
+  // Pre-compute className variations to avoid multiple .map() calls
+  const noAnimationClasses = noAnimation
+    ? baseClassNames.map((base) => `${base}--no-animation`)
+    : null
+  const fixedClasses = fixedPosition
+    ? baseClassNames.map((base) => `${base}--fixed`)
+    : null
+  const activeClasses = isActive
+    ? baseClassNames.map((base) => `${base}--active`)
+    : null
+  const hideClasses =
+    !isActive && wasActive
+      ? baseClassNames.map((base) => `${base}--hide`)
+      : null
+
   return (
     <span
       ref={elementRef}
@@ -845,13 +860,10 @@ function PopoverContainer(props: PopoverContainerProps) {
       }}
       className={classnames(
         attributes?.className,
-        noAnimation &&
-          baseClassNames.map((base) => `${base}--no-animation`),
-        fixedPosition && baseClassNames.map((base) => `${base}--fixed`),
-        isActive && baseClassNames.map((base) => `${base}--active`),
-        !isActive &&
-          wasActive &&
-          baseClassNames.map((base) => `${base}--hide`)
+        noAnimationClasses,
+        fixedClasses,
+        activeClasses,
+        hideClasses
       )}
       style={containerStyle}
     >

packages/dnb-eufemia/src/components/upload/UploadVerify.tsx

@@ -183,10 +183,12 @@ export function extendWithAbbreviation(
   abbreviations = { jpg: 'jpeg' }
 ) {
   const list = [...acceptedFileTypes]
+  const listSet = new Set(list)
 
   Object.entries(abbreviations).forEach(([type, abbr]) => {
-    if (list.some((t) => t === type) && !list.some((t) => t === abbr)) {
+    if (listSet.has(type) && !listSet.has(abbr)) {
       list.push(abbr)
+      listSet.add(abbr)
     }
   })
 

packages/dnb-eufemia/src/elements/typography/P.tsx

@@ -98,7 +98,10 @@ const handleDeprecatedProps = ({
       .forEach((modifier) => allModifiers.push(modifier))
   }
 
-  const remainingModifiers = allModifiers.filter(Boolean).filter((cur) => {
+  const remainingModifiers = allModifiers.filter((cur) => {
+    if (!cur) {
+      return false
+    }
     if (['x-small'].includes(cur)) {
       oldSize = 'x-small'
     } else if (['small'].includes(cur)) {