@connectif/ui-components 2.3.1 → 2.3.3

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import './EchartsConfig';
 import { ChartTooltipEntryFormatter } from '../../utils/ChartUtils';
 import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+import { CallbackDataParams } from 'echarts/types/dist/shared';
 export type DonutChartProps = {
     /**
      * The css style to apply to the chart container.
@@ -69,11 +70,27 @@ export type DonutChartProps = {
              * The color for this data item.
              */
             color: string;
+            /**
+             * The opacity to apply in color. Value between 0 and 1.
+             */
+            opacity?: number;
         }[];
     }[];
+    /**
+     * To modify start angle
+     */
+    startAngle?: number;
+    /**
+     * Inner circle width. Values between 0 to 100.
+     */
+    innerWidth?: number;
+    /**
+     * Function used to set specified tooltip.
+     */
+    getTooltip?: (param: CallbackDataParams) => React.ReactNode;
 };
 /**
  * A donut chart component to display numeric data grouped by categories and series.
  */
-declare const DonutChart: ({ style, isLoading, series, tooltipEntryFormatter, onClick }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const DonutChart: ({ style, isLoading, series, startAngle, innerWidth, tooltipEntryFormatter, getTooltip, onClick }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
 export default DonutChart;

package/dist/components/icon/icons.d.ts

@@ -606,6 +606,7 @@ export declare const icons: {
     'division-box': string;
     dna: string;
     dns: string;
+    'dns-outline': string;
     'do-not-disturb': string;
     'do-not-disturb-off': string;
     dolby: string;

package/dist/components/info/InfoBox.d.ts

@@ -5,7 +5,7 @@ export type InfoBoxProps = {
     children: React.ReactNode;
     variant?: InfoBoxVariant;
     collapsedHeight?: number;
-    sx?: SxProps;
+    sx?: Omit<SxProps, 'position'>;
 };
 declare const InfoBox: React.FC<InfoBoxProps>;
 export default InfoBox;

package/dist/index.js

@@ -1479,6 +1479,7 @@ import {
   mdiDivisionBox,
   mdiDna,
   mdiDns,
+  mdiDnsOutline,
   mdiDomain,
   mdiSquareRounded,
   mdiDotsHorizontal,
@@ -3260,6 +3261,7 @@ var icons = {
   "division-box": mdiDivisionBox,
   dna: mdiDna,
   dns: mdiDns,
+  "dns-outline": mdiDnsOutline,
   "do-not-disturb": mdiMinusCircle,
   "do-not-disturb-off": mdiMinusCircleOff,
   dolby: "M2,5V19H22V5H2M6,17H4V7H6C8.86,7.09 11.1,9.33 11,12C11.1,14.67 8.86,16.91 6,17M20,17H18C15.14,16.91 12.9,14.67 13,12C12.9,9.33 15.14,7.09 18,7H20V17Z",
@@ -4732,13 +4734,6 @@ __export(Typography_exports, {
 var Colors_exports = {};
 __export(Colors_exports, {
   black: () => black,
-  blackOpacity04: () => blackOpacity04,
-  blueGrey: () => blueGrey,
-  blueGrey300: () => blueGrey300,
-  blueGrey400: () => blueGrey400,
-  blueGrey500: () => blueGrey500,
-  blueGrey700: () => blueGrey700,
-  blueGrey800: () => blueGrey800,
   complementary100: () => complementary100,
   complementary200: () => complementary200,
   complementary300: () => complementary300,
@@ -4756,7 +4751,6 @@ __export(Colors_exports, {
   dark700: () => dark700,
   dark800: () => dark800,
   dark900: () => dark900,
-  darkGreen: () => darkGreen,
   darkMain: () => darkMain,
   electricLavender: () => electricLavender,
   error100: () => error100,
@@ -4771,7 +4765,6 @@ __export(Colors_exports, {
   error800: () => error800,
   error900: () => error900,
   errorMain: () => errorMain,
-  green2: () => green2,
   grey100: () => grey100,
   grey200: () => grey200,
   grey300: () => grey300,
@@ -4783,10 +4776,7 @@ __export(Colors_exports, {
   grey800: () => grey800,
   grey900: () => grey900,
   gunMetal: () => gunMetal,
-  lightGreen: () => lightGreen,
   oliveGreen: () => oliveGreen,
-  overlay02: () => overlay02,
-  overlay05: () => overlay05,
   paleOliveGreen: () => paleOliveGreen,
   primary100: () => primary100,
   primary200: () => primary200,
@@ -4799,14 +4789,10 @@ __export(Colors_exports, {
   primary800: () => primary800,
   primary900: () => primary900,
   primaryAlpha32: () => primaryAlpha32,
-  primaryAlpha64: () => primaryAlpha64,
   primaryDark: () => primaryDark,
   primaryLight: () => primaryLight,
   primaryMain: () => primaryMain,
   primaryOpacity32: () => primaryOpacity32,
-  purpleDark: () => purpleDark,
-  purpleLight: () => purpleLight,
-  redOrange: () => redOrange,
   success100: () => success100,
   success200: () => success200,
   success300: () => success300,
@@ -4820,12 +4806,6 @@ __export(Colors_exports, {
   successDark: () => successDark,
   successLight: () => successLight,
   successMain: () => successMain,
-  tertiaryBlueGray: () => tertiaryBlueGray,
-  tertiaryBlueGrayLight: () => tertiaryBlueGrayLight,
-  tertiaryOliveGreen: () => tertiaryOliveGreen,
-  tertiaryOliveGreenLight: () => tertiaryOliveGreenLight,
-  tertiaryTealBlue: () => tertiaryTealBlue,
-  tertiaryTealBlueLight: () => tertiaryTealBlueLight,
   white: () => white,
   whiteOpacity32: () => whiteOpacity32,
   yellow: () => yellow
@@ -4845,7 +4825,6 @@ var primaryDark = primary800;
 var primaryLight = primary300;
 var primaryOpacity32 = "rgba(212, 224, 246, 0.32)";
 var primaryAlpha32 = "#F1F5FC";
-var primaryAlpha64 = "#E3EBF9";
 var complementary50 = "#FBF3E3";
 var complementary100 = "#F5E0B9";
 var complementary200 = "#F0CC8C";
@@ -4895,14 +4874,6 @@ var grey900 = "#212121";
 var white = "#FFFFFF";
 var whiteOpacity32 = "rgba(255, 255, 255, 0.32)";
 var black = "#000000";
-var blackOpacity04 = "rgba(0, 0, 0, 0.04)";
-var blueGrey300 = "#A0A4AB";
-var blueGrey400 = "#646D7A";
-var blueGrey500 = "#495362";
-var blueGrey700 = "#414A58";
-var blueGrey800 = "#383F4C";
-var lightGreen = "#599D7D";
-var darkGreen = "#487F65";
 var dark500 = "#7F8BA8";
 var dark600 = "#3A4155";
 var dark700 = "#2F3646";
@@ -4911,23 +4882,10 @@ var dark900 = "#1D202A";
 var darkMain = dark700;
 var electricLavender = "#AD77EF";
 var cornflowerBlue = "#5F90EF";
-var tertiaryBlueGray = "#0E7178";
-var tertiaryBlueGrayLight = "#E4F5F7";
-var tertiaryOliveGreen = "#619C1D";
-var tertiaryOliveGreenLight = "#EFF7E6";
-var tertiaryTealBlue = "#73849F";
-var tertiaryTealBlueLight = "#F1F3F5";
-var overlay02 = "rgba(0, 0, 0, 0.02)";
-var overlay05 = "rgba(0, 0, 0, 0.05)";
-var purpleDark = "#8035DC";
-var purpleLight = "#FCEDFF";
 var gunMetal = "#47535D";
 var yellow = "#FFD234";
-var blueGrey = "#7384A0";
 var paleOliveGreen = "#AED581";
 var oliveGreen = "#83B04E";
-var redOrange = "#FF3D00";
-var green2 = "#2AC1CB";
 
 // src/theme/Typography.ts
 var sizes = {
@@ -5230,7 +5188,6 @@ var buttonTheme = {
 // src/theme/Palettes.ts
 var Palettes_exports = {};
 __export(Palettes_exports, {
-  blueGreyPalette: () => blueGreyPalette,
   commonPalette: () => commonPalette,
   complementaryPalette: () => complementaryPalette,
   cornflowerBluePalette: () => cornflowerBluePalette,
@@ -5257,8 +5214,7 @@ var primaryPalette = {
   800: primary800,
   900: primary900,
   opacity32: primaryOpacity32,
-  alpha32: primaryAlpha32,
-  alpha64: primaryAlpha64
+  alpha32: primaryAlpha32
 };
 var complementaryPalette = {
   main: complementaryMain,
@@ -5318,21 +5274,10 @@ var greyPalette = {
 var commonPalette = {
   black,
   white,
-  blackOpacity04,
   whiteOpacity32
 };
-var blueGreyPalette = {
-  main: blueGrey,
-  300: blueGrey300,
-  400: blueGrey400,
-  500: blueGrey500,
-  700: blueGrey700,
-  800: blueGrey800
-};
 var greenPalette = {
-  main: oliveGreen,
-  light: lightGreen,
-  dark: darkGreen
+  main: oliveGreen
 };
 var darkPalette = {
   main: darkMain,
@@ -7699,7 +7644,6 @@ var themeOptions = {
     success: successPalette,
     grey: greyPalette,
     common: commonPalette,
-    blueGrey: blueGreyPalette,
     green: greenPalette,
     dark: darkPalette,
     electricLavender: electricLavenderPalette,
@@ -12066,7 +12010,7 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
   value
 }) => ({
   text: `${seriesName}: ${value}`
-})) {
+}), getTooltip) {
   const tooltipReact = React31.useMemo(() => {
     const domElement = document.createElement("div");
     return { root: createRoot(domElement), domElement };
@@ -12079,7 +12023,7 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
     };
     params.sort((a, b) => getOrder(a) - getOrder(b));
     const tooltip = /* @__PURE__ */ jsxs26(Fragment9, { children: [
-      /* @__PURE__ */ jsx65(Typography_default, { variant: "tooltip", children: params[0].name }),
+      !getTooltip && /* @__PURE__ */ jsx65(Typography_default, { variant: "tooltip", children: params[0].name }),
       params.map((p) => {
         const entry = chartTooltipEntryFormatter({
           seriesIndex: p.seriesIndex,
@@ -12088,6 +12032,9 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
           data: p.data
         });
         const incrementType = entry.incrementLabelType ?? "neutral";
+        if (getTooltip) {
+          return /* @__PURE__ */ jsx65(React31.Fragment, { children: getTooltip(p) }, p.seriesIndex);
+        }
         return /* @__PURE__ */ jsxs26(React31.Fragment, { children: [
           /* @__PURE__ */ jsx65("br", {}),
           /* @__PURE__ */ jsx65(
@@ -13101,7 +13048,10 @@ var DonutChart = ({
   style: style3,
   isLoading,
   series = [],
+  startAngle,
+  innerWidth,
   tooltipEntryFormatter,
+  getTooltip,
   onClick
 }) => {
   const mainMetricWidth = 20;
@@ -13117,7 +13067,7 @@ var DonutChart = ({
     tooltip: {
       ...tooltipOptions,
       trigger: "item",
-      formatter: useTooltipFormatter(tooltipEntryFormatter)
+      formatter: useTooltipFormatter(tooltipEntryFormatter, getTooltip)
     },
     grid: {
       left: 0,
@@ -13143,8 +13093,9 @@ var DonutChart = ({
           emptyCircleStyle: {
             color: alpha4(grey200, 0.5)
           },
+          ...startAngle && { startAngle },
           radius: [
-            `${currentRadius - mainMetricWidth}%`,
+            `${currentRadius - (innerWidth ?? mainMetricWidth)}%`,
             `${currentRadius}%`
           ],
           name,
@@ -13155,17 +13106,17 @@ var DonutChart = ({
           label: {
             show: false
           },
-          data: isAllZero ? [] : data.map(({ value, label, color: color2 }) => ({
+          data: isAllZero ? [] : data.map(({ value, label, color: color2, opacity }) => ({
             value,
             name: label,
             incrementLabelValue,
             incrementLabelType,
             itemStyle: {
-              color: color2
+              color: opacity === void 0 ? color2 : alpha4(color2, opacity)
             }
           }))
         });
-        currentRadius -= mainMetricWidth;
+        currentRadius -= innerWidth ?? mainMetricWidth;
         if (isComparison) {
           currentRadius -= comparisonMetricMargin;
           previous.push({
@@ -13190,12 +13141,13 @@ var DonutChart = ({
               ({
                 comparisonValue,
                 comparisonLabel,
-                color: color2
+                color: color2,
+                opacity
               }) => ({
                 value: comparisonValue,
                 name: comparisonLabel,
                 itemStyle: {
-                  color: color2
+                  color: opacity === void 0 ? color2 : alpha4(color2, opacity)
                 }
               })
             )
@@ -18337,7 +18289,8 @@ var InfoBox = ({
 }) => {
   const [ref, { height: height2 }] = useResizeObserver();
   const [expanded, setExpanded] = React46.useState(false);
-  const showExpandButton = height2 > collapsedHeight && expanded || height2 === collapsedHeight && !expanded;
+  const showExpandButton = height2 >= collapsedHeight;
+  const maxHeight2 = expanded ? `${height2}px` : `${collapsedHeight}px`;
   return /* @__PURE__ */ jsxs41(
     Stack_default,
     {
@@ -18345,9 +18298,11 @@ var InfoBox = ({
       direction: "row",
       sx: {
         position: "relative",
+        transition: "max-height 0.25s cubic-bezier(0.2, 0.8, 0.4, 1)",
+        maxHeight: maxHeight2,
+        overflow: "hidden",
         ...variantStyles2[variant],
-        ...!expanded ? { maxHeight: `${collapsedHeight}px`, overflow: "hidden" } : {},
-        ...sx
+        ...sx && { sx }
       },
       children: [
         /* @__PURE__ */ jsx93(

package/dist/theme/Colors.d.ts

@@ -13,7 +13,6 @@ export declare const primaryDark = "#516DC4";
 export declare const primaryLight = "#82BDFD";
 export declare const primaryOpacity32 = "rgba(212, 224, 246, 0.32)";
 export declare const primaryAlpha32 = "#F1F5FC";
-export declare const primaryAlpha64 = "#E3EBF9";
 export declare const complementary50 = "#FBF3E3";
 export declare const complementary100 = "#F5E0B9";
 export declare const complementary200 = "#F0CC8C";
@@ -63,14 +62,6 @@ export declare const grey900 = "#212121";
 export declare const white = "#FFFFFF";
 export declare const whiteOpacity32 = "rgba(255, 255, 255, 0.32)";
 export declare const black = "#000000";
-export declare const blackOpacity04 = "rgba(0, 0, 0, 0.04)";
-export declare const blueGrey300 = "#A0A4AB";
-export declare const blueGrey400 = "#646D7A";
-export declare const blueGrey500 = "#495362";
-export declare const blueGrey700 = "#414A58";
-export declare const blueGrey800 = "#383F4C";
-export declare const lightGreen = "#599D7D";
-export declare const darkGreen = "#487F65";
 export declare const dark500 = "#7F8BA8";
 export declare const dark600 = "#3A4155";
 export declare const dark700 = "#2F3646";
@@ -79,20 +70,7 @@ export declare const dark900 = "#1D202A";
 export declare const darkMain = "#2F3646";
 export declare const electricLavender = "#AD77EF";
 export declare const cornflowerBlue = "#5F90EF";
-export declare const tertiaryBlueGray = "#0E7178";
-export declare const tertiaryBlueGrayLight = "#E4F5F7";
-export declare const tertiaryOliveGreen = "#619C1D";
-export declare const tertiaryOliveGreenLight = "#EFF7E6";
-export declare const tertiaryTealBlue = "#73849F";
-export declare const tertiaryTealBlueLight = "#F1F3F5";
-export declare const overlay02 = "rgba(0, 0, 0, 0.02)";
-export declare const overlay05 = "rgba(0, 0, 0, 0.05)";
-export declare const purpleDark = "#8035DC";
-export declare const purpleLight = "#FCEDFF";
 export declare const gunMetal = "#47535D";
 export declare const yellow = "#FFD234";
-export declare const blueGrey = "#7384A0";
 export declare const paleOliveGreen = "#AED581";
 export declare const oliveGreen = "#83B04E";
-export declare const redOrange = "#FF3D00";
-export declare const green2 = "#2AC1CB";

package/dist/theme/CustomPalette.d.ts

@@ -8,7 +8,6 @@ export interface CustomPalette extends Palette {
     success: CustomPaletteColor;
     grey: CustomPaletteColor;
     common: CustomPaletteCommon;
-    blueGrey: CustomPaletteColor;
     green: CustomPaletteColor;
     dark: CustomPaletteColor;
     electricLavender: CustomPaletteColor;
@@ -21,7 +20,6 @@ export interface CustomPaletteOptions extends PaletteOptions {
     success?: CustomPaletteColorOptions;
     grey?: CustomPaletteColorOptions;
     common?: CustomPaletteCommonOptions;
-    blueGrey?: CustomPaletteColorOptions;
     green?: CustomPaletteColorOptions;
     dark?: CustomPaletteColorOptions;
     electricLavender?: CustomPaletteColorOptions;

package/dist/theme/CustomPaletteCommon.d.ts

@@ -1,7 +1,6 @@
 export interface CustomPaletteCommon {
     black: string;
     white: string;
-    blackOpacity04: string;
     whiteOpacity32: string;
 }
 export type CustomPaletteCommonOptions = Partial<CustomPaletteCommon>;

package/dist/theme/Palettes.d.ts

@@ -6,7 +6,6 @@ export declare const errorPalette: CustomPaletteColorOptions;
 export declare const successPalette: CustomPaletteColorOptions;
 export declare const greyPalette: CustomPaletteColorOptions;
 export declare const commonPalette: CustomPaletteCommonOptions;
-export declare const blueGreyPalette: CustomPaletteColorOptions;
 export declare const greenPalette: CustomPaletteColorOptions;
 export declare const darkPalette: CustomPaletteColorOptions;
 export declare const electricLavenderPalette: CustomPaletteColorOptions;