@connectif/ui-components 5.2.2 → 5.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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

@@ -12107,6 +12107,7 @@ var EnhancedCard = React32.forwardRef(
     const isCenterColumnAlone = !leftIconId && !rightIconId;
     const cardStyle = {
       ...getCardStyles(size),
+      ...borderless && { border: "none" },
       ...disableHover ? {} : hoverCardStyle,
       cursor: cursor2,
       ...selected && {
@@ -26306,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);
@@ -26317,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;
@@ -26343,7 +26344,6 @@ function Carousel({
     (root, container) => {
       root.style.width = "";
       showedElementsRef.current = void 0;
-      setShowedElements(void 0);
       container.scrollTo({ left: 0, behavior: "instant" });
     },
     []
@@ -26356,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];
@@ -26367,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;
@@ -26392,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) {
@@ -26405,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`;
     }
@@ -26420,6 +26420,7 @@ function Carousel({
     padding2,
     items.length,
     gap2,
+    alignment,
     updateArrows,
     resetCarousel
   ]);
@@ -26491,7 +26492,7 @@ function Carousel({
   };
   const scrollHorizontal = ({
     elementsIndex
-  }, direction) => {
+  }) => {
     const container = containerRef.current;
     const root = rootRef.current;
     if (!container || !root) {
@@ -26499,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" });
     }
   };
@@ -26544,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,
@@ -26552,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: [
@@ -26576,6 +26573,7 @@ function Carousel({
           {
             ref: containerRef,
             sx: {
+              position: "relative",
               width: "100%",
               overflowX: "hidden",
               display: "flex",
@@ -26588,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)