npm - @hitachivantara/uikit-react-core - Versions diffs - 5.66.12 → 5.66.14 - Mend

@hitachivantara/uikit-react-core 5.66.12 → 5.66.14

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 (263) hide show

package/dist/esm/Carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n Backwards,\n Close,\n Forwards,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../Button\";\nimport { HvContainer } from \"../Container\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\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?: React.CSSProperties[\"height\"];\n /* Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio /\n thumbnailWidth?: React.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?: Parameters<typeof useCarousel>[0];\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));\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 <HvIconButton\n title={isFullscreen ? \"Close\" : \"Fullscreen\"}\n onClick={() => setIsFullscreen((curr) => !curr)}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvIconButton>\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":[],"mappings":"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"}
1	+ {"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n Backwards,\n Close,\n Forwards,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../Button\";\nimport { HvContainer } from \"../Container\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton, HvIconButtonProps } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n close: \"Close\",\n fullscreen: \"Fullscreen\",\n backwards: \"Backwards\",\n forwards: \"Forwards\",\n};\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?: React.CSSProperties[\"height\"];\n /* Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio /\n thumbnailWidth?: React.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?: Parameters<typeof useCarousel>[0];\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 /* The callback fired fullscreen is toggled. /\n onFullscreen?: (\n event: React.MouseEvent<HTMLButtonElement>,\n isFullscreen: boolean,\n ) => void;\n /* Labels used on the component. /\n labels?: Partial<typeof DEFAULT_LABELS>;\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 labels: labelsProps,\n carouselOptions,\n renderThumbnail,\n onChange,\n onFullscreen,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\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));\n }, [numSlides, controller]);\n\n const handleFullscreen: HvIconButtonProps[\"onClick\"] = (event) => {\n onFullscreen?.(event, !isFullscreen);\n setIsFullscreen((curr) => !curr);\n };\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 <HvIconButton\n title={isFullscreen ? labels.close : labels.fullscreen}\n onClick={handleFullscreen}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvIconButton>\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 labels={{\n backwards: labels.backwards,\n forwards: labels.forwards,\n }}\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={labels.backwards}\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondarySubtle\"\n aria-label={labels.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":[],"mappings":";;;;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AACZ;AAmDa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ,aAAa;AAAA,IACrB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACjC,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAC9C,QAAA,gBAAgB,OAAuB,IAAI;AACjD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEhD,QAAA,QAAQ,aAAa,SAAS;AAC9B,QAAA,kBAAkB,QAAQ,WAAW;AACrC,QAAA,mBAAmB,yBAAyB,QAAQ,WAAW;AACrE,QAAM,qBAAqB,0BAA0B;AAErD,QAAM,CAAC,cAAc,UAAU,IAAI,YAAY;AAAA,IAC7C,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,iBAAiB,cAAc;AAAA,EAAA;AAG3B,QAAA,YAAY,SAAS,MAAM,QAAQ;AAEnC,QAAA,iBAAiB,YAAY,MAAM;AACvC,gBAAY,WAAW;AAAA,EAAA,GACtB,CAAC,UAAU,CAAC;AAET,QAAA,aAAa,YAAY,MAAM;AACnC,gBAAY,WAAW;AAAA,EAAA,GACtB,CAAC,UAAU,CAAC;AAET,QAAA,eAAe,CAAC,UAAkB;AACtC,gBAAY,SAAS,KAAK;AAAA,EAAA;AAGtB,QAAA,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC,WAAY;AAEX,UAAA,aAAa,WAAW;AAC9B,qBAAiB,UAAU;AAG3B,kBAAc,SACV,iBAAiB,QAAQ,IACxB,UAAU,GAAG,eAAe;AAAA,MAC7B,UAAU;AAAA,MACV,OAAO;AAAA,IAAA,CACR;AAEH,eAAW,UAAU;AAAA,EAAA,GACpB,CAAC,YAAY,QAAQ,CAAC;AAEzB,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEN,eAAA,GAAG,UAAU,YAAY;AAEpC,WAAO,MAAM;AACA,iBAAA,IAAI,UAAU,YAAY;AAAA,IAAA;AAAA,EACvC,GACC,CAAC,YAAY,YAAY,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,eAAW,OAAO;AAClB,qBAAiB,CAAC,iBAAiB,MAAM,cAAc,SAAS,CAAC;AAAA,EAAA,GAChE,CAAC,WAAW,UAAU,CAAC;AAEpB,QAAA,mBAAiD,CAAC,UAAU;AACjD,mBAAA,OAAO,CAAC,YAAY;AACnB,oBAAA,CAAC,SAAS,CAAC,IAAI;AAAA,EAAA;AAG3B,QAAA,UAAU,YAAY,cAAA,KAAmB;AACzC,QAAA,UAAU,YAAY,cAAA,KAAmB;AAC/C,QAAM,YAAY,CAAC,CAAC,UAAU,CAAC,MAAM;AACrC,QAAM,iBAAiB,sBAAsB;AACvC,QAAA,SAAS,eAAe,SAAU,cAAc;AACtD,QAAM,cAAc;AACd,QAAA,iBAAiB,uBAAuB,MAAM,CAAC;AACrD,QAAM,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AACtC,QAAA,WAAW,gBAAgB,aAAa;AAE9C,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,oBAAoB,WAChB,IAAI,EAAE,UAAU,YAAY,KAAK,KAAK,QAAQ,EAAA,CAAG,IACjD,IAAI,EAAE,UAAU,YAAY;AAAA,MAClC;AAAA,MAEC,UAAA;AAAA,QAAA;AAAA,QACA,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,eAAe,OAAO,QAAQ,OAAO;AAAA,YAC5C,SAAS;AAAA,YACT,WAAW,QAAQ;AAAA,YAElB,UAAe,eAAA,oBAAC,OAAM,CAAA,CAAA,wBAAM,YAAW,EAAA;AAAA,UAAA;AAAA,QAC1C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,QAAM,WACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,SAAS,oBAAoB,cAAc;AAAA,MAC3C,QAAQ;AAAA,QACN,WAAW,OAAO;AAAA,QAClB,UAAU,OAAO;AAAA,MACnB;AAAA,IAAA;AAAA,EAAA;AAIJ,QAAM,aAAa,kBACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,kBAAkB,CAAC,KAAK,MAAM,aAAa,CAAC;AAAA,MAC5C;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,EAAE,GAAG;AAAA,QACd,CAAC,QAAQ,UAAU,GAAG;AAAA,MAAA,CACvB;AAAA,MACA,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,iCACE,cAAa,EAAA,SAAQ,UAAS,WAAW,QAAQ,OAC/C,UACH,MAAA,CAAA;AAAA,QAGD,oBAAoB,YAAY;AAAA,QAChC,uBAAuB,SAAS;AAAA,QAChC,qBAAqB,SAAS;AAAA,QAC/B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,MAAM;AAAA,cAC1B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAClB,CAAC,QAAQ,cAAc,GAAG;AAAA,YAAA,CAC3B;AAAA,YAEA,UAAA;AAAA,cAAA,mCACE,OAAI,EAAA,WAAW,QAAQ,kBACtB,8BAAC,QAAK,EAAA,WAAW,QAAQ,SACtB,aAAG,gBAAgB,CAAC,IAAI,SAAS,GACpC,CAAA,GACF;AAAA,cAGD,qBACC,qBAAC,OAAI,EAAA,WAAW,QAAQ,eACtB,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,UAAU,CAAC;AAAA,oBACX,SAAQ;AAAA,oBACR,cAAY,OAAO;AAAA,oBACnB,SAAS;AAAA,oBAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,kBAAA;AAAA,gBAC3B;AAAA,gBACA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,UAAU,CAAC;AAAA,oBACX,SAAQ;AAAA,oBACR,cAAY,OAAO;AAAA,oBACnB,SAAS;AAAA,oBAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,kBAAA;AAAA,gBAC1B;AAAA,cAAA,GACF;AAAA,cAGF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,OAAO,EAAE,OAAO;AAAA,kBAChB,WAAW,QAAQ;AAAA,kBAEnB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBAAkB,UAAS;AAAA,gBAAA;AAAA,cACrD;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,qBAAqB,YAAY;AAAA,QACjC,uBAAuB,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

package/dist/esm/Carousel/CarouselControls.js CHANGED Viewed

@@ -1,8 +1,13 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useLabels } from "../hooks/useLabels.js";
 import { useClasses } from "./Carousel.styles.js";
 import { HvButton } from "../Button/Button.js";
+const DEFAULT_LABELS = {
+  backwards: "Backwards",
+  forwards: "Forwards"
+};
 const HvCarouselControls = (props) => {
   const {
     classes: classesProp,
@@ -13,10 +18,12 @@ const HvCarouselControls = (props) => {
     canPrevious,
     canNext,
     actions,
+    labels: labelsProps,
     onPreviousClick,
     onNextClick
   } = useDefaultProps("HvCarouselControls", props);
   const { classes, cx } = useClasses(classesProp, false);
+  const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const selectedIndex = page || 0;
   const numSlides = pages;
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.controls, className), children: [
@@ -34,7 +41,7 @@ const HvCarouselControls = (props) => {
         {
           icon: true,
           disabled: !canPrevious,
-          "aria-label": "Backwards",
+          "aria-label": labels.backwards,
           onClick: onPreviousClick,
           children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
         }
@@ -45,7 +52,7 @@ const HvCarouselControls = (props) => {
         {
           icon: true,
           disabled: !canNext,
-          "aria-label": "Forwards",
+          "aria-label": labels.forwards,
           onClick: onNextClick,
           children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" })
         }

package/dist/esm/Carousel/CarouselControls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselControls.js","sources":["../../../src/Carousel/CarouselControls.tsx"],"sourcesContent":["import { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n extends HvBaseProps<HTMLDivElement>,\n Pick<HvPaginationProps, \"page\" \| \"pages\" \| \"canPrevious\" \| \"canNext\"> {\n showDots?: boolean;\n classes?: ExtractNames<typeof useClasses>;\n actions?: React.ReactNode;\n onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>;\n onNextClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n const {\n classes: classesProp,\n className,\n showDots,\n page,\n pages,\n canPrevious,\n canNext,\n actions,\n onPreviousClick,\n onNextClick,\n } = useDefaultProps(\"HvCarouselControls\", props);\n const { classes, cx } = useClasses(classesProp, false);\n\n const selectedIndex = page \|\| 0;\n const numSlides = pages;\n\n return (\n <div className={cx(classes.controls, className)}>\n {showDots ? (\n <div className={classes.dots}>\n {Array.from(Array(numSlides)).map((el, index) => (\n <span\n key={`circle-${index}`}\n className={cx(classes.dot, {\n [classes.dotSelected]: index === selectedIndex,\n })}\n />\n ))}\n </div>\n ) : (\n <>\n <HvButton\n icon\n disabled={!canPrevious}\n aria-label~~=\"Backwards~~\"\n onClick={onPreviousClick}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <div className={classes.pageCounter}>\n {`${selectedIndex + 1} / ${numSlides}`}\n </div>\n <HvButton\n icon\n disabled={!canNext}\n aria-label~~=\"Forwards~~\"\n onClick={onNextClick}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </>\n )}\n {actions}\n </div>\n );\n};\n"],"names":[],"mappings":"~~;;;;;AAmBa~~,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;~~AAErD~~,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAElB,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,UAAU,SAAS,GAC3C,UAAA;AAAA,IAAA,WACE,oBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAM,MAAA,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,KAAK;AAAA,UACzB,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,QAAA,CAClC;AAAA,MAAA;AAAA,MAHI,UAAU,KAAK;AAAA,IAKvB,CAAA,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,~~cAAW~~;AAAA,~~UACX~~,SAAS;AAAA,UAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAW,QAAQ,aACrB,aAAG,gBAAgB,CAAC,MAAM,SAAS,GACtC,CAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,~~cAAW~~;AAAA,~~UACX~~,SAAS;AAAA,UAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,GACF;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"CarouselControls.js","sources":["../../../src/Carousel/CarouselControls.tsx"],"sourcesContent":["import { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useClasses } from \"./Carousel.styles\";\n\nconst DEFAULT_LABELS = {\n backwards: \"Backwards\",\n forwards: \"Forwards\",\n};\n\ninterface HvCarouselControlsProps\n extends HvBaseProps<HTMLDivElement>,\n Pick<HvPaginationProps, \"page\" \| \"pages\" \| \"canPrevious\" \| \"canNext\"> {\n showDots?: boolean;\n classes?: ExtractNames<typeof useClasses>;\n actions?: React.ReactNode;\n onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>;\n onNextClick?: React.MouseEventHandler<HTMLButtonElement>;\n /** Labels used on the component. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n const {\n classes: classesProp,\n className,\n showDots,\n page,\n pages,\n canPrevious,\n canNext,\n actions,\n labels: labelsProps,\n onPreviousClick,\n onNextClick,\n } = useDefaultProps(\"HvCarouselControls\", props);\n const { classes, cx } = useClasses(classesProp, false);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const selectedIndex = page \|\| 0;\n const numSlides = pages;\n\n return (\n <div className={cx(classes.controls, className)}>\n {showDots ? (\n <div className={classes.dots}>\n {Array.from(Array(numSlides)).map((el, index) => (\n <span\n key={`circle-${index}`}\n className={cx(classes.dot, {\n [classes.dotSelected]: index === selectedIndex,\n })}\n />\n ))}\n </div>\n ) : (\n <>\n <HvButton\n icon\n disabled={!canPrevious}\n aria-label={labels.backwards}\n onClick={onPreviousClick}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <div className={classes.pageCounter}>\n {`${selectedIndex + 1} / ${numSlides}`}\n </div>\n <HvButton\n icon\n disabled={!canNext}\n aria-label={labels.forwards}\n onClick={onNextClick}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </>\n )}\n {actions}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,iBAAiB;AAAA,EACrB,WAAW;AAAA,EACX,UAAU;AACZ;AAca,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAElB,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,UAAU,SAAS,GAC3C,UAAA;AAAA,IAAA,WACE,oBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAM,MAAA,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,KAAK;AAAA,UACzB,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,QAAA,CAClC;AAAA,MAAA;AAAA,MAHI,UAAU,KAAK;AAAA,IAKvB,CAAA,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAY,OAAO;AAAA,UACnB,SAAS;AAAA,UAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAW,QAAQ,aACrB,aAAG,gBAAgB,CAAC,MAAM,SAAS,GACtC,CAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAY,OAAO;AAAA,UACnB,SAAS;AAAA,UAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,GACF;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/ColorPicker/Fields/Fields.js CHANGED Viewed

@@ -64,12 +64,9 @@ const Fields = (props) => {
     handleChange({ hex: value }, event);
   };
   const onChangeRbg = (event, value, colorPart) => {
-    if (colorPart === "r")
-      setInternalRed(Number(value));
-    if (colorPart === "g")
-      setInternalGreen(Number(value));
-    if (colorPart === "b")
-      setInternalBlue(Number(value));
+    if (colorPart === "r") setInternalRed(Number(value));
+    if (colorPart === "g") setInternalGreen(Number(value));
+    if (colorPart === "b") setInternalBlue(Number(value));
     handleChange(
       {
         r: colorPart === "r" ? Number(value) : rgb?.r,

package/dist/esm/ColorPicker/Fields/Fields.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvInput } from \"../../Input\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n const {\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerFields\", props);\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event,\n );\n } else if (data.r \|\| data.g \|\| data.b) {\n onChange(\n {\n r: data.r \|\| rgb?.r,\n g: data.g \|\| rgb?.g,\n b: data.b \|\| rgb?.b,\n source: \"rgb\",\n },\n event,\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" \| \"g\" \| \"b\",\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event,\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAgCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAChD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,GAAG;AAClD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK,CAAC;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK,CAAC;AACzD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK,CAAC;AAEjD,QAAA,cAAc,OAAyB,IAAI;AAC3C,QAAA,cAAc,OAAyB,IAAI;AAC3C,QAAA,gBAAgB,OAAyB,IAAI;AAC7C,QAAA,eAAe,OAAyB,IAAI;AAElD,YAAU,MAAM;AACV,QAAA,SAAS,kBAAkB,YAAY,SAAS;AAClD,qBAAe,GAAG;AAAA,IACpB;AAAA,EAAA,GACC,CAAC,GAAG,CAAC;AAER,YAAU,MAAM;AACV,QAAA,SAAS,kBAAkB,YAAY,SAAS;AAClD,qBAAe,KAAK,CAAC;AAAA,IACvB;AAEI,QAAA,SAAS,kBAAkB,cAAc,SAAS;AACpD,uBAAiB,KAAK,CAAC;AAAA,IACzB;AAEI,QAAA,SAAS,kBAAkB,aAAa,SAAS;AACnD,sBAAgB,KAAK,CAAC;AAAA,IACxB;AAAA,EAAA,GACC,CAAC,GAAG,CAAC;AAEF,QAAA,eAAe,CACnB,MAMA,UACG;AACH,QAAI,KAAK,OAAO,MAAM,WAAW,KAAK,GAAG,GAAG;AAC1C;AAAA,QACE;AAAA,UACE,KAAK,KAAK;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,MAAA;AAAA,IACF,WACS,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AACrC;AAAA,QACE;AAAA,UACE,GAAG,KAAK,KAAK,KAAK;AAAA,UAClB,GAAG,KAAK,KAAK,KAAK;AAAA,UAClB,GAAG,KAAK,KAAK,KAAK;AAAA,UAClB,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGI,QAAA,cAAc,CAAC,OAA+B,UAAkB;AACpE,mBAAe,KAAK;AACpB,iBAAa,EAAE,KAAK,MAAM,GAAG,KAAK;AAAA,EAAA;AAGpC,QAAM,cAAc,CAClB,OACA,OACA,cACG;AACH,QAAI,cAAc~~;AAAoB~~,~~qBAAA~~,OAAO,KAAK,CAAC;AACnD,QAAI,cAAc~~;AAAsB~~,~~uBAAA~~,OAAO,KAAK,CAAC;AACrD,QAAI,cAAc~~;AAAqB~~,~~sBAAA~~,OAAO,KAAK,CAAC;AAEpD;AAAA,MACE;AAAA,QACE,GAAG,cAAc,MAAM,OAAO,KAAK,IAAI,KAAK;AAAA,QAC5C,GAAG,cAAc,MAAM,OAAO,KAAK,IAAI,KAAK;AAAA,QAC5C,GAAG,cAAc,MAAM,OAAO,KAAK,IAAI,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAGF,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,QAAQ,SAAS,GAC1C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,aAAa,QAAQ,KAAK,EAAE;AAAA,QACnC,UAAU;AAAA,QACV,QAAQ,MAAM,eAAe,GAAG;AAAA,QAChC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,GAAG,WAAW;AAAA,QACrB,UAAU,CAAC,OAAO,UAAU,YAAY,OAAO,OAAO,GAAG;AAAA,QACzD,QAAQ,MAAM,eAAe,KAAK,CAAC;AAAA,QACnC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,GAAG,aAAa;AAAA,QACvB,UAAU,CAAC,OAAO,UAAU,YAAY,OAAO,OAAO,GAAG;AAAA,QACzD,QAAQ,MAAM,iBAAiB,KAAK,CAAC;AAAA,QACrC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,QACN,OAAO,GAAG,YAAY;AAAA,QACtB,UAAU,CAAC,OAAO,UAAU,YAAY,OAAO,OAAO,GAAG;AAAA,QACzD,QAAQ,MAAM,gBAAgB,KAAK,CAAC;AAAA,QACpC,cAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvInput } from \"../../Input\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n const {\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerFields\", props);\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event,\n );\n } else if (data.r \|\| data.g \|\| data.b) {\n onChange(\n {\n r: data.r \|\| rgb?.r,\n g: data.g \|\| rgb?.g,\n b: data.b \|\| rgb?.b,\n source: \"rgb\",\n },\n event,\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" \| \"g\" \| \"b\",\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event,\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/DatePicker/DatePicker.js CHANGED Viewed

@@ -150,19 +150,16 @@ const HvDatePicker = forwardRef(
       }
     };
     const handleToggle = (evt, open) => {
-      if (evt === null)
-        return;
+      if (evt === null) return;
       onToggle?.(evt, open);
       setCalendarOpen(open);
-      if (!open)
-        handleCalendarClose();
+      if (!open) handleCalendarClose();
     };
     const focusOnContainer = () => {
       focusTarget.current?.focus();
     };
     const handleDateChange = (event, newDate) => {
-      if (!isDate(newDate))
-        return;
+      if (!isDate(newDate)) return;
       const autoSave = !showActions && !rangeMode;
       if (rangeMode) {
         if (!startDate || startDate && endDate || newDate < startDate) {
@@ -186,19 +183,16 @@ const HvDatePicker = forwardRef(
       }
     };
     const handleInputDateChange = (event, newDate, position) => {
-      if (!isDate(newDate))
-        return;
+      if (!isDate(newDate)) return;
       if (!rangeMode) {
         handleDateChange(event, newDate);
         return;
       }
       if (position === "left") {
-        if (endDate)
-          setStartDate(newDate > endDate ? endDate : newDate);
+        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);
       } else if (position === "right") {
         if (!startDate) {
-          if (endDate)
-            setStartDate(newDate > endDate ? endDate : newDate);
+          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);
           return;
         }
         setEndDate(newDate < startDate ? startDate : newDate);

package/dist/esm/DatePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { isDate } from \"../Calendar/utils\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n /** Apply button label. /\n applyLabel: \"Apply\",\n /* Cancel button label. /\n cancelLabel: \"Cancel\",\n /* Clear button label. /\n clearLabel: \"Clear\",\n /* Invalid Date label. /\n invalidDateLabel: \"Invalid date\",\n};\n\n/* @deprecated use `HvFormStatus` instead /\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n extends Omit<HvFormElementProps, \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n \| \"disablePortal\"\n \| \"expanded\"\n \| \"defaultExpanded\"\n \| \"onToggle\"\n \| \"placeholder\"\n > {\n /\n Identifies the element that provides an error message for the date picker.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the value changes.\n /\n onChange?: (date?: Date, endDate?: Date) => void;\n /\n The callback fired when user clicks on cancel.\n /\n onCancel?: () => void;\n /\n The callback fired when user clicks on clear.\n /\n onClear?: () => void;\n /\n An object containing all the labels for the datepicker.\n /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /\n The initial value of the input when in single calendar mode.\n /\n value?: Date;\n /\n The initial value for the start date when in range mode.\n /\n startValue?: Date;\n /\n The initial value for the end date when in range mode.\n /\n endValue?: Date;\n /\n Flag informing if the the component should be in range mode or in single mode.\n /\n // TODO: remove this in favour of discriminated union\n rangeMode?: boolean;\n /\n The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n * Note this prop only affects the calendar when in `rangeMode`.\n /\n horizontalPlacement?: \"left\" \| \"right\";\n /\n The calendar locale. If undefined, it uses calendar default\n /\n locale?: string;\n /\n Controls if actions buttons are visible at the calendar.\n /\n showActions?: boolean;\n /\n Controls if clear button is visible at the calendar,\n * only works if showing actions or in range mode.\n /\n showClear?: boolean;\n /\n Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n /\n escapeWithReference?: boolean;\n /\n An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\n /\n An object containing props to be passed onto the baseDropdown.\n /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /\n Additional props passed to the HvCalendar component.\n /\n calendarProps?: Partial<HvCalendarProps>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvDatePickerClasses;\n}\n\n/\n A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n /\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n onChange,\n onCancel,\n onClear,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n\n labels: labelsProp,\n\n value,\n startValue,\n endValue,\n\n expanded,\n defaultExpanded,\n onToggle,\n rangeMode = false,\n startAdornment,\n horizontalPlacement = \"right\",\n locale: localeProp,\n showActions = false,\n showClear = false,\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n calendarProps,\n ...others\n } = useDefaultProps(\"HvDatePicker\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const locale = localeProp \|\| \"en-US\";\n\n const [calendarOpen, setCalendarOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n\n const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n rangeMode ? startValue : value,\n );\n const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n useEffect(() => {\n setStartDate(rangeMode ? startValue : value, true);\n setEndDate(endValue, true);\n }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n const endDateIsSet = useRef(false);\n endDateIsSet.current = endDate != null;\n\n useEffect(() => {\n if (startDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: endDateIsSet.current ? \"left\" : \"best\",\n year: startDate.getFullYear(),\n month: startDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, startDate]);\n\n useEffect(() => {\n if (endDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: \"right\",\n year: endDate.getFullYear(),\n month: endDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, endDate]);\n\n /\n Handles the `Apply` action. Both single and ranged modes are handled here.\n /\n const handleApply = () => {\n setStartDate(startDate, true);\n setEndDate(endDate ?? startDate, true);\n\n onChange?.(startDate, endDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (\n required &&\n (!isDate(startDate) \|\| (rangeMode && !isDate(endDate)))\n ) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleCancel = () => {\n rollbackStartDate();\n rollbackEndDate();\n\n onCancel?.();\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleClear = () => {\n setStartDate(undefined, false);\n setEndDate(undefined, false);\n onClear?.();\n };\n\n const handleCalendarClose = () => {\n if (rangeMode \|\| showActions) {\n handleCancel();\n }\n };\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n / \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n /\n if (evt === null) return;\n onToggle?.(evt, open);\n setCalendarOpen(open);\n if (!open) handleCalendarClose();\n };\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n if (!isDate(newDate)) return;\n\n const autoSave = !showActions && !rangeMode;\n\n if (rangeMode) {\n if (!startDate \|\| (startDate && endDate) \|\| newDate < startDate) {\n setStartDate(newDate);\n setEndDate(undefined);\n } else {\n setEndDate(newDate);\n }\n } else {\n setStartDate(newDate, autoSave);\n }\n\n if (autoSave) {\n onChange?.(newDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && !isDate(newDate)) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n }\n };\n\n const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n event,\n newDate,\n position,\n ) => {\n if (!isDate(newDate)) return;\n\n if (!rangeMode) {\n handleDateChange(event as any, newDate);\n return;\n }\n\n if (position === \"left\") {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n } else if (position === \"right\") {\n if (!startDate) {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n return;\n }\n setEndDate(newDate < startDate ? startDate : newDate);\n }\n };\n\n /\n Renders the container for the action elements.\n */\n const renderActions = () => (\n <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n {showClear && (\n <div className={classes.leftContainer}>\n <HvButton\n id={setId(id, \"action\", \"clear\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleClear}\n >\n {labels?.clearLabel}\n </HvButton>\n </div>\n )}\n <div className={classes.rightContainer}>\n <HvButton\n id={setId(id, \"action\", \"apply\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleApply}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"action\", \"cancel\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleCancel}\n >\n {labels?.cancelLabel}\n </HvButton>\n </div>\n </HvActionBar>\n );\n\n const renderInput = (dateString: string) => {\n return (\n <HvTypography\n className={cx(classes.inputText, { [classes.dateText]: dateString })}\n variant=\"label\"\n >\n {dateString \|\| placeholder \|\| \"\"}\n </HvTypography>\n );\n };\n const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n value={dateValue}\n status={validationState}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n readOnly={readOnly}\n {...others}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={dropdownForkedRef}\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n readOnly={readOnly}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={calendarOpen}\n onToggle={handleToggle}\n onClickOutside={handleCalendarClose}\n onContainerCreation={focusOnContainer}\n placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n adornment={\n <Calendar\n className={classes.icon}\n color={disabled ? \"secondary_80\" : undefined}\n />\n }\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n {...otherDropdownProps}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <HvCalendar\n id={setId(id, \"calendar\")}\n startAdornment={startAdornment}\n onChange={handleDateChange}\n onInputChange={handleInputDateChange}\n onVisibleDateChange={(_event, type, month, target) => {\n dispatchAction({ type, target, month });\n }}\n locale={locale}\n {...visibleDate}\n {...calendarProps}\n invalidDateLabel={labels?.invalidDateLabel}\n />\n {(rangeMode \|\| showActions) && renderActions()}\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={cx(classes.error)}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { isDate } from \"../Calendar/utils\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n /** Apply button label. /\n applyLabel: \"Apply\",\n /* Cancel button label. /\n cancelLabel: \"Cancel\",\n /* Clear button label. /\n clearLabel: \"Clear\",\n /* Invalid Date label. /\n invalidDateLabel: \"Invalid date\",\n};\n\n/* @deprecated use `HvFormStatus` instead /\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n extends Omit<HvFormElementProps, \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n \| \"disablePortal\"\n \| \"expanded\"\n \| \"defaultExpanded\"\n \| \"onToggle\"\n \| \"placeholder\"\n > {\n /\n Identifies the element that provides an error message for the date picker.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the value changes.\n /\n onChange?: (date?: Date, endDate?: Date) => void;\n /\n The callback fired when user clicks on cancel.\n /\n onCancel?: () => void;\n /\n The callback fired when user clicks on clear.\n /\n onClear?: () => void;\n /\n An object containing all the labels for the datepicker.\n /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /\n The initial value of the input when in single calendar mode.\n /\n value?: Date;\n /\n The initial value for the start date when in range mode.\n /\n startValue?: Date;\n /\n The initial value for the end date when in range mode.\n /\n endValue?: Date;\n /\n Flag informing if the the component should be in range mode or in single mode.\n /\n // TODO: remove this in favour of discriminated union\n rangeMode?: boolean;\n /\n The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n * Note this prop only affects the calendar when in `rangeMode`.\n /\n horizontalPlacement?: \"left\" \| \"right\";\n /\n The calendar locale. If undefined, it uses calendar default\n /\n locale?: string;\n /\n Controls if actions buttons are visible at the calendar.\n /\n showActions?: boolean;\n /\n Controls if clear button is visible at the calendar,\n * only works if showing actions or in range mode.\n /\n showClear?: boolean;\n /\n Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n /\n escapeWithReference?: boolean;\n /\n An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\n /\n An object containing props to be passed onto the baseDropdown.\n /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /\n Additional props passed to the HvCalendar component.\n /\n calendarProps?: Partial<HvCalendarProps>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvDatePickerClasses;\n}\n\n/\n A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n /\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n onChange,\n onCancel,\n onClear,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n\n labels: labelsProp,\n\n value,\n startValue,\n endValue,\n\n expanded,\n defaultExpanded,\n onToggle,\n rangeMode = false,\n startAdornment,\n horizontalPlacement = \"right\",\n locale: localeProp,\n showActions = false,\n showClear = false,\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n calendarProps,\n ...others\n } = useDefaultProps(\"HvDatePicker\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const locale = localeProp \|\| \"en-US\";\n\n const [calendarOpen, setCalendarOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n\n const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n rangeMode ? startValue : value,\n );\n const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n useEffect(() => {\n setStartDate(rangeMode ? startValue : value, true);\n setEndDate(endValue, true);\n }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n const endDateIsSet = useRef(false);\n endDateIsSet.current = endDate != null;\n\n useEffect(() => {\n if (startDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: endDateIsSet.current ? \"left\" : \"best\",\n year: startDate.getFullYear(),\n month: startDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, startDate]);\n\n useEffect(() => {\n if (endDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: \"right\",\n year: endDate.getFullYear(),\n month: endDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, endDate]);\n\n /\n Handles the `Apply` action. Both single and ranged modes are handled here.\n /\n const handleApply = () => {\n setStartDate(startDate, true);\n setEndDate(endDate ?? startDate, true);\n\n onChange?.(startDate, endDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (\n required &&\n (!isDate(startDate) \|\| (rangeMode && !isDate(endDate)))\n ) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleCancel = () => {\n rollbackStartDate();\n rollbackEndDate();\n\n onCancel?.();\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleClear = () => {\n setStartDate(undefined, false);\n setEndDate(undefined, false);\n onClear?.();\n };\n\n const handleCalendarClose = () => {\n if (rangeMode \|\| showActions) {\n handleCancel();\n }\n };\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n / \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n /\n if (evt === null) return;\n onToggle?.(evt, open);\n setCalendarOpen(open);\n if (!open) handleCalendarClose();\n };\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n if (!isDate(newDate)) return;\n\n const autoSave = !showActions && !rangeMode;\n\n if (rangeMode) {\n if (!startDate \|\| (startDate && endDate) \|\| newDate < startDate) {\n setStartDate(newDate);\n setEndDate(undefined);\n } else {\n setEndDate(newDate);\n }\n } else {\n setStartDate(newDate, autoSave);\n }\n\n if (autoSave) {\n onChange?.(newDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && !isDate(newDate)) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n }\n };\n\n const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n event,\n newDate,\n position,\n ) => {\n if (!isDate(newDate)) return;\n\n if (!rangeMode) {\n handleDateChange(event as any, newDate);\n return;\n }\n\n if (position === \"left\") {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n } else if (position === \"right\") {\n if (!startDate) {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n return;\n }\n setEndDate(newDate < startDate ? startDate : newDate);\n }\n };\n\n /\n Renders the container for the action elements.\n */\n const renderActions = () => (\n <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n {showClear && (\n <div className={classes.leftContainer}>\n <HvButton\n id={setId(id, \"action\", \"clear\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleClear}\n >\n {labels?.clearLabel}\n </HvButton>\n </div>\n )}\n <div className={classes.rightContainer}>\n <HvButton\n id={setId(id, \"action\", \"apply\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleApply}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"action\", \"cancel\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleCancel}\n >\n {labels?.cancelLabel}\n </HvButton>\n </div>\n </HvActionBar>\n );\n\n const renderInput = (dateString: string) => {\n return (\n <HvTypography\n className={cx(classes.inputText, { [classes.dateText]: dateString })}\n variant=\"label\"\n >\n {dateString \|\| placeholder \|\| \"\"}\n </HvTypography>\n );\n };\n const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n value={dateValue}\n status={validationState}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n readOnly={readOnly}\n {...others}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={dropdownForkedRef}\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n readOnly={readOnly}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={calendarOpen}\n onToggle={handleToggle}\n onClickOutside={handleCalendarClose}\n onContainerCreation={focusOnContainer}\n placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n adornment={\n <Calendar\n className={classes.icon}\n color={disabled ? \"secondary_80\" : undefined}\n />\n }\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n {...otherDropdownProps}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <HvCalendar\n id={setId(id, \"calendar\")}\n startAdornment={startAdornment}\n onChange={handleDateChange}\n onInputChange={handleInputDateChange}\n onVisibleDateChange={(_event, type, month, target) => {\n dispatchAction({ type, target, month });\n }}\n locale={locale}\n {...visibleDate}\n {...calendarProps}\n invalidDateLabel={labels?.invalidDateLabel}\n />\n {(rangeMode \|\| showActions) && renderActions()}\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={cx(classes.error)}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/Dialog/Dialog.js CHANGED Viewed

@@ -28,8 +28,7 @@ const HvDialog = (props) => {
   const { classes, css, cx } = useClasses(classesProp);
   const { rootId } = useTheme();
   const measuredRef = useCallback(() => {
-    if (!firstFocusable)
-      return;
+    if (!firstFocusable) return;
     const element = document.getElementById(firstFocusable);
     element?.focus();
   }, [firstFocusable]);
@@ -45,8 +44,7 @@ const HvDialog = (props) => {
       open,
       fullScreen: fullscreen,
       onClose: (event, reason) => {
-        if (disableBackdropClick)
-          return;
+        if (disableBackdropClick) return;
         onClose?.(event, reason);
       },
       slotProps: {

package/dist/esm/Dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" \| \"classes\" \| \"open\"> {\n /** Current state of the Dialog. /\n open?: boolean;\n /* Callback fired when the component requests to be closed. /\n onClose?: (event: ~~any,~~ reason?: \"escapeKeyDown\" \| \"backdropClick\") => void;\n /* @inheritdoc /\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /* @inheritdoc /\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /\n Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n /\n firstFocusable?: string;\n /* Title for the button close. /\n buttonTitle?: string;\n /* Set the dialog to fullscreen mode. /\n fullscreen?: boolean;\n /* Prevent closing the dialog when clicking on the backdrop. /\n disableBackdropClick?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDialogClasses;\n /* Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. /\n variant?: \"success\" \| \"error\" \| \"warning\";\n /* @ignore /\n ref?: MuiDialogProps[\"ref\"];\n /* @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n return (\n <MuiDialog\n container={getElementById(rootId)}\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n },\n ),\n },\n }}\n {...others}\n >\n <HvIconButton\n title={buttonTitle}\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close />\n </HvIconButton>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;~~AAiDa~~,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;~~AAAgB;~~AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;~~AAGtB~~,~~YAAA~~;~~AAAsB;~~AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,~~UAAU~~,UAAU,OAAO,MAAS;AAAA,~~YAE9C~~,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" \| \"classes\" \| \"open\"> {\n /** Current state of the Dialog. /\n open?: boolean;\n /* Callback fired when the component requests to be closed. /\n onClose?: (\n event: React.MouseEvent<HTMLButtonElement> \| {},\n reason?: \"escapeKeyDown\" \| \"backdropClick\",\n ) => void;\n /* @inheritdoc /\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /* @inheritdoc /\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /\n Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n /\n firstFocusable?: string;\n /* Title for the button close. /\n buttonTitle?: string;\n /* Set the dialog to fullscreen mode. /\n fullscreen?: boolean;\n /* Prevent closing the dialog when clicking on the backdrop. /\n disableBackdropClick?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDialogClasses;\n /* Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. /\n variant?: \"success\" \| \"error\" \| \"warning\";\n /* @ignore /\n ref?: MuiDialogProps[\"ref\"];\n /* @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n return (\n <MuiDialog\n container={getElementById(rootId)}\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n },\n ),\n },\n }}\n {...others}\n >\n <HvIconButton\n title={buttonTitle}\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n onClose?.(event, undefined)\n }\n >\n <Close />\n </HvIconButton>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAoDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UACR,UAAU,OAAO,MAAS;AAAA,YAG5B,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Drawer/Drawer.js CHANGED Viewed

@@ -23,8 +23,7 @@ const HvDrawer = (props) => {
   } = useDefaultProps("HvDrawer", props);
   const { classes, cx } = useClasses(classesProp);
   const handleOnClose = (event, reason) => {
-    if (reason === "backdropClick" && disableBackdropClick)
-      return;
+    if (reason === "backdropClick" && disableBackdropClick) return;
     onClose?.(event, reason);
   };
   const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;

package/dist/esm/Drawer/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n Id to be applied to the root node.\n /\n id?: string;\n /\n A Jss Object used to override or extend the styles applied.\n /\n classes?: HvDrawerClasses;\n /\n Components of the Drawer.\n /\n children?: React.ReactNode;\n /\n Current state of the Drawer.\n /\n open?: boolean;\n /\n Function executed on close.\n * Extended from Modal from material-ui\n \n /\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" \| \"backdropClick\",\n ) => void;\n /*\n The side the drawer opens from.\n /\n anchor?: \"left\" \| \"top\" \| \"right\" \| \"bottom\";\n /\n Title for the button close.\n /\n buttonTitle?: string;\n /\n Show backdrop when drawer is open.\n * @deprecated Use `hideBackdrop` instead.\n /\n showBackdrop?: boolean;\n /\n Prevent closing the dialog when clicking on the backdrop.\n /\n disableBackdropClick?: boolean;\n /* @ignore /\n ref?: MuiDrawerProps[\"ref\"];\n /* @ignore /\n component?: MuiDrawerProps[\"component\"];\n}\n\n/\n The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n const {\n className,\n classes: classesProp,\n id,\n children,\n open,\n onClose,\n anchor = \"right\",\n buttonTitle = \"Close\",\n showBackdrop = true,\n hideBackdrop,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDrawer\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n event: React.SyntheticEvent,\n reason,\n ) => {\n if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n onClose?.(event, reason);\n };\n\n const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n return (\n <MuiDrawer\n className={cx(classes.root, className)}\n id={id}\n anchor={anchor}\n open={open}\n classes={{\n paper: classes.paper,\n }}\n hideBackdrop={shouldHideBackdrop}\n {...(!shouldHideBackdrop && {\n slotProps: {\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n },\n })}\n onClose={handleOnClose}\n {...others}\n >\n <HvIconButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={onClose}\n title={buttonTitle}\n >\n <Close />\n </HvIconButton>\n {children}\n </MuiDrawer>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAuEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;~~AACH~~,~~QAAI~~,WAAW,mBAAmB;~~AAAsB;~~AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1	+ {"version":3,"file":"Drawer.js","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n Id to be applied to the root node.\n /\n id?: string;\n /\n A Jss Object used to override or extend the styles applied.\n /\n classes?: HvDrawerClasses;\n /\n Components of the Drawer.\n /\n children?: React.ReactNode;\n /\n Current state of the Drawer.\n /\n open?: boolean;\n /\n Function executed on close.\n * Extended from Modal from material-ui\n \n /\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" \| \"backdropClick\",\n ) => void;\n /*\n The side the drawer opens from.\n /\n anchor?: \"left\" \| \"top\" \| \"right\" \| \"bottom\";\n /\n Title for the button close.\n /\n buttonTitle?: string;\n /\n Show backdrop when drawer is open.\n * @deprecated Use `hideBackdrop` instead.\n /\n showBackdrop?: boolean;\n /\n Prevent closing the dialog when clicking on the backdrop.\n /\n disableBackdropClick?: boolean;\n /* @ignore /\n ref?: MuiDrawerProps[\"ref\"];\n /* @ignore /\n component?: MuiDrawerProps[\"component\"];\n}\n\n/\n The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n const {\n className,\n classes: classesProp,\n id,\n children,\n open,\n onClose,\n anchor = \"right\",\n buttonTitle = \"Close\",\n showBackdrop = true,\n hideBackdrop,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDrawer\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n event: React.SyntheticEvent,\n reason,\n ) => {\n if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n onClose?.(event, reason);\n };\n\n const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n return (\n <MuiDrawer\n className={cx(classes.root, className)}\n id={id}\n anchor={anchor}\n open={open}\n classes={{\n paper: classes.paper,\n }}\n hideBackdrop={shouldHideBackdrop}\n {...(!shouldHideBackdrop && {\n slotProps: {\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n },\n })}\n onClose={handleOnClose}\n {...others}\n >\n <HvIconButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={onClose}\n title={buttonTitle}\n >\n <Close />\n </HvIconButton>\n {children}\n </MuiDrawer>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAuEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACC,QAAA,WAAW,mBAAmB,qBAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/DropDownMenu/DropDownMenu.js CHANGED Viewed

@@ -67,8 +67,7 @@ const HvDropDownMenu = (props) => {
   const handleKeyDown = (event) => {
     if (isKey(event, "Tab")) {
       const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
-      if (node)
-        setTimeout(() => node.focus(), 0);
+      if (node) setTimeout(() => node.focus(), 0);
       handleClose(event);
     }
     event.preventDefault();
@@ -119,8 +118,7 @@ const HvDropDownMenu = (props) => {
           selectable: false,
           condensed,
           onClick: (event, item) => {
-            if (!keepOpened)
-              handleClose(event);
+            if (!keepOpened) handleClose(event);
             onClick?.(event, item);
           },
           onKeyDown: handleKeyDown,

package/dist/esm/DropDownMenu/DropDownMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ~~ChangeEvent,~~ forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (event: Event, open: boolean) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /\n The variant to be used in the header.\n * @deprecated Use `variant` instead\n /\n category?: HvButtonVariant;\n /* The variant to be used in the header. /\n variant?: HvButtonVariant;\n /* Button size. /\n size?: HvButtonSize;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n (props, ref) => {\n const { open, children, ...others } = props;\n\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n aria-expanded={open}\n aria-label=\"Dropdown menu\" // TODO - translate\n aria-haspopup=\"menu\"\n placement={popperPlacement as Placement}\n {...others}\n >\n {children}\n </HvDropdownButton>\n );\n },\n);\n\n/\n A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event ~~as any~~, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event ~~as any~~);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef,\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HeaderComponent\n id={setId(id, \"icon-button\")}\n disabled={disabled}\n className={cx(classes.icon, {\n [classes.iconSelected]: open,\n })}\n size={size}\n variant={variant ?? category}\n open={open}\n >\n {icon \|\| <MoreOptionsVertical role=\"presentation\" />}\n </HeaderComponent>\n }\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;~~AAsEA~~,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,MAAM,UAAU,GAAG,WAAW;AAEhC,UAAA,EAAE,oBAAoB;AAG1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,cAAW;AAAA,QACX,iBAAc;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAKa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,MAAM;AAC7B,QAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAEtD,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,~~CAAC~~,~~UAAuB~~;~~AAE1C~~,YAAQ,KAAK;AACb,eAAW,~~OAAc~~,KAAK;AAAA,EAAA;~~AAI1B~~,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;~~AAC5D~~,~~UAAA;AAAM~~,~~mBAAW~~,MAAM,KAAK,~~MAAM~~,~~GAAG~~,CAAC;AAC1C,kBAAY,~~KAAY~~;AAAA,~~IAC1B~~;AACA,UAAM,eAAe;AAAA,EAAA;AAGjB,QAAA,oBAAgE,CACpE,iBACG;AACH,kBAAc,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,EAAA;AAGrD,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,SAAS;AAAA,MAC1C,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,MACrB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,WACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,aAAa;AAAA,UAC3B;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,YAAY,GAAG;AAAA,UAAA,CACzB;AAAA,UACD;AAAA,UACA,SAAS,WAAW;AAAA,UACpB;AAAA,UAEC,UAAQ,QAAA,oBAAC,qBAAoB,EAAA,MAAK,gBAAe;AAAA,QAAA;AAAA,MACpD;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAC,oBAAA,SAAA,EAAQ,WAAW,QAAQ,cAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;~~AACxB~~,~~gBAAI~~,CAAC~~;AAAY~~,~~0BAAY~~,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\" \| \"onToggle\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (\n event:\n \| Event\n \| React.KeyboardEvent<HTMLUListElement>\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n open: boolean,\n ) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /\n The variant to be used in the header.\n * @deprecated Use `variant` instead\n /\n category?: HvButtonVariant;\n /* The variant to be used in the header. /\n variant?: HvButtonVariant;\n /* Button size. /\n size?: HvButtonSize;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n (props, ref) => {\n const { open, children, ...others } = props;\n\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n aria-expanded={open}\n aria-label=\"Dropdown menu\" // TODO - translate\n aria-haspopup=\"menu\"\n placement={popperPlacement as Placement}\n {...others}\n >\n {children}\n </HvDropdownButton>\n );\n },\n);\n\n/\n A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (\n event:\n \| React.KeyboardEvent<HTMLUListElement>\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n ) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef,\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HeaderComponent\n id={setId(id, \"icon-button\")}\n disabled={disabled}\n className={cx(classes.icon, {\n [classes.iconSelected]: open,\n })}\n size={size}\n variant={variant ?? category}\n open={open}\n >\n {icon \|\| <MoreOptionsVertical role=\"presentation\" />}\n </HeaderComponent>\n }\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Dropdown/Dropdown.js CHANGED Viewed

@@ -143,8 +143,7 @@ const HvDropdown = forwardRef(
           return "valid";
         });
       }
-      if (notifyChanges)
-        onChange?.(multiSelect ? selected : selected[0]);
+      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);
       if (toggle) {
         handleToggle(void 0, false);
         dropdownHeaderRef.current?.focus({ preventScroll: true });