@topconsultnpm/sdkui-react-beta 6.12.130 → 6.12.132

package/lib/components/base/Styled.d.ts

@@ -13,6 +13,8 @@ export declare const StyledPanelPage: import("styled-components/dist/types").ISt
 }>> & string;
 export declare const StyledOffCanvasPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isOpen: boolean;
+    $width?: string;
+    $mobileHeight?: string;
 }>> & string;
 export declare const StyledOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isOpen: boolean;

package/lib/components/base/Styled.js

@@ -53,7 +53,7 @@ export const StyledOffCanvasPanel = styled.div `
   position: fixed;
   background-color: ${TMColors.default_background};
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, visibility 0.3s ease;
   z-index: 1502;
   display: flex;
   flex-direction: column;
@@ -63,10 +63,11 @@ export const StyledOffCanvasPanel = styled.div `
   /* Default: Open from the right */
   top: 0;
   right: 0;
-  width: 550px;
+  width: ${({ $width }) => $width ?? '550px'}; /* Use $width or default to 550px */
   max-width: 100%;
   height: 100%;
   transform: ${({ $isOpen }) => ($isOpen ? 'translateX(0)' : 'translateX(100%)')};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
 
   /* Mobile: Open from the bottom */
   @media (max-width: 768px) {
@@ -74,8 +75,9 @@ export const StyledOffCanvasPanel = styled.div `
     bottom: 0;
     right: 0;
     width: 100%;
-    height: 94%;
+    height: ${({ $mobileHeight }) => $mobileHeight ?? '90%'}; /* Use $mobileHeight or default to 90% */
     transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : 'translateY(100%)')};
+    visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-bottom-left-radius: 0;

package/lib/components/choosers/TMInvoiceRetrieveFormats.js

@@ -17,6 +17,6 @@ const TMInvoiceRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToEx
         }
         return dataSource;
     };
-    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin }, dataSource: getDataSource(), value: value, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, isModifiedWhen: value != valueOrig, width: width }));
+    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin, width: width }, dataSource: getDataSource(), value: value, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, isModifiedWhen: value != valueOrig, width: width }));
 };
 export default TMInvoiceRetrieveFormats;

package/lib/components/choosers/TMOrderRetrieveFormats.js

@@ -17,6 +17,6 @@ const TMOrderRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToExcl
         }
         return dataSource;
     };
-    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin }, dataSource: getDataSource(), value: value, isModifiedWhen: value != valueOrig, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, width: width }));
+    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin, width: width }, dataSource: getDataSource(), value: value, isModifiedWhen: value != valueOrig, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, width: width }));
 };
 export default TMOrderRetrieveFormats;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -18,7 +18,7 @@ const Wrapper = styled.div `
     }
 `;
 const convertLinksToAnchors = (markup) => {
-    const urlRegex = /(?<!["'>])(https?:\/\/[^\s<]+)/g;
+    const urlRegex = /(?<!href=["'])(https?:\/\/[^\s"'<>]+[^\s"'<>.,;:!?)])/g;
     return markup.replace(urlRegex, (url) => {
         return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
     });

package/lib/helper/SDKUI_Globals.d.ts

@@ -23,6 +23,7 @@ export declare class ThemeSettings {
     fontSize: string;
     gridSettings: DataGridSettings;
     gutters: string;
+    constructor();
 }
 export declare class SearchSettings {
     invoiceRetrieveFormat: InvoiceRetrieveFormats;

package/lib/helper/SDKUI_Globals.js

@@ -58,6 +58,8 @@ export class ThemeSettings {
         this.fontSize = FontSize.defaultFontSizeInPixel;
         this.gridSettings = new DataGridSettings();
         this.gutters = '20px';
+        // Automatically update the CSS variable for font size
+        document.documentElement.style.setProperty('--base-font-size', this.fontSize);
     }
 }
 export class SearchSettings {

package/lib/stories/TMHtmlContentDisplay.stories.js

@@ -13,6 +13,10 @@ const sampleMarkup = `
     <li>Ordered item <em>two</em> with a sample word</li>
   </ol>
   <p>Check out this URL: https://www.example.com</p>
+  <p>Check out this URL: https://www.illibraio.it/test-quiz/test/</p>
+  <p>Check out this URL: http://www.illibraio.it/test-quiz/test/</p>
+  <p>Check out this URL: https://www.topconsult.it/it</p>
+  
 `;
 const meta = {
     title: 'Components/TMHtmlContentDisplay',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.12.130",
+  "version": "6.12.132",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",