@connectif/ui-components 2.0.14 → 2.0.15

package/dist/components/markdown/KatexRenderer.d.ts

@@ -2,5 +2,5 @@ type Props = {
     children: string;
     block?: boolean;
 };
-declare const KatexRenderer: ({ children, block }: Props) => string | import("react/jsx-runtime").JSX.Element;
+declare const KatexRenderer: ({ children, block }: Props) => import("react/jsx-runtime").JSX.Element;
 export default KatexRenderer;

package/dist/index.js

@@ -24232,13 +24232,14 @@ var Loader = ({
 var Loader_default = Loader;
 
 // src/components/markdown/MarkdownRenderer.tsx
+import React76 from "react";
 import Markdown from "markdown-to-jsx";
 import { styled as styled8 } from "@mui/material/styles";
 import "katex/dist/katex.min.css";
 
 // src/components/markdown/KatexRenderer.tsx
 import katex from "katex";
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs69 } from "react/jsx-runtime";
 var KatexRenderer = ({ children, block }) => {
   try {
     const html2 = katex.renderToString(children, {
@@ -24247,7 +24248,10 @@ var KatexRenderer = ({ children, block }) => {
     });
     return /* @__PURE__ */ jsx136("span", { dangerouslySetInnerHTML: { __html: html2 } });
   } catch (err) {
-    return `<pre style="color:red">KaTeX error: ${err.message}</pre>`;
+    return /* @__PURE__ */ jsxs69("pre", { style: { color: "red" }, children: [
+      "KaTeX error: $",
+      err.message
+    ] });
   }
 };
 var KatexRenderer_default = KatexRenderer;
@@ -24352,10 +24356,16 @@ var MarkdownRenderer = ({
       overrides: {
         p: {
           component: ({ children, ...props }) => {
-            const rawText = Array.isArray(children) ? children.map(
-              (child) => typeof child === "string" ? child : ""
-            ).join("") : typeof children === "string" ? children : "";
-            return /* @__PURE__ */ jsx137("p", { ...props, children: renderWithMath(rawText) });
+            const renderChildren = React76.Children.map(
+              children,
+              (child) => {
+                if (typeof child === "string") {
+                  return renderWithMath(child);
+                }
+                return child;
+              }
+            );
+            return /* @__PURE__ */ jsx137("p", { ...props, children: renderChildren });
           }
         }
       }
@@ -24367,7 +24377,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment32, jsx as jsx138, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx138, jsxs as jsxs70 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -24375,8 +24385,8 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs69(Fragment32, { children: [
-  /* @__PURE__ */ jsxs69(
+}) => /* @__PURE__ */ jsxs70(Fragment32, { children: [
+  /* @__PURE__ */ jsxs70(
     Box_default,
     {
       sx: {
@@ -24396,7 +24406,7 @@ var Navbar = ({
       ]
     }
   ),
-  /* @__PURE__ */ jsxs69(
+  /* @__PURE__ */ jsxs70(
     Drawer2,
     {
       open: isDrawerOpen,
@@ -24428,10 +24438,10 @@ var Navbar = ({
 var Navbar_default = Navbar;
 
 // src/components/navbar/NavbarButton.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
-import { jsx as jsx139, jsxs as jsxs70 } from "react/jsx-runtime";
-var NavbarButton = React76.forwardRef(
+import { jsx as jsx139, jsxs as jsxs71 } from "react/jsx-runtime";
+var NavbarButton = React77.forwardRef(
   function NavbarButton2({
     iconId,
     srcUrl,
@@ -24445,7 +24455,7 @@ var NavbarButton = React76.forwardRef(
       if (!highlighted) {
         return element;
       }
-      return /* @__PURE__ */ jsxs70(
+      return /* @__PURE__ */ jsxs71(
         Box6,
         {
           sx: {
@@ -24486,7 +24496,7 @@ var NavbarButton = React76.forwardRef(
         }
       );
     };
-    return /* @__PURE__ */ jsxs70(
+    return /* @__PURE__ */ jsxs71(
       ButtonBase2,
       {
         className: "NavbarButton-root",
@@ -24573,10 +24583,10 @@ var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx140(
 var NavbarHeader_default = NavbarHeader;
 
 // src/components/navbar/NavbarLogo.tsx
-import * as React77 from "react";
+import * as React78 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
 import { jsx as jsx141 } from "react/jsx-runtime";
-var NavbarLogo = React77.forwardRef(
+var NavbarLogo = React78.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
     return /* @__PURE__ */ jsx141(
       ButtonBase3,
@@ -24597,8 +24607,8 @@ var NavbarLogo = React77.forwardRef(
 var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
-import * as React78 from "react";
-import { Fragment as Fragment33, jsx as jsx142, jsxs as jsxs71 } from "react/jsx-runtime";
+import * as React79 from "react";
+import { Fragment as Fragment33, jsx as jsx142, jsxs as jsxs72 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -24607,8 +24617,8 @@ var DonutFocusOverlay = ({
   chipLabel,
   chipPosition = "right"
 }) => {
-  const [clientRect, setClientRect] = React78.useState();
-  React78.useEffect(() => {
+  const [clientRect, setClientRect] = React79.useState();
+  React79.useEffect(() => {
     if (!elementRef?.current) {
       setClientRect(void 0);
       return;
@@ -24639,7 +24649,7 @@ var DonutFocusOverlay = ({
   const internalTopHalfCircle = `${internalCircleRadius} ${internalCircleRadius} 0 0 1 ${startPointX + donutWidth + internalCircleRadius * 2} ${startPointY}`;
   const externalTopHalfCircle = `${externalCircleRadius} ${externalCircleRadius} 0 0 0 ${startPointX} ${startPointY}`;
   const path = `path("M ${startPointX} ${startPointY} A ${externalBottomHalfCircle} m ${-donutWidth} 0 A ${internalBottomHalfCircle} A ${internalTopHalfCircle} m ${donutWidth} 0 A ${externalTopHalfCircle} Z")`;
-  return /* @__PURE__ */ jsxs71(Fragment33, { children: [
+  return /* @__PURE__ */ jsxs72(Fragment33, { children: [
     /* @__PURE__ */ jsx142(
       Box_default,
       {
@@ -24684,7 +24694,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment34, jsx as jsx143, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx143, jsxs as jsxs73 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -24699,7 +24709,7 @@ var Pager = ({
   const pages = Math.max(Math.ceil(total / pageSize), 1);
   const options = [...Array(pages).keys()].map((i) => ({ value: i + 1 }));
   const Label = ({ children }) => /* @__PURE__ */ jsx143(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
-  return /* @__PURE__ */ jsxs72(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
+  return /* @__PURE__ */ jsxs73(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
     /* @__PURE__ */ jsx143(Label, { children: t("PAGER.PAGE") }),
     /* @__PURE__ */ jsx143(
       Select_default,
@@ -24710,7 +24720,7 @@ var Pager = ({
         sx: { minWidth: 78 }
       }
     ),
-    allowedPageSizes && /* @__PURE__ */ jsxs72(Fragment34, { children: [
+    allowedPageSizes && /* @__PURE__ */ jsxs73(Fragment34, { children: [
       /* @__PURE__ */ jsx143(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
       /* @__PURE__ */ jsx143(
         Select_default,
@@ -24726,7 +24736,7 @@ var Pager = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs72(Label, { children: [
+    /* @__PURE__ */ jsxs73(Label, { children: [
       from,
       " - ",
       to,
@@ -24757,17 +24767,17 @@ var Pager_default = Pager;
 
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
-import * as React79 from "react";
-import { jsx as jsx144, jsxs as jsxs73 } from "react/jsx-runtime";
+import * as React80 from "react";
+import { jsx as jsx144, jsxs as jsxs74 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
   stepDistance = 200
 }) => {
-  const horizontalContainerRef = React79.useRef(null);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React79.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React79.useState(true);
-  React79.useEffect(() => {
+  const horizontalContainerRef = React80.useRef(null);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React80.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React80.useState(true);
+  React80.useEffect(() => {
     if (!horizontalContainerRef.current) {
       return;
     }
@@ -24807,7 +24817,7 @@ var HorizontalScrollable = ({
     );
     current.scrollBy(stepDistance, 0);
   };
-  return /* @__PURE__ */ jsxs73(Box_default, { sx: { position: "relative", ...style3 }, children: [
+  return /* @__PURE__ */ jsxs74(Box_default, { sx: { position: "relative", ...style3 }, children: [
     /* @__PURE__ */ jsx144(
       ButtonBase4,
       {
@@ -24898,10 +24908,10 @@ import {
 } from "notistack";
 
 // src/components/snackbar/Snackbar.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx146, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs75 } from "react/jsx-runtime";
 var sizeStyles5 = {
   M: {
     width: "344px",
@@ -24926,7 +24936,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React80.forwardRef(
+var Snackbar = React81.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -24938,10 +24948,10 @@ var Snackbar = React80.forwardRef(
     identifierKey: key,
     dataTestKey
   }, ref) {
-    const actionClickHandler = React80.useCallback(() => {
+    const actionClickHandler = React81.useCallback(() => {
       onActionClick && onActionClick(key);
     }, [onActionClick, key]);
-    const closeClickHandler = React80.useCallback(() => {
+    const closeClickHandler = React81.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
     return /* @__PURE__ */ jsx146(
@@ -24962,7 +24972,7 @@ var Snackbar = React80.forwardRef(
         ...dataTestKey && {
           "data-test": dataTestKey
         },
-        children: /* @__PURE__ */ jsxs74(
+        children: /* @__PURE__ */ jsxs75(
           Stack_default,
           {
             direction: "row",
@@ -25105,11 +25115,11 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
-import * as React81 from "react";
+import * as React82 from "react";
 import { useEffect as useEffect21, useRef as useRef22, useState as useState31 } from "react";
 import { jsx as jsx149 } from "react/jsx-runtime";
 var styles = {
@@ -25205,7 +25215,7 @@ function SwipeableViews({
           );
         }, 100);
       },
-      children: React81.Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx149(
+      children: React82.Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx149(
         "div",
         {
           className: "Slim-Vertical-Scroll",
@@ -25218,7 +25228,7 @@ function SwipeableViews({
 }
 
 // src/components/tab/Tabs.tsx
-import { jsx as jsx150, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs76 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -25229,7 +25239,7 @@ var Tabs = ({
   contained = false,
   scrollbarGutter
 }) => {
-  const [value, setValue] = React82.useState(0);
+  const [value, setValue] = React83.useState(0);
   const handleChangeIndex = (index) => {
     onChangeTab?.(index);
     setValue(index);
@@ -25240,7 +25250,7 @@ var Tabs = ({
     bottom: 0,
     borderRadius: "8px 8px 0 0"
   };
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     Box_default,
     {
       sx: {
@@ -25407,12 +25417,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import { jsx as jsx157 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React83.useState(false);
-  const [showIcon, setShowIcon] = React83.useState(false);
+  const [isCopied, setIsCopied] = React84.useState(false);
+  const [showIcon, setShowIcon] = React84.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(textToCopy ?? text);
     if (isCopied) {
@@ -25547,9 +25557,9 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React84 from "react";
+import * as React85 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React84.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+var ToolbarBreadcrumbButton = React85.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx162(
     ButtonBase5,
     {
@@ -25576,7 +25586,7 @@ var ToolbarBreadcrumbButton = React84.forwardRef(function ToolbarBreadcrumbButto
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx163, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs77 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -25585,7 +25595,7 @@ var Toolbar = ({
   sx,
   dataTestId,
   onClickToolbar
-}) => /* @__PURE__ */ jsxs76(
+}) => /* @__PURE__ */ jsxs77(
   Box_default,
   {
     className: `Cn-Toolbar ${className}`,
@@ -25605,7 +25615,7 @@ var Toolbar = ({
     onClick: onClickToolbar,
     "data-testid": dataTestId,
     children: [
-      /* @__PURE__ */ jsxs76(
+      /* @__PURE__ */ jsxs77(
         Box_default,
         {
           sx: {
@@ -25661,24 +25671,24 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { useState as useState34 } from "react";
-import { jsx as jsx164, jsxs as jsxs77 } from "react/jsx-runtime";
-var ToolbarTitle = React85.forwardRef(function ToolbarTitle2({
+import { jsx as jsx164, jsxs as jsxs78 } from "react/jsx-runtime";
+var ToolbarTitle = React86.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React85.useRef(null);
+  const textElementRef = React86.useRef(null);
   const [showHoverActions, setShowHoverActions] = useState34(false);
   return /* @__PURE__ */ jsx164(Box_default, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx164(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsxs77(
+      children: /* @__PURE__ */ jsxs78(
         Typography_default,
         {
           color: color2,
@@ -25725,7 +25735,7 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx165, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs79 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
@@ -25745,7 +25755,7 @@ var WidgetLegendItem = ({
       p: "2px 12px",
       cursor: onClick ? "pointer" : "default"
     },
-    children: /* @__PURE__ */ jsxs78(
+    children: /* @__PURE__ */ jsxs79(
       Box_default,
       {
         sx: {
@@ -25779,7 +25789,7 @@ var WidgetLegendItem = ({
               style: style3
             }, i) => {
               const incrementLabelIconId = incrementLabelType && incrementLabelStyles[incrementLabelType].icon;
-              return /* @__PURE__ */ jsxs78(
+              return /* @__PURE__ */ jsxs79(
                 Box_default,
                 {
                   sx: {
@@ -25913,8 +25923,8 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React86 from "react";
-import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs79 } from "react/jsx-runtime";
+import * as React87 from "react";
+import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs80 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
   L: 500,
@@ -25939,7 +25949,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -25956,17 +25966,17 @@ var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React86.useRef(null);
-  const windowRef = React86.useRef(null);
-  const headerRef = React86.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React86.useState(false);
-  const diffRef = React86.useRef({ x: 0, y: 0 });
-  React86.useImperativeHandle(ref, () => ({
+  const overlayRef = React87.useRef(null);
+  const windowRef = React87.useRef(null);
+  const headerRef = React87.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React87.useState(false);
+  const diffRef = React87.useRef({ x: 0, y: 0 });
+  React87.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React86.useEffect(() => {
+  React87.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");
@@ -26028,7 +26038,7 @@ var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
       }
     }, 750);
   };
-  return /* @__PURE__ */ jsxs79(Fragment35, { children: [
+  return /* @__PURE__ */ jsxs80(Fragment35, { children: [
     isDraggingState && /* @__PURE__ */ jsx169(
       Box_default,
       {
@@ -26062,7 +26072,7 @@ var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
           ...!open && { pointerEvents: "none" },
           transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
         },
-        children: /* @__PURE__ */ jsxs79(
+        children: /* @__PURE__ */ jsxs80(
           Stack_default,
           {
             sx: {
@@ -26073,7 +26083,7 @@ var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
             width: `${sizes6[size]}px`,
             height: contentHeight !== void 0 && headerRef.current ? `${contentHeight + contentPadding + headerRef.current.scrollHeight}px` : void 0,
             children: [
-              /* @__PURE__ */ jsxs79(
+              /* @__PURE__ */ jsxs80(
                 Stack_default,
                 {
                   ref: headerRef,
@@ -26123,7 +26133,7 @@ var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
                         children: typeof title === "string" ? /* @__PURE__ */ jsx169(Typography_default, { children: title }) : title
                       }
                     ),
-                    /* @__PURE__ */ jsxs79(
+                    /* @__PURE__ */ jsxs80(
                       Stack_default,
                       {
                         direction: "row",