@connectif/ui-components 2.0.0 → 2.0.1

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

@@ -1,5 +1,6 @@
 import './EchartsConfig';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
+import { sizes } from '../../theme/Typography';
 import { IncrementLabelType } from '../../propTypes/IncrementLabel';
 import { ChartTooltipEntryFormatter } from '../../utils/ChartUtils';
 type YAxisLabelFormatter = (value: number) => string;
@@ -13,6 +14,18 @@ export type BarChartProps = {
      * The categories to display on the x axis.
      */
     categories: string[];
+    /**
+     * labels color
+     */
+    labelColor?: string;
+    /**
+     * font size to X labels
+     */
+    gridLabelSize?: keyof typeof sizes;
+    /**
+     * Grid lines color
+     */
+    gridLineColor?: string;
     /**
      * Optional callback to be called when the chart is clicked.
      */
@@ -49,6 +62,10 @@ export type BarChartProps = {
          * The text to use for this item as name in tooltip.
          */
         comparisonTooltipName?: string;
+        /**
+         * Set to show background color in bar when not is comparison
+         */
+        showBackgroundColorBar?: boolean;
         data: {
             /**
              * The value to display in the chart for this serie item.
@@ -80,5 +97,5 @@ export type BarChartProps = {
 /**
  * A bar chart component to display numeric data grouped by categories and series.
  */
-declare const BarChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, tooltipEntryFormatter, onClick }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const BarChart: ({ style, isLoading, series, categories, labelColor, gridLineColor, gridLabelSize, yAxisLabelFormatter, tooltipEntryFormatter, onClick }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
 export default BarChart;

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

@@ -59,6 +59,24 @@ export type LineChartProps = CategorizedChartProps & {
          * The yAxis for this serie
          */
         yAxisIndex: number;
+        /**
+         * The area color. With color will be a solid color. With startColor and endColor will be gradient color.
+         */
+        areaColor?: {
+            color: string;
+            startColor?: never;
+            endColor?: never;
+        } | {
+            color?: never;
+            startColor: {
+                offset: number;
+                color: string;
+            };
+            endColor: {
+                offset: number;
+                color: string;
+            };
+        };
     }[];
     /**
      * Option to disable the display of series names.

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

@@ -8,10 +8,14 @@ export type ChatProps = React.PropsWithChildren<{
      * Background color
      */
     backgroundColor?: string;
+    /**
+     * Class name to move scroll on new message. If undefined, scroll to bottom.
+     */
+    scrollToLastClassName?: string;
+    /**
+     * Scrollbar color
+     */
+    scrollbarColor?: string;
 }>;
-/**
- * Shows a list of chat message, in a vertical layout.
- *
- */
-declare const Chat: ({ children, header, backgroundColor }: ChatProps) => import("react/jsx-runtime").JSX.Element;
+declare const Chat: ({ children, header, backgroundColor, scrollToLastClassName, scrollbarColor }: ChatProps) => import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/dist/index.js

@@ -8155,7 +8155,7 @@ function createBox(options = {}) {
   const BoxRoot = styled2("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx_default);
-  const Box8 = /* @__PURE__ */ React16.forwardRef(function Box9(inProps, ref) {
+  const Box7 = /* @__PURE__ */ React16.forwardRef(function Box8(inProps, ref) {
     const theme2 = useTheme_default(defaultTheme);
     const {
       className,
@@ -8170,7 +8170,7 @@ function createBox(options = {}) {
       ...other
     });
   });
-  return Box8;
+  return Box7;
 }
 
 // node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js
@@ -8921,6 +8921,7 @@ var typography = {
   fontSize: 16,
   allVariants: {
     color: gunMetal,
+    cursor: "inherit",
     fontFamily: families.primary,
     fontSize: sizes3.md
   },
@@ -11984,6 +11985,9 @@ var BarChart2 = ({
   isLoading,
   series = [],
   categories = [],
+  labelColor = grey400,
+  gridLineColor = grey200,
+  gridLabelSize = "sm",
   yAxisLabelFormatter = (value) => `${value}`,
   tooltipEntryFormatter = ({ data }) => ({
     text: `${data.tooltipName}: ${data.tooltipValue}`
@@ -12117,8 +12121,8 @@ var BarChart2 = ({
         show: false
       },
       axisLabel: {
-        color: grey400,
-        fontSize: sizes3.sm,
+        color: labelColor,
+        fontSize: sizes3[gridLabelSize],
         width: (width2 - estimatedYAxisWidth) / categories.length,
         overflow: "truncate",
         hideOverlap: false,
@@ -12130,7 +12134,7 @@ var BarChart2 = ({
       boundaryGap: ["0", "10%"],
       splitLine: {
         lineStyle: {
-          color: grey200
+          color: gridLineColor
         }
       },
       axisLine: {
@@ -12140,8 +12144,8 @@ var BarChart2 = ({
         show: false
       },
       axisLabel: {
-        color: grey400,
-        fontSize: sizes3.sm,
+        color: labelColor,
+        fontSize: sizes3[gridLabelSize],
         formatter: yAxisLabelFormatter
       }
     },
@@ -12151,14 +12155,15 @@ var BarChart2 = ({
         data,
         tooltipName,
         comparisonColor,
-        comparisonTooltipName
+        comparisonTooltipName,
+        showBackgroundColorBar
       }, serieIndex) => [
         ...isComparison ? [
           {
             ...defaultBarSeriesOptions,
             cursor: cursor2,
             silent,
-            showBackground: false,
+            showBackground: showBackgroundColorBar ?? false,
             stack: `${serieIndex}`,
             data: data.map(
               ({
@@ -12190,7 +12195,7 @@ var BarChart2 = ({
           ...defaultBarSeriesOptions,
           cursor: cursor2,
           silent,
-          showBackground: true,
+          showBackground: showBackgroundColorBar ?? true,
           stack: `${serieIndex}`,
           data: data.map(
             ({
@@ -12246,9 +12251,9 @@ var BarChart_default = BarChart2;
 
 // src/components/chart/LineChart.tsx
 import * as React31 from "react";
+import { createRoot } from "react-dom/client";
 import ReactEChartsCore2 from "echarts-for-react/lib/core";
 import * as echarts3 from "echarts/core";
-import { renderToString as renderToString3 } from "react-dom/server";
 import { ThemeProvider, useTheme as useTheme3 } from "@mui/material/styles";
 import { jsx as jsx67, jsxs as jsxs26 } from "react/jsx-runtime";
 var LineChart2 = ({
@@ -12357,6 +12362,10 @@ var LineChart2 = ({
       ) : /* @__PURE__ */ jsx67("span", {})
     ] }, serie.name);
   };
+  const tooltipReact = React31.useMemo(() => {
+    const domElement = document.createElement("div");
+    return { root: createRoot(domElement), domElement };
+  }, []);
   const tooltipFormatter = (datas) => {
     const { axisValueLabel, dataIndex } = datas[0];
     const { tooltipCategoryLabel, value } = series[0].data[dataIndex];
@@ -12365,58 +12374,58 @@ var LineChart2 = ({
     }
     const categoryLabel = tooltipCategoryLabel ?? axisValueLabel;
     const hasGroup = groups.some((group) => group !== "");
-    return renderToString3(
-      /* @__PURE__ */ jsx67(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsx67(
-        Box_default,
-        {
-          sx: {
-            display: "grid",
-            gridTemplateColumns: hasGroup ? "auto auto" : "auto",
-            alignItems: "center",
-            gap: "0 16px"
-          },
-          children: groups.map((group, index) => /* @__PURE__ */ jsxs26(React31.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx67(
-              Divider_default,
-              {
-                sx: {
-                  gridColumn: "1 / span 2",
-                  marginTop: "8px",
-                  marginBottom: "8px"
-                }
-              }
-            ),
-            group !== "" && /* @__PURE__ */ jsx67(
-              Typography_default,
-              {
-                variant: "body2-semibold",
-                color: grey800,
-                sx: { marginBottom: "8px" },
-                children: group
-              }
-            ),
-            /* @__PURE__ */ jsx67(
-              Typography_default,
-              {
-                variant: "caption",
-                color: grey600,
-                sx: {
-                  marginBottom: "8px"
-                },
-                children: categoryLabel
+    const tooltip = /* @__PURE__ */ jsx67(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsx67(
+      Box_default,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: hasGroup ? "auto auto" : "auto",
+          alignItems: "center",
+          gap: "0 16px"
+        },
+        children: groups.map((group, index) => /* @__PURE__ */ jsxs26(React31.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx67(
+            Divider_default,
+            {
+              sx: {
+                gridColumn: "1 / span 2",
+                marginTop: "8px",
+                marginBottom: "8px"
               }
-            ),
-            datas.filter(
-              (d) => isComparing && d.seriesIndex % 2 !== 0 ? false : (series[d.seriesIndex / (isComparing ? 2 : 1)].tooltipGroupTitle ?? "") === group
-            ).map((d) => {
-              const serie = series[d.seriesIndex / (isComparing ? 2 : 1)];
-              const data = serie.data[d.dataIndex];
-              return tooltipEntryFormatter(serie, data);
-            })
-          ] }, index))
-        }
-      ) })
-    );
+            }
+          ),
+          group !== "" && /* @__PURE__ */ jsx67(
+            Typography_default,
+            {
+              variant: "body2-semibold",
+              color: grey800,
+              sx: { marginBottom: "8px" },
+              children: group
+            }
+          ),
+          /* @__PURE__ */ jsx67(
+            Typography_default,
+            {
+              variant: "caption",
+              color: grey600,
+              sx: {
+                marginBottom: "8px"
+              },
+              children: categoryLabel
+            }
+          ),
+          datas.filter(
+            (d) => isComparing && d.seriesIndex % 2 !== 0 ? false : (series[d.seriesIndex / (isComparing ? 2 : 1)].tooltipGroupTitle ?? "") === group
+          ).map((d) => {
+            const serie = series[d.seriesIndex / (isComparing ? 2 : 1)];
+            const data = serie.data[d.dataIndex];
+            return tooltipEntryFormatter(serie, data);
+          })
+        ] }, index))
+      }
+    ) });
+    tooltipReact.root.render(tooltip);
+    return tooltipReact.domElement;
   };
   const options = {
     tooltip: {
@@ -12484,7 +12493,13 @@ var LineChart2 = ({
     ],
     series: [
       ...series.map(
-        ({ name, data, color: color2, yAxisIndex }) => ({
+        ({
+          name,
+          data,
+          color: color2,
+          yAxisIndex,
+          areaColor
+        }) => ({
           type: "line",
           name,
           yAxisIndex,
@@ -12496,6 +12511,30 @@ var LineChart2 = ({
             type: "solid",
             width: 3
           },
+          ...areaColor && {
+            areaStyle: {
+              ...areaColor.color && { color: areaColor.color },
+              ...areaColor.startColor && areaColor.endColor && {
+                color: new echarts3.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: areaColor.startColor.offset,
+                      color: areaColor.startColor.color
+                    },
+                    {
+                      offset: areaColor.endColor.offset,
+                      color: areaColor.endColor.color
+                    },
+                    { offset: 1, color: "transparent" }
+                  ]
+                )
+              }
+            }
+          },
           showSymbol: true,
           symbol: "circle",
           symbolSize: 3,
@@ -13755,9 +13794,10 @@ var ChatMessage = React34.forwardRef(function ChatMessage2({
                         padding: "8px 16px",
                         paddingBottom: !cancelableButtonText ? "8px" : "40px",
                         marginLeft: 0,
-                        marginRight: "10px",
+                        marginRight: "0",
                         minHeight: "22px",
-                        justifyContent: "center"
+                        justifyContent: "center",
+                        wordBreak: "break-all"
                       },
                       children: [
                         /* @__PURE__ */ jsx79(
@@ -13847,55 +13887,99 @@ var ChatMessage = React34.forwardRef(function ChatMessage2({
 var ChatMessage_default = ChatMessage;
 
 // src/components/chat/Chat.tsx
-import Box3 from "@mui/material/Box";
 import Stack5 from "@mui/material/Stack";
 import * as React35 from "react";
 import { jsx as jsx80, jsxs as jsxs35 } from "react/jsx-runtime";
-var Chat = ({ children, header, backgroundColor: backgroundColor2 }) => {
-  let ref = void 0;
-  const [justifyContent, setJustifyContent] = React35.useState(true);
+var Chat = ({
+  children,
+  header,
+  backgroundColor: backgroundColor2,
+  scrollToLastClassName,
+  scrollbarColor
+}) => {
+  const ref = React35.useRef(null);
   const [isInitialize, setIsInitialize] = React35.useState(false);
+  const [hasVerticalScroll, setHasVerticalScroll] = React35.useState(false);
   React35.useEffect(() => {
-    if (ref && ref.offsetHeight <= ref.scrollHeight) {
-      setJustifyContent(ref.offsetHeight >= ref.scrollHeight);
+    const container = ref.current;
+    if (!container) {
+      return;
     }
-    ref?.scrollTo(0, ref?.scrollHeight);
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        const needsScroll = container.scrollHeight > container.clientHeight;
+        setHasVerticalScroll(needsScroll);
+      });
+    });
+    observer.observe(container);
     setIsInitialize(true);
-  }, [children, ref]);
+    return () => observer.disconnect();
+  }, []);
   React35.useEffect(() => {
-    if (ref && ref.offsetHeight < ref.scrollHeight) {
-      setJustifyContent(false);
+    const container = ref.current;
+    if (!container) {
+      return;
     }
-    ref?.scrollTo(0, ref?.scrollHeight);
-  }, [ref]);
+    if (scrollToLastClassName) {
+      const elements = container.querySelectorAll(
+        `.${scrollToLastClassName}`
+      );
+      const last = elements[elements.length - 1];
+      if (last) {
+        last.scrollIntoView({ behavior: "smooth", block: "start" });
+      } else {
+        container.scrollTo(0, container.scrollHeight);
+      }
+    } else {
+      container.scrollTo(0, container.scrollHeight);
+    }
+  }, [children, scrollToLastClassName]);
   return /* @__PURE__ */ jsxs35(
     Stack5,
     {
       className: "Slim-Vertical-Scroll",
+      ref,
       sx: {
         overflow: "hidden",
         overflowY: "auto",
         height: "calc(100% - 8px)",
-        visibility: !isInitialize ? "hidden" : null,
+        visibility: !isInitialize ? "hidden" : "visible",
+        width: `calc(100% - ${hasVerticalScroll ? "4px" : "8px"})`,
         paddingBottom: "8px",
-        ...isInitialize && justifyContent && {
-          justifyContent: header ? "space-between" : "end"
-        },
-        ":active::-webkit-scrollbar-thumb, :focus::-webkit-scrollbar-thumb, :hover::-webkit-scrollbar-thumb": {
-          visibility: "visible"
+        ...backgroundColor2 && { backgroundColor: backgroundColor2 },
+        paddingRight: hasVerticalScroll ? "4px" : "8px",
+        "::-webkit-scrollbar": {
+          width: "4px !important"
         },
         "::-webkit-scrollbar-thumb": {
+          ...scrollbarColor && {
+            backgroundColor: `${scrollbarColor} !important`
+          },
+          borderRadius: "4px",
           visibility: "hidden"
         },
-        ...backgroundColor2 && {
-          backgroundColor: backgroundColor2
+        ":hover::-webkit-scrollbar-thumb": {
+          visibility: "visible"
         }
       },
       spacing: "12px",
-      ref: (el) => ref = el,
       children: [
         header,
-        /* @__PURE__ */ jsx80(Box3, { sx: { "> *": { marginTop: "12px" } }, children })
+        /* @__PURE__ */ jsx80(
+          Stack5,
+          {
+            justifyContent: "end",
+            ...!header && {
+              minHeight: "100%",
+              justifyContent: "end"
+            },
+            sx: {
+              "> *": { marginTop: "12px" },
+              flexShrink: 0
+            },
+            children
+          }
+        )
       ]
     }
   );
@@ -17976,9 +18060,9 @@ var ImageEditor_default = ImageEditor;
 import React45 from "react";
 
 // src/hooks/useResizeObserver.ts
-import { useEffect as useEffect8, useState as useState13, useRef as useRef11 } from "react";
+import { useEffect as useEffect8, useState as useState13, useRef as useRef12 } from "react";
 function useResizeObserver() {
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const [width2, setWidth] = useState13(0);
   const [height2, setHeight] = useState13(0);
   const [contentWidth, setContentWidth] = useState13(0);
@@ -18156,10 +18240,10 @@ var TextFieldContainer_default = TextFieldContainer;
 import * as React50 from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect9, useRef as useRef12 } from "react";
+import { useEffect as useEffect9, useRef as useRef13 } from "react";
 function useDebouncedCallback(callback, wait) {
-  const argsRef = useRef12();
-  const timeout = useRef12();
+  const argsRef = useRef13();
+  const timeout = useRef13();
   function cleanup() {
     if (timeout.current) {
       clearTimeout(timeout.current);
@@ -20731,14 +20815,14 @@ var ColorPicker = React59.forwardRef(function ColorPickerWrapper({
 var ColorPicker_default = ColorPicker;
 
 // src/components/input/UploadClickableArea.tsx
-import { Box as Box4 } from "@mui/material";
+import { Box as Box3 } from "@mui/material";
 import { jsx as jsx115, jsxs as jsxs52 } from "react/jsx-runtime";
 var UploadClickableArea = ({
   accept,
   onFilesChanged,
   children
 }) => /* @__PURE__ */ jsxs52(
-  Box4,
+  Box3,
   {
     component: "label",
     style: {
@@ -23778,7 +23862,7 @@ var LinearProgress_default = LinearProgress;
 import * as React74 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
-import Box5 from "@mui/material/Box";
+import Box4 from "@mui/material/Box";
 import { jsx as jsx133, jsxs as jsxs66 } from "react/jsx-runtime";
 var circularSizes = {
   XS: "20px",
@@ -23805,7 +23889,7 @@ var CircularProgress = ({
     gradientColors ? crypto.randomUUID() : void 0
   );
   return /* @__PURE__ */ jsxs66(
-    Box5,
+    Box4,
     {
       sx: {
         position: "relative",
@@ -23845,7 +23929,7 @@ var CircularProgress = ({
           }
         ) }) }),
         showCircularBackground && /* @__PURE__ */ jsx133(
-          Box5,
+          Box4,
           {
             sx: {
               position: "absolute",
@@ -23899,7 +23983,7 @@ var CircularProgress = ({
           }
         ),
         variant !== "indeterminate" && /* @__PURE__ */ jsx133(
-          Box5,
+          Box4,
           {
             sx: {
               top: 0,
@@ -23931,7 +24015,7 @@ var CircularProgress = ({
 var CircularProgress_default = CircularProgress;
 
 // src/components/progress/DonutProgress.tsx
-import Box6 from "@mui/material/Box";
+import Box5 from "@mui/material/Box";
 import { Stack as Stack10 } from "@mui/material";
 import { jsx as jsx134, jsxs as jsxs67 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
@@ -23983,7 +24067,7 @@ var DonutProgress = ({
     )
   ] });
   return /* @__PURE__ */ jsxs67(
-    Box6,
+    Box5,
     {
       sx: {
         position: "relative",
@@ -24007,7 +24091,7 @@ var DonutProgress = ({
           }
         ),
         /* @__PURE__ */ jsx134(
-          Box6,
+          Box5,
           {
             sx: {
               position: "absolute",
@@ -24030,7 +24114,7 @@ var DonutProgress = ({
           }
         ),
         variant !== "empty" && labelChip && /* @__PURE__ */ jsx134(
-          Box6,
+          Box5,
           {
             sx: {
               position: "absolute",
@@ -24113,6 +24197,7 @@ var MarkdownContainer = styled8("div")(
       margin: "0.5em 0"
     },
     "& ul, & ol": {
+      ...variants[variant || "body2"],
       paddingLeft: "1.5em",
       margin: "0.5em 0"
     },
@@ -24225,7 +24310,7 @@ var Navbar_default = Navbar;
 
 // src/components/navbar/NavbarButton.tsx
 import * as React75 from "react";
-import { Box as Box7, ButtonBase as ButtonBase2 } from "@mui/material";
+import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
 import { jsx as jsx138, jsxs as jsxs69 } from "react/jsx-runtime";
 var NavbarButton = React75.forwardRef(
   function NavbarButton2({
@@ -24242,7 +24327,7 @@ var NavbarButton = React75.forwardRef(
         return element;
       }
       return /* @__PURE__ */ jsxs69(
-        Box7,
+        Box6,
         {
           sx: {
             backgroundImage: `linear-gradient(to left, ${cornflowerBlue}, ${electricLavender})`,
@@ -24252,7 +24337,7 @@ var NavbarButton = React75.forwardRef(
           },
           children: [
             /* @__PURE__ */ jsx138(
-              Box7,
+              Box6,
               {
                 sx: {
                   position: "absolute",
@@ -24268,7 +24353,7 @@ var NavbarButton = React75.forwardRef(
               }
             ),
             /* @__PURE__ */ jsx138(
-              Box7,
+              Box6,
               {
                 sx: {
                   backgroundColor: white,
@@ -24906,7 +24991,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React80 from "react";
-import { useEffect as useEffect21, useRef as useRef21, useState as useState31 } from "react";
+import { useEffect as useEffect21, useRef as useRef22, useState as useState31 } from "react";
 import { jsx as jsx148 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -24939,9 +25024,9 @@ function SwipeableViews({
   children,
   ...rootProps
 }) {
-  const containerRef = useRef21(null);
-  const scrollTimeout = useRef21();
-  const scrollingMethod = useRef21("none");
+  const containerRef = useRef22(null);
+  const scrollTimeout = useRef22();
+  const scrollingMethod = useRef22("none");
   const [previousIndex, setPreviousIndex] = useState31(index);
   useEffect21(() => {
     if (containerRef.current) {