@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/esm/components/Carousel/Carousel.js

@@ -35,14 +35,8 @@ const HvCarousel = (props) => {
     onChange,
     ...others
   } = useDefaultProps("HvCarousel", props);
-  const {
-    activeTheme
-  } = useTheme();
-  const {
-    classes,
-    css,
-    cx
-  } = useClasses(classesProp);
+  const { activeTheme } = useTheme();
+  const { classes, css, cx } = useClasses(classesProp);
   const thumbnailsRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const isDs3 = activeTheme?.name === "ds3";
@@ -54,7 +48,9 @@ const HvCarousel = (props) => {
     loop: true,
     ...carouselOptions
   });
-  const [selectedIndex, setSelectedIndex] = useState(carouselOptions?.startIndex ?? 0);
+  const [selectedIndex, setSelectedIndex] = useState(
+    carouselOptions?.startIndex ?? 0
+  );
   const numSlides = Children.count(children);
   const handlePrevious = useCallback(() => {
     controller?.scrollPrev();
@@ -99,42 +95,116 @@ const HvCarousel = (props) => {
   const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
   const showThumbnails = !hideThumbnails && !!renderThumbnail;
   const showDots = showDotsProp ?? numSlides <= 5;
-  const actions = /* @__PURE__ */ jsxs("div", { className: cx(classes.actions, actionsPosition === "header" ? css({
-    position: "relative",
-    top: -40,
-    height: 0
-  }) : css({
-    position: "absolute"
-  })), children: [
-    actionsProp,
-    showFullscreen && /* @__PURE__ */ jsx(HvTooltip, { title: isFullscreen ? "Close" : "Fullscreen", children: /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => setIsFullscreen((curr) => !curr), className: classes.closeButton, children: isFullscreen ? /* @__PURE__ */ jsx(Close, {}) : /* @__PURE__ */ jsx(Fullscreen, {}) }) })
-  ] });
-  const controls = /* @__PURE__ */ jsx(HvCarouselControls, { classes, showDots, page: selectedIndex, pages: numSlides, canPrevious: canPrev, canNext, onPreviousClick: handlePrevious, onNextClick: handleNext, actions: actionsPosition === "controls" && actions });
-  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, { className: cx(classes.root, className, {
-    [classes.xs]: xs,
-    [classes.fullscreen]: isFullscreen
-  }), ...others, children: [
-    showTitle && /* @__PURE__ */ jsx(HvTypography, { variant: "title2", className: classes.title, children: title }),
-    actionsPosition === "header" && actions,
-    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": "Backwards", onClick: handlePrevious, children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" }) }),
-        /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !canNext, variant: "secondarySubtle", "aria-label": "Forwards", onClick: handleNext, children: /* @__PURE__ */ jsx(Forwards, { iconSize: "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
-  ] });
+  const actions = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        classes.actions,
+        actionsPosition === "header" ? css({ position: "relative", top: -40, height: 0 }) : css({ position: "absolute" })
+      ),
+      children: [
+        actionsProp,
+        showFullscreen && /* @__PURE__ */ jsx(HvTooltip, { title: isFullscreen ? "Close" : "Fullscreen", children: /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            icon: true,
+            onClick: () => setIsFullscreen((curr) => !curr),
+            className: classes.closeButton,
+            children: isFullscreen ? /* @__PURE__ */ jsx(Close, {}) : /* @__PURE__ */ jsx(Fullscreen, {})
+          }
+        ) })
+      ]
+    }
+  );
+  const controls = /* @__PURE__ */ jsx(
+    HvCarouselControls,
+    {
+      classes,
+      showDots,
+      page: selectedIndex,
+      pages: numSlides,
+      canPrevious: canPrev,
+      canNext,
+      onPreviousClick: handlePrevious,
+      onNextClick: handleNext,
+      actions: actionsPosition === "controls" && actions
+    }
+  );
+  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,
+    {
+      className: cx(classes.root, className, {
+        [classes.xs]: xs,
+        [classes.fullscreen]: isFullscreen
+      }),
+      ...others,
+      children: [
+        showTitle && /* @__PURE__ */ jsx(HvTypography, { variant: "title2", className: classes.title, children: title }),
+        actionsPosition === "header" && actions,
+        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": "Backwards",
+                    onClick: handlePrevious,
+                    children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  HvButton,
+                  {
+                    icon: true,
+                    disabled: !canNext,
+                    variant: "secondarySubtle",
+                    "aria-label": "Forwards",
+                    onClick: handleNext,
+                    children: /* @__PURE__ */ jsx(Forwards, { iconSize: "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,

package/dist/esm/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","curr","closeButton","controls","thumbnails","evt","i","root","fullscreen","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","slidesViewport","slidesContainer"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAMA,QAAQA,CAACC,KAAaC,KAAaC,MAAM,MAC7CC,KAAKD,IAAIC,KAAKF,IAAID,KAAKE,GAAG,GAAGD,GAAG;AAgDrBG,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC,QAAQC,aAAa;AAAA,IACrBC,iBAAiB;AAAA,IACjBC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,UAAUC;AAAAA,IACVC,aAAaC;AAAAA,IACbC;AAAAA,IACAC,gBAAgBC;AAAAA,IAChBC,gBAAgBC;AAAAA,IAChBC,kBAAkBC;AAAAA,IAClBC,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,cAAc7B,KAAK;AACjC,QAAA;AAAA,IAAE8B;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAE7B;AAAAA,IAAS8B;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAW/B,WAAW;AAC7CgC,QAAAA,gBAAgBC,OAAuB,IAAI;AACjD,QAAM,CAACC,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,QAAQV,aAAaW,SAAS;AAC9BC,QAAAA,kBAAkBF,QAAQ,WAAW;AACrCnB,QAAAA,mBAAmBC,yBAAyBkB,QAAQ,WAAW;AACrE,QAAMjB,qBAAqBC,0BAA0B;AAErD,QAAM,CAACmB,cAAcC,UAAU,IAAIC,YAAY;AAAA,IAC7CC,OAAO;AAAA,IACPC,MAAM;AAAA,IACN,GAAGtB;AAAAA,EAAAA,CACJ;AAED,QAAM,CAACuB,eAAeC,gBAAgB,IAAIV,SACxCd,iBAAiByB,cAAc,CACjC;AAEMC,QAAAA,YAAYC,SAASC,MAAM7C,QAAQ;AAEnC8C,QAAAA,iBAAiBC,YAAY,MAAM;AACvCX,gBAAYY,WAAW;AAAA,EAAA,GACtB,CAACZ,UAAU,CAAC;AAETa,QAAAA,aAAaF,YAAY,MAAM;AACnCX,gBAAYc,WAAW;AAAA,EAAA,GACtB,CAACd,UAAU,CAAC;AAETe,QAAAA,eAAeA,CAACC,UAAkB;AACtChB,gBAAYiB,SAASD,KAAK;AAAA,EAAA;AAGtBE,QAAAA,eAAeP,YAAY,MAAM;AACrC,QAAI,CAACX;AAAY;AAEXmB,UAAAA,aAAanB,WAAWoB;AAC9Bf,qBAAiBc,UAAU;AAG3B5B,kBAAc8B,SACVC,iBAAiB,QAAQ,IACxBH,UAAU,GAAGI,eAAe;AAAA,MAC7BC,UAAU;AAAA,MACVC,OAAO;AAAA,IAAA,CACR;AAEH1C,eAAWoC,UAAU;AAAA,EAAA,GACpB,CAACnB,YAAYjB,QAAQ,CAAC;AAEzB2C,YAAU,MAAM;AACd,QAAI,CAAC1B;AAAY;AAEN2B,eAAAA,GAAG,UAAUT,YAAY;AAEpC,WAAO,MAAM;AACAU,iBAAAA,IAAI,UAAUV,YAAY;AAAA,IAAA;AAAA,EACvC,GACC,CAAClB,YAAYkB,YAAY,CAAC;AAE7BQ,YAAU,MAAM;AACd,QAAI,CAAC1B;AAAY;AAEjBA,eAAW6B,OAAO;AAClBxB,qBAAkByB,CAAiBhF,iBAAAA,MAAMgF,cAAcvB,WAAW,CAAC,CAAC;AAAA,EAAA,GACnE,CAACA,WAAWP,UAAU,CAAC;AAEpB+B,QAAAA,UAAU/B,YAAYgC,cAAAA,KAAmB;AACzCC,QAAAA,UAAUjC,YAAYkC,cAAAA,KAAmB;AAC/C,QAAMC,YAAY,CAAC,CAACxE,UAAU,CAACI,MAAM0B;AACrC,QAAMpB,iBAAiBC,sBAAsBP;AACvCP,QAAAA,SAASiC,eAAe,SAAShC,cAAc;AACrD,QAAMS,cAAcH;AACdQ,QAAAA,iBAAiBC,uBAAuBT,MAAM,CAAC0B;AACrD,QAAM2C,iBAAiB,CAAC7D,kBAAkB,CAAC,CAACO;AACtCd,QAAAA,WAAWC,gBAAgBsC,aAAa;AAExC1C,QAAAA,+BACH,OACC,EAAA,WAAWwB,GACT/B,QAAQO,SACRiC,oBAAoB,WAChBV,IAAI;AAAA,IAAEiD,UAAU;AAAA,IAAYC,KAAK;AAAA,IAAK9E,QAAQ;AAAA,EAAG,CAAA,IACjD4B,IAAI;AAAA,IAAEiD,UAAU;AAAA,EAAA,CAAY,CAClC,GAECvE,UAAAA;AAAAA,IAAAA;AAAAA,IACAO,kBACC,oBAAC,WAAU,EAAA,OAAOoB,eAAe,UAAU,cACzC,UAAA,oBAAC,UACC,EAAA,MAAI,MACJ,SAAS,MAAMC,gBAAiB6C,CAAS,SAAA,CAACA,IAAI,GAC9C,WAAWjF,QAAQkF,aAElB/C,UAAAA,eAAgB,oBAAA,OAAA,CAAA,CAAQ,IAAG,oBAAC,YAAa,CAAA,CAAA,EAC5C,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAGF,QAAMgD,WACH,oBAAA,oBAAA,EACC,SACA,UACA,MAAMrC,eACN,OAAOG,WACP,aAAawB,SACb,SACA,iBAAiBrB,gBACjB,aAAaG,YACb,SAASf,oBAAoB,cAAcjC,QAE9C,CAAA;AAEK6E,QAAAA,aAAaN,kBAChB,oBAAA,sBAAA,EACC,SACA,KAAK7C,eACL,MAAMa,eACN,OAAOG,WACP,OAAO7C,gBACP,kBAAkB,CAACiF,KAAKC,MAAM7B,aAAa6B,CAAC,GAC5C,gBAEH,CAAA;AAED,8BACG,aACC,EAAA,WAAWvD,GAAG/B,QAAQuF,MAAMxF,WAAW;AAAA,IACrC,CAACC,QAAQS,EAAE,GAAGA;AAAAA,IACd,CAACT,QAAQwF,UAAU,GAAGrD;AAAAA,EAAAA,CACvB,GACD,GAAIT,QAEHmD,UAAAA;AAAAA,IAAAA,iCACE,cAAa,EAAA,SAAQ,UAAS,WAAW7E,QAAQK,OAC/CA,UACH,MAAA,CAAA;AAAA,IAGDmC,oBAAoB,YAAYjC;AAAAA,IAChCc,uBAAuB,SAAS+D;AAAAA,IAChCjE,qBAAqB,SAASgE;AAAAA,IAC9B,qBAAA,OAAA,EACC,WAAWpD,GAAG/B,QAAQyF,MAAM;AAAA,MAC1B,CAACzF,QAAQ0F,MAAM,GAAGjF;AAAAA,MAClB,CAACT,QAAQ2F,cAAc,GAAGxD;AAAAA,IAC3B,CAAA,GAEAvB,UAAAA;AAAAA,MAAAA,mCACE,OAAI,EAAA,WAAWZ,QAAQ4F,kBACtB,8BAAC,QAAK,EAAA,WAAW5F,QAAQ6F,SACrB,aAAE/C,gBAAgB,CAAE,IAAGG,SAAU,GACrC,CAAA,GACF;AAAA,MAGDnC,qBACC,qBAAC,OAAI,EAAA,WAAWd,QAAQ8F,eACtB,UAAA;AAAA,QAAA,oBAAC,YACC,MAAI,MACJ,UAAU,CAACrB,SACX,SAAQ,mBACR,cAAW,aACX,SAASrB,gBAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAI,CAAA,GAC1B;AAAA,4BACC,UACC,EAAA,MAAI,MACJ,UAAU,CAACuB,SACX,SAAQ,mBACR,cAAW,YACX,SAASpB,YAET,8BAAC,UAAS,EAAA,UAAS,KAAI,CAAA,GACzB;AAAA,MAAA,GACF;AAAA,MAGD,oBAAA,OAAA,EACC,KAAKd,cACL,OAAO;AAAA,QAAEvC;AAAAA,MAAO,GAChB,WAAWF,QAAQ+F,gBAEnB,UAAA,oBAAC,SAAI,WAAW/F,QAAQgG,iBAAkB1F,SAAAA,CAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCa,qBAAqB,YAAYgE;AAAAA,IACjC9D,uBAAuB,YAAY+D;AAAAA,EACtC,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,QAAQ,CAAC,KAAa,KAAa,MAAM,MAC7C,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AAgDrB,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ,aAAa;AAAA,IACrB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACjC,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,gBAAgB,OAAuB,IAAI;AACjD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEhD,QAAA,QAAQ,aAAa,SAAS;AAC9B,QAAA,kBAAkB,QAAQ,WAAW;AACrC,QAAA,mBAAmB,yBAAyB,QAAQ,WAAW;AACrE,QAAM,qBAAqB,0BAA0B;AAErD,QAAM,CAAC,cAAc,UAAU,IAAI,YAAY;AAAA,IAC7C,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,iBAAiB,cAAc;AAAA,EAAA;AAG3B,QAAA,YAAY,SAAS,MAAM,QAAQ;AAEnC,QAAA,iBAAiB,YAAY,MAAM;AACvC,gBAAY,WAAW;AAAA,EAAA,GACtB,CAAC,UAAU,CAAC;AAET,QAAA,aAAa,YAAY,MAAM;AACnC,gBAAY,WAAW;AAAA,EAAA,GACtB,CAAC,UAAU,CAAC;AAET,QAAA,eAAe,CAAC,UAAkB;AACtC,gBAAY,SAAS,KAAK;AAAA,EAAA;AAGtB,QAAA,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC;AAAY;AAEX,UAAA,aAAa,WAAW;AAC9B,qBAAiB,UAAU;AAG3B,kBAAc,SACV,iBAAiB,QAAQ,IACxB,UAAU,GAAG,eAAe;AAAA,MAC7B,UAAU;AAAA,MACV,OAAO;AAAA,IAAA,CACR;AAEH,eAAW,UAAU;AAAA,EAAA,GACpB,CAAC,YAAY,QAAQ,CAAC;AAEzB,YAAU,MAAM;AACd,QAAI,CAAC;AAAY;AAEN,eAAA,GAAG,UAAU,YAAY;AAEpC,WAAO,MAAM;AACA,iBAAA,IAAI,UAAU,YAAY;AAAA,IAAA;AAAA,EACvC,GACC,CAAC,YAAY,YAAY,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,CAAC;AAAY;AAEjB,eAAW,OAAO;AAClB,qBAAiB,CAAC,iBAAiB,MAAM,cAAc,WAAW,CAAC,CAAC;AAAA,EAAA,GACnE,CAAC,WAAW,UAAU,CAAC;AAEpB,QAAA,UAAU,YAAY,cAAA,KAAmB;AACzC,QAAA,UAAU,YAAY,cAAA,KAAmB;AAC/C,QAAM,YAAY,CAAC,CAAC,UAAU,CAAC,MAAM;AACrC,QAAM,iBAAiB,sBAAsB;AACvC,QAAA,SAAS,eAAe,SAAS,cAAc;AACrD,QAAM,cAAc;AACd,QAAA,iBAAiB,uBAAuB,MAAM,CAAC;AACrD,QAAM,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AACtC,QAAA,WAAW,gBAAgB,aAAa;AAE9C,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,oBAAoB,WAChB,IAAI,EAAE,UAAU,YAAY,KAAK,KAAK,QAAQ,EAAA,CAAG,IACjD,IAAI,EAAE,UAAU,YAAY;AAAA,MAClC;AAAA,MAEC,UAAA;AAAA,QAAA;AAAA,QACA,kBACE,oBAAA,WAAA,EAAU,OAAO,eAAe,UAAU,cACzC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,SAAS,MAAM,gBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,YAC9C,WAAW,QAAQ;AAAA,YAElB,UAAe,eAAA,oBAAC,OAAM,CAAA,CAAA,wBAAM,YAAW,EAAA;AAAA,UAAA;AAAA,QAAA,GAE5C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,QAAM,WACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,SAAS,oBAAoB,cAAc;AAAA,IAAA;AAAA,EAAA;AAI/C,QAAM,aAAa,kBACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,kBAAkB,CAAC,KAAK,MAAM,aAAa,CAAC;AAAA,MAC5C;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,EAAE,GAAG;AAAA,QACd,CAAC,QAAQ,UAAU,GAAG;AAAA,MAAA,CACvB;AAAA,MACA,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,iCACE,cAAa,EAAA,SAAQ,UAAS,WAAW,QAAQ,OAC/C,UACH,MAAA,CAAA;AAAA,QAGD,oBAAoB,YAAY;AAAA,QAChC,uBAAuB,SAAS;AAAA,QAChC,qBAAqB,SAAS;AAAA,QAC/B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,MAAM;AAAA,cAC1B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAClB,CAAC,QAAQ,cAAc,GAAG;AAAA,YAAA,CAC3B;AAAA,YAEA,UAAA;AAAA,cAAA,mCACE,OAAI,EAAA,WAAW,QAAQ,kBACtB,8BAAC,QAAK,EAAA,WAAW,QAAQ,SACtB,aAAG,gBAAgB,CAAC,IAAI,SAAS,GACpC,CAAA,GACF;AAAA,cAGD,qBACC,qBAAC,OAAI,EAAA,WAAW,QAAQ,eACtB,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,UAAU,CAAC;AAAA,oBACX,SAAQ;AAAA,oBACR,cAAW;AAAA,oBACX,SAAS;AAAA,oBAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,kBAAA;AAAA,gBAC3B;AAAA,gBACA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,UAAU,CAAC;AAAA,oBACX,SAAQ;AAAA,oBACR,cAAW;AAAA,oBACX,SAAS;AAAA,oBAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,kBAAA;AAAA,gBAC1B;AAAA,cAAA,GACF;AAAA,cAGF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,OAAO,EAAE,OAAO;AAAA,kBAChB,WAAW,QAAQ;AAAA,kBAEnB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBAAkB,UAAS;AAAA,gBAAA;AAAA,cACrD;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,qBAAqB,YAAY;AAAA,QACjC,uBAAuB,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

package/dist/esm/components/Carousel/Carousel.styles.js

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvCarousel", {
+const { staticClasses, useClasses } = createClasses("HvCarousel", {
   /** Styles applied to the component root class. */
   root: {
     display: "flex",

package/dist/esm/components/Carousel/Carousel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: \"flex\",\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing(\"xs\", \"xl\"),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: \"center\",\n    backgroundColor: theme.colors.atmo2,\n    border: `1px solid ${theme.colors.atmo4}`,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: \"none\",\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing(0, \"sm\"),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.radii.round,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: \"none\",\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","atmo2","border","atmo4","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","radii","round","thumbnailSelected"],"mappings":"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"}
+{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: \"flex\",\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing(\"xs\", \"xl\"),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: \"center\",\n    backgroundColor: theme.colors.atmo2,\n    border: `1px solid ${theme.colors.atmo4}`,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: \"none\",\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing(0, \"sm\"),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.radii.round,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: \"none\",\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Carousel/CarouselControls.js

@@ -16,19 +16,40 @@ const HvCarouselControls = (props) => {
     onPreviousClick,
     onNextClick
   } = useDefaultProps("HvCarouselControls", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp, false);
+  const { classes, cx } = useClasses(classesProp, false);
   const selectedIndex = page || 0;
   const numSlides = pages;
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.controls, className), children: [
-    showDots ? /* @__PURE__ */ jsx("div", { className: classes.dots, children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx("span", { className: cx(classes.dot, {
-      [classes.dotSelected]: index === selectedIndex
-    }) }, `circle-${index}`)) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !canPrevious, "aria-label": "Backwards", onClick: onPreviousClick, children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" }) }),
+    showDots ? /* @__PURE__ */ jsx("div", { className: classes.dots, children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx(classes.dot, {
+          [classes.dotSelected]: index === selectedIndex
+        })
+      },
+      `circle-${index}`
+    )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          icon: true,
+          disabled: !canPrevious,
+          "aria-label": "Backwards",
+          onClick: onPreviousClick,
+          children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: classes.pageCounter, children: `${selectedIndex + 1} / ${numSlides}` }),
-      /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !canNext, "aria-label": "Forwards", onClick: onNextClick, children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) })
+      /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          icon: true,
+          disabled: !canNext,
+          "aria-label": "Forwards",
+          onClick: onNextClick,
+          children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" })
+        }
+      )
     ] }),
     actions
   ] });

package/dist/esm/components/Carousel/CarouselControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselControls.js","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = useDefaultProps(\"HvCarouselControls\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":["HvCarouselControls","props","classes","classesProp","className","showDots","page","pages","canPrevious","canNext","actions","onPreviousClick","onNextClick","useDefaultProps","cx","useClasses","selectedIndex","numSlides","controls","dots","Array","from","map","el","index","dot","dotSelected","pageCounter"],"mappings":";;;;;AAuBaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,sBAAsBZ,KAAK;AACzC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,WAAWZ,aAAa,KAAK;AAErD,QAAMa,gBAAgBV,QAAQ;AAC9B,QAAMW,YAAYV;AAElB,8BACG,OAAI,EAAA,WAAWO,GAAGZ,QAAQgB,UAAUd,SAAS,GAC3CC,UAAAA;AAAAA,IACC,WAAA,oBAAC,SAAI,WAAWH,QAAQiB,MACrBC,UAAMC,MAAAA,KAAKD,MAAMH,SAAS,CAAC,EAAEK,IAAI,CAACC,IAAIC,UACrC,oBAAC,UAEC,WAAWV,GAAGZ,QAAQuB,KAAK;AAAA,MACzB,CAACvB,QAAQwB,WAAW,GAAGF,UAAUR;AAAAA,IAClC,CAAA,KAHK,UAASQ,KAAM,EAGlB,CAEN,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,UACC,EAAA,MAAI,MACJ,UAAU,CAAChB,aACX,cAAW,aACX,SAASG,iBAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAI,CAAA,GAC1B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAWT,QAAQyB,aACpB,aAAEX,gBAAgB,CAAE,MAAKC,SAAU,GACvC,CAAA;AAAA,MACC,oBAAA,UAAA,EACC,MAAI,MACJ,UAAU,CAACR,SACX,cAAW,YACX,SAASG,aAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAI,CAAA,GACzB;AAAA,IAAA,GACF;AAAA,IAEDF;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"CarouselControls.js","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = useDefaultProps(\"HvCarouselControls\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAuBa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAErD,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAElB,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,UAAU,SAAS,GAC3C,UAAA;AAAA,IAAA,WACE,oBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAM,MAAA,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,KAAK;AAAA,UACzB,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,QAAA,CAClC;AAAA,MAAA;AAAA,MAHI,UAAU,KAAK;AAAA,IAKvB,CAAA,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAW,QAAQ,aACrB,aAAG,gBAAgB,CAAC,MAAM,SAAS,GACtC,CAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,GACF;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js

@@ -9,14 +9,18 @@ const HvCarouselSlide = ({
   alt,
   ...props
 }) => {
-  const {
-    classes,
-    css,
-    cx
-  } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("div", { className: cx(css({
-    flex: `0 0 ${flexBasis}`
-  }), classes.slide, className), children: children ?? /* @__PURE__ */ jsx("img", { className: classes.image, src, alt, ...props }) });
+  const { classes, css, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        css({ flex: `0 0 ${flexBasis}` }),
+        classes.slide,
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsx("img", { className: classes.image, src, alt, ...props })
+    }
+  );
 };
 export {
   HvCarouselSlide

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp,\n  className,\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div\n      className={cx(\n        css({ flex: `0 0 ${flexBasis}` }),\n        classes.slide,\n        className\n      )}\n    >\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","className","children","size","flexBasis","src","alt","props","css","cx","useClasses","flex","slide","image"],"mappings":";;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AACnD,SACG,oBAAA,OAAA,EACC,WAAWS,GACTD,IAAI;AAAA,IAAEG,MAAO,OAAMP,SAAU;AAAA,EAAA,CAAG,GAChCL,QAAQa,OACRX,SACF,GAECC,UACC,YAAA,oBAAC,OAAI,EAAA,WAAWH,QAAQc,OAAO,KAAU,KAAcN,GAAAA,OACxD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp,\n  className,\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div\n      className={cx(\n        css({ flex: `0 0 ${flexBasis}` }),\n        classes.slide,\n        className\n      )}\n    >\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,MAAM,YAAY;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI,EAAE,MAAM,OAAO,SAAS,IAAI;AAAA,QAChC,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MAEC,UAAA,gCACE,OAAI,EAAA,WAAW,QAAQ,OAAO,KAAU,KAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAItE;"}

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.styles.js

@@ -1,8 +1,5 @@
 import { createClasses } from "../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvCarouselSlide", {
+const { staticClasses, useClasses } = createClasses("HvCarouselSlide", {
   slide: {},
   image: {
     aspectRatio: "16/9",

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarouselSlide\", {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","slide","image","aspectRatio","width","height"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,OAAO,CAAC;AAAA,EACRC,OAAO;AAAA,IACLC,aAAa;AAAA,IACbC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF,CAAC;"}
+{"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarouselSlide\", {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,IACL,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/components/Carousel/CarouselThumbnails.js

@@ -15,17 +15,24 @@ const HvCarouselThumbnails = forwardRef((props, ref) => {
     thumbnailProps,
     ...others
   } = props;
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const selectedIndex = page || 0;
   const numSlides = pages;
-  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.panel, className), ...others, children: /* @__PURE__ */ jsx(HvStack, { direction: "row", spacing: "xs", children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, { icon: true, style: {
-    width
-  }, variant: "secondaryGhost", className: cx(classes.thumbnail, {
-    [classes.thumbnailSelected]: i === selectedIndex
-  }), onClick: (event) => onThumbnailClick?.(event, i), ...thumbnailProps, children: renderThumbnail?.(i) }, `thumbnail-${i}`)) }) });
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.panel, className), ...others, children: /* @__PURE__ */ jsx(HvStack, { direction: "row", spacing: "xs", children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      icon: true,
+      style: { width },
+      variant: "secondaryGhost",
+      className: cx(classes.thumbnail, {
+        [classes.thumbnailSelected]: i === selectedIndex
+      }),
+      onClick: (event) => onThumbnailClick?.(event, i),
+      ...thumbnailProps,
+      children: renderThumbnail?.(i)
+    },
+    `thumbnail-${i}`
+  )) }) });
 });
 export {
   HvCarouselThumbnails

package/dist/esm/components/Carousel/CarouselThumbnails.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselThumbnails.js","sources":["../../../../src/components/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { HvStack } from \"@core/components/Stack\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: ExtractNames<typeof useClasses>;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n  thumbnailProps?: Partial<HvButtonProps>;\n  showDots?: boolean;\n  renderThumbnail?: (index: number) => React.ReactNode;\n}\n\nexport const HvCarouselThumbnails = forwardRef<\n  HTMLDivElement,\n  HvCarouselThumbnailsProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    page,\n    pages,\n    width,\n    renderThumbnail,\n    onThumbnailClick,\n    thumbnailProps,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div ref={ref} className={cx(classes.panel, className)} {...others}>\n      <HvStack direction=\"row\" spacing=\"xs\">\n        {Array.from(Array(numSlides)).map((doc, i) => (\n          <HvButton\n            icon\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            variant=\"secondaryGhost\"\n            className={cx(classes.thumbnail, {\n              [classes.thumbnailSelected]: i === selectedIndex,\n            })}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n            {...thumbnailProps}\n          >\n            {renderThumbnail?.(i)}\n          </HvButton>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":["HvCarouselThumbnails","forwardRef","props","ref","classes","classesProp","className","page","pages","width","renderThumbnail","onThumbnailClick","thumbnailProps","others","cx","useClasses","selectedIndex","numSlides","panel","Array","from","map","doc","i","thumbnail","thumbnailSelected","event"],"mappings":";;;;;AAwBO,MAAMA,uBAAuBC,WAGlC,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDX,IAAAA;AACE,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,SACG,oBAAA,OAAA,EAAI,KAAU,WAAWM,GAAGV,QAAQc,OAAOZ,SAAS,GAAOO,GAAAA,QAC1D,UAAA,oBAAC,WAAQ,WAAU,OAAM,SAAQ,MAC9BM,UAAMC,MAAAA,KAAKD,MAAMF,SAAS,CAAC,EAAEI,IAAI,CAACC,KAAKC,MACtC,oBAAC,UACC,EAAA,MAAI,MAEJ,OAAO;AAAA,IAAEd;AAAAA,EAAAA,GACT,SAAQ,kBACR,WAAWK,GAAGV,QAAQoB,WAAW;AAAA,IAC/B,CAACpB,QAAQqB,iBAAiB,GAAGF,MAAMP;AAAAA,EAAAA,CACpC,GACD,SAAUU,WAAUf,mBAAmBe,OAAOH,CAAC,GAC/C,GAAIX,gBAEHF,UAAAA,kBAAkBa,CAAC,EATd,GAAA,aAAYA,CAAE,EAUtB,CACD,GACH,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"CarouselThumbnails.js","sources":["../../../../src/components/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { HvStack } from \"@core/components/Stack\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: ExtractNames<typeof useClasses>;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n  thumbnailProps?: Partial<HvButtonProps>;\n  showDots?: boolean;\n  renderThumbnail?: (index: number) => React.ReactNode;\n}\n\nexport const HvCarouselThumbnails = forwardRef<\n  HTMLDivElement,\n  HvCarouselThumbnailsProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    page,\n    pages,\n    width,\n    renderThumbnail,\n    onThumbnailClick,\n    thumbnailProps,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div ref={ref} className={cx(classes.panel, className)} {...others}>\n      <HvStack direction=\"row\" spacing=\"xs\">\n        {Array.from(Array(numSlides)).map((doc, i) => (\n          <HvButton\n            icon\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            variant=\"secondaryGhost\"\n            className={cx(classes.thumbnail, {\n              [classes.thumbnailSelected]: i === selectedIndex,\n            })}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n            {...thumbnailProps}\n          >\n            {renderThumbnail?.(i)}\n          </HvButton>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAGhB,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,OAAO,SAAS,GAAI,GAAG,QAC1D,UAAC,oBAAA,SAAA,EAAQ,WAAU,OAAM,SAAQ,MAC9B,UAAA,MAAM,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,MACtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MAEJ,OAAO,EAAE,MAAM;AAAA,MACf,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,WAAW;AAAA,QAC/B,CAAC,QAAQ,iBAAiB,GAAG,MAAM;AAAA,MAAA,CACpC;AAAA,MACD,SAAS,CAAC,UAAU,mBAAmB,OAAO,CAAC;AAAA,MAC9C,GAAG;AAAA,MAEH,4BAAkB,CAAC;AAAA,IAAA;AAAA,IATf,aAAa,CAAC;AAAA,EAAA,CAWtB,GACH,EACF,CAAA;AAEJ,CAAC;"}