npm - @hitachivantara/uikit-react-core - Versions diffs - 5.27.8 → 5.27.9 - Mend

@hitachivantara/uikit-react-core 5.27.8 → 5.27.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/cjs/components/Carousel/Carousel.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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=\"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/esm/components/Carousel/Carousel.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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=\"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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.27.8",
+  "version": "5.27.9",
   "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": "201751907147d33f4790e3bee411b40270a93df3",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {