@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/Carousel/Carousel.js

@@ -1,213 +1,185 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, Children, useCallback, useEffect } from "react";
-import useCarousel from "embla-carousel-react";
-import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
-import { useLabels } from "../hooks/useLabels.js";
+import { HvTypography } from "../Typography/Typography.js";
 import { HvIcon } from "../icons.js";
+import { HvButton } from "../Button/Button.js";
+import { useLabels } from "../hooks/useLabels.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
+import { HvContainer } from "../Container/Container.js";
 import { useClasses } from "./Carousel.styles.js";
-import { staticClasses } from "./Carousel.styles.js";
 import { HvCarouselControls } from "./CarouselControls.js";
 import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
-import { HvIconButton } from "../IconButton/IconButton.js";
-import { HvContainer } from "../Container/Container.js";
-import { HvTypography } from "../Typography/Typography.js";
-import { HvButton } from "../Button/Button.js";
-const DEFAULT_LABELS = {
-  close: "Close",
-  fullscreen: "Fullscreen",
-  backwards: "Backwards",
-  forwards: "Forwards"
+import { clamp, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useCarousel from "embla-carousel-react";
+//#region src/Carousel/Carousel.tsx
+var DEFAULT_LABELS = {
+	close: "Close",
+	fullscreen: "Fullscreen",
+	backwards: "Backwards",
+	forwards: "Forwards"
 };
-const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    height: heightProp = "auto",
-    thumbnailWidth = 90,
-    title,
-    children,
-    actions: actionsProp,
-    xs,
-    showDots: showDotsProp,
-    showCounter: showCounterProp,
-    showSlideControls,
-    showFullscreen: showFullscreenProp,
-    hideThumbnails: hideThumbnailsProp,
-    controlsPosition: controlsPositionProp,
-    thumbnailsPosition: thumbnailsPositionProp,
-    labels: labelsProps,
-    carouselOptions,
-    renderThumbnail,
-    onChange,
-    onFullscreen,
-    ...others
-  } = useDefaultProps("HvCarousel", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProps);
-  const thumbnailsRef = useRef(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const controlsPosition = controlsPositionProp ?? "top";
-  const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
-  const [containerRef, controller] = useCarousel({
-    align: "start",
-    loop: true,
-    ...carouselOptions
-  });
-  const [selectedIndex, setSelectedIndex] = useState(
-    carouselOptions?.startIndex ?? 0
-  );
-  const numSlides = Children.count(children);
-  const handlePrevious = useCallback(() => {
-    controller?.scrollPrev();
-  }, [controller]);
-  const handleNext = useCallback(() => {
-    controller?.scrollNext();
-  }, [controller]);
-  const handleScroll = (index) => {
-    controller?.scrollTo(index);
-  };
-  const handleSelect = useCallback(() => {
-    if (!controller) return;
-    const slideIndex = controller.selectedScrollSnap();
-    setSelectedIndex(slideIndex);
-    thumbnailsRef.current?.querySelectorAll("button")?.[slideIndex]?.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest"
-    });
-    onChange?.(slideIndex);
-  }, [controller, onChange]);
-  useEffect(() => {
-    if (!controller) return;
-    controller.on("select", handleSelect);
-    return () => {
-      controller.off("select", handleSelect);
-    };
-  }, [controller, handleSelect]);
-  useEffect(() => {
-    if (!controller) return;
-    controller.reInit();
-    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));
-  }, [numSlides, controller]);
-  const handleFullscreen = (event) => {
-    onFullscreen?.(event, !isFullscreen);
-    setIsFullscreen((curr) => !curr);
-  };
-  const canPrev = controller?.canScrollPrev() ?? false;
-  const canNext = controller?.canScrollNext() ?? false;
-  const showTitle = !!title && (!xs || isFullscreen);
-  const showFullscreen = showFullscreenProp ?? xs;
-  const height = isFullscreen ? "100%" : heightProp ?? "auto";
-  const showCounter = xs;
-  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
-  const showThumbnails = !hideThumbnails && !!renderThumbnail;
-  const showDots = showDotsProp ?? numSlides <= 5;
-  const actions = /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
-    actionsProp,
-    showFullscreen && /* @__PURE__ */ jsx(
-      HvIconButton,
-      {
-        title: isFullscreen ? labels.close : labels.fullscreen,
-        onClick: handleFullscreen,
-        className: classes.closeButton,
-        children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
-      }
-    )
-  ] });
-  const controls = /* @__PURE__ */ jsx(
-    HvCarouselControls,
-    {
-      classes,
-      showDots,
-      page: selectedIndex,
-      pages: numSlides,
-      canPrevious: canPrev,
-      canNext,
-      onPreviousClick: handlePrevious,
-      onNextClick: handleNext,
-      actions,
-      labels: {
-        backwards: labels.backwards,
-        forwards: labels.forwards
-      }
-    }
-  );
-  const thumbnails = showThumbnails && /* @__PURE__ */ jsx(
-    HvCarouselThumbnails,
-    {
-      classes,
-      ref: thumbnailsRef,
-      page: selectedIndex,
-      pages: numSlides,
-      width: thumbnailWidth,
-      onThumbnailClick: (evt, i) => handleScroll(i),
-      renderThumbnail
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    HvContainer,
-    {
-      ref,
-      className: cx(classes.root, className, {
-        [classes.xs]: xs,
-        [classes.fullscreen]: isFullscreen
-      }),
-      ...others,
-      children: [
-        showTitle && /* @__PURE__ */ jsx(HvTypography, { variant: "title2", className: classes.title, children: title }),
-        thumbnailsPosition === "top" && thumbnails,
-        controlsPosition === "top" && controls,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cx(classes.main, {
-              [classes.mainXs]: xs,
-              [classes.mainFullscreen]: isFullscreen
-            }),
-            children: [
-              showCounter && /* @__PURE__ */ jsx("div", { className: classes.counterContainer, children: /* @__PURE__ */ jsx("span", { className: classes.counter, children: `${selectedIndex + 1}/${numSlides}` }) }),
-              showSlideControls && /* @__PURE__ */ jsxs("div", { className: classes.slideControls, children: [
-                /* @__PURE__ */ jsx(
-                  HvButton,
-                  {
-                    icon: true,
-                    disabled: !canPrev,
-                    variant: "secondarySubtle",
-                    "aria-label": labels.backwards,
-                    onClick: handlePrevious,
-                    children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", size: "xs" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  HvButton,
-                  {
-                    icon: true,
-                    disabled: !canNext,
-                    variant: "secondarySubtle",
-                    "aria-label": labels.forwards,
-                    onClick: handleNext,
-                    children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", size: "xs" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: containerRef,
-                  style: { height },
-                  className: classes.slidesViewport,
-                  children: /* @__PURE__ */ jsx("div", { className: classes.slidesContainer, children })
-                }
-              )
-            ]
-          }
-        ),
-        controlsPosition === "bottom" && controls,
-        thumbnailsPosition === "bottom" && thumbnails
-      ]
-    }
-  );
+/**
+A Carousel is used to browse content—commonly images, but also text, video, or charts. It highlights one item at a time while giving users a sense of the total content available.
+*/
+var HvCarousel = forwardRef(function HvCarousel(props, ref) {
+	const { className, classes: classesProp, height: heightProp = "auto", thumbnailWidth = 90, title, children, actions: actionsProp, xs, showDots: showDotsProp, showCounter: showCounterProp, showSlideControls, showFullscreen: showFullscreenProp, hideThumbnails: hideThumbnailsProp, controlsPosition: controlsPositionProp, thumbnailsPosition: thumbnailsPositionProp, labels: labelsProps, carouselOptions, renderThumbnail, onChange, onFullscreen, ...others } = useDefaultProps("HvCarousel", props);
+	const { classes, cx } = useClasses(classesProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProps);
+	const thumbnailsRef = useRef(null);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const actionsPosition = "controls";
+	const controlsPosition = controlsPositionProp ?? "top";
+	const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
+	const [containerRef, controller] = useCarousel({
+		align: "start",
+		loop: true,
+		...carouselOptions
+	});
+	const [selectedIndex, setSelectedIndex] = useState(carouselOptions?.startIndex ?? 0);
+	const numSlides = Children.count(children);
+	const handlePrevious = useCallback(() => {
+		controller?.scrollPrev();
+	}, [controller]);
+	const handleNext = useCallback(() => {
+		controller?.scrollNext();
+	}, [controller]);
+	const handleScroll = (index) => {
+		controller?.scrollTo(index);
+	};
+	const handleSelect = useCallback(() => {
+		if (!controller) return;
+		const slideIndex = controller.selectedScrollSnap();
+		setSelectedIndex(slideIndex);
+		thumbnailsRef.current?.querySelectorAll("button")?.[slideIndex]?.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest"
+		});
+		onChange?.(slideIndex);
+	}, [controller, onChange]);
+	useEffect(() => {
+		if (!controller) return;
+		controller.on("select", handleSelect);
+		return () => {
+			controller.off("select", handleSelect);
+		};
+	}, [controller, handleSelect]);
+	useEffect(() => {
+		if (!controller) return;
+		controller.reInit();
+		setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));
+	}, [numSlides, controller]);
+	const handleFullscreen = (event) => {
+		onFullscreen?.(event, !isFullscreen);
+		setIsFullscreen((curr) => !curr);
+	};
+	const canPrev = controller?.canScrollPrev() ?? false;
+	const canNext = controller?.canScrollNext() ?? false;
+	const showTitle = !!title && (!xs || isFullscreen);
+	const showFullscreen = showFullscreenProp ?? xs;
+	const height = isFullscreen ? "100%" : heightProp ?? "auto";
+	const showCounter = xs;
+	const showThumbnails = !(hideThumbnailsProp ?? (xs && !isFullscreen)) && !!renderThumbnail;
+	const showDots = showDotsProp ?? numSlides <= 5;
+	const actions = /* @__PURE__ */ jsxs("div", {
+		className: classes.actions,
+		children: [actionsProp, showFullscreen && /* @__PURE__ */ jsx(HvIconButton, {
+			title: isFullscreen ? labels.close : labels.fullscreen,
+			onClick: handleFullscreen,
+			className: classes.closeButton,
+			children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
+		})]
+	});
+	const controls = /* @__PURE__ */ jsx(HvCarouselControls, {
+		classes,
+		showDots,
+		page: selectedIndex,
+		pages: numSlides,
+		canPrevious: canPrev,
+		canNext,
+		onPreviousClick: handlePrevious,
+		onNextClick: handleNext,
+		actions: actionsPosition === "controls" && actions,
+		labels: {
+			backwards: labels.backwards,
+			forwards: labels.forwards
+		}
+	});
+	const thumbnails = showThumbnails && /* @__PURE__ */ jsx(HvCarouselThumbnails, {
+		classes,
+		ref: thumbnailsRef,
+		page: selectedIndex,
+		pages: numSlides,
+		width: thumbnailWidth,
+		onThumbnailClick: (evt, i) => handleScroll(i),
+		renderThumbnail
+	});
+	return /* @__PURE__ */ jsxs(HvContainer, {
+		ref,
+		className: cx(classes.root, className, {
+			[classes.xs]: xs,
+			[classes.fullscreen]: isFullscreen
+		}),
+		...others,
+		children: [
+			showTitle && /* @__PURE__ */ jsx(HvTypography, {
+				variant: "title2",
+				className: classes.title,
+				children: title
+			}),
+			thumbnailsPosition === "top" && thumbnails,
+			controlsPosition === "top" && controls,
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(classes.main, {
+					[classes.mainXs]: xs,
+					[classes.mainFullscreen]: isFullscreen
+				}),
+				children: [
+					showCounter && /* @__PURE__ */ jsx("div", {
+						className: classes.counterContainer,
+						children: /* @__PURE__ */ jsx("span", {
+							className: classes.counter,
+							children: `${selectedIndex + 1}/${numSlides}`
+						})
+					}),
+					showSlideControls && /* @__PURE__ */ jsxs("div", {
+						className: classes.slideControls,
+						children: [/* @__PURE__ */ jsx(HvButton, {
+							icon: true,
+							disabled: !canPrev,
+							variant: "secondarySubtle",
+							"aria-label": labels.backwards,
+							onClick: handlePrevious,
+							children: /* @__PURE__ */ jsx(HvIcon, {
+								name: "Backwards",
+								size: "xs"
+							})
+						}), /* @__PURE__ */ jsx(HvButton, {
+							icon: true,
+							disabled: !canNext,
+							variant: "secondarySubtle",
+							"aria-label": labels.forwards,
+							onClick: handleNext,
+							children: /* @__PURE__ */ jsx(HvIcon, {
+								name: "Forwards",
+								size: "xs"
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: containerRef,
+						style: { height },
+						className: classes.slidesViewport,
+						children: /* @__PURE__ */ jsx("div", {
+							className: classes.slidesContainer,
+							children
+						})
+					})
+				]
+			}),
+			controlsPosition === "bottom" && controls,
+			thumbnailsPosition === "bottom" && thumbnails
+		]
+	});
 });
-export {
-  HvCarousel,
-  staticClasses as carouselClasses
-};
+//#endregion
+export { HvCarousel };