npm - @hitachivantara/uikit-react-core - Versions diffs - 5.32.0 → 5.33.0 - Mend

@hitachivantara/uikit-react-core 5.32.0 → 5.33.0

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

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useTheme } from "@mui/material/styles";
 import { useMediaQuery } from "@mui/material";
 import { theme } from "@hitachivantara/uikit-styles";
 import { CurrentStep } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useUniqueId } from "../../../hooks/useUniqueId.js";
 import { useTheme as useTheme$1 } from "../../../hooks/useTheme.js";
 import { isKey } from "../../../utils/keyboardUtils.js";
@@ -49,7 +49,7 @@ const HvScrollToHorizontal = (props) => {
   const handleSelection = (event, value, index) => {
     event.preventDefault();
     const wrappedOnChange = () => {
-      onChange == null ? void 0 : onChange(event, index);
+      onChange?.(event, index);
     };
     setScrollTo(event, value, index, wrappedOnChange);
   };
@@ -62,18 +62,18 @@ const HvScrollToHorizontal = (props) => {
     return /* @__PURE__ */ jsx("div", { className: classes.notSelectedRoot, children: /* @__PURE__ */ jsx("div", { className: classes.notSelected }) });
   }, [classes.notSelectedRoot, classes.notSelected]);
   const Selected = useCallback(() => {
-    return /* @__PURE__ */ jsx(CurrentStep, { height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, className: classes.selected });
-  }, [classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
+    return /* @__PURE__ */ jsx(CurrentStep, { height: activeTheme?.scrollTo.dotSelectedSize, width: activeTheme?.scrollTo.dotSelectedSize, className: classes.selected });
+  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);
   const tabs = options.map((option, index) => {
     const selected = selectedIndex === index;
     const tooltipWrapper = tooltipWrappers[index];
     return /* @__PURE__ */ jsxs(HvHorizontalScrollListItem, { id: setId(elementId, `item-${index}`), onClick: (event) => {
       handleSelection(event, option.value, index);
-      onClick == null ? void 0 : onClick(event, index);
+      onClick?.(event, index);
     }, onKeyDown: (event) => {
       if (isKey(event, "Enter") === true) {
         handleSelection(event, option.value, index);
-        onEnter == null ? void 0 : onEnter(event, index);
+        onEnter?.(event, index);
       }
     }, tooltipWrapper, selected, children: [
       /* @__PURE__ */ jsx("p", { children: option.label }),
@@ -86,7 +86,7 @@ const HvScrollToHorizontal = (props) => {
     marginBottom: 0,
     marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
     marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
-    backgroundColor: hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
+    backgroundColor: hexToRgbA(colors?.atmo2, activeTheme?.scrollTo.backgroundColorOpacity)
   }), classes.root, {
     [classes.positionSticky]: position === "sticky",
     [classes.positionFixed]: position === "fixed"

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" \| \"fixed\" \| \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToHorizontalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Horizontal scroll to. /\n position?: HvScrollToHorizontalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToHorizontalClasses;\n}\n\n/\n The horizontal scroll to element can be used to quickly navigate in a page.\n /\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <div className={classes.notSelectedRoot}>\n <div className={classes.notSelected} />\n </div>\n );\n }, [classes.notSelectedRoot, classes.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={classes.selected}\n />\n );\n }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ol\n className={cx(\n css({\n width:\n position === \"fixed\" && (upMd \|\| downSm)\n ? `calc(100% - 2${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n classes.root,\n {\n [classes.positionSticky]: position === \"sticky\",\n [classes.positionFixed]: position === \"fixed\",\n },\n className\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","notSelected","Selected","scrollTo","dotSelectedSize","selected","tabs","tooltipWrapper","setId","isKey","key","width","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
1	+ {"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" \| \"fixed\" \| \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToHorizontalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Horizontal scroll to. /\n position?: HvScrollToHorizontalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToHorizontalClasses;\n}\n\n/\n The horizontal scroll to element can be used to quickly navigate in a page.\n /\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <div className={classes.notSelectedRoot}>\n <div className={classes.notSelected} />\n </div>\n );\n }, [classes.notSelectedRoot, classes.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={classes.selected}\n />\n );\n }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ol\n className={cx(\n css({\n width:\n position === \"fixed\" && (upMd \|\| downSm)\n ? `calc(100% - 2${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n classes.root,\n {\n [classes.positionSticky]: position === \"sticky\",\n [classes.positionFixed]: position === \"fixed\",\n },\n className\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","notSelected","Selected","scrollTo","dotSelectedSize","selected","tabs","tooltipWrapper","setId","isKey","key","width","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js CHANGED Viewed

@@ -43,7 +43,7 @@ const HvScrollToVertical = (props) => {
   const handleSelection = (event, value, index) => {
     event.preventDefault();
     const wrappedOnChange = () => {
-      onChange == null ? void 0 : onChange(event, index);
+      onChange?.(event, index);
     };
     setScrollTo(event, value, index, wrappedOnChange);
   };
@@ -57,16 +57,16 @@ const HvScrollToVertical = (props) => {
     const tooltipWrapper = tooltipWrappers[index];
     return /* @__PURE__ */ jsx(HvVerticalScrollListItem, { id: setId(elementId, `item-${index}`), onClick: (event) => {
       handleSelection(event, option.value, index);
-      onClick == null ? void 0 : onClick(event, index);
+      onClick?.(event, index);
     }, onKeyDown: (event) => {
       if (isKey(event, "Enter") === true) {
         handleSelection(event, option.value, index);
-        onEnter == null ? void 0 : onEnter(event, index);
+        onEnter?.(event, index);
       }
     }, tooltipWrapper, selected, "aria-label": option.label }, option.key || option.label);
   });
   const positionOffset = calculateOffset(options.length);
-  const backgroundColor = hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity);
+  const backgroundColor = hexToRgbA(colors?.atmo2, activeTheme?.scrollTo.backgroundColorOpacity);
   return /* @__PURE__ */ jsx("ol", { className: cx(css({
     backgroundColor
   }), classes.root, {

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n staticClasses,\n useClasses,\n calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n HvScrollToTooltipPositions,\n HvScrollToVerticalOption,\n HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToVerticalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Vertical scroll to. /\n position?: HvScrollToVerticalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToVerticalClasses;\n}\n\n/\n The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n style,\n ...others\n } = useDefaultProps(\"HvScrollToVertical\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n aria-label={option.label}\n />\n );\n });\n\n const positionOffset = calculateOffset(options.length);\n const backgroundColor = hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n );\n\n return (\n <ol\n className={cx(\n css({ backgroundColor }),\n classes.root,\n {\n [classes.positionFixed]: position === \"fixed\",\n [classes.positionAbsolute]: position === \"absolute\",\n },\n className\n )}\n style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","setId","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top"],"mappings":";;;;;;;;;;;;;~~AA0EaA~~,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,~~2CAAWyB~~,OAAOE;~~AAAAA~~,~~IAAK~~;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAG1C,WAAA,oBAAC,0BACC,EAAA,IAAIY,MAAMpB,WAAY,QAAOQ,KAAM,EAAC,GACpC,SAAUF,CAAU,UAAA;AACFA,sBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,~~yCAAUwB~~,OAAOE;~~AAAAA~~,~~IAAK~~,GAExB,WAAYF,CAAU,UAAA;AACpB,UAAIe,MAAMf,OAAO,OAAO,MAAM,MAAM;AAClBA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,~~2CAAUuB~~,OAAOE;~~AAAAA~~,~~MACnB~~;AAAA,IACF,GACA,gBACA,UAEA,cAAYM,OAAOE,SADdF,OAAOQ,OAAOR,OAAOE,KAE1B;AAAA,EAAA,CAEL;AAEKO,QAAAA,iBAAiBC,gBAAgBrC,QAAQsC,MAAM;AACrD,QAAMC,kBAAkBC,UACtB7B,~~iCAAQ8B~~,OACR/B,~~2CAAagC~~,SAASC,sBACxB;AAEA,SACG,oBAAA,MAAA,EACC,WAAWnC,GACTD,IAAI;AAAA,IAAEgC;AAAAA,EAAAA,CAAiB,GACvBzC,QAAQ8C,MACR;AAAA,IACE,CAAC9C,QAAQ+C,aAAa,GAAG3C,aAAa;AAAA,IACtC,CAACJ,QAAQgD,gBAAgB,GAAG5C,aAAa;AAAA,EAAA,GAE3CL,SACF,GACA,OAAO;AAAA,IAAEkD,KAAM,cAAaX,cAAe;AAAA,IAAM,GAAGhC;AAAAA,EAAAA,GACpD,IAAIS,WACAR,GAAAA,QAEHyB,UACH,KAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"ScrollToVertical.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n staticClasses,\n useClasses,\n calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n HvScrollToTooltipPositions,\n HvScrollToVerticalOption,\n HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToVerticalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Vertical scroll to. /\n position?: HvScrollToVerticalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToVerticalClasses;\n}\n\n/\n The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n const {\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes: classesProp,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n style,\n ...others\n } = useDefaultProps(\"HvScrollToVertical\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme, colors } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n aria-label={option.label}\n />\n );\n });\n\n const positionOffset = calculateOffset(options.length);\n const backgroundColor = hexToRgbA(\n colors?.atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n );\n\n return (\n <ol\n className={cx(\n css({ backgroundColor }),\n classes.root,\n {\n [classes.positionFixed]: position === \"fixed\",\n [classes.positionAbsolute]: position === \"absolute\",\n },\n className\n )}\n style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","setId","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top"],"mappings":";;;;;;;;;;;;;AA2EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEnCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,iBAAWyB,OAAOE,KAAK;AAAA,IAAA;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAG1C,WAAA,oBAAC,0BACC,EAAA,IAAIY,MAAMpB,WAAY,QAAOQ,KAAM,EAAC,GACpC,SAAUF,CAAU,UAAA;AACFA,sBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,gBAAUwB,OAAOE,KAAK;AAAA,IAAA,GAExB,WAAYF,CAAU,UAAA;AACpB,UAAIe,MAAMf,OAAO,OAAO,MAAM,MAAM;AAClBA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,kBAAUuB,OAAOE,KAAK;AAAA,MACxB;AAAA,IACF,GACA,gBACA,UAEA,cAAYM,OAAOE,SADdF,OAAOQ,OAAOR,OAAOE,KAE1B;AAAA,EAAA,CAEL;AAEKO,QAAAA,iBAAiBC,gBAAgBrC,QAAQsC,MAAM;AACrD,QAAMC,kBAAkBC,UACtB7B,QAAQ8B,OACR/B,aAAagC,SAASC,sBACxB;AAEA,SACG,oBAAA,MAAA,EACC,WAAWnC,GACTD,IAAI;AAAA,IAAEgC;AAAAA,EAAAA,CAAiB,GACvBzC,QAAQ8C,MACR;AAAA,IACE,CAAC9C,QAAQ+C,aAAa,GAAG3C,aAAa;AAAA,IACtC,CAACJ,QAAQgD,gBAAgB,GAAG5C,aAAa;AAAA,EAAA,GAE3CL,SACF,GACA,OAAO;AAAA,IAAEkD,KAAM,cAAaX,cAAe;AAAA,IAAM,GAAGhC;AAAAA,EAAAA,GACpD,IAAIS,WACAR,GAAAA,QAEHyB,UACH,KAAA,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js CHANGED Viewed

@@ -28,7 +28,7 @@ const HvVerticalScrollListItem = (props) => {
   const labelId = setId(id, "label");
   const buttonId = setId(id, "button");
   const Tooltip = tooltipWrapper;
-  const icon = selected ? /* @__PURE__ */ jsx(CurrentStep, { height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize, width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize }) : /* @__PURE__ */ jsx("div", { className: cx(classes.notSelected) });
+  const icon = selected ? /* @__PURE__ */ jsx(CurrentStep, { height: activeTheme?.scrollTo.dotSelectedSize, width: activeTheme?.scrollTo.dotSelectedSize }) : /* @__PURE__ */ jsx("div", { className: cx(classes.notSelected) });
   return /* @__PURE__ */ jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsx("div", { id: buttonId, role: "button", tabIndex: 0, onClick, onKeyDown, className: classes.button, "aria-label": ariaLabel, "aria-labelledby": labelId, ...others, children: /* @__PURE__ */ jsx(Tooltip, { id: labelId, className: classes.text, variant, children: icon }) }) });
 };
 export {

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n /** A function component that renders a typography wrapped with a tooltip. /\n tooltipWrapper: React.FunctionComponent<{\n id?: string;\n className?: string;\n variant?: HvTypographyProps[\"variant\"];\n children?: React.ReactNode;\n }>;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvVerticalScrollListItemClasses;\n /* Whether the element is selected. /\n selected?: boolean;\n /* The function to be executed when the element is clicked. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n /* The function to be executed when the element is clicked. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/\n HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n props: HvVerticalScrollListItemProps\n) => {\n const {\n id,\n className,\n classes: classesProp,\n selected,\n \"aria-label\": ariaLabel,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n const labelId = setId(id, \"label\");\n\n const buttonId = setId(id, \"button\");\n\n const Tooltip = tooltipWrapper;\n\n const icon = selected ? (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n />\n ) : (\n <div className={cx(classes.notSelected)} />\n );\n\n return (\n <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n <div\n id={buttonId}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={classes.button}\n aria-label={ariaLabel}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip id={labelId} className={classes.text} variant={variant}>\n {icon}\n </Tooltip>\n </div>\n </li>\n );\n};\n"],"names":["HvVerticalScrollListItem","props","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","scrollTo","dotSelectedSize","notSelected","root","button","text"],"mappings":";;;;;;;~~AAoCaA~~,MAAAA,2BAA2BA,CACtCC,UACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,cAAcC;AAAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,4BAA4BX,KAAK;AAC/C,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCX,WAAW,UAAU;AAE7DY,QAAAA,UAAUC,MAAMjB,IAAI,OAAO;AAE3BkB,QAAAA,WAAWD,MAAMjB,IAAI,QAAQ;AAEnC,QAAMmB,UAAUX;AAEhB,QAAMY,OAAOhB,WACX,oBAAC,eACC,QAAQS,~~2CAAaQ~~,SAASC,iBAC9B,OAAOT,~~2CAAaQ~~,SAASC,gBAC7B,CAAA,IAED,oBAAA,OAAA,EAAI,WAAWX,GAAGT,QAAQqB,WAAW,EACvC,CAAA;AAED,6BACG,MAAG,EAAA,IAAQ,WAAWZ,GAAGT,QAAQsB,MAAMvB,SAAS,GAAG,gBAAcG,UAChE,8BAAC,OACC,EAAA,IAAIc,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWhB,QAAQuB,QACnB,cAAYpB,WACZ,mBAAiBW,SACbP,GAAAA,QAEJ,UAAA,oBAAC,SAAQ,EAAA,IAAIO,SAAS,WAAWd,QAAQwB,MAAM,SAC5CN,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
1	+ {"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n /** A function component that renders a typography wrapped with a tooltip. /\n tooltipWrapper: React.FunctionComponent<{\n id?: string;\n className?: string;\n variant?: HvTypographyProps[\"variant\"];\n children?: React.ReactNode;\n }>;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvVerticalScrollListItemClasses;\n /* Whether the element is selected. /\n selected?: boolean;\n /* The function to be executed when the element is clicked. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n /* The function to be executed when the element is clicked. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/\n HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = (\n props: HvVerticalScrollListItemProps\n) => {\n const {\n id,\n className,\n classes: classesProp,\n selected,\n \"aria-label\": ariaLabel,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n const labelId = setId(id, \"label\");\n\n const buttonId = setId(id, \"button\");\n\n const Tooltip = tooltipWrapper;\n\n const icon = selected ? (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n />\n ) : (\n <div className={cx(classes.notSelected)} />\n );\n\n return (\n <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n <div\n id={buttonId}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={classes.button}\n aria-label={ariaLabel}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip id={labelId} className={classes.text} variant={variant}>\n {icon}\n </Tooltip>\n </div>\n </li>\n );\n};\n"],"names":["HvVerticalScrollListItem","props","id","className","classes","classesProp","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","icon","scrollTo","dotSelectedSize","notSelected","root","button","text"],"mappings":";;;;;;;AAqCaA,MAAAA,2BAA2BA,CACtCC,UACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,cAAcC;AAAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,4BAA4BX,KAAK;AAC/C,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,UAAwCX,WAAW,UAAU;AAE7DY,QAAAA,UAAUC,MAAMjB,IAAI,OAAO;AAE3BkB,QAAAA,WAAWD,MAAMjB,IAAI,QAAQ;AAEnC,QAAMmB,UAAUX;AAEhB,QAAMY,OAAOhB,WACX,oBAAC,eACC,QAAQS,aAAaQ,SAASC,iBAC9B,OAAOT,aAAaQ,SAASC,gBAC7B,CAAA,IAED,oBAAA,OAAA,EAAI,WAAWX,GAAGT,QAAQqB,WAAW,EACvC,CAAA;AAED,6BACG,MAAG,EAAA,IAAQ,WAAWZ,GAAGT,QAAQsB,MAAMvB,SAAS,GAAG,gBAAcG,UAChE,8BAAC,OACC,EAAA,IAAIc,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWhB,QAAQuB,QACnB,cAAYpB,WACZ,mBAAiBW,SACbP,GAAAA,QAEJ,UAAA,oBAAC,SAAQ,EAAA,IAAIO,SAAS,WAAWd,QAAQwB,MAAM,SAC5CN,UAAAA,KACH,CAAA,GACF,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { outlineStyles } from "../../../../utils/focusUtils.js";
 import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../../../../utils/focusUtils.js";
 import { createClasses } from "../../../../utils/classes.js";
 const name = "HvVerticalScrollListItem";
 const {

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { ~~outlineStyles~~ } from \"@~~core~~/~~utils/focusUtils~~\";\nimport { ~~theme~~ } from \"@~~hitachivantara~~/~~uikit-styles~~\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n padding: \"0\",\n height: \"32px\",\n width: \"32px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n notSelected: {\n height: \"4px\",\n width: \"4px\",\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.colors.secondary_60,\n },\n text: {\n height: \"16px\",\n width: \"16px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"16px\",\n width: \"16px\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n\n \"& $notSelected\": {\n height: \"6px\",\n width: \"6px\",\n backgroundColor: theme.colors.secondary,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","height","width","display","justifyContent","alignItems","notSelected","borderRadius","backgroundColor","theme","colors","secondary_60","text","button","cursor","containerBackgroundHover","secondary","outline","outlineStyles"],"mappings":";;;~~AAKA~~,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdJ,SAAS;AAAA,IACTK,iBAAiBC,MAAMC,OAAOC;AAAAA,EAChC;AAAA,EACAC,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAQ,QAAQ;AAAA,IACNV,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdO,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBC,MAAMC,OAAOK;AAAAA,MAE9B,kBAAkB;AAAA,QAChBd,QAAQ;AAAA,QACRC,OAAO;AAAA,QACPM,iBAAiBC,MAAMC,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvVerticalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n root: {\n padding: \"0\",\n height: \"32px\",\n width: \"32px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n notSelected: {\n height: \"4px\",\n width: \"4px\",\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.colors.secondary_60,\n },\n text: {\n height: \"16px\",\n width: \"16px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"16px\",\n width: \"16px\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n\n \"& $notSelected\": {\n height: \"6px\",\n width: \"6px\",\n backgroundColor: theme.colors.secondary,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","height","width","display","justifyContent","alignItems","notSelected","borderRadius","backgroundColor","theme","colors","secondary_60","text","button","cursor","containerBackgroundHover","secondary","outline","outlineStyles"],"mappings":";;;AAMA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdJ,SAAS;AAAA,IACTK,iBAAiBC,MAAMC,OAAOC;AAAAA,EAChC;AAAA,EACAC,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAQ,QAAQ;AAAA,IACNV,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPK,cAAc;AAAA,IACdO,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBC,MAAMC,OAAOK;AAAAA,MAE9B,kBAAkB;AAAA,QAChBd,QAAQ;AAAA,QACRC,OAAO;AAAA,QACPM,iBAAiBC,MAAMC,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ScrollTo/useScrollTo.js CHANGED Viewed

@@ -15,7 +15,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
     lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
   }, [scrollElementId]);
   const checkScroll = useCallback((event) => {
-    if (requestedAnimationFrame.current === 0 && (window == null ? void 0 : window.requestAnimationFrame)) {
+    if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {
       requestedAnimationFrame.current = window.requestAnimationFrame(() => {
         requestedAnimationFrame.current = 0;
         const firstVisibleElementIndex = findFirstVisibleElement(scrollEle.current, options, offset);
@@ -37,7 +37,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
           newSelectedIndex = selectedIndexRef.current;
         }
         setSelectedIndex(newSelectedIndex);
-        onChange == null ? void 0 : onChange(event, newSelectedIndex);
+        onChange?.(event, newSelectedIndex);
       });
     }
   }, [offset, options, onChange]);
@@ -91,7 +91,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = fal
         window.history.pushState({}, "", `#${options[index].value}`);
       }
       setSelectedIndex(index);
-      wrappedOnChange == null ? void 0 : wrappedOnChange(index);
+      wrappedOnChange?.(index);
       selectedIndexRef.current = index;
     }
   };

package/dist/esm/components/ScrollTo/useScrollTo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollTo.js","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n selectedIndexProp: number = 0,\n scrollElementId: string \| undefined = undefined,\n href: boolean = false,\n offset: number = 0,\n options: HvScrollToVerticalOption[] = [],\n onChange:\n \| ((\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void)\n \| undefined = undefined,\n direction: \"column\" \| \"row\" = \"column\"\n): [\n number,\n (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => void\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement \| (Window & typeof globalThis)>(window);\n const requestedAnimationFrame = useRef(0);\n const lastContainerScrollTop = useRef<number>(0);\n\n // Ref to use a often-changing value in useCallback, as recommended in\n // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n const selectedIndexRef = useRef(selectedIndex);\n\n useEffect(() => {\n selectedIndexRef.current = selectedIndex;\n }, [selectedIndex]);\n\n useEffect(() => {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) \|\| window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }, [scrollElementId]);\n\n const checkScroll = useCallback(\n (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>\n ) => {\n if (\n requestedAnimationFrame.current === 0 &&\n window?.requestAnimationFrame\n ) {\n requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n requestedAnimationFrame.current = 0;\n\n const firstVisibleElementIndex = findFirstVisibleElement(\n scrollEle.current,\n options,\n offset\n );\n\n let newSelectedIndex = firstVisibleElementIndex;\n\n // select the first element when all elements are bellow the container's top\n if (firstVisibleElementIndex < 0) {\n newSelectedIndex = 0;\n }\n\n // if the user has reached the bottom of the container, select the first nav item still visible\n // (usually this selects the last nav item, when it can't reach the top the container)\n // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n if (\n newSelectedIndex < options.length - 1 &&\n isScrolledToTheBottom(scrollEle.current)\n ) {\n newSelectedIndex += 1;\n }\n\n const containerScrollTop = getScrollTop(scrollEle.current);\n const isScrollingDown =\n containerScrollTop > lastContainerScrollTop.current;\n lastContainerScrollTop.current = containerScrollTop;\n\n // only update the selected item if the scroll direction is moving away from it\n if (isScrollingDown) {\n if (newSelectedIndex < selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n } else if (newSelectedIndex > selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n\n setSelectedIndex(newSelectedIndex);\n onChange?.(event, newSelectedIndex);\n });\n }\n },\n [offset, options, onChange]\n );\n\n // Registers and unregisters the scroll listener\n useEffect(() => {\n if (scrollEle.current) {\n scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n }\n\n return () => {\n if (scrollEle.current) {\n scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n }\n\n if (requestedAnimationFrame.current !== 0) {\n window.cancelAnimationFrame(requestedAnimationFrame.current);\n requestedAnimationFrame.current = 0;\n }\n };\n }, [checkScroll]);\n\n // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n useEffect(() => {\n let checkRenderedInterval;\n\n if (href) {\n const hashValue = document.location.hash.split(\"#\")[1] \|\| \"\";\n\n const option = options.find((o) => o.value === hashValue);\n\n if (option) {\n let retry = 0;\n checkRenderedInterval = setInterval(() => {\n const ele = document.getElementById(option.value);\n\n if (ele) {\n scrollElement(ele, scrollEle.current, option.offset \|\| offset);\n clearInterval(checkRenderedInterval);\n } else {\n retry += 1;\n if (retry === RETRY_MAX) {\n clearInterval(checkRenderedInterval);\n }\n }\n }, 1000);\n }\n }\n\n return () => {\n clearInterval(checkRenderedInterval);\n };\n\n // We really want to run this just in the first load\n // in fact this doesn't even belong here, the logic should be external\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const setScrollTo = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => {\n const option = options.find((o) => o.value === id);\n\n if (option) {\n const ele = document.getElementById(id);\n if (ele) {\n scrollElement(\n ele,\n scrollEle.current,\n option.offset \|\| offset,\n direction\n );\n }\n\n if (href) {\n window.history.pushState({}, \"\", `#${options[index].value}`);\n }\n\n setSelectedIndex(index);\n wrappedOnChange?.(index);\n\n // Safari scrolls immediately (no smooth scroll support),\n // so this ref value must be updated asap\n selectedIndexRef.current = index;\n }\n };\n\n return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}
1	+ {"version":3,"file":"useScrollTo.js","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./types\";\n\nexport const useScrollTo = (\n selectedIndexProp: number = 0,\n scrollElementId: string \| undefined = undefined,\n href: boolean = false,\n offset: number = 0,\n options: HvScrollToVerticalOption[] = [],\n onChange:\n \| ((\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void)\n \| undefined = undefined,\n direction: \"column\" \| \"row\" = \"column\"\n): [\n number,\n (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => void\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement \| (Window & typeof globalThis)>(window);\n const requestedAnimationFrame = useRef(0);\n const lastContainerScrollTop = useRef<number>(0);\n\n // Ref to use a often-changing value in useCallback, as recommended in\n // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n const selectedIndexRef = useRef(selectedIndex);\n\n useEffect(() => {\n selectedIndexRef.current = selectedIndex;\n }, [selectedIndex]);\n\n useEffect(() => {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) \|\| window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }, [scrollElementId]);\n\n const checkScroll = useCallback(\n (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>\n ) => {\n if (\n requestedAnimationFrame.current === 0 &&\n window?.requestAnimationFrame\n ) {\n requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n requestedAnimationFrame.current = 0;\n\n const firstVisibleElementIndex = findFirstVisibleElement(\n scrollEle.current,\n options,\n offset\n );\n\n let newSelectedIndex = firstVisibleElementIndex;\n\n // select the first element when all elements are bellow the container's top\n if (firstVisibleElementIndex < 0) {\n newSelectedIndex = 0;\n }\n\n // if the user has reached the bottom of the container, select the first nav item still visible\n // (usually this selects the last nav item, when it can't reach the top the container)\n // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n if (\n newSelectedIndex < options.length - 1 &&\n isScrolledToTheBottom(scrollEle.current)\n ) {\n newSelectedIndex += 1;\n }\n\n const containerScrollTop = getScrollTop(scrollEle.current);\n const isScrollingDown =\n containerScrollTop > lastContainerScrollTop.current;\n lastContainerScrollTop.current = containerScrollTop;\n\n // only update the selected item if the scroll direction is moving away from it\n if (isScrollingDown) {\n if (newSelectedIndex < selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n } else if (newSelectedIndex > selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n\n setSelectedIndex(newSelectedIndex);\n onChange?.(event, newSelectedIndex);\n });\n }\n },\n [offset, options, onChange]\n );\n\n // Registers and unregisters the scroll listener\n useEffect(() => {\n if (scrollEle.current) {\n scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n }\n\n return () => {\n if (scrollEle.current) {\n scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n }\n\n if (requestedAnimationFrame.current !== 0) {\n window.cancelAnimationFrame(requestedAnimationFrame.current);\n requestedAnimationFrame.current = 0;\n }\n };\n }, [checkScroll]);\n\n // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n useEffect(() => {\n let checkRenderedInterval;\n\n if (href) {\n const hashValue = document.location.hash.split(\"#\")[1] \|\| \"\";\n\n const option = options.find((o) => o.value === hashValue);\n\n if (option) {\n let retry = 0;\n checkRenderedInterval = setInterval(() => {\n const ele = document.getElementById(option.value);\n\n if (ele) {\n scrollElement(ele, scrollEle.current, option.offset \|\| offset);\n clearInterval(checkRenderedInterval);\n } else {\n retry += 1;\n if (retry === RETRY_MAX) {\n clearInterval(checkRenderedInterval);\n }\n }\n }, 1000);\n }\n }\n\n return () => {\n clearInterval(checkRenderedInterval);\n };\n\n // We really want to run this just in the first load\n // in fact this doesn't even belong here, the logic should be external\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const setScrollTo = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => {\n const option = options.find((o) => o.value === id);\n\n if (option) {\n const ele = document.getElementById(id);\n if (ele) {\n scrollElement(\n ele,\n scrollEle.current,\n option.offset \|\| offset,\n direction\n );\n }\n\n if (href) {\n window.history.pushState({}, \"\", `#${options[index].value}`);\n }\n\n setSelectedIndex(index);\n wrappedOnChange?.(index);\n\n // Safari scrolls immediately (no smooth scroll support),\n // so this ref value must be updated asap\n selectedIndexRef.current = index;\n }\n };\n\n return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}

package/dist/esm/components/ScrollTo/utils.js CHANGED Viewed

@@ -5,9 +5,8 @@ const getScrollTop = (c = window) => {
   return c.scrollTop;
 };
 const verticalScrollOffset = (t, c = window) => {
-  var _a;
   if (c === window) {
-    return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).top) || 0) + (window.scrollY || window.pageYOffset);
+    return (t?.getBoundingClientRect?.().top || 0) + (window.scrollY || window.pageYOffset);
   }
   if (getComputedStyle(c).position !== "static") {
     return t.offsetTop;
@@ -15,9 +14,8 @@ const verticalScrollOffset = (t, c = window) => {
   return t.offsetTop - c.offsetTop;
 };
 const horizontalScrollOffset = (t, c = window) => {
-  var _a;
   if (c === window) {
-    return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).left) || 0) + (window.scrollX || window.pageXOffset);
+    return (t?.getBoundingClientRect?.().left || 0) + (window.scrollX || window.pageXOffset);
   }
   if (getComputedStyle(c).position !== "static") {
     return t.offsetLeft;
@@ -25,16 +23,15 @@ const horizontalScrollOffset = (t, c = window) => {
   return t.offsetLeft - c.offsetLeft;
 };
 const scrollElement = (element, container, offset = 0, direction) => {
-  var _a, _b;
   if (direction === "row") {
     const elemLeft = horizontalScrollOffset(element, container);
-    (_a = container == null ? void 0 : container.scrollTo) == null ? void 0 : _a.call(container, {
+    container?.scrollTo?.({
       left: elemLeft - offset,
       behavior: "smooth"
     });
   } else {
     const elemTop = verticalScrollOffset(element, container);
-    (_b = container == null ? void 0 : container.scrollTo) == null ? void 0 : _b.call(container, {
+    container?.scrollTo?.({
       top: elemTop - offset,
       behavior: "smooth"
     });

package/dist/esm/components/ScrollTo/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../src/components/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n c: HTMLElement \| (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n window.scrollY \|\|\n window.pageYOffset \|\|\n (document.documentElement && document.documentElement.scrollTop) \|\|\n document.body.scrollTop\n );\n }\n\n return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n t: HTMLElement \| (Window & typeof globalThis),\n c: HTMLElement \| (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n ((t as ExtendedWindow)?.getBoundingClientRect?.().top \|\| 0) +\n (window.scrollY \|\| window.pageYOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return (t as ExtendedWindow).offsetTop;\n }\n\n return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n t: HTMLElement,\n c: HTMLElement \| (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n (t?.getBoundingClientRect?.().left \|\| 0) +\n (window.scrollX \|\| window.pageXOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return t.offsetLeft;\n }\n\n return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n element: HTMLElement,\n container: HTMLElement \| (Window & typeof globalThis),\n offset: number = 0,\n direction?: \"row\" \| \"column\"\n) => {\n if (direction === \"row\") {\n const elemLeft = horizontalScrollOffset(element, container);\n container?.scrollTo?.({\n left: elemLeft - offset,\n behavior: \"smooth\",\n });\n } else {\n const elemTop = verticalScrollOffset(element, container);\n container?.scrollTo?.({\n top: elemTop - offset,\n behavior: \"smooth\",\n });\n }\n element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n container: HTMLElement \| (Window & typeof globalThis)\n) => {\n const containerScrollTop = getScrollTop(container);\n\n if (container === window) {\n // Accounting for cases where html/body are set to height:100%\n const scrollHeight =\n (document.documentElement && document.documentElement.scrollHeight) \|\|\n document.body.scrollHeight;\n\n return containerScrollTop + window.innerHeight >= scrollHeight;\n }\n\n return (\n containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n (container as ExtendedWindow).scrollHeight\n );\n};\n\nexport const findFirstVisibleElement = (\n container: HTMLElement \| (Window & typeof globalThis),\n options: HvScrollToVerticalOption[],\n offset: number\n) => {\n const boundsTop = verticalScrollOffset(container);\n\n let i = 0;\n\n // Find index of first element whose top is still visible inside the container\n for (; i < options.length; i += 1) {\n const ele = document.getElementById(options[i].value);\n\n if (ele) {\n const elemTop = verticalScrollOffset(ele) - (options[i].offset \|\| offset);\n\n if (elemTop > boundsTop) {\n break;\n }\n }\n }\n\n // Return the previous index, the element that last scrolled past the top\n return i - 1;\n};\n"],"names":["getScrollTop","c","window","scrollY","pageYOffset","document","documentElement","scrollTop","body","verticalScrollOffset","t","getBoundingClientRect","top","getComputedStyle","position","offsetTop","horizontalScrollOffset","left","scrollX","pageXOffset","offsetLeft","scrollElement","element","container","offset","direction","elemLeft","scrollTo","behavior","elemTop","focus","preventScroll","isScrolledToTheBottom","containerScrollTop","scrollHeight","innerHeight","offsetHeight","findFirstVisibleElement","options","boundsTop","i","length","ele","getElementById","value"],"mappings":"AAIaA,MAAAA,eAAeA,CAC1BC,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAEdA,WAAAA,OAAOC,WACPD,OAAOE,eACNC,SAASC,mBAAmBD,SAASC,gBAAgBC,aACtDF,SAASG,KAAKD;AAAAA,EAElB;AAEA,SAAQN,EAAqBM;AAC/B;AAEO,MAAME,uBAAuBA,CAClCC,GACAT,IAAgDC,WAC7C;~~AAlBQF;AAmBX~~,~~MAAIC~~,MAAMC,QAAQ;AAChB,~~cACIQ~~,~~4BAAsBC~~,~~0BAAtBD~~,~~2BAAgDE~~,~~QAAO~~,MACxDV,OAAOC,WAAWD,OAAOE;AAAAA,EAE9B;AACA,MAAIS,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAQJ,EAAqBK;AAAAA,EAC/B;AAEQL,SAAAA,EAAqBK,YAAad,EAAqBc;AACjE;AAEO,MAAMC,yBAAyBA,CACpCN,GACAT,IAAgDC,WAC7C;~~AAnCQF;AAoCX~~,~~MAAIC~~,MAAMC,QAAQ;AAChB,~~cACGQ~~,~~4BAAGC~~,~~0BAAHD~~,~~2BAA6BO~~,~~SAAQ~~,MACrCf,OAAOgB,WAAWhB,OAAOiB;AAAAA,EAE9B;AACA,MAAIN,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAOJ,EAAEU;AAAAA,EACX;AAEOV,SAAAA,EAAEU,aAAcnB,EAAqBmB;AAC9C;AAEO,MAAMC,gBAAgBA,CAC3BC,SACAC,WACAC,SAAiB,GACjBC,cACG;~~AAtDQzB;AAuDX~~,~~MAAIyB~~,cAAc,OAAO;AACjBC,UAAAA,WAAWV,uBAAuBM,SAASC,SAAS;AAC1DA,~~iDAAWI~~,~~aAAXJ,mCAAsB~~;AAAA,~~MACpBN~~,MAAMS,WAAWF;AAAAA,MACjBI,UAAU;AAAA,IAAA;AAAA,~~EACX~~,OACI;AACCC,UAAAA,UAAUpB,qBAAqBa,SAASC,SAAS;AACvDA,~~iDAAWI~~,~~aAAXJ,mCAAsB~~;AAAA,~~MACpBX~~,KAAKiB,UAAUL;AAAAA,MACfI,UAAU;AAAA,IAAA;AAAA,~~EAEd~~;AACAN,UAAQQ,MAAM;AAAA,IAAEC,eAAe;AAAA,EAAA,CAAM;AACvC;AAEaC,MAAAA,wBAAwBA,CACnCT,cACG;AACGU,QAAAA,qBAAqBjC,aAAauB,SAAS;AAEjD,MAAIA,cAAcrB,QAAQ;AAExB,UAAMgC,eACH7B,SAASC,mBAAmBD,SAASC,gBAAgB4B,gBACtD7B,SAASG,KAAK0B;AAETD,WAAAA,qBAAqB/B,OAAOiC,eAAeD;AAAAA,EACpD;AAGED,SAAAA,qBAAsBV,UAA6Ba,gBAClDb,UAA6BW;AAElC;AAEO,MAAMG,0BAA0BA,CACrCd,WACAe,SACAd,WACG;AACGe,QAAAA,YAAY9B,qBAAqBc,SAAS;AAEhD,MAAIiB,IAAI;AAGR,SAAOA,IAAIF,QAAQG,QAAQD,KAAK,GAAG;AACjC,UAAME,MAAMrC,SAASsC,eAAeL,QAAQE,CAAC,EAAEI,KAAK;AAEpD,QAAIF,KAAK;AACP,YAAMb,UAAUpB,qBAAqBiC,GAAG,KAAKJ,QAAQE,CAAC,EAAEhB,UAAUA;AAElE,UAAIK,UAAUU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAOC,IAAI;AACb;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../src/components/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./types\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n c: HTMLElement \| (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n window.scrollY \|\|\n window.pageYOffset \|\|\n (document.documentElement && document.documentElement.scrollTop) \|\|\n document.body.scrollTop\n );\n }\n\n return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n t: HTMLElement \| (Window & typeof globalThis),\n c: HTMLElement \| (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n ((t as ExtendedWindow)?.getBoundingClientRect?.().top \|\| 0) +\n (window.scrollY \|\| window.pageYOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return (t as ExtendedWindow).offsetTop;\n }\n\n return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n t: HTMLElement,\n c: HTMLElement \| (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n (t?.getBoundingClientRect?.().left \|\| 0) +\n (window.scrollX \|\| window.pageXOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return t.offsetLeft;\n }\n\n return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n element: HTMLElement,\n container: HTMLElement \| (Window & typeof globalThis),\n offset: number = 0,\n direction?: \"row\" \| \"column\"\n) => {\n if (direction === \"row\") {\n const elemLeft = horizontalScrollOffset(element, container);\n container?.scrollTo?.({\n left: elemLeft - offset,\n behavior: \"smooth\",\n });\n } else {\n const elemTop = verticalScrollOffset(element, container);\n container?.scrollTo?.({\n top: elemTop - offset,\n behavior: \"smooth\",\n });\n }\n element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n container: HTMLElement \| (Window & typeof globalThis)\n) => {\n const containerScrollTop = getScrollTop(container);\n\n if (container === window) {\n // Accounting for cases where html/body are set to height:100%\n const scrollHeight =\n (document.documentElement && document.documentElement.scrollHeight) \|\|\n document.body.scrollHeight;\n\n return containerScrollTop + window.innerHeight >= scrollHeight;\n }\n\n return (\n containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n (container as ExtendedWindow).scrollHeight\n );\n};\n\nexport const findFirstVisibleElement = (\n container: HTMLElement \| (Window & typeof globalThis),\n options: HvScrollToVerticalOption[],\n offset: number\n) => {\n const boundsTop = verticalScrollOffset(container);\n\n let i = 0;\n\n // Find index of first element whose top is still visible inside the container\n for (; i < options.length; i += 1) {\n const ele = document.getElementById(options[i].value);\n\n if (ele) {\n const elemTop = verticalScrollOffset(ele) - (options[i].offset \|\| offset);\n\n if (elemTop > boundsTop) {\n break;\n }\n }\n }\n\n // Return the previous index, the element that last scrolled past the top\n return i - 1;\n};\n"],"names":["getScrollTop","c","window","scrollY","pageYOffset","document","documentElement","scrollTop","body","verticalScrollOffset","t","getBoundingClientRect","top","getComputedStyle","position","offsetTop","horizontalScrollOffset","left","scrollX","pageXOffset","offsetLeft","scrollElement","element","container","offset","direction","elemLeft","scrollTo","behavior","elemTop","focus","preventScroll","isScrolledToTheBottom","containerScrollTop","scrollHeight","innerHeight","offsetHeight","findFirstVisibleElement","options","boundsTop","i","length","ele","getElementById","value"],"mappings":"AAIaA,MAAAA,eAAeA,CAC1BC,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAEdA,WAAAA,OAAOC,WACPD,OAAOE,eACNC,SAASC,mBAAmBD,SAASC,gBAAgBC,aACtDF,SAASG,KAAKD;AAAAA,EAElB;AAEA,SAAQN,EAAqBM;AAC/B;AAEO,MAAME,uBAAuBA,CAClCC,GACAT,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAChB,YACIQ,GAAsBC,wBAAwB,EAAEC,OAAO,MACxDV,OAAOC,WAAWD,OAAOE;AAAAA,EAE9B;AACA,MAAIS,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAQJ,EAAqBK;AAAAA,EAC/B;AAEQL,SAAAA,EAAqBK,YAAad,EAAqBc;AACjE;AAEO,MAAMC,yBAAyBA,CACpCN,GACAT,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAChB,YACGQ,GAAGC,wBAAwB,EAAEM,QAAQ,MACrCf,OAAOgB,WAAWhB,OAAOiB;AAAAA,EAE9B;AACA,MAAIN,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAOJ,EAAEU;AAAAA,EACX;AAEOV,SAAAA,EAAEU,aAAcnB,EAAqBmB;AAC9C;AAEO,MAAMC,gBAAgBA,CAC3BC,SACAC,WACAC,SAAiB,GACjBC,cACG;AACH,MAAIA,cAAc,OAAO;AACjBC,UAAAA,WAAWV,uBAAuBM,SAASC,SAAS;AAC1DA,eAAWI,WAAW;AAAA,MACpBV,MAAMS,WAAWF;AAAAA,MACjBI,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACCC,UAAAA,UAAUpB,qBAAqBa,SAASC,SAAS;AACvDA,eAAWI,WAAW;AAAA,MACpBf,KAAKiB,UAAUL;AAAAA,MACfI,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACAN,UAAQQ,MAAM;AAAA,IAAEC,eAAe;AAAA,EAAA,CAAM;AACvC;AAEaC,MAAAA,wBAAwBA,CACnCT,cACG;AACGU,QAAAA,qBAAqBjC,aAAauB,SAAS;AAEjD,MAAIA,cAAcrB,QAAQ;AAExB,UAAMgC,eACH7B,SAASC,mBAAmBD,SAASC,gBAAgB4B,gBACtD7B,SAASG,KAAK0B;AAETD,WAAAA,qBAAqB/B,OAAOiC,eAAeD;AAAAA,EACpD;AAGED,SAAAA,qBAAsBV,UAA6Ba,gBAClDb,UAA6BW;AAElC;AAEO,MAAMG,0BAA0BA,CACrCd,WACAe,SACAd,WACG;AACGe,QAAAA,YAAY9B,qBAAqBc,SAAS;AAEhD,MAAIiB,IAAI;AAGR,SAAOA,IAAIF,QAAQG,QAAQD,KAAK,GAAG;AACjC,UAAME,MAAMrC,SAASsC,eAAeL,QAAQE,CAAC,EAAEI,KAAK;AAEpD,QAAIF,KAAK;AACP,YAAMb,UAAUpB,qBAAqBiC,GAAG,KAAKJ,QAAQE,CAAC,EAAEhB,UAAUA;AAElE,UAAIK,UAAUU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAOC,IAAI;AACb;"}

package/dist/esm/components/Section/Section.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Up, Down } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
-import { Up, Down } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./Section.styles.js";
 import { staticClasses } from "./Section.styles.js";
@@ -34,7 +34,7 @@ const HvSection = (props) => {
     /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
       expandable && /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: (event) => {
         setIsOpen((o) => !o);
-        onToggle == null ? void 0 : onToggle(event, !isOpen);
+        onToggle?.(event, !isOpen);
       }, "aria-expanded": isOpen, "aria-controls": contentId, "aria-label": isOpen ? "Collapse" : "Expand", ...expandButtonProps, children: isOpen ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {}) }),
       title,
       /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions })

package/dist/esm/components/Section/Section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.js","sources":["../../../../src/components/Section/Section.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ~~Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {~~ setId } from \"@core/utils/setId\";\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n /** The title of the section /\n title?: React.ReactNode;\n /* Whether or not the section is expandable. /\n expandable?: boolean;\n /* Whether the section is open or not, if this property is defined the accordion must be fully controlled. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* Section actions /\n // actions?: HvActionGeneric[];\n actions?: React.ReactNode;\n /* Section onExpand callback /\n onToggle?: (\n event: React.MouseEventHandler<HTMLButtonElement>,\n open: boolean\n ) => void;\n /* Props to be passed to the expand button /\n expandButtonProps?: HvButtonProps;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvSectionClasses;\n}\n\n/\n Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = (props: HvSectionProps) => {\n const {\n id,\n classes: classesProp,\n className,\n title,\n expandable,\n expanded,\n defaultExpanded = true,\n actions,\n onToggle,\n expandButtonProps,\n children,\n ...others\n } = useDefaultProps(\"HvSection\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const elementId = useUniqueId(id, \"hvSection\");\n const contentId = setId(elementId, \"content\");\n\n const showContent = expandable ? !!isOpen : true;\n\n return (\n <div id={elementId} className={cx(classes.root, className)} {...others}>\n <div className={classes.header}>\n {expandable && (\n <HvButton\n icon\n onClick={(event) => {\n setIsOpen((o) => !o);\n onToggle?.(event, !isOpen);\n }}\n aria-expanded={isOpen}\n aria-controls={contentId}\n aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n {...expandButtonProps}\n >\n {isOpen ? <Up /> : <Down />}\n </HvButton>\n )}\n {title}\n <div className={classes.actions}>{actions}</div>\n </div>\n <div\n id={contentId}\n hidden={!isOpen}\n className={cx(classes.content, { [classes.hidden]: !showContent })}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["HvSection","props","id","classes","classesProp","className","title","expandable","expanded","defaultExpanded","actions","onToggle","expandButtonProps","children","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","elementId","useUniqueId","contentId","setId","showContent","root","header","event","o","content","hidden"],"mappings":";;;;;;;;;~~AAyCaA~~,MAAAA,YAAYA,CAACC,UAA0B;AAC5C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAad,KAAK;AAEhC,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAExC,QAAA,CAACc,QAAQC,SAAS,IAAIC,cAAcZ,UAAUa,QAAQZ,eAAe,CAAC;AAEtEa,QAAAA,YAAYC,YAAYrB,IAAI,WAAW;AACvCsB,QAAAA,YAAYC,MAAMH,WAAW,SAAS;AAE5C,QAAMI,cAAcnB,aAAa,CAAC,CAACW,SAAS;AAG1C,SAAA,qBAAC,OAAI,EAAA,IAAII,WAAW,WAAWN,GAAGb,QAAQwB,MAAMtB,SAAS,GAAOS,GAAAA,QAC9D,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWX,QAAQyB,QACrBrB,UAAAA;AAAAA,MAAAA,cACE,oBAAA,UAAA,EACC,MAAI,MACJ,SAAUsB,CAAU,UAAA;AACPC,kBAAAA,CAAAA,MAAM,CAACA,CAAC;AACRD,~~6CAAAA~~,OAAO,CAACX~~;AAAAA~~,MAAM,GAE3B,iBAAeA,QACf,iBAAeM,WACf,cAAYN,SAAS,aAAa,UAC9BN,GAAAA,mBAEHM,UAAS,SAAA,oBAAC,MAAK,IAAG,oBAAC,OAAO,CAAA,GAC7B;AAAA,MAEDZ;AAAAA,MACA,oBAAA,OAAA,EAAI,WAAWH,QAAQO,SAAUA,UAAQ,SAAA;AAAA,IAAA,GAC5C;AAAA,IACA,oBAAC,OACC,EAAA,IAAIc,WACJ,QAAQ,CAACN,QACT,WAAWF,GAAGb,QAAQ4B,SAAS;AAAA,MAAE,CAAC5B,QAAQ6B,MAAM,GAAG,CAACN;AAAAA,IAAAA,CAAa,GAEhEb,SACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Section.js","sources":["../../../../src/components/Section/Section.tsx"],"sourcesContent":["import { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n /** The title of the section /\n title?: React.ReactNode;\n /* Whether or not the section is expandable. /\n expandable?: boolean;\n /* Whether the section is open or not, if this property is defined the accordion must be fully controlled. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* Section actions /\n // actions?: HvActionGeneric[];\n actions?: React.ReactNode;\n /* Section onExpand callback /\n onToggle?: (\n event: React.MouseEventHandler<HTMLButtonElement>,\n open: boolean\n ) => void;\n /* Props to be passed to the expand button /\n expandButtonProps?: HvButtonProps;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvSectionClasses;\n}\n\n/\n Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = (props: HvSectionProps) => {\n const {\n id,\n classes: classesProp,\n className,\n title,\n expandable,\n expanded,\n defaultExpanded = true,\n actions,\n onToggle,\n expandButtonProps,\n children,\n ...others\n } = useDefaultProps(\"HvSection\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const elementId = useUniqueId(id, \"hvSection\");\n const contentId = setId(elementId, \"content\");\n\n const showContent = expandable ? !!isOpen : true;\n\n return (\n <div id={elementId} className={cx(classes.root, className)} {...others}>\n <div className={classes.header}>\n {expandable && (\n <HvButton\n icon\n onClick={(event) => {\n setIsOpen((o) => !o);\n onToggle?.(event, !isOpen);\n }}\n aria-expanded={isOpen}\n aria-controls={contentId}\n aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n {...expandButtonProps}\n >\n {isOpen ? <Up /> : <Down />}\n </HvButton>\n )}\n {title}\n <div className={classes.actions}>{actions}</div>\n </div>\n <div\n id={contentId}\n hidden={!isOpen}\n className={cx(classes.content, { [classes.hidden]: !showContent })}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["HvSection","props","id","classes","classesProp","className","title","expandable","expanded","defaultExpanded","actions","onToggle","expandButtonProps","children","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","elementId","useUniqueId","contentId","setId","showContent","root","header","event","o","content","hidden"],"mappings":";;;;;;;;;AA2CaA,MAAAA,YAAYA,CAACC,UAA0B;AAC5C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAad,KAAK;AAEhC,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAExC,QAAA,CAACc,QAAQC,SAAS,IAAIC,cAAcZ,UAAUa,QAAQZ,eAAe,CAAC;AAEtEa,QAAAA,YAAYC,YAAYrB,IAAI,WAAW;AACvCsB,QAAAA,YAAYC,MAAMH,WAAW,SAAS;AAE5C,QAAMI,cAAcnB,aAAa,CAAC,CAACW,SAAS;AAG1C,SAAA,qBAAC,OAAI,EAAA,IAAII,WAAW,WAAWN,GAAGb,QAAQwB,MAAMtB,SAAS,GAAOS,GAAAA,QAC9D,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWX,QAAQyB,QACrBrB,UAAAA;AAAAA,MAAAA,cACE,oBAAA,UAAA,EACC,MAAI,MACJ,SAAUsB,CAAU,UAAA;AACPC,kBAAAA,CAAAA,MAAM,CAACA,CAAC;AACRD,mBAAAA,OAAO,CAACX,MAAM;AAAA,MAAA,GAE3B,iBAAeA,QACf,iBAAeM,WACf,cAAYN,SAAS,aAAa,UAC9BN,GAAAA,mBAEHM,UAAS,SAAA,oBAAC,MAAK,IAAG,oBAAC,OAAO,CAAA,GAC7B;AAAA,MAEDZ;AAAAA,MACA,oBAAA,OAAA,EAAI,WAAWH,QAAQO,SAAUA,UAAQ,SAAA;AAAA,IAAA,GAC5C;AAAA,IACA,oBAAC,OACC,EAAA,IAAIc,WACJ,QAAQ,CAACN,QACT,WAAWF,GAAGb,QAAQ4B,SAAS;AAAA,MAAE,CAAC5B,QAAQ6B,MAAM,GAAG,CAACN;AAAAA,IAAAA,CAAa,GAEhEb,SACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/SelectionList/SelectionList.js CHANGED Viewed

@@ -16,12 +16,11 @@ import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children, multiple) => {
   const selectedValues = React__default.Children.toArray(children).map((child) => {
-    var _a, _b, _c;
-    const childIsControlled = ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.selected) !== void 0;
-    const childIsSelected = child && childIsControlled ? (_b = child.props) == null ? void 0 : _b.selected : (_c = child.props) == null ? void 0 : _c.defaultSelected;
-    return childIsSelected ? child == null ? void 0 : child.props.value : void 0;
+    const childIsControlled = child?.props?.selected !== void 0;
+    const childIsSelected = child && childIsControlled ? child.props?.selected : child.props?.defaultSelected;
+    return childIsSelected ? child?.props.value : void 0;
   }).filter((v) => v !== void 0);
-  return multiple ? selectedValues : selectedValues == null ? void 0 : selectedValues[0];
+  return multiple ? selectedValues : selectedValues?.[0];
 };
 const HvSelectionList = forwardRef((props, ref) => {
   const {
@@ -65,8 +64,7 @@ const HvSelectionList = forwardRef((props, ref) => {
     const childValues = [];
     const childSelectedState = [];
     React__default.Children.toArray(children).forEach((child, i) => {
-      var _a;
-      const childValue = (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value;
+      const childValue = child?.props?.value;
       const childIsSelected = multiple ? value.indexOf(childValue) !== -1 : value === childValue;
       childValues[i] = childValue;
       childSelectedState[i] = childIsSelected;
@@ -98,7 +96,7 @@ const HvSelectionList = forwardRef((props, ref) => {
     };
   }, [allValues, selectedState, setValue]);
   const onChildChangeInterceptor = useCallback((index, childOnClick, evt) => {
-    childOnClick == null ? void 0 : childOnClick(evt);
+    childOnClick?.(evt);
     if (!readOnly && !disabled) {
       let newValue;
       if (multiple) {
@@ -106,7 +104,7 @@ const HvSelectionList = forwardRef((props, ref) => {
       } else {
         newValue = singleSelectionToggle && selectedState[index] ? null : allValues[index];
       }
-      onChange == null ? void 0 : onChange(evt, newValue);
+      onChange?.(evt, newValue);
       setValue(() => {
         if (required && newValue.length === 0) {
           setValidationState("invalid");
@@ -119,16 +117,12 @@ const HvSelectionList = forwardRef((props, ref) => {
   }, [allValues, disabled, multiple, onChange, readOnly, required, selectedState, setValidationState, setValue, singleSelectionToggle, selectionAnchor]);
   const modifiedChildren = useMemo(() => {
     return React__default.Children.map(children, (child, i) => {
-      var _a;
       const childIsSelected = selectedState[i];
       return React__default.cloneElement(child, {
         role: "option",
         selected: childIsSelected,
-        onClick: (evt) => {
-          var _a2;
-          return onChildChangeInterceptor(i, (_a2 = child == null ? void 0 : child.props) == null ? void 0 : _a2.onClick, evt);
-        },
-        disabled: disabled || ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.disabled)
+        onClick: (evt) => onChildChangeInterceptor(i, child?.props?.onClick, evt),
+        disabled: disabled || child?.props?.disabled
       });
     });
   }, [children, disabled, onChildChangeInterceptor, selectedState]);