@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.2

package/dist/cjs/Card/Media/Media.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const MuiCardMedia = require("@mui/material/CardMedia");
-const Media_styles = require("./Media.styles.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiCardMedia__default = /* @__PURE__ */ _interopDefault(MuiCardMedia);
-const HvCardMedia = ({
-  classes: classesProp,
-  className,
-  children,
-  ...others
-}) => {
-  const { classes } = Media_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MuiCardMedia__default.default,
-    {
-      classes: {
-        root: classes.root,
-        media: classes.media
-      },
-      className,
-      role: "img",
-      ...others,
-      children
-    }
-  );
-};
-exports.cardMediaClasses = Media_styles.staticClasses;
-exports.HvCardMedia = HvCardMedia;

package/dist/cjs/Card/Media/Media.styles.cjs

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardMedia", {
-  root: { width: "100%" },
-  media: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Carousel/Carousel.cjs

@@ -1,227 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const useCarousel = require("embla-carousel-react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useLabels = require("../hooks/useLabels.cjs");
-const icons = require("../icons.cjs");
-const Carousel_styles = require("./Carousel.styles.cjs");
-const CarouselControls = require("./CarouselControls.cjs");
-const CarouselThumbnails = require("./CarouselThumbnails.cjs");
-const Container = require("../Container/Container.cjs");
-const Button = require("../Button/Button.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
-const Typography = require("../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const useCarousel__default = /* @__PURE__ */ _interopDefault(useCarousel);
-const DEFAULT_LABELS = {
-  close: "Close",
-  fullscreen: "Fullscreen",
-  backwards: "Backwards",
-  forwards: "Forwards"
-};
-const HvCarousel = React.forwardRef(function HvCarousel2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    height: heightProp = "auto",
-    thumbnailWidth = 90,
-    title,
-    children,
-    actions: actionsProp,
-    xs,
-    showDots: showDotsProp,
-    showCounter: showCounterProp,
-    showSlideControls,
-    showFullscreen: showFullscreenProp,
-    hideThumbnails: hideThumbnailsProp,
-    controlsPosition: controlsPositionProp,
-    thumbnailsPosition: thumbnailsPositionProp,
-    labels: labelsProps,
-    carouselOptions,
-    renderThumbnail,
-    onChange,
-    onFullscreen,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvCarousel", props);
-  const { activeTheme } = uikitReactUtils.useTheme();
-  const { classes, css, cx } = Carousel_styles.useClasses(classesProp);
-  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProps);
-  const thumbnailsRef = React.useRef(null);
-  const [isFullscreen, setIsFullscreen] = React.useState(false);
-  const isDs3 = activeTheme?.base === "ds3";
-  const actionsPosition = isDs3 ? "header" : "controls";
-  const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
-  const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
-  const [containerRef, controller] = useCarousel__default.default({
-    align: "start",
-    loop: true,
-    ...carouselOptions
-  });
-  const [selectedIndex, setSelectedIndex] = React.useState(
-    carouselOptions?.startIndex ?? 0
-  );
-  const numSlides = React.Children.count(children);
-  const handlePrevious = React.useCallback(() => {
-    controller?.scrollPrev();
-  }, [controller]);
-  const handleNext = React.useCallback(() => {
-    controller?.scrollNext();
-  }, [controller]);
-  const handleScroll = (index) => {
-    controller?.scrollTo(index);
-  };
-  const handleSelect = React.useCallback(() => {
-    if (!controller) return;
-    const slideIndex = controller.selectedScrollSnap();
-    setSelectedIndex(slideIndex);
-    thumbnailsRef.current?.querySelectorAll("button")?.[slideIndex]?.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest"
-    });
-    onChange?.(slideIndex);
-  }, [controller, onChange]);
-  React.useEffect(() => {
-    if (!controller) return;
-    controller.on("select", handleSelect);
-    return () => {
-      controller.off("select", handleSelect);
-    };
-  }, [controller, handleSelect]);
-  React.useEffect(() => {
-    if (!controller) return;
-    controller.reInit();
-    setSelectedIndex((currentIndex) => uikitReactUtils.clamp(currentIndex, numSlides));
-  }, [numSlides, controller]);
-  const handleFullscreen = (event) => {
-    onFullscreen?.(event, !isFullscreen);
-    setIsFullscreen((curr) => !curr);
-  };
-  const canPrev = controller?.canScrollPrev() ?? false;
-  const canNext = controller?.canScrollNext() ?? false;
-  const showTitle = !!title && (!xs || isFullscreen);
-  const showFullscreen = showFullscreenProp ?? xs;
-  const height = isFullscreen ? "100%" : heightProp ?? "auto";
-  const showCounter = xs;
-  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
-  const showThumbnails = !hideThumbnails && !!renderThumbnail;
-  const showDots = showDotsProp ?? numSlides <= 5;
-  const actions = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cx(
-        classes.actions,
-        actionsPosition === "header" ? css({ position: "relative", top: -40, height: 0 }) : css({ position: "absolute" })
-      ),
-      children: [
-        actionsProp,
-        showFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton.HvIconButton,
-          {
-            title: isFullscreen ? labels.close : labels.fullscreen,
-            onClick: handleFullscreen,
-            className: classes.closeButton,
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
-          }
-        )
-      ]
-    }
-  );
-  const controls = /* @__PURE__ */ jsxRuntime.jsx(
-    CarouselControls.HvCarouselControls,
-    {
-      classes,
-      showDots,
-      page: selectedIndex,
-      pages: numSlides,
-      canPrevious: canPrev,
-      canNext,
-      onPreviousClick: handlePrevious,
-      onNextClick: handleNext,
-      actions: actionsPosition === "controls" && actions,
-      labels: {
-        backwards: labels.backwards,
-        forwards: labels.forwards
-      }
-    }
-  );
-  const thumbnails = showThumbnails && /* @__PURE__ */ jsxRuntime.jsx(
-    CarouselThumbnails.HvCarouselThumbnails,
-    {
-      classes,
-      ref: thumbnailsRef,
-      page: selectedIndex,
-      pages: numSlides,
-      width: thumbnailWidth,
-      onThumbnailClick: (evt, i) => handleScroll(i),
-      renderThumbnail
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Container.HvContainer,
-    {
-      ref,
-      className: cx(classes.root, className, {
-        [classes.xs]: xs,
-        [classes.fullscreen]: isFullscreen
-      }),
-      ...others,
-      children: [
-        showTitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title2", className: classes.title, children: title }),
-        actionsPosition === "header" && actions,
-        thumbnailsPosition === "top" && thumbnails,
-        controlsPosition === "top" && controls,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cx(classes.main, {
-              [classes.mainXs]: xs,
-              [classes.mainFullscreen]: isFullscreen
-            }),
-            children: [
-              showCounter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.counterContainer, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.counter, children: `${selectedIndex + 1}/${numSlides}` }) }),
-              showSlideControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.slideControls, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button.HvButton,
-                  {
-                    icon: true,
-                    disabled: !canPrev,
-                    variant: "secondarySubtle",
-                    "aria-label": labels.backwards,
-                    onClick: handlePrevious,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button.HvButton,
-                  {
-                    icon: true,
-                    disabled: !canNext,
-                    variant: "secondarySubtle",
-                    "aria-label": labels.forwards,
-                    onClick: handleNext,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: containerRef,
-                  style: { height },
-                  className: classes.slidesViewport,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.slidesContainer, children })
-                }
-              )
-            ]
-          }
-        ),
-        controlsPosition === "bottom" && controls,
-        thumbnailsPosition === "bottom" && thumbnails
-      ]
-    }
-  );
-});
-exports.carouselClasses = Carousel_styles.staticClasses;
-exports.HvCarousel = HvCarousel;

package/dist/cjs/Carousel/Carousel.styles.cjs

@@ -1,168 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel", {
-  /** Styles applied to the component root class. */
-  root: {
-    display: "flex",
-    alignItems: "stretch",
-    flexDirection: "column",
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    margin: 0,
-    paddingTop: uikitStyles.theme.spacing(2),
-    paddingBottom: uikitStyles.theme.spacing(2)
-  },
-  xs: {
-    "&:not(._)": {
-      padding: 0
-    },
-    // put dots on top of Slide
-    "& $dots": {
-      position: "relative",
-      top: "-40px"
-    },
-    "& $actions": {
-      top: 0
-    },
-    "& $controls": {
-      display: "flex"
-    }
-  },
-  fullscreen: {
-    width: "100vw",
-    height: "100vh",
-    position: "fixed",
-    inset: 0,
-    zIndex: uikitStyles.theme.zIndices.modal,
-    "&:not(._)": {
-      padding: uikitStyles.theme.spacing("xs", "xl")
-    }
-  },
-  title: {
-    display: "flex",
-    justifyContent: "flex-start",
-    marginBottom: uikitStyles.theme.space.xs
-  },
-  actions: {
-    display: "flex",
-    justifyContent: "flex-end",
-    right: 0,
-    position: "relative"
-  },
-  closeButton: {},
-  mainContainer: {},
-  controls: {
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    height: 32,
-    justifyContent: "center",
-    backgroundColor: uikitStyles.theme.colors.bgPage,
-    border: `1px solid ${uikitStyles.theme.colors.border}`,
-    gap: uikitStyles.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: uikitStyles.theme.space.xs,
-    right: uikitStyles.theme.space.md,
-    zIndex: 1,
-    display: "none"
-  },
-  counter: {
-    color: uikitStyles.theme.colors.textLight,
-    backgroundColor: uikitStyles.theme.colors.textDark,
-    padding: uikitStyles.theme.spacing(0, "sm")
-  },
-  slideControls: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: `calc(50% - (32px / 2))`,
-    padding: uikitStyles.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: uikitStyles.theme.space.xs,
-    height: uikitStyles.theme.space.md
-  },
-  dotsXs: {},
-  dot: {
-    width: 5,
-    height: 5,
-    margin: uikitStyles.theme.space.xs,
-    borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.border
-  },
-  dotSelected: {
-    width: 10,
-    height: 10,
-    backgroundColor: uikitStyles.theme.colors.textSubtle
-  },
-  panel: {
-    display: "flex",
-    width: "100%",
-    overflowX: "auto",
-    // "hidden",
-    overflowY: "hidden",
-    padding: uikitStyles.theme.spacing("xs", "2px", "2px")
-  },
-  thumbnail: {
-    height: "unset",
-    padding: 0,
-    "& img": {
-      width: "100%",
-      height: "100%",
-      textAlign: "center",
-      aspectRatio: "16/9",
-      opacity: "50%",
-      borderRadius: uikitStyles.theme.radii.round
-    }
-  },
-  thumbnailSelected: {
-    "& img": {
-      border: "none",
-      opacity: "100%"
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Carousel/CarouselControls.cjs

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useLabels = require("../hooks/useLabels.cjs");
-const icons = require("../icons.cjs");
-const Carousel_styles = require("./Carousel.styles.cjs");
-const Button = require("../Button/Button.cjs");
-const DEFAULT_LABELS = {
-  backwards: "Backwards",
-  forwards: "Forwards"
-};
-const HvCarouselControls = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    showDots,
-    page,
-    pages,
-    canPrevious,
-    canNext,
-    actions,
-    labels: labelsProps,
-    onPreviousClick,
-    onNextClick
-  } = uikitReactUtils.useDefaultProps("HvCarouselControls", props);
-  const { classes, cx } = Carousel_styles.useClasses(classesProp, false);
-  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProps);
-  const selectedIndex = page || 0;
-  const numSlides = pages;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.controls, className), children: [
-    showDots ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dots, children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cx(classes.dot, {
-          [classes.dotSelected]: index === selectedIndex
-        })
-      },
-      `circle-${index}`
-    )) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button.HvButton,
-        {
-          icon: true,
-          disabled: !canPrevious,
-          "aria-label": labels.backwards,
-          onClick: onPreviousClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageCounter, children: `${selectedIndex + 1} / ${numSlides}` }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button.HvButton,
-        {
-          icon: true,
-          disabled: !canNext,
-          "aria-label": labels.forwards,
-          onClick: onNextClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs" })
-        }
-      )
-    ] }),
-    actions
-  ] });
-};
-exports.HvCarouselControls = HvCarouselControls;

package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.cjs

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const CarouselSlide_styles = require("./CarouselSlide.styles.cjs");
-const HvCarouselSlide = ({
-  classes: classesProp,
-  className,
-  children,
-  size: flexBasis = "100%",
-  src,
-  alt,
-  ...props
-}) => {
-  const { classes, css, cx } = CarouselSlide_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cx(
-        css({ flex: `0 0 ${flexBasis}` }),
-        classes.slide,
-        className
-      ),
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx("img", { className: classes.image, src, alt, ...props })
-    }
-  );
-};
-exports.HvCarouselSlide = HvCarouselSlide;

package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.styles.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarouselSlide", {
-  slide: {},
-  image: {
-    aspectRatio: "16/9",
-    width: "100%",
-    height: "100%"
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Carousel/CarouselThumbnails.cjs

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Carousel_styles = require("./Carousel.styles.cjs");
-const Stack = require("../Stack/Stack.cjs");
-const Button = require("../Button/Button.cjs");
-const HvCarouselThumbnails = React.forwardRef(function HvCarouselThumbnails2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    page,
-    pages,
-    width,
-    renderThumbnail,
-    onThumbnailClick,
-    thumbnailProps,
-    ...others
-  } = props;
-  const { classes, cx } = Carousel_styles.useClasses(classesProp);
-  const selectedIndex = page || 0;
-  const numSlides = pages;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.panel, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.HvStack, { direction: "row", spacing: "xs", children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    Button.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}`
-  )) }) });
-});
-exports.HvCarouselThumbnails = HvCarouselThumbnails;