@hitachivantara/uikit-react-core 5.27.8 → 5.27.10

package/dist/cjs/components/Carousel/Carousel.cjs

@@ -129,8 +129,8 @@ const HvCarousel = (props) => {
     }), 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: "secondary", "aria-label": "Backwards", onClick: handlePrevious, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, disabled: !canNext, variant: "secondary", "aria-label": "Forwards", onClick: handleNext, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, disabled: !canPrev, variant: "secondarySubtle", "aria-label": "Backwards", onClick: handlePrevious, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, disabled: !canNext, variant: "secondarySubtle", "aria-label": "Forwards", onClick: handleNext, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, style: {
         height

package/dist/cjs/components/Carousel/Carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"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      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","jsx","HvTooltip","HvButton","curr","closeButton","Close","Fullscreen","controls","HvCarouselControls","thumbnails","HvCarouselThumbnails","evt","i","HvContainer","root","fullscreen","HvTypography","jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","Backwards","Forwards","slidesViewport","slidesContainer"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","jsx","HvTooltip","HvButton","curr","closeButton","Close","Fullscreen","controls","HvCarouselControls","thumbnails","HvCarouselThumbnails","evt","i","HvContainer","root","fullscreen","HvTypography","jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","Backwards","Forwards","slidesViewport","slidesContainer"],"mappings":"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"}

package/dist/cjs/components/Tag/Tag.cjs

@@ -1,28 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Chip = require("@mui/material/Chip");
 const useTheme = require("../../hooks/useTheme.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Tag_styles = require("./Tag.styles.cjs");
-const utils = require("./utils.cjs");
-const Button = require("../Button/Button.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
-const getColor = (customColor, type, colors) => {
-  const defaultSemanticColor = uikitStyles.theme.colors.neutral_20;
-  const defaultCategoricalColor = colors.cat1;
-  let backgroundColor;
-  if (type === "semantic") {
-    backgroundColor = uikitStyles.theme.colors[customColor] || customColor || defaultSemanticColor;
-  }
-  if (type === "categorical") {
-    backgroundColor = colors[customColor] || customColor || defaultCategoricalColor;
-  }
-  return backgroundColor;
+const getCategoricalColor = (customColor, colors) => {
+  return customColor && (colors == null ? void 0 : colors[customColor]) || customColor || (colors == null ? void 0 : colors.cat1);
 };
 const HvTag = (props) => {
   const {
@@ -36,7 +24,8 @@ const HvTag = (props) => {
     deleteIcon,
     onDelete,
     onClick,
-    role,
+    // TODO: remove from API
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     deleteButtonArialLabel = "Delete tag",
     deleteButtonProps = {},
     ...others
@@ -49,49 +38,26 @@ const HvTag = (props) => {
     cx,
     css
   } = Tag_styles.useClasses(classesProp);
-  const getDeleteIcon = () => {
-    const disabledSemanticColor = type === "semantic" ? "secondary_60" : "base_dark";
-    const {
-      tabIndex = 0
-    } = deleteButtonProps;
-    const closeIconStyles = css({
-      ...disabled ? {
-        cursor: "not-allowed"
-      } : void 0,
-      height: 16,
-      "& svg .color0": {
-        fill: uikitStyles.theme.colors[disabled ? disabledSemanticColor : "base_dark"]
-      }
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { classes: {
-      startIcon: classes.tagButton,
-      focusVisible: classes.focusVisible,
-      root: classes.button
-    }, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { iconSize: "XS", className: closeIconStyles, color: disabled ? disabledSemanticColor : "base_dark" }) });
-  };
-  const inlineStyle = {
-    ...style
-  };
-  const categoricalBackgroundColor = type === "categorical" ? getColor(color, type, colors) : void 0;
-  if (type === "semantic") {
-    inlineStyle.backgroundColor = getColor(color, type, {});
-  } else if (type === "categorical") {
-    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
-  }
-  const [hover, setHover] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label, className: cx(classes.root, className), onMouseEnter: () => {
-    setHover(!!onClick);
-  }, onMouseLeave: () => {
-    setHover(false);
-  }, style: {
-    ...disabled ? null : inlineStyle,
-    ...hover && !disabled ? {
+  const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { role: "none", className: cx(classes.button, classes.tagButton), iconSize: "XS", color: "base_dark", ...deleteButtonProps });
+  const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
+  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
+  const isClickable = !!(onClick || onDelete) && !disabled;
+  const clickableClass = css({
+    "&:hover": {
       boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-    } : null
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label, disabled, className: cx({
+    [clickableClass]: isClickable
+  }, className), style: {
+    ...disabled ? null : {
+      backgroundColor
+    },
+    ...style
   }, classes: {
-    root: cx(classes.chipRoot, {
+    root: cx(classes.root, classes.chipRoot, {
       [classes.disabled]: disabled,
-      [classes.clickable]: !!onClick,
+      [classes.clickable]: isClickable,
       [classes.categorical]: type === "categorical",
       [classes.categoricalFocus]: type === "categorical" && !disabled,
       [classes.categoricalDisabled]: type === "categorical" && disabled
@@ -100,7 +66,7 @@ const HvTag = (props) => {
     deleteIcon: cx(classes.deleteIcon, {
       [classes.disabledDeleteIcon]: disabled
     })
-  }, deleteIcon: utils.hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(), onDelete: utils.getOnDeleteCallback(disabled, onDelete), onClick: disabled ? void 0 : onClick, role: role || (utils.hasClickAction(onClick) ? "button" : void 0), tabIndex: utils.hasDeleteAction(onDelete) ? void 0 : 0, ...others });
+  }, deleteIcon: deleteIcon || defaultDeleteIcon, onDelete: disabled ? void 0 : onDelete, onClick: disabled ? void 0 : onClick, ...others });
 };
 exports.tagClasses = Tag_styles.staticClasses;
 exports.HvTag = HvTag;

package/dist/cjs/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","jsx","HvButton","startIcon","tagButton","focusVisible","root","button","CloseXS","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","Chip","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps extends Omit<MuiChipProps, \"color\" | \"classes\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      color=\"base_dark\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={disabled ? undefined : onClick}\n      {...others}\n    />\n  );\n};\n"],"names":["getCategoricalColor","customColor","colors","cat1","HvTag","props","classes","classesProp","className","style","label","disabled","type","color","deleteIcon","onDelete","onClick","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","defaultDeleteIcon","jsx","CloseXS","button","tagButton","categoricalBackgroundColor","undefined","backgroundColor","getColor","isClickable","clickableClass","boxShadow","Chip","root","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon"],"mappings":";;;;;;;;;;;AA6CA,MAAMA,sBAAsBA,CAACC,aAAaC,WAAW;AACnD,SAAQD,gBAAeC,iCAASD,iBAAiBA,gBAAeC,iCAAQC;AAC1E;AAUaC,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAAAA;AAAAA,IAGAC,yBAAyB;AAAA,IACzBC,oBAAoB,CAAC;AAAA,IACrB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASf,KAAK;AAC5B,QAAA;AAAA,IAAEH;AAAAA,MAAWmB,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEf;AAAAA,IAASgB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAAA,WAAWjB,WAAW;AAEnD,QAAMkB,oBACHC,2BAAA,IAAAC,yBAAA,EACC,MAAK,QACL,WAAWL,GAAGhB,QAAQsB,QAAQtB,QAAQuB,SAAS,GAC/C,UAAS,MACT,OAAM,aACFX,GAAAA,kBAEP,CAAA;AAED,QAAMY,6BACJlB,SAAS,gBAAgBZ,oBAAoBa,OAAOX,MAAM,IAAI6B;AAE1DC,QAAAA,kBACHpB,SAAS,cAAcqB,YAASpB,SAAAA,OAAO,YAAY,KACnDD,SAAS,iBAAkB,GAAEkB,0BAA2B,QACzDC;AAEF,QAAMG,cAAc,CAAC,EAAElB,WAAWD,aAAa,CAACJ;AAEhD,QAAMwB,iBAAiBZ,IAAI;AAAA,IACzB,WAAW;AAAA,MACTa,WAAY,aAAYN,0BAA2B;AAAA,IACrD;AAAA,EAAA,CACD;AAED,SACGJ,2BAAAA,IAAAW,cAAAA,SAAA,EACC,OACA,UACA,WAAWf,GAAG;AAAA,IAAE,CAACa,cAAc,GAAGD;AAAAA,EAAAA,GAAe1B,SAAS,GAC1D,OAAO;AAAA,IACL,GAAIG,WAAW,OAAO;AAAA,MAAEqB;AAAAA,IAAgB;AAAA,IACxC,GAAGvB;AAAAA,KAEL,SAAS;AAAA,IACP6B,MAAMhB,GAAGhB,QAAQgC,MAAMhC,QAAQiC,UAAU;AAAA,MACvC,CAACjC,QAAQK,QAAQ,GAAGA;AAAAA,MACpB,CAACL,QAAQkC,SAAS,GAAGN;AAAAA,MACrB,CAAC5B,QAAQmC,WAAW,GAAG7B,SAAS;AAAA,MAChC,CAACN,QAAQoC,gBAAgB,GAAG9B,SAAS,iBAAiB,CAACD;AAAAA,MACvD,CAACL,QAAQqC,mBAAmB,GAAG/B,SAAS,iBAAiBD;AAAAA,IAAAA,CAC1D;AAAA,IACDD,OAAOJ,QAAQI;AAAAA,IACfI,YAAYQ,GAAGhB,QAAQQ,YAAY;AAAA,MACjC,CAACR,QAAQsC,kBAAkB,GAAGjC;AAAAA,IAAAA,CAC/B;AAAA,EAAA,GAEH,YAAYG,cAAcW,mBAC1B,UAAUd,WAAWoB,SAAYhB,UACjC,SAASJ,WAAWoB,SAAYf,SAC5BG,GAAAA,OACJ,CAAA;AAEN;;;"}

package/dist/cjs/components/Tag/Tag.styles.cjs

@@ -15,26 +15,23 @@ const {
       borderRadius: 0,
       maxWidth: 180,
       fontFamily: uikitStyles.theme.fontFamily.body,
-      "& $focusVisible": {
+      "&:focus-visible": {
         backgroundColor: hexToRgbA.hexToRgbA(uikitStyles.theme.colors.base_light, 0.3)
       },
       "&$categorical": {
         borderRadius: 8,
-        "&$clickable": {
-          cursor: "pointer"
-        },
-        "&:hover": {
-          borderRadius: 8
-        },
         "& $label": {
           color: uikitStyles.theme.colors.secondary
-        },
-        "&:focus:not(:focus-visible)": {
-          outline: "0 !important",
-          boxShadow: "none !important"
         }
       }
     },
+    "&$disabled": {
+      opacity: 1,
+      backgroundColor: uikitStyles.theme.colors.atmo3,
+      "& $label": {
+        color: uikitStyles.theme.colors.secondary_60
+      }
+    },
     "& .MuiChip-label": {
       paddingLeft: uikitStyles.theme.space.xs,
       paddingRight: uikitStyles.theme.space.xs,
@@ -48,11 +45,9 @@ const {
       marginRight: 0,
       width: 16,
       height: 16,
-      minWidth: 16,
-      minHeight: 16,
       padding: 0,
       "&:hover": {
-        backgroundColor: hexToRgbA.hexToRgbA(uikitStyles.theme.colors.base_light, 0.3)
+        backgroundColor: uikitStyles.theme.button.hoverColor
       },
       "&:focus": {
         ...focusUtils.outlineStyles,
@@ -64,58 +59,24 @@ const {
       }
     }
   },
-  focusVisible: {},
-  button: {
-    background: "transparent"
-  },
-  label: {},
-  tagButton: {
-    width: 16,
-    height: 16,
-    minWidth: 16,
-    minHeight: 16,
-    padding: 0,
-    margin: 0
-  },
-  deleteIcon: {},
-  disabledDeleteIcon: {
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
-    },
-    "&:focus": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      outline: "none",
-      boxShadow: "none",
-      outlineOffset: 0
-    }
-  },
-  categorical: {},
-  clickable: {},
-  categoricalFocus: {
-    "&:focus": {
+  disabled: {},
+  clickable: {
+    cursor: "pointer",
+    "&:focus-visible": {
       ...focusUtils.outlineStyles
     }
   },
-  disabled: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    cursor: "not-allowed",
-    "& $label": {
-      color: uikitStyles.theme.colors.secondary_60
-    }
-  },
-  categoricalDisabled: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    cursor: "not-allowed",
-    "& $label": {
-      color: uikitStyles.theme.colors.secondary_60
-    },
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
-    },
-    "&:focus": {
-      outline: "none"
-    }
-  }
+  categorical: {},
+  label: {},
+  deleteIcon: {},
+  // TODO: redundant - use deleteIcon. remove in v6
+  button: {},
+  tagButton: {},
+  // TODO: redundant - use $clickable or :not($disabled). remove in v6
+  focusVisible: {},
+  disabledDeleteIcon: {},
+  categoricalFocus: {},
+  categoricalDisabled: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/components/Tag/Tag.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {},\n\n  chipRoot: {\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      \"& $focusVisible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"&$clickable\": {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n        \"&:focus:not(:focus-visible)\": {\n          outline: \"0 !important\",\n          boxShadow: \"none !important\",\n        },\n      },\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      minWidth: 16,\n      minHeight: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  focusVisible: {},\n\n  button: {\n    background: \"transparent\",\n  },\n\n  label: {},\n\n  tagButton: {\n    width: 16,\n    height: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n  },\n\n  deleteIcon: {},\n\n  disabledDeleteIcon: {\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo3,\n      outline: \"none\",\n      boxShadow: \"none\",\n      outlineOffset: 0,\n    },\n  },\n\n  categorical: {},\n  clickable: {},\n\n  categoricalFocus: {\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n\n  disabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n\n  categoricalDisabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","cursor","color","secondary","outline","boxShadow","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","minWidth","minHeight","padding","outlineStyles","focusVisible","button","background","label","tagButton","margin","deleteIcon","disabledDeleteIcon","atmo3","outlineOffset","categorical","clickable","categoricalFocus","disabled","secondary_60","categoricalDisabled"],"mappings":"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"}
+{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {},\n\n  chipRoot: {\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      \"&:focus-visible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","color","secondary","opacity","atmo3","secondary_60","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","padding","button","hoverColor","outlineStyles","outline","boxShadow","disabled","clickable","cursor","categorical","label","deleteIcon","tagButton","focusVisible","disabledDeleteIcon","categoricalFocus","categoricalDisabled"],"mappings":";;;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,YAAAA,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAAA,UAAUH,YAAAA,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,YAAY;AAAA,UACVS,OAAON,YAAAA,MAAMI,OAAOG;AAAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZC,SAAS;AAAA,MACTN,iBAAiBF,YAAAA,MAAMI,OAAOK;AAAAA,MAC9B,YAAY;AAAA,QACVH,OAAON,YAAAA,MAAMI,OAAOM;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,YAAAA,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,YAAAA,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,YAAAA,MAAMe,WAAWC;AAAAA,MACrBV,OAAON,YAAAA,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLX,OAAON,YAAAA,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,SAAS;AAAA,MACT,WAAW;AAAA,QACTlB,iBAAiBF,YAAAA,MAAMqB,OAAOC;AAAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAGC,WAAAA;AAAAA,QACH1B,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B2B,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAC,UAAU,CAAC;AAAA,EAEXC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGL,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EAEAM,aAAa,CAAC;AAAA,EAEdC,OAAO,CAAC;AAAA,EAERC,YAAY,CAAC;AAAA;AAAA,EAGbV,QAAQ,CAAC;AAAA,EACTW,WAAW,CAAC;AAAA;AAAA,EAEZC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,kBAAkB,CAAC;AAAA,EACnBC,qBAAqB,CAAC;AACxB,CAAC;;;"}

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

@@ -126,8 +126,8 @@ const HvCarousel = (props) => {
     }), 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(HvButton, { icon: true, disabled: !canPrev, variant: "secondarySubtle", "aria-label": "Backwards", onClick: handlePrevious, children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" }) }),
+        /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !canNext, variant: "secondarySubtle", "aria-label": "Forwards", onClick: handleNext, children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) })
       ] }),
       /* @__PURE__ */ jsx("div", { ref: containerRef, style: {
         height

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"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      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","curr","closeButton","controls","thumbnails","evt","i","root","fullscreen","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","slidesViewport","slidesContainer"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","curr","closeButton","controls","thumbnails","evt","i","root","fullscreen","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","slidesViewport","slidesContainer"],"mappings":"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"}

package/dist/esm/components/Tag/Tag.js

@@ -1,25 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState } from "react";
-import { theme } from "@hitachivantara/uikit-styles";
+import { getColor } from "@hitachivantara/uikit-styles";
 import Chip from "@mui/material/Chip";
 import { useTheme } from "../../hooks/useTheme.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { CloseXS } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
-import { hasDeleteAction, getOnDeleteCallback, hasClickAction } from "./utils.js";
-import { HvButton } from "../Button/Button.js";
-const getColor = (customColor, type, colors) => {
-  const defaultSemanticColor = theme.colors.neutral_20;
-  const defaultCategoricalColor = colors.cat1;
-  let backgroundColor;
-  if (type === "semantic") {
-    backgroundColor = theme.colors[customColor] || customColor || defaultSemanticColor;
-  }
-  if (type === "categorical") {
-    backgroundColor = colors[customColor] || customColor || defaultCategoricalColor;
-  }
-  return backgroundColor;
+const getCategoricalColor = (customColor, colors) => {
+  return customColor && (colors == null ? void 0 : colors[customColor]) || customColor || (colors == null ? void 0 : colors.cat1);
 };
 const HvTag = (props) => {
   const {
@@ -33,7 +21,8 @@ const HvTag = (props) => {
     deleteIcon,
     onDelete,
     onClick,
-    role,
+    // TODO: remove from API
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     deleteButtonArialLabel = "Delete tag",
     deleteButtonProps = {},
     ...others
@@ -46,49 +35,26 @@ const HvTag = (props) => {
     cx,
     css
   } = useClasses(classesProp);
-  const getDeleteIcon = () => {
-    const disabledSemanticColor = type === "semantic" ? "secondary_60" : "base_dark";
-    const {
-      tabIndex = 0
-    } = deleteButtonProps;
-    const closeIconStyles = css({
-      ...disabled ? {
-        cursor: "not-allowed"
-      } : void 0,
-      height: 16,
-      "& svg .color0": {
-        fill: theme.colors[disabled ? disabledSemanticColor : "base_dark"]
-      }
-    });
-    return /* @__PURE__ */ jsx(HvButton, { classes: {
-      startIcon: classes.tagButton,
-      focusVisible: classes.focusVisible,
-      root: classes.button
-    }, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsx(CloseXS, { iconSize: "XS", className: closeIconStyles, color: disabled ? disabledSemanticColor : "base_dark" }) });
-  };
-  const inlineStyle = {
-    ...style
-  };
-  const categoricalBackgroundColor = type === "categorical" ? getColor(color, type, colors) : void 0;
-  if (type === "semantic") {
-    inlineStyle.backgroundColor = getColor(color, type, {});
-  } else if (type === "categorical") {
-    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
-  }
-  const [hover, setHover] = useState(false);
-  return /* @__PURE__ */ jsx(Chip, { label, className: cx(classes.root, className), onMouseEnter: () => {
-    setHover(!!onClick);
-  }, onMouseLeave: () => {
-    setHover(false);
-  }, style: {
-    ...disabled ? null : inlineStyle,
-    ...hover && !disabled ? {
+  const defaultDeleteIcon = /* @__PURE__ */ jsx(CloseXS, { role: "none", className: cx(classes.button, classes.tagButton), iconSize: "XS", color: "base_dark", ...deleteButtonProps });
+  const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
+  const backgroundColor = type === "semantic" && getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
+  const isClickable = !!(onClick || onDelete) && !disabled;
+  const clickableClass = css({
+    "&:hover": {
       boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-    } : null
+    }
+  });
+  return /* @__PURE__ */ jsx(Chip, { label, disabled, className: cx({
+    [clickableClass]: isClickable
+  }, className), style: {
+    ...disabled ? null : {
+      backgroundColor
+    },
+    ...style
   }, classes: {
-    root: cx(classes.chipRoot, {
+    root: cx(classes.root, classes.chipRoot, {
       [classes.disabled]: disabled,
-      [classes.clickable]: !!onClick,
+      [classes.clickable]: isClickable,
       [classes.categorical]: type === "categorical",
       [classes.categoricalFocus]: type === "categorical" && !disabled,
       [classes.categoricalDisabled]: type === "categorical" && disabled
@@ -97,7 +63,7 @@ const HvTag = (props) => {
     deleteIcon: cx(classes.deleteIcon, {
       [classes.disabledDeleteIcon]: disabled
     })
-  }, deleteIcon: hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(), onDelete: getOnDeleteCallback(disabled, onDelete), onClick: disabled ? void 0 : onClick, role: role || (hasClickAction(onClick) ? "button" : void 0), tabIndex: hasDeleteAction(onDelete) ? void 0 : 0, ...others });
+  }, deleteIcon: deleteIcon || defaultDeleteIcon, onDelete: disabled ? void 0 : onDelete, onClick: disabled ? void 0 : onClick, ...others });
 };
 export {
   HvTag,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","startIcon","tagButton","focusVisible","root","button","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps extends Omit<MuiChipProps, \"color\" | \"classes\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      color=\"base_dark\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={disabled ? undefined : onClick}\n      {...others}\n    />\n  );\n};\n"],"names":["getCategoricalColor","customColor","colors","cat1","HvTag","props","classes","classesProp","className","style","label","disabled","type","color","deleteIcon","onDelete","onClick","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","defaultDeleteIcon","button","tagButton","categoricalBackgroundColor","undefined","backgroundColor","getColor","isClickable","clickableClass","boxShadow","root","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon"],"mappings":";;;;;;;;AA6CA,MAAMA,sBAAsBA,CAACC,aAAaC,WAAW;AACnD,SAAQD,gBAAeC,iCAASD,iBAAiBA,gBAAeC,iCAAQC;AAC1E;AAUaC,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAAAA;AAAAA,IAGAC,yBAAyB;AAAA,IACzBC,oBAAoB,CAAC;AAAA,IACrB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,SAASf,KAAK;AAC5B,QAAA;AAAA,IAAEH;AAAAA,MAAWmB,SAAS;AACtB,QAAA;AAAA,IAAEf;AAAAA,IAASgB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWjB,WAAW;AAEnD,QAAMkB,oBACH,oBAAA,SAAA,EACC,MAAK,QACL,WAAWH,GAAGhB,QAAQoB,QAAQpB,QAAQqB,SAAS,GAC/C,UAAS,MACT,OAAM,aACFT,GAAAA,kBAEP,CAAA;AAED,QAAMU,6BACJhB,SAAS,gBAAgBZ,oBAAoBa,OAAOX,MAAM,IAAI2B;AAE1DC,QAAAA,kBACHlB,SAAS,cAAcmB,SAASlB,OAAO,YAAY,KACnDD,SAAS,iBAAkB,GAAEgB,0BAA2B,QACzDC;AAEF,QAAMG,cAAc,CAAC,EAAEhB,WAAWD,aAAa,CAACJ;AAEhD,QAAMsB,iBAAiBV,IAAI;AAAA,IACzB,WAAW;AAAA,MACTW,WAAY,aAAYN,0BAA2B;AAAA,IACrD;AAAA,EAAA,CACD;AAED,SACG,oBAAA,MAAA,EACC,OACA,UACA,WAAWN,GAAG;AAAA,IAAE,CAACW,cAAc,GAAGD;AAAAA,EAAAA,GAAexB,SAAS,GAC1D,OAAO;AAAA,IACL,GAAIG,WAAW,OAAO;AAAA,MAAEmB;AAAAA,IAAgB;AAAA,IACxC,GAAGrB;AAAAA,KAEL,SAAS;AAAA,IACP0B,MAAMb,GAAGhB,QAAQ6B,MAAM7B,QAAQ8B,UAAU;AAAA,MACvC,CAAC9B,QAAQK,QAAQ,GAAGA;AAAAA,MACpB,CAACL,QAAQ+B,SAAS,GAAGL;AAAAA,MACrB,CAAC1B,QAAQgC,WAAW,GAAG1B,SAAS;AAAA,MAChC,CAACN,QAAQiC,gBAAgB,GAAG3B,SAAS,iBAAiB,CAACD;AAAAA,MACvD,CAACL,QAAQkC,mBAAmB,GAAG5B,SAAS,iBAAiBD;AAAAA,IAAAA,CAC1D;AAAA,IACDD,OAAOJ,QAAQI;AAAAA,IACfI,YAAYQ,GAAGhB,QAAQQ,YAAY;AAAA,MACjC,CAACR,QAAQmC,kBAAkB,GAAG9B;AAAAA,IAAAA,CAC/B;AAAA,EAAA,GAEH,YAAYG,cAAcW,mBAC1B,UAAUd,WAAWkB,SAAYd,UACjC,SAASJ,WAAWkB,SAAYb,SAC5BG,GAAAA,OACJ,CAAA;AAEN;"}

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

@@ -13,26 +13,23 @@ const {
       borderRadius: 0,
       maxWidth: 180,
       fontFamily: theme.fontFamily.body,
-      "& $focusVisible": {
+      "&:focus-visible": {
         backgroundColor: hexToRgbA(theme.colors.base_light, 0.3)
       },
       "&$categorical": {
         borderRadius: 8,
-        "&$clickable": {
-          cursor: "pointer"
-        },
-        "&:hover": {
-          borderRadius: 8
-        },
         "& $label": {
           color: theme.colors.secondary
-        },
-        "&:focus:not(:focus-visible)": {
-          outline: "0 !important",
-          boxShadow: "none !important"
         }
       }
     },
+    "&$disabled": {
+      opacity: 1,
+      backgroundColor: theme.colors.atmo3,
+      "& $label": {
+        color: theme.colors.secondary_60
+      }
+    },
     "& .MuiChip-label": {
       paddingLeft: theme.space.xs,
       paddingRight: theme.space.xs,
@@ -46,11 +43,9 @@ const {
       marginRight: 0,
       width: 16,
       height: 16,
-      minWidth: 16,
-      minHeight: 16,
       padding: 0,
       "&:hover": {
-        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3)
+        backgroundColor: theme.button.hoverColor
       },
       "&:focus": {
         ...outlineStyles,
@@ -62,58 +57,24 @@ const {
       }
     }
   },
-  focusVisible: {},
-  button: {
-    background: "transparent"
-  },
-  label: {},
-  tagButton: {
-    width: 16,
-    height: 16,
-    minWidth: 16,
-    minHeight: 16,
-    padding: 0,
-    margin: 0
-  },
-  deleteIcon: {},
-  disabledDeleteIcon: {
-    "&:hover": {
-      backgroundColor: theme.colors.atmo3
-    },
-    "&:focus": {
-      backgroundColor: theme.colors.atmo3,
-      outline: "none",
-      boxShadow: "none",
-      outlineOffset: 0
-    }
-  },
-  categorical: {},
-  clickable: {},
-  categoricalFocus: {
-    "&:focus": {
+  disabled: {},
+  clickable: {
+    cursor: "pointer",
+    "&:focus-visible": {
       ...outlineStyles
     }
   },
-  disabled: {
-    backgroundColor: theme.colors.atmo3,
-    cursor: "not-allowed",
-    "& $label": {
-      color: theme.colors.secondary_60
-    }
-  },
-  categoricalDisabled: {
-    backgroundColor: theme.colors.atmo3,
-    cursor: "not-allowed",
-    "& $label": {
-      color: theme.colors.secondary_60
-    },
-    "&:hover": {
-      backgroundColor: theme.colors.atmo3
-    },
-    "&:focus": {
-      outline: "none"
-    }
-  }
+  categorical: {},
+  label: {},
+  deleteIcon: {},
+  // TODO: redundant - use deleteIcon. remove in v6
+  button: {},
+  tagButton: {},
+  // TODO: redundant - use $clickable or :not($disabled). remove in v6
+  focusVisible: {},
+  disabledDeleteIcon: {},
+  categoricalFocus: {},
+  categoricalDisabled: {}
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {},\n\n  chipRoot: {\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      \"& $focusVisible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"&$clickable\": {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n        \"&:focus:not(:focus-visible)\": {\n          outline: \"0 !important\",\n          boxShadow: \"none !important\",\n        },\n      },\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      minWidth: 16,\n      minHeight: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  focusVisible: {},\n\n  button: {\n    background: \"transparent\",\n  },\n\n  label: {},\n\n  tagButton: {\n    width: 16,\n    height: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n  },\n\n  deleteIcon: {},\n\n  disabledDeleteIcon: {\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo3,\n      outline: \"none\",\n      boxShadow: \"none\",\n      outlineOffset: 0,\n    },\n  },\n\n  categorical: {},\n  clickable: {},\n\n  categoricalFocus: {\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n\n  disabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n\n  categoricalDisabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","cursor","color","secondary","outline","boxShadow","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","minWidth","minHeight","padding","outlineStyles","focusVisible","button","background","label","tagButton","margin","deleteIcon","disabledDeleteIcon","atmo3","outlineOffset","categorical","clickable","categoricalFocus","disabled","secondary_60","categoricalDisabled"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAUH,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,eAAe;AAAA,UACbS,QAAQ;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACTT,cAAc;AAAA,QAChB;AAAA,QACA,YAAY;AAAA,UACVU,OAAOP,MAAMI,OAAOI;AAAAA,QACtB;AAAA,QACA,+BAA+B;AAAA,UAC7BC,SAAS;AAAA,UACTC,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,MAAMe,WAAWC;AAAAA,MACrBT,OAAOP,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLV,OAAOP,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,UAAU;AAAA,MACVC,WAAW;AAAA,MACXC,SAAS;AAAA,MACT,WAAW;AAAA,QACTpB,iBAAiBC,UAAUH,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MACA,WAAW;AAAA,QACT,GAAGkB;AAAAA,QACH1B,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7BY,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAc,cAAc,CAAC;AAAA,EAEfC,QAAQ;AAAA,IACNC,YAAY;AAAA,EACd;AAAA,EAEAC,OAAO,CAAC;AAAA,EAERC,WAAW;AAAA,IACTT,OAAO;AAAA,IACPvB,QAAQ;AAAA,IACRwB,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTO,QAAQ;AAAA,EACV;AAAA,EAEAC,YAAY,CAAC;AAAA,EAEbC,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT7B,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT9B,iBAAiBF,MAAMI,OAAO4B;AAAAA,MAC9BvB,SAAS;AAAA,MACTC,WAAW;AAAA,MACXuB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EAEAC,aAAa,CAAC;AAAA,EACdC,WAAW,CAAC;AAAA,EAEZC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,EACF;AAAA,EAEAc,UAAU;AAAA,IACRnC,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAC9B1B,QAAQ;AAAA,IACR,YAAY;AAAA,MACVC,OAAOP,MAAMI,OAAOkC;AAAAA,IACtB;AAAA,EACF;AAAA,EAEAC,qBAAqB;AAAA,IACnBrC,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAC9B1B,QAAQ;AAAA,IACR,YAAY;AAAA,MACVC,OAAOP,MAAMI,OAAOkC;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTpC,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACTvB,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {},\n\n  chipRoot: {\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      \"&:focus-visible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: theme.button.hoverColor,\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","color","secondary","opacity","atmo3","secondary_60","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","padding","button","hoverColor","outlineStyles","outline","boxShadow","disabled","clickable","cursor","categorical","label","deleteIcon","tagButton","focusVisible","disabledDeleteIcon","categoricalFocus","categoricalDisabled"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAUH,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,YAAY;AAAA,UACVS,OAAON,MAAMI,OAAOG;AAAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZC,SAAS;AAAA,MACTN,iBAAiBF,MAAMI,OAAOK;AAAAA,MAC9B,YAAY;AAAA,QACVH,OAAON,MAAMI,OAAOM;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,MAAMe,WAAWC;AAAAA,MACrBV,OAAON,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLX,OAAON,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,SAAS;AAAA,MACT,WAAW;AAAA,QACTlB,iBAAiBF,MAAMqB,OAAOC;AAAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAGC;AAAAA,QACH1B,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B2B,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAC,UAAU,CAAC;AAAA,EAEXC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGL;AAAAA,IACL;AAAA,EACF;AAAA,EAEAM,aAAa,CAAC;AAAA,EAEdC,OAAO,CAAC;AAAA,EAERC,YAAY,CAAC;AAAA;AAAA,EAGbV,QAAQ,CAAC;AAAA,EACTW,WAAW,CAAC;AAAA;AAAA,EAEZC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,kBAAkB,CAAC;AAAA,EACnBC,qBAAqB,CAAC;AACxB,CAAC;"}

package/dist/types/index.d.ts

@@ -6018,7 +6018,7 @@ export declare type HvTagClasses = ExtractNames<typeof useClasses_48>;
 
 export declare function hvTagColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, A extends object = Record<string, unknown>>(col: HvTableColumnConfig<D, H>, valueDataKey: keyof A, colorDataKey: keyof A, textColorDataKey: keyof A, fromRowData?: boolean, tagProps?: HvTagProps): HvTableColumnConfig<D, H>;
 
-export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">, HvBaseProps<HTMLDivElement, "children"> {
+export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes"> {
     /** The label of the tag element. */
     label?: React.ReactNode;
     /** Indicates that the form element is disabled. */
@@ -6036,12 +6036,12 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">
     onDelete?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Callback triggered when any item is clicked. */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    /** The role of the element with an attributed event. */
-    role?: string;
-    /** Aria properties to apply to delete button in tag */
+    /** Aria properties to apply to delete button in tag
+     * @deprecated no longer used
+     */
     deleteButtonArialLabel?: string;
-    /** Props to apply to delete button */
-    deleteButtonProps?: HvButtonProps;
+    /** Props to apply to delete icon */
+    deleteButtonProps?: HTMLAttributes<HTMLDivElement>;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvTagClasses;
     /** @ignore */
@@ -7662,11 +7662,11 @@ export declare const tagClasses: {
     disabled: "HvTag-disabled";
     focusVisible: "HvTag-focusVisible";
     chipRoot: "HvTag-chipRoot";
-    tagButton: "HvTag-tagButton";
+    clickable: "HvTag-clickable";
+    categorical: "HvTag-categorical";
     deleteIcon: "HvTag-deleteIcon";
+    tagButton: "HvTag-tagButton";
     disabledDeleteIcon: "HvTag-disabledDeleteIcon";
-    categorical: "HvTag-categorical";
-    clickable: "HvTag-clickable";
     categoricalFocus: "HvTag-categoricalFocus";
     categoricalDisabled: "HvTag-categoricalDisabled";
 };
@@ -8886,7 +8886,7 @@ declare const useClasses_47: (classesProp?: Partial<Record<"root" | "indicator"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_48: (classesProp?: Partial<Record<"button" | "label" | "root" | "disabled" | "focusVisible" | "chipRoot" | "tagButton" | "deleteIcon" | "disabledDeleteIcon" | "categorical" | "clickable" | "categoricalFocus" | "categoricalDisabled", string>>, addStatic?: boolean) => {
+declare const useClasses_48: (classesProp?: Partial<Record<"button" | "label" | "root" | "disabled" | "focusVisible" | "chipRoot" | "clickable" | "categorical" | "deleteIcon" | "tagButton" | "disabledDeleteIcon" | "categoricalFocus" | "categoricalDisabled", string>>, addStatic?: boolean) => {
     classes: {
         button: string;
         label: string;
@@ -8894,11 +8894,11 @@ declare const useClasses_48: (classesProp?: Partial<Record<"button" | "label" |
         disabled: string;
         focusVisible: string;
         chipRoot: string;
-        tagButton: string;
+        clickable: string;
+        categorical: string;
         deleteIcon: string;
+        tagButton: string;
         disabledDeleteIcon: string;
-        categorical: string;
-        clickable: string;
         categoricalFocus: string;
         categoricalDisabled: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.27.8",
+  "version": "5.27.10",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -64,7 +64,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "74f3c460e003c0731758dc398627502b5ed8b0db",
+  "gitHead": "18f6e9c22421729de7c70bff66145e4806dd2f0d",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/components/Tag/utils.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {
-  const nullCallback = () => {
-  };
-  let deleteCallback;
-  if (tagIsDisabled && providedOnDelete) {
-    deleteCallback = nullCallback;
-  } else if (tagIsDisabled && !providedOnDelete) {
-    deleteCallback = void 0;
-  } else {
-    deleteCallback = providedOnDelete;
-  }
-  return deleteCallback;
-};
-const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;
-const hasClickAction = (onClickAction) => !!onClickAction;
-exports.getOnDeleteCallback = getOnDeleteCallback;
-exports.hasClickAction = hasClickAction;
-exports.hasDeleteAction = hasDeleteAction;
-//# sourceMappingURL=utils.cjs.map

package/dist/cjs/components/Tag/utils.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/components/Tag/utils.ts"],"sourcesContent":["export const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {\n  const nullCallback = () => {};\n\n  let deleteCallback;\n\n  if (tagIsDisabled && providedOnDelete) {\n    deleteCallback = nullCallback;\n  } else if (tagIsDisabled && !providedOnDelete) {\n    deleteCallback = undefined;\n  } else {\n    deleteCallback = providedOnDelete;\n  }\n\n  return deleteCallback;\n};\n\nexport const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;\n\nexport const hasClickAction = (onClickAction) => !!onClickAction;\n"],"names":["getOnDeleteCallback","tagIsDisabled","providedOnDelete","nullCallback","deleteCallback","undefined","hasDeleteAction","onDeleteAction","hasClickAction","onClickAction"],"mappings":";;AAAaA,MAAAA,sBAAsBA,CAACC,eAAeC,qBAAqB;AACtE,QAAMC,eAAeA,MAAM;AAAA,EAAA;AAEvBC,MAAAA;AAEJ,MAAIH,iBAAiBC,kBAAkB;AACpBC,qBAAAA;AAAAA,EAAAA,WACRF,iBAAiB,CAACC,kBAAkB;AAC5BG,qBAAAA;AAAAA,EAAAA,OACZ;AACYH,qBAAAA;AAAAA,EACnB;AAEOE,SAAAA;AACT;AAEaE,MAAAA,kBAAmBC,CAAmB,mBAAA,CAAC,CAACA;AAExCC,MAAAA,iBAAkBC,CAAkB,kBAAA,CAAC,CAACA;;;;"}

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

@@ -1,21 +0,0 @@
-const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {
-  const nullCallback = () => {
-  };
-  let deleteCallback;
-  if (tagIsDisabled && providedOnDelete) {
-    deleteCallback = nullCallback;
-  } else if (tagIsDisabled && !providedOnDelete) {
-    deleteCallback = void 0;
-  } else {
-    deleteCallback = providedOnDelete;
-  }
-  return deleteCallback;
-};
-const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;
-const hasClickAction = (onClickAction) => !!onClickAction;
-export {
-  getOnDeleteCallback,
-  hasClickAction,
-  hasDeleteAction
-};
-//# sourceMappingURL=utils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/Tag/utils.ts"],"sourcesContent":["export const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {\n  const nullCallback = () => {};\n\n  let deleteCallback;\n\n  if (tagIsDisabled && providedOnDelete) {\n    deleteCallback = nullCallback;\n  } else if (tagIsDisabled && !providedOnDelete) {\n    deleteCallback = undefined;\n  } else {\n    deleteCallback = providedOnDelete;\n  }\n\n  return deleteCallback;\n};\n\nexport const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;\n\nexport const hasClickAction = (onClickAction) => !!onClickAction;\n"],"names":["getOnDeleteCallback","tagIsDisabled","providedOnDelete","nullCallback","deleteCallback","undefined","hasDeleteAction","onDeleteAction","hasClickAction","onClickAction"],"mappings":"AAAaA,MAAAA,sBAAsBA,CAACC,eAAeC,qBAAqB;AACtE,QAAMC,eAAeA,MAAM;AAAA,EAAA;AAEvBC,MAAAA;AAEJ,MAAIH,iBAAiBC,kBAAkB;AACpBC,qBAAAA;AAAAA,EAAAA,WACRF,iBAAiB,CAACC,kBAAkB;AAC5BG,qBAAAA;AAAAA,EAAAA,OACZ;AACYH,qBAAAA;AAAAA,EACnB;AAEOE,SAAAA;AACT;AAEaE,MAAAA,kBAAmBC,CAAmB,mBAAA,CAAC,CAACA;AAExCC,MAAAA,iBAAkBC,CAAkB,kBAAA,CAAC,CAACA;"}