@connectif/ui-components 1.0.8 → 1.0.10

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import './EchartsConfig';
+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.
@@ -88,10 +106,14 @@ export type LineChartProps = CategorizedChartProps & {
      * Option to set the position of the Y axis when there is only one.
      */
     yAxisPosition?: 'left' | 'right';
+    /**
+     * Margin to add between labels and x axis. It will be in px
+     */
+    xAxisMargin?: number;
 };
 /**
  * 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, fullGrid, axisFontSize, axisFontColor, yAxisPosition }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const LineChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, ySecondaryAxisLabelFormatter, onClick, disableSeriesNames, disableAxes, disableSplitLine, fullGrid, axisFontSize, axisFontColor, yAxisPosition, xAxisMargin }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

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

@@ -7767,7 +7767,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 _extendSxProp = extendSxProp(inProps), {
       className,
@@ -7780,7 +7780,7 @@ function createBox(options = {}) {
       theme: themeId ? theme2[themeId] || theme2 : theme2
     }, other));
   });
-  return Box8;
+  return Box7;
 }
 
 // node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js
@@ -11557,6 +11557,9 @@ var BarChart2 = ({
   isLoading,
   series = [],
   categories = [],
+  labelColor = grey400,
+  gridLineColor = grey200,
+  gridLabelSize = "sm",
   yAxisLabelFormatter = (value) => `${value}`,
   tooltipEntryFormatter = ({ data }) => ({
     text: `${data.tooltipName}: ${data.tooltipValue}`
@@ -11690,8 +11693,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,
@@ -11703,7 +11706,7 @@ var BarChart2 = ({
       boundaryGap: ["0", "10%"],
       splitLine: {
         lineStyle: {
-          color: grey200
+          color: gridLineColor
         }
       },
       axisLine: {
@@ -11713,8 +11716,8 @@ var BarChart2 = ({
         show: false
       },
       axisLabel: {
-        color: grey400,
-        fontSize: sizes3.sm,
+        color: labelColor,
+        fontSize: sizes3[gridLabelSize],
         formatter: yAxisLabelFormatter
       }
     },
@@ -11724,14 +11727,15 @@ var BarChart2 = ({
         data,
         tooltipName,
         comparisonColor,
-        comparisonTooltipName
+        comparisonTooltipName,
+        showBackgroundColorBar
       }, serieIndex) => [
         ...isComparison ? [
           {
             ...defaultBarSeriesOptions,
             cursor,
             silent,
-            showBackground: false,
+            showBackground: showBackgroundColorBar ?? false,
             stack: `${serieIndex}`,
             data: data.map(
               ({
@@ -11763,7 +11767,7 @@ var BarChart2 = ({
           ...defaultBarSeriesOptions,
           cursor,
           silent,
-          showBackground: true,
+          showBackground: showBackgroundColorBar ?? true,
           stack: `${serieIndex}`,
           data: data.map(
             ({
@@ -11838,7 +11842,8 @@ var LineChart2 = ({
   fullGrid = false,
   axisFontSize = "11px",
   axisFontColor = grey400,
-  yAxisPosition = "right"
+  yAxisPosition = "right",
+  xAxisMargin
 }) => {
   const theme2 = useTheme3();
   const cursor = onClick ? "pointer" : "default";
@@ -12016,6 +12021,7 @@ var LineChart2 = ({
         show: false
       },
       axisLabel: {
+        ...xAxisMargin && { margin: xAxisMargin },
         color: axisFontColor,
         fontSize: axisFontSize,
         show: true,
@@ -12057,7 +12063,13 @@ var LineChart2 = ({
     ],
     series: [
       ...series.map(
-        ({ name, data, color: color2, yAxisIndex }) => ({
+        ({
+          name,
+          data,
+          color: color2,
+          yAxisIndex,
+          areaColor
+        }) => ({
           type: "line",
           name,
           yAxisIndex,
@@ -12069,6 +12081,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,
@@ -13328,9 +13364,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(
@@ -13420,55 +13457,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;
+    }
+    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);
     }
-    ref?.scrollTo(0, ref?.scrollHeight);
-  }, [ref]);
+  }, [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
+          }
+        )
       ]
     }
   );
@@ -17549,9 +17630,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);
@@ -17729,10 +17810,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);
@@ -20289,14 +20370,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: {
@@ -23334,7 +23415,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",
@@ -23361,7 +23442,7 @@ var CircularProgress = ({
     gradientColors ? crypto.randomUUID() : void 0
   );
   return /* @__PURE__ */ jsxs66(
-    Box5,
+    Box4,
     {
       sx: {
         position: "relative",
@@ -23401,7 +23482,7 @@ var CircularProgress = ({
           }
         ) }) }),
         showCircularBackground && /* @__PURE__ */ jsx133(
-          Box5,
+          Box4,
           {
             sx: {
               position: "absolute",
@@ -23455,7 +23536,7 @@ var CircularProgress = ({
           }
         ),
         variant !== "indeterminate" && /* @__PURE__ */ jsx133(
-          Box5,
+          Box4,
           {
             sx: {
               top: 0,
@@ -23487,7 +23568,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;
@@ -23539,7 +23620,7 @@ var DonutProgress = ({
     )
   ] });
   return /* @__PURE__ */ jsxs67(
-    Box6,
+    Box5,
     {
       sx: {
         position: "relative",
@@ -23563,7 +23644,7 @@ var DonutProgress = ({
           }
         ),
         /* @__PURE__ */ jsx134(
-          Box6,
+          Box5,
           {
             sx: {
               position: "absolute",
@@ -23586,7 +23667,7 @@ var DonutProgress = ({
           }
         ),
         variant !== "empty" && labelChip && /* @__PURE__ */ jsx134(
-          Box6,
+          Box5,
           {
             sx: {
               position: "absolute",
@@ -23669,6 +23750,7 @@ var MarkdownContainer = styled9("div")(
       margin: "0.5em 0"
     },
     "& ul, & ol": {
+      ...variants[variant || "body2"],
       paddingLeft: "1.5em",
       margin: "0.5em 0"
     },
@@ -23781,7 +23863,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({
@@ -23798,7 +23880,7 @@ var NavbarButton = React75.forwardRef(
         return element;
       }
       return /* @__PURE__ */ jsxs69(
-        Box7,
+        Box6,
         {
           sx: {
             backgroundImage: `linear-gradient(to left, ${cornflowerBlue}, ${electricLavender})`,
@@ -23808,7 +23890,7 @@ var NavbarButton = React75.forwardRef(
           },
           children: [
             /* @__PURE__ */ jsx138(
-              Box7,
+              Box6,
               {
                 sx: {
                   position: "absolute",
@@ -23824,7 +23906,7 @@ var NavbarButton = React75.forwardRef(
               }
             ),
             /* @__PURE__ */ jsx138(
-              Box7,
+              Box6,
               {
                 sx: {
                   backgroundColor: white,