@orangesk/orange-design-system 3.9.0 → 3.11.0

package/src/components/BlockAction/CloneElementWithClassName.tsx

@@ -13,12 +13,15 @@ const CloneElementWithClassName: React.FC<CloneElementWithClassNameProps> = ({
   children,
   ...other
 }) =>
-  React.cloneElement(children, {
-    ...(typeof children.props === "object" && children.props !== null
-      ? children.props
-      : {}),
-    ...other,
-    className: cx(children.props && children.props.className, className),
-  });
+  // Children.map resolves lazy element references received through RSC payloads.
+  React.Children.map(children, (child) =>
+    React.cloneElement(child, {
+      ...(typeof child.props === "object" && child.props !== null
+        ? child.props
+        : {}),
+      ...other,
+      className: cx(child.props && child.props.className, className),
+    }),
+  );
 
 export { CloneElementWithClassName };

package/src/components/BlockAction/tests/CloneElementWithClassName.unit.test.jsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { CloneElementWithClassName } from "../CloneElementWithClassName";
 
@@ -31,3 +31,30 @@ describe("rendering CloneElementWithClassName", () => {
     });
   });
 });
+
+describe("CloneElementWithClassName", () => {
+  it("clones a lazy element received through the RSC payload", () => {
+    const onClick = vi.fn();
+    const element = <button className="original">Open</button>;
+    // RSC can wrap repeated elements in lazy references rather than JSX elements.
+    const child = {
+      $$typeof: Symbol.for("react.lazy"),
+      _payload: element,
+      _init: (payload) => payload,
+    };
+
+    const { getByRole } = render(
+      <CloneElementWithClassName
+        className="block-action__control"
+        onClick={onClick}
+      >
+        {child}
+      </CloneElementWithClassName>,
+    );
+
+    const button = getByRole("button", { name: "Open" });
+    expect(button).toHaveClass("original", "block-action__control");
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/Carousel/Carousel.static.ts

@@ -18,6 +18,8 @@ import {
   CLASS_DOT,
   CLASS_SCROLLBAR_DRAG,
   CLASS_SCROLLBAR_HORIZONTAL,
+  CLASS_SIDE_ARROWS,
+  CLASS_SIDE_ARROWS_VARIANT,
   CLASS_SLIDE,
   CLASS_SLIDE_NEXT,
   CLASS_SLIDE_PREV,
@@ -94,8 +96,8 @@ export const defaultConfig: SwiperOptions = {
 };
 
 export default class Carousel {
-  element: HTMLElement;
-  config: SwiperOptions;
+  element!: HTMLElement;
+  config!: SwiperOptions;
   viewport!: HTMLElement;
   track!: HTMLElement;
   instance!: Swiper;
@@ -104,8 +106,9 @@ export default class Carousel {
   private externalControlsState: ExternalControlsState | null = null;
   private resizeObserver?: ResizeObserver;
   private resizeRafId?: number;
-  private boundWindowResizeHandler: () => void;
+  private boundWindowResizeHandler!: () => void;
   private bleedResizeHandler?: () => void;
+  private destroyed = false;
   private static readonly OVERFLOW_EPSILON_PX = 1;
 
   private getViewportWrapper(): HTMLElement | null {
@@ -139,6 +142,17 @@ export default class Carousel {
       return this.track?.scrollWidth || 0;
     }
 
+    const sizes = this.instance.slidesSizesGrid;
+    const positions = this.instance.slidesGrid;
+    if (sizes?.length && positions?.length === sizes.length) {
+      const last = sizes.length - 1;
+      // Swiper's grid preserves fractional widths and resolved percentage gaps.
+      const edgesWidth = this.instance.params.centeredSlides
+        ? (sizes[0] + sizes[last]) / 2
+        : sizes[last];
+      return positions[last] - positions[0] + edgesWidth;
+    }
+
     const slides = Array.from(this.instance.slides) as HTMLElement[];
     const widthsSum = slides.reduce((sum, slide) => sum + slide.offsetWidth, 0);
     const spaceBetween = Number(this.instance.params?.spaceBetween) || 0;
@@ -153,17 +167,18 @@ export default class Carousel {
     return measuredWidth;
   }
 
-  private getOverflowWidth(viewportWrapper?: HTMLElement): number {
+  private getOverflowWidth(viewportWrapper?: HTMLElement): number | null {
     const isBleedRight = this.isBleedRight();
     const containerWidth = isBleedRight
       ? this.element.clientWidth || viewportWrapper?.clientWidth || 0
       : this.viewport?.clientWidth || 0;
 
     if (containerWidth <= 0) {
-      return 0;
+      return null;
     }
 
     const contentWidth = this.getSlidesContentWidth();
+    if (contentWidth <= 0) return null;
 
     return contentWidth - containerWidth;
   }
@@ -174,7 +189,7 @@ export default class Carousel {
     }
 
     const overflowWidth = this.getOverflowWidth(viewportWrapper);
-    if (overflowWidth !== 0) {
+    if (overflowWidth !== null) {
       return overflowWidth > Carousel.OVERFLOW_EPSILON_PX;
     }
 
@@ -185,6 +200,8 @@ export default class Carousel {
   }
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    const existing = Carousel.getInstance(element);
+    if (existing) return existing;
     const scrollbarEl = element.querySelector(
       SELECTOR_SCROLLBAR,
     ) as HTMLElement | null;
@@ -225,6 +242,7 @@ export default class Carousel {
   }
 
   init() {
+    if (this.destroyed || this.instance) return;
     this.getElements();
 
     if (this.element.hasAttribute("data-swiper-options")) {
@@ -280,7 +298,7 @@ export default class Carousel {
 
     // Trigger a final update to notify listeners (like SameHeight) that carousel is ready
     requestAnimationFrame(() => {
-      if (this.instance) {
+      if (!this.destroyed && this.instance) {
         this.instance.update();
       }
     });
@@ -303,6 +321,7 @@ export default class Carousel {
       }
 
       this.instance.update();
+      this.updateSideArrowGeometry();
       this.updateCarouselEnabledState();
       this.bleedResizeHandler?.();
       this.updateExternalControlsState();
@@ -316,7 +335,7 @@ export default class Carousel {
    */
   syncScrollbar() {
     requestAnimationFrame(() => {
-      if (this.instance?.scrollbar) {
+      if (!this.destroyed && this.instance?.scrollbar) {
         this.instance.scrollbar.updateSize();
       }
     });
@@ -328,8 +347,12 @@ export default class Carousel {
     }
 
     this.resizeObserver?.disconnect();
+    const firstSlide = this.instance?.slides?.[0] as HTMLElement | undefined;
+    let viewportWidth = this.viewport.clientWidth;
+    let rootWidth = this.element.clientWidth;
+    let slideWidth = firstSlide?.offsetWidth;
     this.resizeObserver = new ResizeObserver(() => {
-      if (!this.instance || !this.viewport) {
+      if (this.destroyed || !this.instance || !this.viewport) {
         return;
       }
 
@@ -337,12 +360,27 @@ export default class Carousel {
         return;
       }
 
-      this.instance.update();
+      const widthChanged =
+        viewportWidth !== this.viewport.clientWidth ||
+        rootWidth !== this.element.clientWidth ||
+        slideWidth !== firstSlide?.offsetWidth;
+      if (widthChanged || this.instance.params.autoHeight) {
+        this.instance.update();
+        this.bleedResizeHandler?.();
+        this.instance.scrollbar?.updateSize();
+      }
+      // A height update from SameHeight must not start another Swiper update.
       this.updateCarouselEnabledState();
-      this.instance.scrollbar?.updateSize();
+      viewportWidth = this.viewport.clientWidth;
+      rootWidth = this.element.clientWidth;
+      slideWidth = firstSlide?.offsetWidth;
     });
 
+    this.resizeObserver.observe(this.element);
     this.resizeObserver.observe(this.viewport);
+    if (firstSlide) {
+      this.resizeObserver.observe(firstSlide);
+    }
   }
 
   /**
@@ -355,7 +393,13 @@ export default class Carousel {
       const scrollbar = this.instance?.scrollbar;
       const swiper = this.instance;
 
-      if (!viewportWrapper || !scrollbar || !scrollbar.dragEl || !swiper) {
+      if (
+        this.destroyed ||
+        !viewportWrapper ||
+        !scrollbar ||
+        !scrollbar.dragEl ||
+        !swiper
+      ) {
         return;
       }
 
@@ -477,9 +521,48 @@ export default class Carousel {
       this.instance.disable();
     }
 
+    this.updateSideArrowGeometry();
+    this.updateSideArrowVisibility(hasScrollableContent);
+
     this.setScrollbarVisible(this.instance.enabled);
   }
 
+  private updateSideArrowGeometry(): void {
+    if (!this.element.classList.contains(CLASS_SIDE_ARROWS_VARIANT)) {
+      return;
+    }
+
+    const firstSlide = this.instance?.slides?.[0] as HTMLElement | undefined;
+    if (!firstSlide) {
+      return;
+    }
+
+    this.element.style.setProperty(
+      "--carousel-side-arrows-width",
+      `${firstSlide.offsetWidth}px`,
+    );
+    const slidesHeight = this.viewport?.getBoundingClientRect().height;
+    if (slidesHeight) {
+      this.element.style.setProperty(
+        "--carousel-side-arrows-height",
+        `${slidesHeight}px`,
+      );
+    }
+  }
+
+  private updateSideArrowVisibility(isScrollable: boolean): void {
+    if (!this.element.classList.contains(CLASS_SIDE_ARROWS_VARIANT)) {
+      return;
+    }
+
+    const sideArrows = this.element.querySelector(
+      `.${CLASS_SIDE_ARROWS}`,
+    ) as HTMLElement | null;
+    if (sideArrows) {
+      sideArrows.hidden = !isScrollable;
+    }
+  }
+
   private applyBleedInsets(viewportWrapper: HTMLElement): void {
     if (!this.instance || !this.instance.params) {
       return;
@@ -584,7 +667,7 @@ export default class Carousel {
    */
   adjustConfigForBleedRight() {
     requestAnimationFrame(() => {
-      if (!this.instance) return;
+      if (this.destroyed || !this.instance) return;
 
       const viewportWrapper = this.getViewportWrapper();
       if (!viewportWrapper) return;
@@ -929,6 +1012,8 @@ export default class Carousel {
   }
 
   destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
     // Clean up external controls
     if (this.carouselId) {
       const controlElements = document.querySelectorAll(
@@ -943,6 +1028,13 @@ export default class Carousel {
           );
           delete (htmlControl as any)._carouselClickHandler;
         }
+        if ((htmlControl as any)._carouselKeydownHandler) {
+          htmlControl.removeEventListener(
+            "keydown",
+            (htmlControl as any)._carouselKeydownHandler,
+          );
+          delete (htmlControl as any)._carouselKeydownHandler;
+        }
         htmlControl.removeAttribute("data-carousel-initialized");
       });
     }
@@ -967,6 +1059,8 @@ export default class Carousel {
     this.externalControlsState = null;
     this.resizeObserver?.disconnect();
     this.resizeObserver = undefined;
+    this.element.style.removeProperty("--carousel-side-arrows-width");
+    this.element.style.removeProperty("--carousel-side-arrows-height");
 
     if ((this.element as any).ODS_Carousel === this) {
       delete (this.element as any).ODS_Carousel;
@@ -974,8 +1068,11 @@ export default class Carousel {
   }
 
   update() {
-    if (this.instance) {
+    if (!this.destroyed && this.instance) {
       this.instance.update();
+      this.bleedResizeHandler?.();
+      this.updateCarouselEnabledState();
+      this.updateExternalControlsState();
     }
   }
 

package/src/components/Carousel/Carousel.tsx

@@ -17,6 +17,8 @@ import {
   CLASS_ROOT,
   CLASS_SCROLLBAR,
   CLASS_SCROLLBAR_DRAG,
+  CLASS_SIDE_ARROWS,
+  CLASS_SIDE_ARROWS_VARIANT,
   CLASS_TRACK,
   CLASS_VIEWPORT,
   CLASS_VIEWPORT_WRAPPER,
@@ -37,6 +39,8 @@ interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
   bleedRight?: boolean;
   /** Make carousel bleed right from its root edge without bleeding left */
   bleedRightNoLeft?: boolean;
+  /** Show navigation arrows beside the first visible slide */
+  showSideArrows?: boolean;
   className?: string;
 }
 
@@ -53,6 +57,7 @@ const Carousel = <T,>({
   showScrollbar = false,
   bleedRight = false,
   bleedRightNoLeft = false,
+  showSideArrows = false,
   ...other
 }: CarouselProps<T>) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -77,6 +82,7 @@ const Carousel = <T,>({
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
     [`${CLASS_ROOT}--bleed-right`]: bleedRight,
     [CLASS_BLEED_RIGHT_NO_LEFT]: bleedRightNoLeft,
+    [CLASS_SIDE_ARROWS_VARIANT]: showSideArrows,
   });
 
   const elementClasses = {
@@ -112,21 +118,38 @@ const Carousel = <T,>({
         </div>
       </div>
 
+      {showSideArrows && (
+        <div className={CLASS_SIDE_ARROWS}>
+          <Controls
+            className={elementClasses.prev}
+            icon="chevron-left"
+            aria-label="Naspäť"
+          />
+          <Controls
+            className={elementClasses.next}
+            icon="chevron-right"
+            aria-label="Ďalej"
+          />
+        </div>
+      )}
+
       {!showScrollbar && (
         <div className={elementClasses.navigation}>
           <div role="tablist" className={elementClasses.dots} />
-          <div className={elementClasses.controls}>
-            <Controls
-              className={elementClasses.prev}
-              icon="chevron-left"
-              aria-label="Naspäť"
-            />
-            <Controls
-              className={elementClasses.next}
-              icon="chevron-right"
-              aria-label="Ďalej"
-            />
-          </div>
+          {!showSideArrows && (
+            <div className={elementClasses.controls}>
+              <Controls
+                className={elementClasses.prev}
+                icon="chevron-left"
+                aria-label="Naspäť"
+              />
+              <Controls
+                className={elementClasses.next}
+                icon="chevron-right"
+                aria-label="Ďalej"
+              />
+            </div>
+          )}
         </div>
       )}
 

package/src/components/Carousel/constants.ts

@@ -11,6 +11,7 @@ export const CLASS_NEXT = `${CLASS_ROOT}__next`;
 export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
 export const CLASS_NAVIGATION = `${CLASS_ROOT}__navigation`;
 export const CLASS_CONTROLS = `${CLASS_ROOT}__controls`;
+export const CLASS_SIDE_ARROWS = `${CLASS_ROOT}__side-arrows`;
 export const CLASS_DOT = `${CLASS_ROOT}__pagination-item`;
 export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;
@@ -19,6 +20,7 @@ export const CLASS_ACTIVE = "is-active";
 export const CLASS_SCROLLBAR_VARIANT = `${CLASS_ROOT}--scrollbar`;
 export const CLASS_BLEED_RIGHT = `${CLASS_ROOT}--bleed-right`;
 export const CLASS_BLEED_RIGHT_NO_LEFT = `${CLASS_ROOT}--bleed-right-no-left`;
+export const CLASS_SIDE_ARROWS_VARIANT = `${CLASS_ROOT}--side-arrows`;
 
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

package/src/components/Carousel/styles/mixins.scss

@@ -70,6 +70,67 @@
   gap: convert.to-rem(8px);
 }
 
+@mixin side-arrows {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: min(var(--carousel-side-arrows-height, 100%), 100vh);
+  pointer-events: none;
+
+  &[hidden] {
+    display: none;
+  }
+
+  .controls {
+    flex: 0 0 auto;
+    pointer-events: auto;
+  }
+
+  .controls.swiper-button-lock {
+    display: inline-flex;
+  }
+
+  .controls[disabled] {
+    display: none;
+  }
+
+  .carousel__prev {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .carousel__next {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+  }
+
+  @include breakpoint.get("md", "down") {
+    width: var(--carousel-side-arrows-width, 100%);
+  }
+}
+
+@mixin centered-mobile-variant {
+  @include breakpoint.get("sm", "down") {
+    .carousel__slide {
+      width: calc(100% - 40px);
+    }
+
+    .carousel__side-arrows {
+      inset-inline-start: 20px;
+      width: calc(100% - 40px);
+    }
+  }
+}
+
 @mixin track {
   transform: translateZ(0);
   width: 100%;

package/src/components/Carousel/styles/style.scss

@@ -9,6 +9,13 @@
       @include mixins.scrollbar-variant;
     }
 
+    &--side-arrows {
+      .carousel__side-arrows {
+        @include mixins.side-arrows;
+      }
+      @include mixins.centered-mobile-variant;
+    }
+
     &--bleed-right,
     &--bleed-right-no-left {
       @include mixins.bleed-right-variant;