@hitachivantara/uikit-react-core 5.7.4 → 5.8.0

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

@@ -0,0 +1,228 @@
+import { useRef, useState, Children, useEffect } from "react";
+import useCarousel from "embla-carousel-react";
+import { ClassNames } from "@emotion/react";
+import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import newStyles, { carouselClasses } from "./Carousel.styles.js";
+import { makeClasses } from "./utils.js";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { HvContainer } from "../Container/Container.js";
+import { HvStack } from "../Stack/Stack.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { HvButton } from "../Button/Button.js";
+const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
+const HvCarousel = (props) => {
+  const {
+    className,
+    classes: classesProp = {},
+    height: heightProp = "auto",
+    thumbnailWidth = 90,
+    title,
+    children,
+    actions,
+    xs,
+    showDots: showDotsProp,
+    showCounter: showCounterProp,
+    showSlideControls,
+    showFullscreen: showFullscreenProp,
+    hideThumbnails: hideThumbnailsProp,
+    carouselOptions,
+    renderThumbnail,
+    onChange,
+    ...others
+  } = props;
+  const thumbnailsRef = useRef(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [containerRef, controller] = useCarousel({
+    align: "start",
+    loop: true,
+    ...carouselOptions
+  });
+  const [selectedIndex, setSelectedIndex] = useState((carouselOptions == null ? void 0 : carouselOptions.startIndex) ?? 0);
+  const numSlides = Children.count(children);
+  const handlePrevious = () => {
+    controller == null ? void 0 : controller.scrollPrev();
+  };
+  const handleNext = () => {
+    controller == null ? void 0 : controller.scrollNext();
+  };
+  const handleScroll = (index) => {
+    controller == null ? void 0 : controller.scrollTo(index);
+  };
+  const handleSelect = () => {
+    var _a, _b, _c;
+    if (!controller)
+      return;
+    const slideIndex = controller.selectedScrollSnap();
+    setSelectedIndex(slideIndex);
+    (_c = (_b = (_a = thumbnailsRef.current) == null ? void 0 : _a.querySelectorAll("button")) == null ? void 0 : _b[slideIndex]) == null ? void 0 : _c.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+    onChange == null ? void 0 : onChange(slideIndex);
+  };
+  useEffect(() => {
+    if (!controller)
+      return;
+    controller.on("select", handleSelect);
+    return () => {
+      controller.off("select", handleSelect);
+    };
+  }, [controller]);
+  useEffect(() => {
+    if (!controller)
+      return;
+    controller.reInit();
+    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));
+  }, [numSlides]);
+  const canPrev = (controller == null ? void 0 : controller.canScrollPrev()) ?? false;
+  const canNext = (controller == null ? void 0 : 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;
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => {
+      const classes = makeClasses({
+        css,
+        cx
+      }, {
+        cc: carouselClasses,
+        styles: newStyles,
+        classes: classesProp
+      });
+      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
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.actions,
+          children: [showFullscreen && /* @__PURE__ */ jsx(HvButton, {
+            icon: true,
+            variant: "secondaryGhost",
+            onClick: () => setIsFullscreen((curr) => !curr),
+            className: classes.closeButton,
+            children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
+              "aria-label": "Close"
+            }) : /* @__PURE__ */ jsx(Fullscreen, {
+              "aria-label": "Fullscreen"
+            })
+          }), actions]
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.mainContainer,
+          children: [/* @__PURE__ */ jsx("div", {
+            className: classes.controls,
+            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: !canPrev,
+                variant: "secondaryGhost",
+                "aria-label": "Backwards",
+                onClick: handlePrevious,
+                children: /* @__PURE__ */ jsx(Backwards, {
+                  iconSize: "XS"
+                })
+              }), /* @__PURE__ */ jsx("div", {
+                className: classes.pageCounter,
+                children: `${selectedIndex + 1} / ${numSlides}`
+              }), /* @__PURE__ */ jsx(HvButton, {
+                icon: true,
+                disabled: !canNext,
+                variant: "secondaryGhost",
+                "aria-label": "Forwards",
+                onClick: handleNext,
+                children: /* @__PURE__ */ jsx(Forwards, {
+                  iconSize: "XS"
+                })
+              })]
+            })
+          }), /* @__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: "secondary",
+                "aria-label": "Backwards",
+                onClick: handlePrevious,
+                children: /* @__PURE__ */ jsx(Backwards, {
+                  iconSize: "XS"
+                })
+              }), /* @__PURE__ */ jsx(HvButton, {
+                icon: true,
+                disabled: !canNext,
+                variant: "secondary",
+                "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
+              })
+            })]
+          })]
+        }), showThumbnails && /* @__PURE__ */ jsx("div", {
+          ref: thumbnailsRef,
+          className: classes.panel,
+          children: /* @__PURE__ */ jsx(HvStack, {
+            direction: "row",
+            spacing: "xs",
+            children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, {
+              icon: true,
+              variant: "secondaryGhost",
+              style: {
+                width: thumbnailWidth
+              },
+              className: cx(classes.thumbnail, {
+                [classes.thumbnailSelected]: i === selectedIndex
+              }),
+              onClick: () => handleScroll(i),
+              children: renderThumbnail(i)
+            }, `button-${i}`))
+          })
+        })]
+      });
+    }
+  });
+};
+export {
+  HvCarousel
+};
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvContainer, HvStack, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\n\nimport styles, {\n  HvCarouselClasses,\n  carouselClasses as cc,\n} from \"./Carousel.styles\";\nimport { makeClasses } from \"./utils\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: Partial<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  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\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,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\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 = () => {\n    controller?.scrollPrev();\n  };\n\n  const handleNext = () => {\n    controller?.scrollNext();\n  };\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = () => {\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  };\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides]);\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  return (\n    <ClassNames>\n      {({ css, cx }) => {\n        const classes = makeClasses(\n          { css, cx },\n          { cc, styles, classes: classesProp }\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            <div className={classes.actions}>\n              {showFullscreen && (\n                <HvButton\n                  icon\n                  variant=\"secondaryGhost\"\n                  onClick={() => setIsFullscreen((curr) => !curr)}\n                  className={classes.closeButton}\n                >\n                  {isFullscreen ? (\n                    <Close aria-label=\"Close\" />\n                  ) : (\n                    <Fullscreen aria-label=\"Fullscreen\" />\n                  )}\n                </HvButton>\n              )}\n              {actions}\n            </div>\n\n            <div className={classes.mainContainer}>\n              <div className={classes.controls}>\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={!canPrev}\n                      variant=\"secondaryGhost\"\n                      aria-label=\"Backwards\"\n                      onClick={handlePrevious}\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                      variant=\"secondaryGhost\"\n                      aria-label=\"Forwards\"\n                      onClick={handleNext}\n                    >\n                      <Forwards iconSize=\"XS\" />\n                    </HvButton>\n                  </>\n                )}\n              </div>\n\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=\"secondary\"\n                      aria-label=\"Backwards\"\n                      onClick={handlePrevious}\n                    >\n                      <Backwards iconSize=\"XS\" />\n                    </HvButton>\n                    <HvButton\n                      icon\n                      disabled={!canNext}\n                      variant=\"secondary\"\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            </div>\n\n            {showThumbnails && (\n              <div ref={thumbnailsRef} className={classes.panel}>\n                <HvStack direction=\"row\" spacing=\"xs\">\n                  {Array.from(Array(numSlides)).map((doc, i) => (\n                    <HvButton\n                      icon\n                      variant=\"secondaryGhost\"\n                      key={`button-${i}`}\n                      style={{ width: thumbnailWidth }}\n                      className={cx(classes.thumbnail, {\n                        [classes.thumbnailSelected]: i === selectedIndex,\n                      })}\n                      onClick={() => handleScroll(i)}\n                    >\n                      {renderThumbnail(i)}\n                    </HvButton>\n                  ))}\n                </HvStack>\n              </div>\n            )}\n          </HvContainer>\n        );\n      }}\n    </ClassNames>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","carouselOptions","renderThumbnail","onChange","others","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","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","ClassNames","css","cx","makeClasses","cc","styles","HvContainer","root","fullscreen","_jsx","HvTypography","variant","_jsxs","HvButton","icon","onClick","curr","closeButton","Close","Fullscreen","mainContainer","controls","dots","Array","from","map","el","dot","dotSelected","_Fragment","disabled","Backwards","iconSize","pageCounter","Forwards","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","ref","style","slidesViewport","slidesContainer","panel","HvStack","direction","spacing","doc","i","width","thumbnail","thumbnailSelected"],"mappings":"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"}

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

@@ -0,0 +1,177 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { replace$ } from "./utils.js";
+import { getClasses } from "../../utils/classes.js";
+const styles = {
+  /** Styles applied to the component root class. */
+  root: {
+    display: "flex",
+    alignItems: "stretch",
+    flexDirection: "column",
+    backgroundColor: theme.colors.atmo1,
+    margin: 0,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2)
+  },
+  xs: {
+    "&:not(._)": {
+      padding: 0
+    },
+    // put dots on top of Slide
+    "& $dots": {
+      position: "relative",
+      top: "-40px"
+    },
+    "& $actions": {
+      top: 0
+    },
+    "& $controls": {
+      display: theme.carousel.xsControlsDisplay
+    }
+  },
+  fullscreen: {
+    width: "100vw",
+    height: "100vh",
+    position: "fixed",
+    inset: 0,
+    zIndex: theme.zIndices.modal,
+    "&:not(._)": {
+      padding: theme.spacing(["xs", "xl"])
+    }
+  },
+  title: {
+    display: "flex",
+    justifyContent: "flex-start",
+    marginBottom: theme.space.xs
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    height: 0,
+    zIndex: 1,
+    position: "relative",
+    top: theme.carousel.actionsOffsetTop
+  },
+  closeButton: {},
+  mainContainer: {
+    display: "flex",
+    flexDirection: theme.carousel.mainContainerFlexDirection
+  },
+  controls: {
+    display: "flex",
+    alignItems: "center",
+    height: 32,
+    justifyContent: theme.carousel.controlsJustifyContent,
+    backgroundColor: theme.carousel.controlsBackgroundColor,
+    border: theme.carousel.controlsBorder,
+    gap: theme.space.xs,
+    "&:has($dots)": {
+      justifyContent: "center"
+    }
+  },
+  pageCounter: {},
+  main: {
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    "&:hover $slideControls": {
+      opacity: 1
+    }
+  },
+  mainXs: {},
+  mainFullscreen: {
+    maxHeight: "80vh"
+  },
+  counterContainer: {
+    position: "absolute",
+    top: theme.space.xs,
+    right: theme.space.md,
+    zIndex: 1,
+    display: theme.carousel.counterContainerDisplay
+  },
+  counter: {
+    color: theme.colors.base_light,
+    backgroundColor: theme.colors.base_dark,
+    padding: theme.spacing([0, "sm"])
+  },
+  slideControls: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: `calc(50% - (32px / 2))`,
+    padding: theme.spacing([0, "sm"]),
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    opacity: 0,
+    "& button": {
+      zIndex: 1
+    },
+    "&:focus-within": {
+      opacity: 1
+    }
+  },
+  slidesViewport: {
+    overflow: "hidden"
+  },
+  slidesContainer: {
+    display: "flex",
+    flexDirection: "row",
+    height: "100%"
+  },
+  dots: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.xs,
+    height: theme.space.md
+  },
+  dotsXs: {},
+  dot: {
+    width: 5,
+    height: 5,
+    margin: theme.space.xs,
+    borderRadius: "50%",
+    backgroundColor: theme.colors.atmo4
+  },
+  dotSelected: {
+    width: 10,
+    height: 10,
+    backgroundColor: theme.colors.secondary_80
+  },
+  panel: {
+    display: "flex",
+    width: "100%",
+    overflowX: "auto",
+    // "hidden",
+    overflowY: "hidden",
+    padding: theme.spacing(["xs", "2px", "2px"])
+  },
+  thumbnail: {
+    height: "unset",
+    padding: 0,
+    "& img": {
+      width: "100%",
+      height: "100%",
+      textAlign: "center",
+      aspectRatio: "16/9",
+      opacity: "50%",
+      borderRadius: theme.carousel.thumbnailBorderRadius
+    }
+  },
+  thumbnailSelected: {
+    "& img": {
+      border: theme.carousel.thumbnailSelectedBorder,
+      opacity: "100%"
+    }
+  }
+};
+const name = "HvCarousel";
+const carouselClasses = getClasses(Object.keys(styles), name);
+const newStyles = replace$(styles, name);
+export {
+  carouselClasses,
+  newStyles as default
+};
+//# sourceMappingURL=Carousel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { getClasses } from \"@core/utils\";\nimport { replace$ } from \"./utils\";\n\nexport type HvCarouselClasses = Record<keyof typeof styles, string>;\n\nconst styles = {\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: theme.carousel.xsControlsDisplay,\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    height: 0,\n    zIndex: 1,\n\n    position: \"relative\",\n    top: theme.carousel.actionsOffsetTop,\n  },\n  closeButton: {},\n\n  mainContainer: {\n    display: \"flex\",\n    flexDirection: theme.carousel\n      .mainContainerFlexDirection as CSSProperties[\"flexDirection\"],\n  },\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: 32,\n    justifyContent: theme.carousel.controlsJustifyContent,\n    backgroundColor: theme.carousel.controlsBackgroundColor,\n    border: theme.carousel.controlsBorder,\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: theme.carousel.counterContainerDisplay,\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.carousel.thumbnailBorderRadius,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: theme.carousel.thumbnailSelectedBorder,\n      opacity: \"100%\",\n    },\n  },\n} satisfies Record<string, CSSInterpolation>;\n\nconst name = \"HvCarousel\";\n\nexport const carouselClasses = getClasses(\n  Object.keys(styles) as (keyof HvCarouselClasses)[],\n  name\n);\n\nconst newStyles = replace$(styles, name);\n\nexport default newStyles;\n"],"names":["styles","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","carousel","xsControlsDisplay","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","actionsOffsetTop","closeButton","mainContainer","mainContainerFlexDirection","controls","controlsJustifyContent","controlsBackgroundColor","border","controlsBorder","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","right","md","counterContainerDisplay","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","atmo4","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","thumbnailBorderRadius","thumbnailSelected","thumbnailSelectedBorder","name","carouselClasses","getClasses","Object","keys","newStyles","replace$"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+import { ClassNames } from "@emotion/react";
+import styles, { cc } from "./CarouselSlide.styles.js";
+import { makeClasses } from "../utils.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvCarouselSlide = ({
+  classes: classesProp = {},
+  children,
+  size: flexBasis = "100%",
+  src,
+  alt,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => {
+      const classes = makeClasses({
+        css,
+        cx
+      }, {
+        cc,
+        styles,
+        classes: classesProp
+      });
+      return /* @__PURE__ */ jsx("div", {
+        className: cx(css({
+          flex: `0 0 ${flexBasis}`
+        }), classes.slide),
+        children: children ?? /* @__PURE__ */ jsx("img", {
+          className: classes.image,
+          src,
+          alt,
+          ...props
+        })
+      });
+    }
+  });
+};
+export {
+  HvCarouselSlide
+};
+//# sourceMappingURL=CarouselSlide.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nimport styles, { HvCarouselSlideClasses, cc } from \"./CarouselSlide.styles\";\nimport { makeClasses } from \"../utils\";\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: Partial<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  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => {\n        const classes = makeClasses(\n          { css, cx },\n          { cc, styles, classes: classesProp }\n        );\n\n        return (\n          <div className={cx(css({ flex: `0 0 ${flexBasis}` }), classes.slide)}>\n            {children ?? (\n              <img className={classes.image} src={src} alt={alt} {...props} />\n            )}\n          </div>\n        );\n      }}\n    </ClassNames>\n  );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","children","size","flexBasis","src","alt","props","ClassNames","css","cx","makeClasses","cc","styles","className","flex","slide","_jsx","image"],"mappings":";;;;AAoBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AAC1B,6BACGC,YAAU;AAAA,IAAAN,UACRA,CAAC;AAAA,MAAEO;AAAAA,MAAKC;AAAAA,IAAAA,MAAS;AAChB,YAAMV,UAAUW,YACd;AAAA,QAAEF;AAAAA,QAAKC;AAAAA,MAAAA,GACP;AAAA,QAAEE;AAAAA,QAAIC;AAAAA,QAAQb,SAASC;AAAAA,MAAAA,CAAa;AAGtC,iCACE,OAAA;AAAA,QAAKa,WAAWJ,GAAGD,IAAI;AAAA,UAAEM,MAAO,OAAMX;AAAAA,QAAAA,CAAa,GAAGJ,QAAQgB,KAAK;AAAA,QAAEd,UAClEA,YACCe,oBAAA,OAAA;AAAA,UAAKH,WAAWd,QAAQkB;AAAAA,UAAOb;AAAAA,UAAUC;AAAAA,UAAS,GAAKC;AAAAA,QAAAA,CAAK;AAAA,MAAA,CAE1D;AAAA,IAEV;AAAA,EAAA,CACW;AAEjB;"}

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

@@ -0,0 +1,15 @@
+import { getClasses } from "../../../utils/classes.js";
+const styles = {
+  slide: {},
+  image: {
+    aspectRatio: "16/9",
+    width: "100%",
+    height: "100%"
+  }
+};
+const cc = getClasses(Object.keys(styles), "HvCarouselSlide");
+export {
+  cc,
+  styles as default
+};
+//# sourceMappingURL=CarouselSlide.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { getClasses } from \"@core/utils\";\n\nexport type HvCarouselSlideClasses = Record<keyof typeof styles, string>;\n\nconst styles = {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n} satisfies Record<string, CSSInterpolation>;\n\nexport const cc = getClasses(\n  Object.keys(styles) as (keyof HvCarouselSlideClasses)[],\n  \"HvCarouselSlide\"\n);\n\nexport default styles;\n"],"names":["styles","slide","image","aspectRatio","width","height","cc","getClasses","Object","keys"],"mappings":";AAKA,MAAMA,SAAS;AAAA,EACbC,OAAO,CAAC;AAAA,EACRC,OAAO;AAAA,IACLC,aAAa;AAAA,IACbC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF;AAEO,MAAMC,KAAKC,WAChBC,OAAOC,KAAKT,MAAM,GAClB,iBAAiB;"}

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

@@ -0,0 +1,36 @@
+const makeClasses = ({
+  css,
+  cx
+}, {
+  cc,
+  classes,
+  styles
+}) => Object.keys(cc).reduce((acc, key) => {
+  acc[key] = cx(cc == null ? void 0 : cc[key], css(styles == null ? void 0 : styles[key]), classes == null ? void 0 : classes[key]);
+  return acc;
+}, {});
+const deepRename = (obj, mapFn) => {
+  const result = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const newKey = mapFn(key);
+      const value = obj[key];
+      result[newKey] = typeof value === "object" ? deepRename(value, mapFn) : value;
+    }
+  }
+  return result;
+};
+const replace$ = (stylesObj, name) => {
+  return deepRename(stylesObj, (key) => {
+    const matches = key.match(/\$\w+/g);
+    if (!(matches == null ? void 0 : matches.length))
+      return key;
+    const newKey = matches.reduce((acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`), key);
+    return newKey ?? key;
+  });
+};
+export {
+  makeClasses,
+  replace$
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Carousel/utils.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/css\";\nimport type { ClassNamesContent } from \"@emotion/react\";\n\ntype ClassObject<T extends string> = {\n  cc: Record<T, string>;\n  classes: Partial<Record<T, string>>;\n  styles: Record<T, CSSInterpolation>;\n};\n\nexport const makeClasses = <T extends string>(\n  { css, cx }: Pick<ClassNamesContent, \"css\" | \"cx\">,\n  { cc, classes, styles }: ClassObject<T>\n) =>\n  Object.keys(cc).reduce((acc, key) => {\n    acc[key] = cx(cc?.[key], css(styles?.[key]), classes?.[key]);\n    return acc;\n  }, {} as { [P in T]: string });\n\nconst deepRename = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRename(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass` */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRename(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key\n    );\n    return newKey ?? key;\n  });\n};\n"],"names":["makeClasses","css","cx","cc","classes","styles","Object","keys","reduce","acc","key","deepRename","obj","mapFn","result","hasOwnProperty","newKey","value","replace$","stylesObj","name","matches","match","length","replace","slice"],"mappings":"AASO,MAAMA,cAAc,CACzB;AAAA,EAAEC;AAAAA,EAAKC;AAA0C,GACjD;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAASC;AAAuB,MAEtCC,OAAOC,KAAKJ,EAAE,EAAEK,OAAO,CAACC,KAAKC,QAAQ;AACnCD,MAAIC,GAAG,IAAIR,GAAGC,yBAAKO,MAAMT,IAAII,iCAASK,IAAI,GAAGN,mCAAUM,IAAI;AACpDD,SAAAA;AACT,GAAG,EAA2B;AAEhC,MAAME,aAAa,CACjBC,KACAC,UACM;AACN,QAAMC,SAAc,CAAA;AACpB,aAAWJ,OAAOE,KAAK;AACjBA,QAAAA,IAAIG,eAAeL,GAAG,GAAG;AACrBM,YAAAA,SAASH,MAAMH,GAAG;AAClBO,YAAAA,QAAQL,IAAIF,GAAG;AACdM,aAAAA,MAAM,IACX,OAAOC,UAAU,WAAWN,WAAWM,OAAcJ,KAAK,IAAII;AAAAA,IAClE;AAAA,EACF;AACOH,SAAAA;AACT;AAGaI,MAAAA,WAAW,CAAmBC,WAAcC,SAAoB;AACpET,SAAAA,WAAWQ,WAAYT,CAAQ,QAAA;AAC9BW,UAAAA,UAAUX,IAAIY,MAAM,QAAQ;AAClC,QAAI,EAACD,mCAASE;AAAeb,aAAAA;AAC7B,UAAMM,SAASK,QAAQb,OACrB,CAACC,KAAKa,UAAUb,IAAIe,QAAQF,OAAQ,IAAGF,QAAQE,MAAMG,MAAM,CAAC,GAAG,GAC/Df,GAAG;AAEL,WAAOM,UAAUN;AAAAA,EAAAA,CAClB;AACH;"}

package/dist/esm/components/CheckBoxGroup/CheckBoxGroup.js

@@ -1,8 +1,8 @@
-import { StyledFormElement, StyledLabel, StyledGroupContainer } from "./CheckBoxGroup.styles.js";
 import { clsx } from "clsx";
 import { useRef, useMemo, Children, useCallback, cloneElement } from "react";
+import { StyledFormElement, StyledLabel, StyledGroupContainer } from "./CheckBoxGroup.styles.js";
 import checkBoxGroupClasses from "./checkBoxGroupClasses.js";
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import multiSelectionEventHandler from "../../utils/multiSelectionEventHandler.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
@@ -126,16 +126,14 @@ const HvCheckBoxGroup = ({
       return newValue;
     });
   };
-  const selectAllLabelComponent = /* @__PURE__ */ jsx(Fragment, {
-    children: selectedCount === 0 ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx("b", {
-        children: selectAllLabel
-      }), ` (${Children.toArray(children).length})`]
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx("b", {
-        children: selectedCount
-      }), ` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`]
-    })
+  const selectAllLabelComponent = selectedCount === 0 ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("b", {
+      children: selectAllLabel
+    }), ` (${Children.toArray(children).length})`]
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("b", {
+      children: selectedCount
+    }), ` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`]
   });
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;