@connectif/ui-components 5.2.1 → 5.2.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [5.2.3] - 2026-02-17
+
+### Added
+
+- New prop `alignLeft` for optional alignment of the `Carousel` component.
+
+## [5.2.2] - 2026-02-11
+
+### Added
+
+- New icon `map-marker-account`.
+- New prop `showIcon` for optional icon in the `DonutChart` component.
+
 ## [5.2.1] - 2026-02-02
 
 ### Fixed

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

@@ -88,9 +88,13 @@ export type DonutChartProps = {
      * Function used to set specified tooltip.
      */
     getTooltip?: (param: CallbackDataParams) => React.ReactNode;
+    /**
+     * To show or not the icon.
+     */
+    showIcon?: boolean;
 };
 /**
  * A donut chart component to display numeric data grouped by categories and series.
  */
-declare const DonutChart: ({ style, isLoading, series, startAngle, innerWidth, tooltipEntryFormatter, getTooltip, onClick }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const DonutChart: ({ style, isLoading, series, startAngle, innerWidth, tooltipEntryFormatter, getTooltip, onClick, showIcon }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
 export default DonutChart;

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

@@ -1119,6 +1119,7 @@ export declare const icons: {
     mailbox: string;
     map: string;
     'map-marker': string;
+    'map-marker-account': string;
     'map-marker-circle': string;
     'map-marker-minus': string;
     'map-marker-multiple': string;

package/dist/components/scrollable/Carousel.d.ts

@@ -4,6 +4,7 @@ export type CarouselProps<T> = {
     renderItem: (item: T, index: number) => React.ReactNode;
     gap?: number;
     padding?: number;
+    alignment?: 'left' | 'center';
 };
-declare function Carousel<T>({ items, renderItem, gap, padding }: CarouselProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Carousel<T>({ items, renderItem, gap, padding, alignment }: CarouselProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Carousel;

package/dist/index.js

@@ -1898,6 +1898,7 @@ import {
   mdiMailbox,
   mdiMap,
   mdiMapMarker,
+  mdiMapMarkerAccount,
   mdiMapMarkerCircle,
   mdiMapMarkerMinus,
   mdiMapMarkerMultiple,
@@ -3779,6 +3780,7 @@ var icons = {
   mailbox: mdiMailbox,
   map: mdiMap,
   "map-marker": mdiMapMarker,
+  "map-marker-account": mdiMapMarkerAccount,
   "map-marker-circle": mdiMapMarkerCircle,
   "map-marker-minus": mdiMapMarkerMinus,
   "map-marker-multiple": mdiMapMarkerMultiple,
@@ -12105,6 +12107,7 @@ var EnhancedCard = React32.forwardRef(
     const isCenterColumnAlone = !leftIconId && !rightIconId;
     const cardStyle = {
       ...getCardStyles(size),
+      ...borderless && { border: "none" },
       ...disableHover ? {} : hoverCardStyle,
       cursor: cursor2,
       ...selected && {
@@ -13595,11 +13598,12 @@ var DonutChart = ({
   style: style3,
   isLoading,
   series = [],
-  startAngle,
+  startAngle = 20,
   innerWidth,
   tooltipEntryFormatter,
   getTooltip,
-  onClick
+  onClick,
+  showIcon
 }) => {
   const mainMetricWidth = 20;
   const comparisonMetricWidth = 10;
@@ -13757,6 +13761,20 @@ var DonutChart = ({
       },
       children: isLoading ? /* @__PURE__ */ jsx75(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs33(Fragment13, { children: [
         /* @__PURE__ */ jsxs33(Box_default2, { sx: { flexGrow: 1, position: "relative" }, children: [
+          showIcon && /* @__PURE__ */ jsx75(
+            Icon_default,
+            {
+              id: "map-marker-account",
+              size: "L",
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: 10
+              }
+            }
+          ),
           title,
           /* @__PURE__ */ jsx75(
             ReactEChartsCore3,
@@ -26289,7 +26307,8 @@ function Carousel({
   items,
   renderItem,
   gap: gap2 = 8,
-  padding: padding2 = 8
+  padding: padding2 = 8,
+  alignment = "left"
 }) {
   const rootRef = React86.useRef(null);
   const containerRef = React86.useRef(null);
@@ -26300,7 +26319,6 @@ function Carousel({
   const [paddingElement, setPaddingElement] = React86.useState();
   const [visibleCount, setVisibleCount] = React86.useState();
   const showedElementsRef = React86.useRef(void 0);
-  const [showedElements, setShowedElements] = React86.useState();
   const updateArrows = React86.useCallback(() => {
     if (!showedElementsRef.current) {
       return;
@@ -26326,7 +26344,6 @@ function Carousel({
     (root, container) => {
       root.style.width = "";
       showedElementsRef.current = void 0;
-      setShowedElements(void 0);
       container.scrollTo({ left: 0, behavior: "instant" });
     },
     []
@@ -26339,7 +26356,7 @@ function Carousel({
         return;
       }
       const containerWidth = getUsableWidth(root);
-      const initialHorizontalPadding = padding2 * 2;
+      const initialHorizontalPadding = alignment === "left" ? 0 : padding2 * 2;
       let count = 0;
       let accumulatedWidth = initialHorizontalPadding;
       let nextChild = children[nextElementsIndex.start];
@@ -26350,15 +26367,15 @@ function Carousel({
       }
       const addGap = nextElementsIndex.start + count < items.length;
       const diffWidth = containerWidth - accumulatedWidth + initialHorizontalPadding + (addGap ? gap2 : 0);
-      setPaddingElement(`${diffWidth / 2}px`);
+      const shouldCenter = alignment === "center" && count === items.length;
+      setPaddingElement(`${shouldCenter ? diffWidth / 2 : 0}px`);
       setVisibleCount(count);
       showedElementsRef.current = nextElementsIndex;
-      setShowedElements(nextElementsIndex);
       return {
         childrenWidth: accumulatedWidth
       };
     },
-    [gap2, getUsableWidth, items.length, padding2]
+    [alignment, gap2, getUsableWidth, items.length, padding2]
   );
   const updateVisibleCount = React86.useCallback(() => {
     const root = rootRef.current;
@@ -26375,7 +26392,7 @@ function Carousel({
       return;
     }
     const containerWidth = getUsableWidth(root);
-    const initialHorizontalPadding = padding2 * 2;
+    const initialHorizontalPadding = alignment === "left" ? 0 : padding2 * 2;
     let count = 0;
     let accumulatedWidth = initialHorizontalPadding;
     for (const child of children) {
@@ -26388,12 +26405,12 @@ function Carousel({
     }
     const addGap = count < items.length;
     const diffWidth = containerWidth - accumulatedWidth + initialHorizontalPadding + (addGap ? gap2 : 0);
-    const newPaddingSize = `${diffWidth / 2}px`;
+    const shouldCenter = alignment === "center" && count === items.length;
+    const newPaddingSize = `${shouldCenter ? diffWidth / 2 : 0}px`;
     setPaddingElement(newPaddingSize);
     setVisibleCount(count);
     const newVisible = { start: 0, end: count - 1 };
     showedElementsRef.current = newVisible;
-    setShowedElements(newVisible);
     if (root) {
       root.style.width = `${containerWidth}px`;
     }
@@ -26403,6 +26420,7 @@ function Carousel({
     padding2,
     items.length,
     gap2,
+    alignment,
     updateArrows,
     resetCarousel
   ]);
@@ -26474,7 +26492,7 @@ function Carousel({
   };
   const scrollHorizontal = ({
     elementsIndex
-  }, direction) => {
+  }) => {
     const container = containerRef.current;
     const root = rootRef.current;
     if (!container || !root) {
@@ -26482,17 +26500,13 @@ function Carousel({
     }
     const newMeasures = setMeasures(root, container, elementsIndex);
     if (newMeasures) {
-      const scrollLeft = (elementsIndex.end < items.length - 1 ? container.scrollLeft + container.clientWidth : container.scrollWidth - newMeasures.childrenWidth) + padding2 * 2;
-      const targetLeft = direction === "right" ? scrollLeft : Math.max(
-        container.scrollLeft - newMeasures.childrenWidth,
-        0
-      );
+      const targetItem = container.children[elementsIndex.start];
+      const targetLeft = targetItem?.offsetLeft ?? 0;
       waitForSmoothScrollEnd(container, () => {
         isScrolling.current = false;
         updateArrows();
       });
       showedElementsRef.current = elementsIndex;
-      setShowedElements(elementsIndex);
       container.scrollTo({ left: targetLeft, behavior: "smooth" });
     }
   };
@@ -26527,7 +26541,7 @@ function Carousel({
         elementsIndex: { start, end }
       };
     }
-    scrollHorizontal(scrollData, direction);
+    scrollHorizontal(scrollData);
   };
   return /* @__PURE__ */ jsx151(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs80(
     Box_default2,
@@ -26535,9 +26549,9 @@ function Carousel({
       sx: {
         position: "relative",
         alignSelf: "center",
-        padding: `${padding2}px`,
-        ...paddingElement && {
-          padding: `${padding2}px ${paddingElement}`
+        padding: `${alignment === "left" ? 0 : padding2}px`,
+        ...(paddingElement || alignment === "left") && {
+          padding: `${alignment === "left" ? 0 : padding2}px ${paddingElement || "0px"}`
         }
       },
       children: [
@@ -26559,6 +26573,7 @@ function Carousel({
           {
             ref: containerRef,
             sx: {
+              position: "relative",
               width: "100%",
               overflowX: "hidden",
               display: "flex",
@@ -26571,9 +26586,6 @@ function Carousel({
               Box_default2,
               {
                 sx: {
-                  ...showedElements && (index < showedElements.start || index > showedElements.end) && {
-                    opacity: 0
-                  },
                   transition: "opacity 0.5s ease"
                 },
                 children: renderItem(item, index)