@connectif/ui-components 2.0.18 → 2.0.20

package/dist/components/chart/LineChart.d.ts

@@ -104,10 +104,30 @@ export type LineChartProps = CategorizedChartProps & {
      * Option to set the position of the Y axis when there is only one.
      */
     yAxisPosition?: 'left' | 'right';
+    /**
+     * Rotation angle in degrees for X-axis labels to prevent overlapping.
+     * Positive values rotate to the right, negative values rotate to the left.
+     */
+    xAxisLabelRotationDegrees?: number;
+    /**
+     * If true, all labels will be displayed
+     * @default false
+     */
+    forceAllXLabels?: boolean;
     /**
      * Margin to add between labels and x axis. It will be in px
      */
     xAxisMargin?: number;
+    /**
+     * Margin to add between labels and Y axis. It will be in px
+     */
+    yAxisMargin?: number;
+    /**
+     * If true, the chart stretches to use the full width,
+     * even when it has only a few values.
+     * @default false
+     */
+    stretch?: boolean;
     /**
      * Reference to chart component
      */
@@ -126,5 +146,5 @@ export type LineChartProps = CategorizedChartProps & {
  * A line chart component to display numeric data grouped by categories and series.
  * Commonly, categories use to be sorted dates.
  */
-declare const LineChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, ySecondaryAxisLabelFormatter, onClick, disableSeriesNames, disableAxes, disableSplitLine, axisFontSize, axisFontColor, yAxisPosition, xAxisMargin, chartRef, gridMargin }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const LineChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, ySecondaryAxisLabelFormatter, onClick, disableSeriesNames, disableAxes, disableSplitLine, axisFontSize, axisFontColor, yAxisPosition, xAxisLabelRotationDegrees, xAxisMargin, yAxisMargin, stretch, forceAllXLabels, chartRef, gridMargin }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

package/dist/components/chat/ChatMessage.d.ts

@@ -43,6 +43,10 @@ export type ChatMessageProps = {
      * Sets a different border radius in the entry message
      */
     highlightStartEdge?: boolean;
+    /**
+     * Sets maxWidth in the entry message
+     */
+    maxWidth?: number;
     /**
      * When cancelable button is clicked
      */

package/dist/components/tooltip/TextEllipsis.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ThemeTypography } from '../../theme';
+import { TextEllipsisTooltipProps } from './TextEllipsisTooltip';
 import { SxProps } from '@mui/material';
 export type TextEllipsisProps = {
     text?: React.ReactNode;
@@ -13,6 +14,7 @@ export type TextEllipsisProps = {
     lines?: number;
     'data-test'?: string;
     sx?: SxProps;
+    zIndex?: TextEllipsisTooltipProps['zIndex'];
 };
-declare const TextEllipsis: ({ text, typographyVariant, color, width, lines, maxWidth, "data-test": dataTest, sx }: TextEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextEllipsis: ({ text, typographyVariant, color, width, lines, maxWidth, "data-test": dataTest, sx, zIndex }: TextEllipsisProps) => import("react/jsx-runtime").JSX.Element;
 export default TextEllipsis;

package/dist/index.js

@@ -9442,7 +9442,8 @@ var TextEllipsis = ({
   lines = 1,
   maxWidth: maxWidth2,
   "data-test": dataTest,
-  sx
+  sx,
+  zIndex
 }) => {
   const textElementRef = React17.useRef(null);
   return /* @__PURE__ */ jsx32(
@@ -9451,6 +9452,7 @@ var TextEllipsis = ({
       title: text ?? "\xA0",
       textEllipsableElement: textElementRef,
       lines,
+      zIndex,
       children: /* @__PURE__ */ jsx32(
         Typography_default,
         {
@@ -12307,7 +12309,11 @@ var LineChart2 = ({
   axisFontSize = "11px",
   axisFontColor = grey400,
   yAxisPosition = "right",
+  xAxisLabelRotationDegrees,
   xAxisMargin,
+  yAxisMargin,
+  stretch = false,
+  forceAllXLabels = false,
   chartRef,
   gridMargin
 }) => {
@@ -12481,6 +12487,7 @@ var LineChart2 = ({
     xAxis: {
       type: "category",
       data: categories,
+      ...stretch && { boundaryGap: false },
       axisLine: {
         show: !disableSplitLine,
         lineStyle: {
@@ -12495,7 +12502,11 @@ var LineChart2 = ({
         color: axisFontColor,
         fontSize: axisFontSize,
         show: true,
-        opacity: !disableAxes ? 1 : 0
+        opacity: !disableAxes ? 1 : 0,
+        ...forceAllXLabels && { interval: 0 },
+        ...xAxisLabelRotationDegrees && {
+          rotate: xAxisLabelRotationDegrees
+        }
       }
     },
     yAxis: [
@@ -12509,6 +12520,7 @@ var LineChart2 = ({
           }
         },
         axisLabel: {
+          ...yAxisMargin && { margin: yAxisMargin },
           color: axisFontColor,
           fontSize: axisFontSize,
           formatter: yAxisLabelFormatter,
@@ -13753,6 +13765,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
   cancelableButtonText,
   backgroundColor: backgroundColor2,
   highlightStartEdge = true,
+  maxWidth: maxWidth2,
   typographyColor,
   typographyVariant,
   onCancelableButtonClicked,
@@ -13783,7 +13796,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                   sx: {
                     display: "flex",
                     alignItems: "flex-start",
-                    maxWidth: messageType === "outgoing" ? "93%" : "100%",
+                    maxWidth: !maxWidth2 ? messageType === "outgoing" ? "93%" : "100%" : `${maxWidth2}px`,
                     textAlign: "left"
                   },
                   children: /* @__PURE__ */ jsxs35(
@@ -13814,7 +13827,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                         marginRight: "0",
                         minHeight: "22px",
                         justifyContent: "center",
-                        wordBreak: "break-all"
+                        wordBreak: "break-word"
                       },
                       children: [
                         /* @__PURE__ */ jsx79(
@@ -24277,6 +24290,9 @@ var MarkdownContainer = styled8("div")(
     borderRadius: "8px",
     overflowWrap: "break-word",
     "& h1, & h2, & h3": { color: color2 },
+    "& :is(h1, h2, h3) ~ h1": { marginTop: "40px" },
+    "& :is(h1, h2, h3) ~ h2": { marginTop: "32px" },
+    "& :is(h1, h2, h3) ~ h3": { marginTop: "20px" },
     "& h1": { fontSize: "1.75rem" },
     "& h2": { fontSize: "1.5rem" },
     "& h3": { fontSize: "1.25rem" },
@@ -24313,17 +24329,31 @@ var MarkdownContainer = styled8("div")(
     },
     "& table": {
       width: "100%",
-      borderCollapse: "collapse",
+      borderCollapse: "separate",
+      borderSpacing: 0,
       margin: "1em 0",
+      borderRadius: "8px",
       ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
     "& th, & td": {
-      border: `1px solid ${grey800}`,
+      border: `1px solid ${dark600}`,
       padding: "8px",
       textAlign: "left",
       ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
-    "& th": { backgroundColor: grey900, color: white },
+    "& table tr:first-of-type th:first-of-type": {
+      borderTopLeftRadius: "8px"
+    },
+    "& table tr:first-of-type th:last-of-type": {
+      borderTopRightRadius: "8px"
+    },
+    "& table tr:last-of-type td:first-of-type": {
+      borderBottomLeftRadius: "8px"
+    },
+    "& table tr:last-of-type td:last-of-type": {
+      borderBottomRightRadius: "8px"
+    },
+    "& th": { backgroundColor: dark800, color: white },
     "& a": { color: primary200, textDecoration: "none" },
     "& a:hover": { textDecoration: "underline" }
   })