@hitachivantara/uikit-react-lab 3.53.0 → 3.55.1

package/dist/modern/ImageCarousel/ImageCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCarousel.js","names":["React","useState","useRef","useEffect","useCallback","PropTypes","clsx","setId","useUniqueId","HvButton","HvContainer","HvTypography","HvGrid","HvStack","HvPanel","useScrollTo","Button","makeStyles","withStyles","Fade","Backwards","Forwards","Close","Fullscreen","styles","HvImageCarousel","props","className","classes","documents","title","id","fullscreen","fullscreenProp","thumbnails","lowCardinality","infiniteCarousel","xs","onChange","counter","currentStep","setCurrentStep","visibleArrows","variant","others","elementId","setFullscreen","options","map","element","src","value","sliceStart","setSliceStart","selImage","setImage","offset","setOffset","imageHover","setImageHover","direction","useStyles","theme","button","backgroundColor","hv","palette","atmosphere","atmo3","imageBox","minWidth","display","justifyContent","allImages","width","style","selectedIndex","setScrollTo","selectedBigIndex","setBigScrollTo","refBackwards","refForwards","typeCircle","handleSelection","event","index","wrappedOnChange","handleFocus","focus","current","handleBigSelection","handleVisibility","image","document","getElementById","panel","container","containerWidth","offsetWidth","offsetPanel","offsetLeft","offsetImage","imageWidth","scroll","scrollLeft","activeElement","undefined","changeSlice","length","nextImage","next","previousImage","previous","styleThumbnail","img","thumbnailSelected","circleType","xsSelectedCircle","selectedCircle","miniCircle","root","fullscreenStyle","closeButton","imageContainer","stack","appear","enter","exit","selectedImage","lowButtons","xsCircles","slice","divCounter","color","circles","normalButtons","hidden","i","thumbnailButton","propTypes","string","shape","xsMode","xsImage","isRequired","array","node","func","bool","number","name"],"sources":["../../../src/ImageCarousel/ImageCarousel.js"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport {\n  setId,\n  useUniqueId,\n  HvButton,\n  HvContainer,\n  HvTypography,\n  HvGrid,\n  HvStack,\n  HvPanel,\n  useScrollTo,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { Button, makeStyles, withStyles, Fade } from \"@material-ui/core\";\n\nimport { Backwards, Forwards, Close, Fullscreen } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n/**\n * ImageCarousel description/documentation paragraph\n */\nconst HvImageCarousel = (props) => {\n  const {\n    className,\n    classes,\n    documents,\n    title,\n    id,\n    fullscreen: fullscreenProp = false,\n    thumbnails = false,\n    lowCardinality = false,\n    infiniteCarousel = false,\n    xs = false,\n    onChange,\n    counter = false,\n    currentStep = 0,\n    setCurrentStep,\n    visibleArrows = false,\n    variant = \"contain\",\n    ...others\n  } = props;\n  const elementId = useUniqueId(id, \"hvcarousel\");\n  const [fullscreen, setFullscreen] = useState(false);\n  const options = documents.map((element) => ({\n    src: element.src,\n    value: setId(elementId, element.value),\n  }));\n\n  const [sliceStart, setSliceStart] = useState(0);\n  const [selImage, setImage] = useState(currentStep);\n  const [offset, setOffset] = useState(0);\n  const [imageHover, setImageHover] = useState(false);\n  let direction = \"next\";\n  const useStyles = makeStyles((theme) => ({\n    button: {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    },\n    imageBox: {\n      minWidth: \"100%\",\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    allImages: {\n      width: \"max-content\",\n      display: \"flex\",\n    },\n  }));\n  const style = useStyles();\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    0,\n    setId(elementId, \"panel\"),\n    false,\n    100,\n    documents,\n    onChange,\n    \"row\"\n  );\n  const [selectedBigIndex, setBigScrollTo] = useScrollTo(\n    0,\n    setId(elementId, \"bigPanel\"),\n    false,\n    0,\n    options,\n    onChange,\n    \"row\"\n  );\n  const refBackwards = useRef(null);\n  const refForwards = useRef(null);\n  let typeCircle = \"circle\";\n\n  const handleSelection = useCallback(\n    (event, value, index) => {\n      const wrappedOnChange = () => {\n        onChange?.(event, index);\n      };\n      setScrollTo(event, value, index, wrappedOnChange);\n    },\n    [onChange, setScrollTo]\n  );\n\n  const handleFocus = (focus) => {\n    if (focus === refBackwards.current || focus === refForwards.current) focus.focus();\n  };\n\n  const handleBigSelection = useCallback(\n    (event, value, index) => {\n      const wrappedOnChange = () => {\n        onChange?.(event, index);\n      };\n      setBigScrollTo(event, value, index, wrappedOnChange);\n    },\n    [onChange, setBigScrollTo]\n  );\n\n  const handleVisibility = useCallback(\n    (event, value, index) => {\n      const image = document.getElementById(value);\n      const panel = document.getElementById(setId(elementId, \"panel\"));\n      const container = document.getElementById(setId(elementId, \"container\"));\n      const containerWidth = container.offsetWidth;\n      const offsetPanel = panel.offsetLeft;\n      const offsetImage = image.offsetLeft;\n      const imageWidth = image.offsetWidth;\n      const scroll = panel.scrollLeft;\n      const focus = document.activeElement;\n\n      if (\n        offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth ||\n        offsetImage - scroll < 0\n      ) {\n        handleSelection(event, value, index);\n        handleFocus(focus);\n      }\n    },\n    [elementId, handleSelection, offset]\n  );\n\n  useEffect(() => {\n    setCurrentStep?.(selImage);\n  }, [selImage, setCurrentStep]);\n\n  useEffect(() => {\n    if (fullscreen) setOffset(150);\n    else setOffset(0);\n\n    if (thumbnails) {\n      handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);\n    }\n    handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);\n  }, [\n    documents,\n    fullscreen,\n    handleBigSelection,\n    handleVisibility,\n    options,\n    selImage,\n    selectedBigIndex,\n    selectedIndex,\n    thumbnails,\n  ]);\n\n  const changeSlice = () => {\n    if (direction === \"next\") {\n      if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);\n      else if (selImage > sliceStart + 2 && selImage !== documents.length - 2)\n        setSliceStart(sliceStart + 1);\n    }\n    if (direction === \"prev\") {\n      if (infiniteCarousel && selImage === 0)\n        setSliceStart(documents.length > 5 ? documents.length - 5 : 0);\n      else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);\n    }\n  };\n\n  const nextImage = () => {\n    let next;\n    if (selImage !== documents.length - 1) next = selImage + 1;\n    else if (infiniteCarousel) next = 0;\n    setImage(next);\n    if (xs) {\n      direction = \"next\";\n      changeSlice();\n    }\n  };\n\n  const previousImage = () => {\n    let previous;\n    if (selImage !== 0) previous = selImage - 1;\n    else if (infiniteCarousel) previous = documents.length - 1;\n    setImage(previous);\n    if (xs) {\n      direction = \"prev\";\n      changeSlice();\n    }\n  };\n\n  const styleThumbnail = (index) => {\n    if (index !== selImage) return classes.img;\n    return classes.thumbnailSelected;\n  };\n\n  const circleType = (index) => {\n    if (index === selImage) {\n      typeCircle = \"BigCircle\";\n      if (xs) return classes.xsSelectedCircle;\n      return classes.selectedCircle;\n    }\n    typeCircle = \"Circle\";\n    return classes.miniCircle;\n  };\n\n  return (\n    <HvContainer\n      id={setId(elementId, \"container\")}\n      className={clsx(\n        className,\n        classes.root,\n        fullscreen ? classes.fullscreenStyle : \"\",\n        xs ? \"xs\" : \"nxs\"\n      )}\n      {...others}\n    >\n      {!xs && (\n        <div className={classes.title}>\n          <div>{title}</div>\n          {fullscreenProp && (\n            <div>\n              {fullscreen ? (\n                <HvButton\n                  className={classes.closeButton}\n                  icon\n                  aria-label=\"Close\"\n                  onClick={() => setFullscreen(!fullscreen)}\n                >\n                  <Close />\n                </HvButton>\n              ) : (\n                <HvButton icon aria-label=\"Fullscreen\" onClick={() => setFullscreen(true)}>\n                  <Fullscreen />\n                </HvButton>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      <HvContainer\n        className={clsx(\n          classes.imageContainer,\n          !xs ? \"nxs\" : \"\",\n          fullscreen ? \"fullscreen\" : \"notFullscreen\"\n        )}\n        onFocus={() => setImageHover(true)}\n        onMouseOver={() => setImageHover(true)}\n        onBlur={() => setImageHover(false)}\n        onMouseOut={() => setImageHover(false)}\n      >\n        <HvPanel\n          className={clsx(classes.stack, xs ? \"xs\" : \"nxs\")}\n          id={setId(elementId, \"bigPanel\")}\n        >\n          {options.map((element, index) => (\n            <div className={style.imageBox} id={element.value} key={`div ${element.value}`}>\n              <Fade in={selImage === index || xs} timeout={{ appear: 500, enter: 1200, exit: 200 }}>\n                <img\n                  className={clsx(\n                    classes.selectedImage,\n                    xs ? \"xs\" : \"nxs\",\n                    fullscreen ? \"fullscreen\" : \"notFullscreen\",\n                    variant\n                  )}\n                  src={element.src}\n                  alt={element.value}\n                  key={`image ${element.value}`}\n                />\n              </Fade>\n            </div>\n          ))}\n        </HvPanel>\n        {(xs || lowCardinality) && (\n          <div className={clsx(classes.lowButtons, !xs ? \"nxs\" : \"\")}>\n            <div>\n              <Fade in={imageHover || visibleArrows}>\n                <HvButton\n                  ref={refBackwards}\n                  className={classes.button}\n                  icon\n                  aria-label=\"Backwards\"\n                  onClick={(event) => previousImage(event)}\n                >\n                  <Backwards />\n                </HvButton>\n              </Fade>\n            </div>\n            <div>\n              <Fade in={imageHover || visibleArrows}>\n                <HvButton\n                  ref={refForwards}\n                  className={classes.button}\n                  icon\n                  aria-label=\"Forwards\"\n                  onClick={(event) => nextImage(event)}\n                >\n                  <Forwards />\n                </HvButton>\n              </Fade>\n            </div>\n          </div>\n        )}\n        {xs && (\n          <div className={classes.xsCircles}>\n            {documents\n              .map((element, index) => (\n                <span\n                  className={circleType(index)}\n                  title={typeCircle}\n                  key={`Circle ${element.value}`}\n                />\n              ))\n              .slice(sliceStart, sliceStart + 5)}\n          </div>\n        )}\n        {counter && (\n          <div className={clsx(classes.divCounter, !xs ? \"nxs\" : \"\")}>\n            <span className={classes.counter}>\n              <HvTypography variant=\"normalText\" style={{ color: \"white\" }}>\n                {`${selImage + 1}/${documents.length}`}\n              </HvTypography>\n            </span>\n          </div>\n        )}\n      </HvContainer>\n      {!xs && (\n        <>\n          {lowCardinality ? (\n            <div className={classes.circles}>\n              {documents.map((element, index) => (\n                <span\n                  className={circleType(index)}\n                  title={`${typeCircle} ${index}`}\n                  key={`Circle ${element.value}`}\n                />\n              ))}\n            </div>\n          ) : (\n            <HvGrid\n              className={clsx(classes.normalButtons)}\n              container\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n            >\n              <HvGrid item>\n                <HvButton\n                  className={infiniteCarousel || selImage !== 0 ? \"\" : classes.hidden}\n                  ref={refBackwards}\n                  icon\n                  aria-label=\"Backwards\"\n                  onClick={(event) => previousImage(event)}\n                >\n                  <Backwards />\n                </HvButton>\n              </HvGrid>\n              <HvGrid item>\n                <HvTypography variant=\"highlightText\" component=\"a\">\n                  {selImage + 1}\n                </HvTypography>\n                <HvTypography variant=\"normalText\" component=\"a\">\n                  {` /  ${documents.length}`}\n                </HvTypography>\n              </HvGrid>\n              <HvGrid item>\n                <HvButton\n                  className={\n                    infiniteCarousel || selImage !== documents.length - 1 ? \"\" : classes.hidden\n                  }\n                  ref={refForwards}\n                  icon\n                  aria-label=\"Forwards\"\n                  onClick={(event) => nextImage(event)}\n                >\n                  <Forwards />\n                </HvButton>\n              </HvGrid>\n            </HvGrid>\n          )}\n          {thumbnails && (\n            <HvPanel className={classes.panel} id={setId(elementId, \"panel\")}>\n              <HvStack key=\"Thumbnails\" direction=\"row\" spacing=\"xs\" withNavigation>\n                {documents.map((element, i) => (\n                  <Button\n                    id={element.value}\n                    key={`Button ${element.value}`}\n                    className={classes.thumbnailButton}\n                    onClick={() => setImage(i)}\n                  >\n                    <img\n                      className={styleThumbnail(i)}\n                      src={element.src}\n                      alt={element.value}\n                      key={`Thumbnail ${element.value}`}\n                    />\n                  </Button>\n                ))}\n              </HvStack>\n            </HvPanel>\n          )}\n        </>\n      )}\n    </HvContainer>\n  );\n};\n\nHvImageCarousel.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component SelectedImage.\n     */\n    selectedImage: PropTypes.string,\n    /**\n     * Styles applied to xs mode\n     */\n    xsMode: PropTypes.string,\n    /**\n     * Styles applied to image in xsMode\n     */\n    xsImage: PropTypes.string,\n    /**\n     * Styles applied to panel with low cardinality circles\n     */\n    circles: PropTypes.string,\n    /**\n     * Styles applied to xs mode circles\n     */\n    xsCircles: PropTypes.string,\n    /**\n     * Styles applied to unavailable button\n     */\n    hidden: PropTypes.string,\n    /**\n     * Styles applied to the carousel title\n     */\n    title: PropTypes.string,\n    /**\n     * Styles applied to the counter\n     */\n    counter: PropTypes.string,\n    /**\n     * Styles applied to the div with the counter\n     */\n    divCounter: PropTypes.string,\n    /**\n     * Styles applied to the thumbnails\n     */\n    img: PropTypes.string,\n    /**\n     * Styles applied to the selected thumbnail\n     */\n    thumbnailSelected: PropTypes.string,\n    /**\n     * Styles applied to the thumbnail button\n     */\n    thumbnailButton: PropTypes.string,\n    /**\n     * Styles applied to the low cardinality circles\n     */\n    miniCircle: PropTypes.string,\n    /**\n     * Styles applied to the circle of the selected image\n     */\n    selectedCircle: PropTypes.string,\n    /**\n     * Styles applied to the circle of the selected image in xsmode\n     */\n    xsSelectedCircle: PropTypes.string,\n    /**\n     * Styles applied to the panel with low cardinality buttons\n     */\n    lowButtons: PropTypes.string,\n    /**\n     * Styles applied to the container of the selected image\n     */\n    imageContainer: PropTypes.string,\n    /**\n     * Styles applied to the panel with the thumbnails\n     */\n    stack: PropTypes.string,\n    /**\n     * Styles applied to the panel that contains the buttons and counter in default mode\n     */\n    normalButtons: PropTypes.string,\n    /**\n     * Styles applied to fullscreen mode.\n     */\n    fullscreenStyle: PropTypes.string,\n    /**\n     * Styles applied to close button in fullscreen mode.\n     */\n    closeButton: PropTypes.string,\n    /**\n     * Styles applied to change image buttons.\n     */\n    button: PropTypes.string,\n    /**\n     * Styles applied to thumbnails panel.\n     */\n    panel: PropTypes.string,\n  }).isRequired,\n  /**\n   * Documents to be displayed.\n   */\n  documents: PropTypes.array.isRequired,\n  /**\n   * Title of the image carousel\n   */\n  title: PropTypes.node,\n  /**\n   * A function called each time the selected image changes.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A flag that activates the thumbnails.\n   */\n  thumbnails: PropTypes.bool,\n  /**\n   * A flag that switches to low cardinality mode\n   */\n  lowCardinality: PropTypes.bool,\n  /**\n   * A flag that activates the infinite carousel behavior\n   */\n  infiniteCarousel: PropTypes.bool,\n  /**\n   * A flag that activates a counter on the top right corner of the selected image\n   */\n  counter: PropTypes.bool,\n  /**\n   * Set Image Carousel to fullscreen mode\n   */\n  fullscreen: PropTypes.bool,\n  /**\n   * Set selected image to a particular image in documents\n   */\n  currentStep: PropTypes.number,\n  /**\n   * Function that changes the selected image\n   */\n  setCurrentStep: PropTypes.func,\n  /**\n   * Image Carousel set to xs mode\n   */\n  xs: PropTypes.bool,\n  /**\n   * Arrows always displayed in low cardinality or xs mode\n   */\n  visibleArrows: PropTypes.bool,\n  /**\n   * Selected image fit variant\n   */\n  variant: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvImageCarousel\" })(HvImageCarousel);\n"],"mappings":"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"}

package/dist/modern/ImageCarousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ImageCarousel";
+export * from "./ImageCarousel";

package/dist/modern/ImageCarousel/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ImageCarousel";
+//# sourceMappingURL=index.js.map

package/dist/modern/ImageCarousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/ImageCarousel/index.js"],"sourcesContent":["export { default } from \"./ImageCarousel\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB"}

package/dist/modern/ImageCarousel/styles.js

@@ -0,0 +1,241 @@
+const styles = theme => ({
+  root: {
+    "&:not(.xs)": {
+      background: theme.hv.palette.atmosphere.atmo1,
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "column",
+      margin: "0px",
+      paddingTop: "15px",
+      paddingBottom: "15px"
+    },
+    "&:not(.nxs)": {
+      width: "100%",
+      maxWidth: "500px",
+      height: "200px",
+      padding: "0px"
+    }
+  },
+  fullscreenStyle: {
+    width: "100vw",
+    height: "100vh",
+    position: "fixed",
+    padding: "10px 150px 10px 150px",
+    top: 0,
+    left: 0,
+    zIndex: 1300
+  },
+  closeButton: {
+    position: "absolute",
+    right: "25px"
+  },
+  selectedImage: {
+    "&:not(.contain)": {
+      objectFit: "cover"
+    },
+    "&:not(.cover)": {
+      objectFit: "contain"
+    },
+    "&:not(.xs)": {
+      width: "100%",
+      textAlign: "center",
+      "&:not(.fullscreen)": {
+        [theme.breakpoints.up("xs")]: {
+          height: "150px",
+          minHeight: "150px"
+        },
+        [theme.breakpoints.up("sm")]: {
+          height: "300px",
+          minHeight: "300px"
+        },
+        [theme.breakpoints.up("lg")]: {
+          height: "450px",
+          minHeight: "450px"
+        }
+      },
+      "&:not(.notFullscreen)": {
+        height: "100%"
+      }
+    },
+    "&:not(.nxs)": {
+      width: "100%",
+      textAlign: "center"
+    }
+  },
+  xsMode: {
+    width: "min-content",
+    height: "min-content",
+    margin: "0px",
+    textAlign: "center"
+  },
+  circles: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  xsCircles: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    transform: "translateY(-63px)"
+  },
+  hidden: {
+    visibility: "hidden"
+  },
+  title: {
+    display: "flex",
+    alignItems: "flex-start",
+    width: "100%",
+    justifyContent: "space-between"
+  },
+  divCounter: {
+    width: "100%",
+    paddingTop: "10px",
+    paddingRight: "15px",
+    display: "flex",
+    justifyContent: "flex-end",
+    position: "relative",
+    bottom: "102%",
+    "&:not(.nxs)": {
+      right: "5%",
+      bottom: "262px",
+      padding: "0px"
+    }
+  },
+  counter: {
+    width: "45px",
+    backgroundColor: theme.hv.palette.base.base2
+  },
+  img: {
+    width: "100%",
+    height: "70px",
+    [theme.breakpoints.up("lg")]: {
+      height: "75px"
+    },
+    textAlign: "center",
+    objectFit: "cover"
+  },
+  thumbnailSelected: {
+    width: "100%",
+    height: "70px",
+    [theme.breakpoints.up("lg")]: {
+      height: "75px"
+    },
+    textAlign: "center",
+    objectFit: "cover",
+    borderStyle: "solid",
+    borderColor: theme.hv.palette.base.base2,
+    opacity: "50%"
+  },
+  thumbnailButton: {
+    width: "110px",
+    height: "70px",
+    padding: "0px 0px",
+    [theme.breakpoints.up("lg")]: {
+      width: "120px",
+      height: "75px"
+    }
+  },
+  miniCircle: {
+    width: "5px",
+    height: "5px",
+    borderRadius: "50%",
+    backgroundColor: theme.hv.palette.atmosphere.atmo4,
+    display: "inline-block",
+    margin: "10px"
+  },
+  selectedCircle: {
+    width: "10px",
+    height: "10px",
+    borderRadius: "50%",
+    backgroundColor: theme.hv.palette.atmosphere.atmo5,
+    display: "inline-block",
+    margin: "10px"
+  },
+  xsSelectedCircle: {
+    width: "10px",
+    height: "10px",
+    borderRadius: "50%",
+    backgroundColor: theme.hv.palette.atmosphere.atmo3,
+    display: "inline-block",
+    margin: "10px"
+  },
+  lowButtons: {
+    width: "95%",
+    display: "inline-flex",
+    justifyContent: "space-between",
+    position: "relative",
+    top: "-50%",
+    transform: "translateY(-16px)",
+    "&:not(.nxs)": {
+      width: "90%",
+      top: "-99px"
+    }
+  },
+  imageContainer: {
+    width: "100%",
+    marginTop: "20px",
+    margin: "0px",
+    textAlign: "center",
+    padding: "0px",
+    [theme.breakpoints.up("xs")]: {
+      height: "150px",
+      minHeight: "150px"
+    },
+    [theme.breakpoints.up("sm")]: {
+      height: "300px",
+      minHeight: "300px"
+    },
+    [theme.breakpoints.up("lg")]: {
+      height: "450px",
+      minHeight: "450px"
+    },
+    "&:not(.notFullscreen)": {
+      height: "85%",
+      alignItems: "center"
+    }
+  },
+  button: {
+    backgroundColor: theme.hv.palette.atmosphere.atmo3
+  },
+  inputImage: {
+    width: "110px",
+    height: "70px",
+    padding: "0px 0px",
+    [theme.breakpoints.up("lg")]: {
+      width: "120px",
+      height: "75px"
+    }
+  },
+  stack: {
+    "&:not(.xs)": {
+      width: "100%",
+      display: "flex",
+      alignSelf: "center",
+      height: "100%",
+      padding: "0px"
+    },
+    "&:not(.flag)": {
+      overflowX: "hidden"
+    },
+    "&:not(.nxs)": {
+      height: "200px",
+      display: "flex",
+      padding: "0px"
+    }
+  },
+  normalButtons: {
+    padding: "5px 0px"
+  },
+  panel: {
+    display: "flex",
+    width: "100%",
+    overflow: "hidden",
+    padding: "3px",
+    height: "75px"
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/ImageCarousel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","root","background","hv","palette","atmosphere","atmo1","display","alignItems","flexDirection","margin","paddingTop","paddingBottom","width","maxWidth","height","padding","fullscreenStyle","position","top","left","zIndex","closeButton","right","selectedImage","objectFit","textAlign","breakpoints","up","minHeight","xsMode","circles","justifyContent","xsCircles","transform","hidden","visibility","title","divCounter","paddingRight","bottom","counter","backgroundColor","base","base2","img","thumbnailSelected","borderStyle","borderColor","opacity","thumbnailButton","miniCircle","borderRadius","atmo4","selectedCircle","atmo5","xsSelectedCircle","atmo3","lowButtons","imageContainer","marginTop","button","inputImage","stack","alignSelf","overflowX","normalButtons","panel","overflow"],"sources":["../../../src/ImageCarousel/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  root: {\n    \"&:not(.xs)\": {\n      background: theme.hv.palette.atmosphere.atmo1,\n      display: \"flex\",\n      alignItems: \"center\",\n      flexDirection: \"column\",\n      margin: \"0px\",\n      paddingTop: \"15px\",\n      paddingBottom: \"15px\",\n    },\n    \"&:not(.nxs)\": {\n      width: \"100%\",\n      maxWidth: \"500px\",\n      height: \"200px\",\n      padding: \"0px\",\n    },\n  },\n  fullscreenStyle: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    padding: \"10px 150px 10px 150px\",\n    top: 0,\n    left: 0,\n    zIndex: 1300,\n  },\n  closeButton: {\n    position: \"absolute\",\n    right: \"25px\",\n  },\n  selectedImage: {\n    \"&:not(.contain)\": {\n      objectFit: \"cover\",\n    },\n    \"&:not(.cover)\": {\n      objectFit: \"contain\",\n    },\n    \"&:not(.xs)\": {\n      width: \"100%\",\n      textAlign: \"center\",\n      \"&:not(.fullscreen)\": {\n        [theme.breakpoints.up(\"xs\")]: {\n          height: \"150px\",\n          minHeight: \"150px\",\n        },\n        [theme.breakpoints.up(\"sm\")]: {\n          height: \"300px\",\n          minHeight: \"300px\",\n        },\n        [theme.breakpoints.up(\"lg\")]: {\n          height: \"450px\",\n          minHeight: \"450px\",\n        },\n      },\n      \"&:not(.notFullscreen)\": {\n        height: \"100%\",\n      },\n    },\n    \"&:not(.nxs)\": {\n      width: \"100%\",\n      textAlign: \"center\",\n    },\n  },\n  xsMode: {\n    width: \"min-content\",\n    height: \"min-content\",\n    margin: \"0px\",\n    textAlign: \"center\",\n  },\n  circles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  xsCircles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    transform: \"translateY(-63px)\",\n  },\n  hidden: {\n    visibility: \"hidden\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  divCounter: {\n    width: \"100%\",\n    paddingTop: \"10px\",\n    paddingRight: \"15px\",\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    position: \"relative\",\n    bottom: \"102%\",\n    \"&:not(.nxs)\": {\n      right: \"5%\",\n      bottom: \"262px\",\n      padding: \"0px\",\n    },\n  },\n  counter: {\n    width: \"45px\",\n    backgroundColor: theme.hv.palette.base.base2,\n  },\n  img: {\n    width: \"100%\",\n    height: \"70px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      height: \"75px\",\n    },\n    textAlign: \"center\",\n    objectFit: \"cover\",\n  },\n  thumbnailSelected: {\n    width: \"100%\",\n    height: \"70px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      height: \"75px\",\n    },\n    textAlign: \"center\",\n    objectFit: \"cover\",\n    borderStyle: \"solid\",\n    borderColor: theme.hv.palette.base.base2,\n    opacity: \"50%\",\n  },\n  thumbnailButton: {\n    width: \"110px\",\n    height: \"70px\",\n    padding: \"0px 0px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      width: \"120px\",\n      height: \"75px\",\n    },\n  },\n  miniCircle: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo4,\n    display: \"inline-block\",\n    margin: \"10px\",\n  },\n  selectedCircle: {\n    width: \"10px\",\n    height: \"10px\",\n    borderRadius: \"50%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo5,\n    display: \"inline-block\",\n    margin: \"10px\",\n  },\n  xsSelectedCircle: {\n    width: \"10px\",\n    height: \"10px\",\n    borderRadius: \"50%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    display: \"inline-block\",\n    margin: \"10px\",\n  },\n  lowButtons: {\n    width: \"95%\",\n    display: \"inline-flex\",\n    justifyContent: \"space-between\",\n    position: \"relative\",\n    top: \"-50%\",\n    transform: \"translateY(-16px)\",\n    \"&:not(.nxs)\": {\n      width: \"90%\",\n      top: \"-99px\",\n    },\n  },\n  imageContainer: {\n    width: \"100%\",\n    marginTop: \"20px\",\n    margin: \"0px\",\n    textAlign: \"center\",\n    padding: \"0px\",\n    [theme.breakpoints.up(\"xs\")]: {\n      height: \"150px\",\n      minHeight: \"150px\",\n    },\n    [theme.breakpoints.up(\"sm\")]: {\n      height: \"300px\",\n      minHeight: \"300px\",\n    },\n    [theme.breakpoints.up(\"lg\")]: {\n      height: \"450px\",\n      minHeight: \"450px\",\n    },\n    \"&:not(.notFullscreen)\": {\n      height: \"85%\",\n      alignItems: \"center\",\n    },\n  },\n  button: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n  inputImage: {\n    width: \"110px\",\n    height: \"70px\",\n    padding: \"0px 0px\",\n    [theme.breakpoints.up(\"lg\")]: {\n      width: \"120px\",\n      height: \"75px\",\n    },\n  },\n  stack: {\n    \"&:not(.xs)\": {\n      width: \"100%\",\n      display: \"flex\",\n      alignSelf: \"center\",\n      height: \"100%\",\n      padding: \"0px\",\n    },\n    \"&:not(.flag)\": {\n      overflowX: \"hidden\",\n    },\n    \"&:not(.nxs)\": {\n      height: \"200px\",\n      display: \"flex\",\n      padding: \"0px\",\n    },\n  },\n  normalButtons: {\n    padding: \"5px 0px\",\n  },\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflow: \"hidden\",\n    padding: \"3px\",\n    height: \"75px\",\n  },\n});\n\nexport default styles;\n"],"mappings":"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"}

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts

@@ -22,6 +22,11 @@ export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, Hv
      * Number of the step.
      */
     number?: number;
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled?: boolean;
   };
 
 export default function HvStep(props: HvStepProps): JSX.Element | null;

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js

@@ -17,6 +17,7 @@ const HvStep = ({
   state,
   title,
   onClick,
+  disabled,
   size = "SM",
   number = 1
 }) => {
@@ -55,7 +56,7 @@ const HvStep = ({
     "aria-label": `step-${title}`,
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(HvAvatar, {
     className: clsx(classes.avatar, classes[size]),
@@ -160,7 +161,13 @@ process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
 } : void 0;
 export default withStyles(styles, {
   name: "HvStep"

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({ className, classes, state, title, onClick, size = \"SM\", number = 1 }) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={[\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}
+{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({\n  className,\n  classes,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"SM\",\n  number = 1,\n}) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.d.ts

@@ -5,6 +5,6 @@ import { HvStepProps } from "../../DefaultNavigation/Step";
 export type HvDotClassKey = "root";
 
 export type HvDotProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDotClassKey> &
-  Pick<HvStepProps, "size" | "title" | "state" | "onClick">;
+  Pick<HvStepProps, "size" | "title" | "state" | "onClick" | "disabled">;
 
 export default function HvDot(props: HvDotProps): JSX.Element | null;

package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -22,7 +22,8 @@ const HvDot = ({
   state,
   title,
   size,
-  onClick
+  onClick,
+  disabled
 }) => {
   const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
   const getBackgroundColor = useCallback(theme => state === "Disabled" ? disabledColor(theme) : defaultColor(theme), [state]);
@@ -35,6 +36,9 @@ const HvDot = ({
         width: dotSize,
         height: dotSize,
         backgroundColor,
+        "&:hover": {
+          backgroundColor
+        },
         "&$ghostDisabled": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled"]), {}, {
           backgroundColor
         }),
@@ -45,11 +49,11 @@ const HvDot = ({
     };
   }), [dotSize, getBackgroundColor])();
   return /*#__PURE__*/React.createElement(HvButton, {
-    className: clsx(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
+    className: clsx(classes.root, customClasses.ghost, (disabled !== null && disabled !== void 0 ? disabled : "Current Disabled".includes(state)) && customClasses.ghostDisabled, className, state === "Current" && customClasses.active),
     "aria-label": `step-${title}`,
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, []);
 };
@@ -103,7 +107,13 @@ process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
 } : void 0;
 export default withStyles(styles, {
   name: "HvDot"

package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={[\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}
+{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","disabled","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick, disabled }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js

@@ -6,9 +6,6 @@ const styles = {
   ghostDisabled: {},
   active: {},
   ghost: {
-    "&:hover": {
-      backgroundColor: "transparent"
-    },
     "&$active": {
       cursor: "default"
     },

package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","root","borderRadius","zIndex","ghostDisabled","active","ghost","backgroundColor","cursor"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/styles.js"],"sourcesContent":["const styles = {\n  root: {\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  ghostDisabled: {},\n  active: {},\n  ghost: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n    \"&$active\": {\n      cursor: \"default\",\n    },\n    \"&$active&:hover\": {\n      cursor: \"default\",\n    },\n  },\n};\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG;EACbC,IAAI,EAAE;IACJC,YAAY,EAAE,KADV;IAEJC,MAAM,EAAE;EAFJ,CADO;EAKbC,aAAa,EAAE,EALF;EAMbC,MAAM,EAAE,EANK;EAObC,KAAK,EAAE;IACL,WAAW;MACTC,eAAe,EAAE;IADR,CADN;IAIL,YAAY;MACVC,MAAM,EAAE;IADE,CAJP;IAOL,mBAAmB;MACjBA,MAAM,EAAE;IADS;EAPd;AAPM,CAAf;AAoBA,eAAeR,MAAf"}
+{"version":3,"file":"styles.js","names":["styles","root","borderRadius","zIndex","ghostDisabled","active","ghost","cursor"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/styles.js"],"sourcesContent":["const styles = {\n  root: {\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  ghostDisabled: {},\n  active: {},\n  ghost: {\n    \"&$active\": {\n      cursor: \"default\",\n    },\n    \"&$active&:hover\": {\n      cursor: \"default\",\n    },\n  },\n};\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG;EACbC,IAAI,EAAE;IACJC,YAAY,EAAE,KADV;IAEJC,MAAM,EAAE;EAFJ,CADO;EAKbC,aAAa,EAAE,EALF;EAMbC,MAAM,EAAE,EANK;EAObC,KAAK,EAAE;IACL,YAAY;MACVC,MAAM,EAAE;IADE,CADP;IAIL,mBAAmB;MACjBA,MAAM,EAAE;IADS;EAJd;AAPM,CAAf;AAiBA,eAAeP,MAAf"}

package/dist/modern/StepNavigation/StepNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StandardProps } from "@material-ui/core";
+import { Breakpoint } from "@material-ui/core/styles/createBreakpoints";
 import { HvStepProps } from "./DefaultNavigation/Step/Step";
 
 export type HvStepNavigationClassKey = "root";
@@ -15,7 +16,7 @@ export type HvStepNavigationProps = StandardProps<
   /**
    * Steps to show on the component.
    */
-  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className">> & {
+  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled">> & {
     /**
      * Class names to override styles on the separator component after the step.
      */
@@ -26,15 +27,15 @@ export type HvStepNavigationProps = StandardProps<
     titleClassName: string;
   };
   /**
-   * Sets one of the standard sizes of the steps
+   * Sets one of the standard sizes of the steps.
    */
   stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
   /**
-   * Width of the component element.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width?: number;
+  width?: { [breakpoint in Breakpoint]?: number };
   /**
-   * Defines either show a title or only a tooltip on each step component
+   * Defines either show a title or only a tooltip on each step component.
    */
   showTitles?: boolean;
 };