@appquality/unguess-design-system 3.1.80 → 3.1.81

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# v3.1.81 (Thu May 09 2024)
+
+#### 🐛 Bug Fix
+
+- Fix highlight for long selections [#331](https://github.com/AppQuality/unguess-design-system/pull/331) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- removed border radius from highlighted word [#332](https://github.com/AppQuality/unguess-design-system/pull/332) ([@iDome89](https://github.com/iDome89))
+- fixees for searched term and break word [#330](https://github.com/AppQuality/unguess-design-system/pull/330) ([@iDome89](https://github.com/iDome89))
+
+#### Authors: 2
+
+- [@iDome89](https://github.com/iDome89)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.80 (Tue May 07 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -3930,11 +3930,14 @@ const useHighlightContext = () => {
     return context; // Now we can use the context in the component, SAFELY.
 };
 
+const StyledSearchWord = styled__default["default"].span `
+background-color: ${({ theme }) => theme.palette.product.talk};
+color: ${({ theme }) => theme.palette.grey[700]};`;
 const Searchable = ({ start, text, }) => {
     const { searchTerm } = useHighlightContext();
     if (searchTerm) {
         const parts = text.split(new RegExp(`(${searchTerm})`, "gi"));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, index) => part.toLowerCase() === searchTerm.toLowerCase() ? (jsxRuntime.jsx("mark", { children: part }, index)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: part }))) }));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, index) => part.toLowerCase() === searchTerm.toLowerCase() ? (jsxRuntime.jsx(StyledSearchWord, { children: part }, index)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: part }))) }));
     }
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
 };
@@ -3964,25 +3967,15 @@ const StyledWord = styled__default["default"](reactTypography.Span) `
 `;
 const ActiveWord = styled__default["default"].span `
   background-color: ${({ theme }) => getColor(theme.palette.fuschia, 700, undefined, 0.5)};
-  border-radius: ${({ theme }) => theme.borderRadii.lg};
   padding: 0 2px;
 `;
 const WordsContainer = styled__default["default"].div `
+  word-wrap: break-word;
   ${StyledWord}, span {
     &::selection {
       background-color: ${({ theme }) => getColor(theme.palette.kale, 700, undefined, 0.5)};
     }
   }
-
-  observation:first-of-type {
-    border-top-left-radius: ${({ theme }) => theme.borderRadii.lg};
-    border-bottom-left-radius: ${({ theme }) => theme.borderRadii.lg};
-  }
-
-  observation:last-of-type {
-    border-top-right-radius: ${({ theme }) => theme.borderRadii.lg};
-    border-bottom-right-radius: ${({ theme }) => theme.borderRadii.lg};
-  }
 `;
 /**
  *  Use Highlight to use highlight interation on any text element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.80",
+  "version": "3.1.81",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",