@hitachivantara/uikit-react-core 5.85.1 → 5.87.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 (83) hide show
  1. package/dist/cjs/Banner/BannerContent/BannerContent.cjs +60 -28
  2. package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs +30 -1
  3. package/dist/cjs/ColorPicker/Fields/Fields.styles.cjs +3 -2
  4. package/dist/cjs/ColorPicker/PresetColors/PresetColors.styles.cjs +1 -1
  5. package/dist/cjs/ColorPicker/SavedColors/SavedColors.styles.cjs +2 -2
  6. package/dist/cjs/EmptyState/EmptyState.styles.cjs +1 -1
  7. package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.cjs +2 -2
  8. package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +1 -1
  9. package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/ScrollToHorizontal.cjs +3 -3
  10. package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/ScrollToVertical.cjs +3 -3
  11. package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.cjs +1 -1
  12. package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +1 -1
  13. package/dist/cjs/Tag/Tag.styles.cjs +1 -1
  14. package/dist/cjs/{ScrollTo → hooks}/useScrollTo.cjs +14 -10
  15. package/dist/cjs/index.cjs +9 -9
  16. package/dist/cjs/{ScrollTo/utils.cjs → utils/scroll.cjs} +12 -0
  17. package/dist/esm/ActionBar/ActionBar.js.map +1 -1
  18. package/dist/esm/Banner/BannerContent/BannerContent.js +61 -29
  19. package/dist/esm/Banner/BannerContent/BannerContent.js.map +1 -1
  20. package/dist/esm/Banner/BannerContent/BannerContent.styles.js +30 -1
  21. package/dist/esm/Banner/BannerContent/BannerContent.styles.js.map +1 -1
  22. package/dist/esm/Box/Box.js.map +1 -1
  23. package/dist/esm/ColorPicker/Fields/Fields.styles.js +3 -2
  24. package/dist/esm/ColorPicker/Fields/Fields.styles.js.map +1 -1
  25. package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js +1 -1
  26. package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js.map +1 -1
  27. package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js +2 -2
  28. package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js.map +1 -1
  29. package/dist/esm/EmptyState/EmptyState.styles.js +1 -1
  30. package/dist/esm/EmptyState/EmptyState.styles.js.map +1 -1
  31. package/dist/esm/Focus/Focus.js.map +1 -1
  32. package/dist/esm/Grid/Grid.js.map +1 -1
  33. package/dist/esm/Kpi/Kpi.js.map +1 -1
  34. package/dist/esm/Link/Link.js.map +1 -1
  35. package/dist/esm/List/List.js.map +1 -1
  36. package/dist/esm/{ScrollTo/Horizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.js +2 -2
  37. package/dist/esm/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
  38. package/dist/esm/{ScrollTo/Horizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +1 -1
  39. package/dist/esm/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
  40. package/dist/esm/{ScrollTo/Horizontal → ScrollToHorizontal}/ScrollToHorizontal.js +3 -3
  41. package/dist/esm/{ScrollTo/Horizontal → ScrollToHorizontal}/ScrollToHorizontal.js.map +1 -1
  42. package/dist/esm/ScrollToHorizontal/ScrollToHorizontal.styles.js.map +1 -0
  43. package/dist/esm/{ScrollTo/Vertical → ScrollToVertical}/ScrollToVertical.js +3 -3
  44. package/dist/esm/{ScrollTo/Vertical → ScrollToVertical}/ScrollToVertical.js.map +1 -1
  45. package/dist/esm/ScrollToVertical/ScrollToVertical.styles.js.map +1 -0
  46. package/dist/esm/{ScrollTo/Vertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.js +1 -1
  47. package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
  48. package/dist/esm/{ScrollTo/Vertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.styles.js +1 -1
  49. package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
  50. package/dist/esm/Tag/Tag.styles.js +1 -1
  51. package/dist/esm/Tag/Tag.styles.js.map +1 -1
  52. package/dist/esm/hocs/withTooltip.js.map +1 -1
  53. package/dist/esm/{ScrollTo → hooks}/useScrollTo.js +9 -5
  54. package/dist/esm/hooks/useScrollTo.js.map +1 -0
  55. package/dist/esm/index.js +10 -10
  56. package/dist/esm/{ScrollTo/utils.js → utils/scroll.js} +12 -0
  57. package/dist/esm/utils/scroll.js.map +1 -0
  58. package/dist/types/index.d.ts +340 -361
  59. package/package.json +6 -6
  60. package/dist/cjs/Banner/BannerContent/ActionContainer/ActionContainer.cjs +0 -46
  61. package/dist/cjs/Banner/BannerContent/ActionContainer/ActionContainer.styles.cjs +0 -31
  62. package/dist/cjs/Banner/BannerContent/MessageContainer/MessageContainer.cjs +0 -44
  63. package/dist/cjs/Banner/BannerContent/MessageContainer/MessageContainer.styles.cjs +0 -23
  64. package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js +0 -47
  65. package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js.map +0 -1
  66. package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.styles.js +0 -31
  67. package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.styles.js.map +0 -1
  68. package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js +0 -45
  69. package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js.map +0 -1
  70. package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.styles.js +0 -23
  71. package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.styles.js.map +0 -1
  72. package/dist/esm/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +0 -1
  73. package/dist/esm/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +0 -1
  74. package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +0 -1
  75. package/dist/esm/ScrollTo/Vertical/ScrollToVertical.styles.js.map +0 -1
  76. package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +0 -1
  77. package/dist/esm/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +0 -1
  78. package/dist/esm/ScrollTo/useScrollTo.js.map +0 -1
  79. package/dist/esm/ScrollTo/utils.js.map +0 -1
  80. /package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/ScrollToHorizontal.styles.cjs +0 -0
  81. /package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/ScrollToVertical.styles.cjs +0 -0
  82. /package/dist/esm/{ScrollTo/Horizontal → ScrollToHorizontal}/ScrollToHorizontal.styles.js +0 -0
  83. /package/dist/esm/{ScrollTo/Vertical → ScrollToVertical}/ScrollToVertical.styles.js +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../src/ScrollToHorizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvScrollToHorizontal\",\n {\n root: {\n display: \"flex\",\n padding: \"0 30px\",\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n backdropFilter: `blur(4px)`,\n backgroundColor: theme.alpha(\"atmo2\", 0.9),\n },\n positionSticky: {\n position: \"sticky\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n positionFixed: {\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n notSelectedRoot: {},\n notSelected: {},\n selected: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,gBAAgB;AAAA,MACd,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB,CAAC;AAAA,IAClB,aAAa,CAAC;AAAA,IACd,UAAU,CAAA;AAAA,EAAC;AAEf;"}
@@ -1,8 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
3
- import { isKey } from "../../utils/keyboardUtils.js";
4
- import { setId } from "../../utils/setId.js";
5
- import { useScrollTo } from "../useScrollTo.js";
3
+ import { useScrollTo } from "../hooks/useScrollTo.js";
4
+ import { isKey } from "../utils/keyboardUtils.js";
5
+ import { setId } from "../utils/setId.js";
6
6
  import { useClasses, calculateOffset } from "./ScrollToVertical.styles.js";
7
7
  import { staticClasses } from "./ScrollToVertical.styles.js";
8
8
  import { HvVerticalScrollListItem } from "./VerticalScrollListItem/VerticalScrollListItem.js";
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollToVertical.js","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport {\n HvScrollToOption,\n HvScrollToTooltipPositions,\n HvScrollToVerticalPositions,\n} from \"../types\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n calculateOffset,\n staticClasses,\n useClasses,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\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: HvScrollToOption[];\n /**\n * Should the active element be reflected in the URL.\n *\n * @default true\n *\n * @deprecated Use `navigationMode` instead.\n * */\n href?: boolean;\n /**\n * The navigation mode to be used when the user clicks on a tab element.\n * - `push` will add a new entry to the history stack.\n * - `replace` will replace the current entry on the history stack.\n * - `none` will not add any entry to the history stack.\n *\n * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n *\n * When set to `none`, then each element will render a button instead of a link.\n *\n * @default \"push\"\n */\n navigationMode?: \"push\" | \"replace\" | \"none\";\n /**\n * When set to `true`, the generated links will be relative (e.g. `#section`).\n * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n * This can lead to unexpected behavior.\n *\n * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n *\n * @default false\n */\n relativeLinks?: 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 | HTMLAnchorElement>\n | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (\n event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (\n event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => 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 // @ts-ignore\n href = true,\n navigationMode = href ? \"push\" : \"none\",\n relativeLinks = false,\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, cx } = useClasses(classesProp);\n\n const [selectedIndex, setScrollTo, elements] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n navigationMode,\n relativeLinks,\n offset,\n options,\n onChange,\n );\n\n const tabs = elements.map((option, index) => (\n <HvVerticalScrollListItem\n id={setId(id, `item-${index}`)}\n onClick={(event) => {\n event.preventDefault();\n\n setScrollTo(event, option.value, index, () => onChange?.(event, index));\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") !== true) return;\n event.preventDefault();\n\n setScrollTo(event, option.value, index, () => onChange?.(event, index));\n onEnter?.(event, index);\n }}\n href={navigationMode !== \"none\" ? option.href : undefined}\n tooltipPlacement={tooltipPosition}\n selected={selectedIndex === index}\n key={option.key || option.label}\n label={option.label}\n />\n ));\n\n const positionOffset = calculateOffset(options.length);\n\n return (\n <ol\n className={cx(\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={id}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAyGa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA;AAAA,IAEA,OAAO;AAAA,IACP,iBAAiB,OAAO,SAAS;AAAA,IACjC,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,MAC7B,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AAET,oBAAA,OAAO,OAAO,OAAO,OAAO,MAAM,WAAW,OAAO,KAAK,CAAC;AACtE,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,OAAO,OAAO,MAAM,KAAM;AACpC,cAAM,eAAe;AAET,oBAAA,OAAO,OAAO,OAAO,OAAO,MAAM,WAAW,OAAO,KAAK,CAAC;AACtE,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiB,gBAAgB,QAAQ,MAAM;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
1
+ {"version":3,"file":"ScrollToVertical.js","sources":["../../../src/ScrollToVertical/ScrollToVertical.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useScrollTo } from \"../hooks/useScrollTo\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n HvScrollToOption,\n HvScrollToTooltipPositions,\n HvScrollToVerticalPositions,\n} from \"../types/scroll\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport {\n calculateOffset,\n staticClasses,\n useClasses,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\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: HvScrollToOption[];\n /**\n * Should the active element be reflected in the URL.\n *\n * @default true\n *\n * @deprecated Use `navigationMode` instead.\n * */\n href?: boolean;\n /**\n * The navigation mode to be used when the user clicks on a tab element.\n * - `push` will add a new entry to the history stack.\n * - `replace` will replace the current entry on the history stack.\n * - `none` will not add any entry to the history stack.\n *\n * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n *\n * When set to `none`, then each element will render a button instead of a link.\n *\n * @default \"push\"\n */\n navigationMode?: \"push\" | \"replace\" | \"none\";\n /**\n * When set to `true`, the generated links will be relative (e.g. `#section`).\n * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n * This can lead to unexpected behavior.\n *\n * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n *\n * @default false\n */\n relativeLinks?: 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 | HTMLAnchorElement>\n | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (\n event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (\n event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => 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 // @ts-ignore\n href = true,\n navigationMode = href ? \"push\" : \"none\",\n relativeLinks = false,\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, cx } = useClasses(classesProp);\n\n const [selectedIndex, setScrollTo, elements] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n navigationMode,\n relativeLinks,\n offset,\n options,\n onChange,\n );\n\n const tabs = elements.map((option, index) => (\n <HvVerticalScrollListItem\n id={setId(id, `item-${index}`)}\n onClick={(event) => {\n event.preventDefault();\n\n setScrollTo(event, option.value, index, () => onChange?.(event, index));\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKey(event, \"Enter\") !== true) return;\n event.preventDefault();\n\n setScrollTo(event, option.value, index, () => onChange?.(event, index));\n onEnter?.(event, index);\n }}\n href={navigationMode !== \"none\" ? option.href : undefined}\n tooltipPlacement={tooltipPosition}\n selected={selectedIndex === index}\n key={option.key || option.label}\n label={option.label}\n />\n ));\n\n const positionOffset = calculateOffset(options.length);\n\n return (\n <ol\n className={cx(\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={id}\n {...others}\n >\n {tabs}\n </ol>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAyGa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA;AAAA,IAEA,OAAO;AAAA,IACP,iBAAiB,OAAO,SAAS;AAAA,IACjC,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,MAC7B,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AAET,oBAAA,OAAO,OAAO,OAAO,OAAO,MAAM,WAAW,OAAO,KAAK,CAAC;AACtE,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,OAAO,OAAO,MAAM,KAAM;AACpC,cAAM,eAAe;AAET,oBAAA,OAAO,OAAO,OAAO,OAAO,MAAM,WAAW,OAAO,KAAK,CAAC;AACtE,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiB,gBAAgB,QAAQ,MAAM;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../src/ScrollToVertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvScrollToVertical\",\n {\n root: {\n display: \"flex\",\n width: \"32px\",\n padding: \"0\",\n margin: 0,\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n flexDirection: \"column\",\n backdropFilter: `blur(4px)`,\n backgroundColor: theme.alpha(\"atmo2\", 0.9),\n },\n positionAbsolute: {\n width: \"32px\",\n position: \"absolute\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n },\n positionFixed: {\n width: \"32px\",\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n },\n },\n);\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n const itemSize = 32;\n const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n return halfOptions * itemSize;\n};\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,OAAO;AAAA,IACT;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEa,MAAA,kBAAkB,CAAC,sBAA8B;AAC5D,QAAM,WAAW;AACjB,QAAM,cAAc,KAAK,MAAM,oBAAoB,GAAG;AAEtD,SAAO,cAAc;AACvB;"}
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
3
3
  import { useClasses } from "./VerticalScrollListItem.styles.js";
4
4
  import { staticClasses } from "./VerticalScrollListItem.styles.js";
5
- import { HvTooltip } from "../../../Tooltip/Tooltip.js";
5
+ import { HvTooltip } from "../../Tooltip/Tooltip.js";
6
6
  const HvVerticalScrollListItem = (props) => {
7
7
  const {
8
8
  id,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VerticalScrollListItem.js","sources":["../../../../src/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTooltip, HvTooltipProps } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { staticClasses, useClasses } from \"./VerticalScrollListItem.styles\";\n\nexport { staticClasses as verticalScrollListItemClasses };\n\nexport type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps\n extends HvBaseProps<HTMLDivElement | HTMLAnchorElement> {\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 label?: React.ReactNode;\n tooltipPlacement?: HvTooltipProps[\"placement\"];\n\n /**\n * The link to be set in the href attribute of the anchor element.\n *\n * If this is not set, the element will be rendered as a div with a button role.\n */\n href?: string;\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 label,\n tooltipPlacement = \"left\",\n href,\n ...others\n } = useDefaultProps(\"HvVerticalScrollListItem\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const Component = href != null ? \"a\" : \"div\";\n\n return (\n <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n <HvTooltip title={label} placement={tooltipPlacement}>\n <Component\n role={href == null ? \"button\" : undefined}\n tabIndex={0}\n className={cx(classes.button, classes.text)}\n href={href}\n {...others}\n >\n <div\n className={cx(classes.icon, {\n [classes.notSelected]: !selected,\n })}\n />\n </Component>\n </HvTooltip>\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;AAiCa,MAAA,2BAA2B,CACtC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,YAAY,QAAQ,OAAO,MAAM;AAEvC,6BACG,MAAG,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAG,gBAAc,UAChE,UAAC,oBAAA,WAAA,EAAU,OAAO,OAAO,WAAW,kBAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,QAAQ,OAAO,WAAW;AAAA,MAChC,UAAU;AAAA,MACV,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,UACzB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,KAEJ,EACF,CAAA;AAEJ;"}
@@ -1,6 +1,6 @@
1
1
  import { createClasses } from "@hitachivantara/uikit-react-utils";
2
2
  import { theme } from "@hitachivantara/uikit-styles";
3
- import { outlineStyles } from "../../../utils/focusUtils.js";
3
+ import { outlineStyles } from "../../utils/focusUtils.js";
4
4
  const name = "HvVerticalScrollListItem";
5
5
  const { staticClasses, useClasses } = createClasses(name, {
6
6
  root: {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../src/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\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 icon: {\n width: \"1em\",\n height: \"1em\",\n borderRadius: \"50%\",\n fontSize: 6,\n color: theme.colors.secondary,\n display: \"inline-block\",\n backgroundColor: \"currentcolor\",\n },\n notSelected: {\n fontSize: 4,\n color: theme.colors.secondary_60,\n },\n // TODO: remove in v6 (use classes.button)\n text: {},\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 fontSize: 6,\n color: theme.colors.secondary,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IACpB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAE9B,kBAAkB;AAAA,QAChB,UAAU;AAAA,QACV,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;"}
@@ -32,7 +32,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
32
32
  }
33
33
  },
34
34
  label: {
35
- padding: theme.spacing(0, "4px"),
35
+ padding: theme.spacing(0, "xxs"),
36
36
  color: "inherit"
37
37
  },
38
38
  deleteIcon: {
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.base_dark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.atmo3,\n \":hover, :focus\": {\n backgroundColor: theme.colors.atmo3,\n },\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n label: {\n padding: theme.spacing(0, \"4px\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead */\n chipRoot: {},\n /** @deprecated unused */\n // TODO: redundant - use deleteIcon. remove in v6\n /** @deprecated */\n button: {},\n /** @deprecated */\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /** @deprecated */\n focusVisible: {},\n /** @deprecated */\n disabledDeleteIcon: {},\n /** @deprecated */\n categoricalFocus: {},\n /** @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
1
+ {"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"default\",\n color: theme.colors.base_dark,\n backgroundColor: \"var(--bgColor)\",\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n whiteSpace: \"nowrap\",\n\n \":hover, :focus\": {\n backgroundColor: \"var(--bgColor)\",\n },\n },\n categorical: {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n\n disabled: {\n backgroundColor: theme.colors.atmo3,\n \":hover, :focus\": {\n backgroundColor: theme.colors.atmo3,\n },\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n label: {\n padding: theme.spacing(0, \"xxs\"),\n color: \"inherit\",\n },\n deleteIcon: {\n width: 16,\n height: 16,\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n selected: {},\n clickable: {\n cursor: \"pointer\",\n },\n icon: {\n width: 12,\n height: 12,\n marginLeft: 2,\n },\n\n /** @deprecated use `root` instead */\n chipRoot: {},\n /** @deprecated unused */\n // TODO: redundant - use deleteIcon. remove in v6\n /** @deprecated */\n button: {},\n /** @deprecated */\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n /** @deprecated */\n focusVisible: {},\n /** @deprecated */\n disabledDeleteIcon: {},\n /** @deprecated */\n categoricalFocus: {},\n /** @deprecated */\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nexport const withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: Partial<HvTooltipProps>,\n tooltipContainerProps?: HvBaseProps,\n ) =>\n // eslint-disable-next-line react/display-name\n (props: any) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n false,\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={label}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n"],"names":[],"mappings":";;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAEhB;AAEO,MAAM,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA;AAAA;AAAA,EAGF,CAAC,UAAe;AACR,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,IACF;AACA,UAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,UAAA,mBAAmB,CAAC,UAA4C;AAC9D,YAAA,WAAW,cAAc,KAAK;AACpC,yBAAmB,QAAQ;AAC3B,cAAQ,CAAC,QAAQ;AAAA,IACnB;AAEA,UAAM,mBAAmB,MAAM;AAC7B,yBAAmB,KAAK;AACxB,cAAQ,KAAK;AAAA,IACf;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAC5B,sBAAsB;AAAA,QACtB,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACpB,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACJ,cAAc;AAAA,YACd,cAAc;AAAA,YAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IACF;AAAA,EAAA;AAAA;"}
1
+ {"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\n/** @deprecated wrap your component with `HvTooltip` */\nexport const withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: Partial<HvTooltipProps>,\n tooltipContainerProps?: HvBaseProps,\n ) =>\n // eslint-disable-next-line react/display-name\n (props: any) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n false,\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={label}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n"],"names":[],"mappings":";;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAEhB;AAGO,MAAM,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA;AAAA;AAAA,EAGF,CAAC,UAAe;AACR,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,IACF;AACA,UAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,UAAA,mBAAmB,CAAC,UAA4C;AAC9D,YAAA,WAAW,cAAc,KAAK;AACpC,yBAAmB,QAAQ;AAC3B,cAAQ,CAAC,QAAQ;AAAA,IACnB;AAEA,UAAM,mBAAmB,MAAM;AAC7B,yBAAmB,KAAK;AACxB,cAAQ,KAAK;AAAA,IACf;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAC5B,sBAAsB;AAAA,QACtB,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACpB,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACJ,cAAc;AAAA,YACd,cAAc;AAAA,YAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IACF;AAAA,EAAA;AAAA;"}
@@ -1,9 +1,11 @@
1
1
  import { useState, useRef, useEffect, useCallback, useMemo } from "react";
2
- import { verticalScrollOffset, findFirstVisibleElement, isScrolledToTheBottom, getScrollTop, scrollElement } from "./utils.js";
2
+ import { verticalScrollOffset, findFirstVisibleElement, isScrolledToTheBottom, getScrollTop, scrollElement } from "../utils/scroll.js";
3
3
  const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
4
4
  const RETRY_MAX = 5;
5
5
  const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
6
- const scrollEle = useRef(window);
6
+ const scrollEle = useRef(
7
+ typeof window !== "undefined" ? window : null
8
+ );
7
9
  const requestedAnimationFrame = useRef(0);
8
10
  const lastContainerScrollTop = useRef(0);
9
11
  const selectedIndexRef = useRef(selectedIndex);
@@ -11,8 +13,10 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
11
13
  selectedIndexRef.current = selectedIndex;
12
14
  }, [selectedIndex]);
13
15
  useEffect(() => {
14
- scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
15
- lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
16
+ if (typeof window !== "undefined") {
17
+ scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
18
+ lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
19
+ }
16
20
  }, [scrollElementId]);
17
21
  const checkScroll = useCallback(
18
22
  (event) => {
@@ -87,7 +91,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
87
91
  clearInterval(checkRenderedInterval);
88
92
  };
89
93
  }, []);
90
- const baseUrl = relativeLinks || window == null ? "" : window.location.href.split("#")[0];
94
+ const baseUrl = relativeLinks || typeof window === "undefined" || window == null ? "" : window.location.href.split("#")[0];
91
95
  const elements = useMemo(
92
96
  () => options.map((o) => ({
93
97
  ...o,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n href: string;\n}\n\nexport const useScrollTo = (\n selectedIndexProp = 0,\n scrollElementId: string | undefined = undefined,\n navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n relativeLinks = false,\n offset = 0,\n options: HvScrollToOption[] = [],\n onChange:\n | ((\n event:\n | Event\n | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n index: number,\n ) => void)\n | undefined = undefined,\n direction: \"column\" | \"row\" = \"column\",\n): [\n number,\n (\n event:\n | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void,\n ) => void,\n HvScrollToOptionWithLink[],\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n typeof window !== \"undefined\" ? window : null,\n );\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 if (typeof window !== \"undefined\") {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }\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: any;\n\n if (navigationMode !== \"none\") {\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 baseUrl =\n relativeLinks || typeof window === \"undefined\" || window == null\n ? \"\"\n : window.location.href.split(\"#\")[0];\n\n const elements = useMemo(\n () =>\n options.map((o) => ({\n ...o,\n href: `${baseUrl}#${o.value}`,\n })),\n [options, baseUrl],\n );\n\n const setScrollTo = useCallback(\n (\n event:\n | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void,\n ) => {\n const option = elements.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 (navigationMode === \"push\") {\n window.history.pushState({}, \"\", option.href);\n } else if (navigationMode === \"replace\") {\n window.history.replaceState({}, \"\", option.href);\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 [elements, navigationMode, direction, offset],\n );\n\n return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}
package/dist/esm/index.js CHANGED
@@ -207,12 +207,12 @@ import { staticClasses as staticClasses82 } from "./Radio/Radio.styles.js";
207
207
  import { HvRadio } from "./Radio/Radio.js";
208
208
  import { staticClasses as staticClasses83 } from "./RadioGroup/RadioGroup.styles.js";
209
209
  import { HvRadioGroup } from "./RadioGroup/RadioGroup.js";
210
- import { staticClasses as staticClasses84 } from "./ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js";
211
- import { staticClasses as staticClasses85 } from "./ScrollTo/Vertical/ScrollToVertical.styles.js";
212
- import { HvScrollToVertical } from "./ScrollTo/Vertical/ScrollToVertical.js";
213
- import { staticClasses as staticClasses86 } from "./ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js";
214
- import { staticClasses as staticClasses87 } from "./ScrollTo/Horizontal/ScrollToHorizontal.styles.js";
215
- import { HvScrollToHorizontal } from "./ScrollTo/Horizontal/ScrollToHorizontal.js";
210
+ import { staticClasses as staticClasses84 } from "./ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js";
211
+ import { staticClasses as staticClasses85 } from "./ScrollToHorizontal/ScrollToHorizontal.styles.js";
212
+ import { HvScrollToHorizontal } from "./ScrollToHorizontal/ScrollToHorizontal.js";
213
+ import { staticClasses as staticClasses86 } from "./ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js";
214
+ import { staticClasses as staticClasses87 } from "./ScrollToVertical/ScrollToVertical.styles.js";
215
+ import { HvScrollToVertical } from "./ScrollToVertical/ScrollToVertical.js";
216
216
  import { staticClasses as staticClasses88 } from "./Section/Section.styles.js";
217
217
  import { HvSection } from "./Section/Section.js";
218
218
  import { staticClasses as staticClasses89 } from "./SimpleGrid/SimpleGrid.styles.js";
@@ -526,7 +526,7 @@ export {
526
526
  staticClasses64 as headerClasses,
527
527
  staticClasses67 as headerNavigationClasses,
528
528
  hexToRgbA,
529
- staticClasses86 as horizontalScrollListItemClasses,
529
+ staticClasses84 as horizontalScrollListItemClasses,
530
530
  hvDateColumn,
531
531
  hvDropdownColumn,
532
532
  hvExpandColumn,
@@ -576,8 +576,8 @@ export {
576
576
  staticClasses82 as radioClasses,
577
577
  staticClasses83 as radioGroupClasses,
578
578
  staticClasses46 as rightControlClasses,
579
- staticClasses87 as scrollToHorizontalClasses,
580
- staticClasses85 as scrollToVerticalClasses,
579
+ staticClasses85 as scrollToHorizontalClasses,
580
+ staticClasses87 as scrollToVerticalClasses,
581
581
  staticClasses88 as sectionClasses,
582
582
  staticClasses12 as selectClasses,
583
583
  staticClasses13 as selectionListClasses,
@@ -654,7 +654,7 @@ export {
654
654
  staticClasses114 as verticalNavigationHeaderClasses,
655
655
  staticClasses118 as verticalNavigationSliderClasses,
656
656
  staticClasses117 as verticalNavigationTreeClasses,
657
- staticClasses84 as verticalScrollListItemClasses,
657
+ staticClasses86 as verticalScrollListItemClasses,
658
658
  staticClasses11 as warningTextClasses,
659
659
  withTooltip,
660
660
  wrapperTooltip
@@ -1,4 +1,7 @@
1
1
  const getScrollTop = (c = window) => {
2
+ if (c === null) {
3
+ return 0;
4
+ }
2
5
  if (c === window) {
3
6
  return window.scrollY || window.pageYOffset || document.documentElement?.scrollTop || document.body.scrollTop;
4
7
  }
@@ -23,6 +26,9 @@ const horizontalScrollOffset = (t, c = window) => {
23
26
  return t.offsetLeft - c.offsetLeft;
24
27
  };
25
28
  const scrollElement = (element, container, offset = 0, direction) => {
29
+ if (container === null) {
30
+ return;
31
+ }
26
32
  if (direction === "row") {
27
33
  const elemLeft = horizontalScrollOffset(element, container);
28
34
  container?.scrollTo?.({
@@ -39,6 +45,9 @@ const scrollElement = (element, container, offset = 0, direction) => {
39
45
  element.focus({ preventScroll: true });
40
46
  };
41
47
  const isScrolledToTheBottom = (container) => {
48
+ if (container === null) {
49
+ return false;
50
+ }
42
51
  const containerScrollTop = getScrollTop(container);
43
52
  if (container === window) {
44
53
  const scrollHeight = document.documentElement?.scrollHeight || document.body.scrollHeight;
@@ -47,6 +56,9 @@ const isScrolledToTheBottom = (container) => {
47
56
  return containerScrollTop + container.offsetHeight >= container.scrollHeight;
48
57
  };
49
58
  const findFirstVisibleElement = (container, options, offset) => {
59
+ if (container === null) {
60
+ return -1;
61
+ }
50
62
  const boundsTop = verticalScrollOffset(container);
51
63
  let i = 0;
52
64
  for (; i < options.length; i += 1) {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll.js","sources":["../../../src/utils/scroll.ts"],"sourcesContent":["import { HvScrollToOption } from \"../types/scroll\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n c: HTMLElement | (Window & typeof globalThis) | null = window,\n) => {\n if (c === null) {\n return 0;\n }\n\n if (c === window) {\n return (\n window.scrollY ||\n window.pageYOffset ||\n 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) | null,\n offset = 0,\n direction?: \"row\" | \"column\",\n) => {\n if (container === null) {\n return;\n }\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) | null,\n) => {\n if (container === null) {\n return false;\n }\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?.scrollHeight || 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) | null,\n options: HvScrollToOption[],\n offset: number,\n) => {\n if (container === null) {\n return -1;\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":[],"mappings":"AAIa,MAAA,eAAe,CAC1B,IAAuD,WACpD;AACH,MAAI,MAAM,MAAM;AACP,WAAA;AAAA,EAAA;AAGT,MAAI,MAAM,QAAQ;AAEd,WAAA,OAAO,WACP,OAAO,eACP,SAAS,iBAAiB,aAC1B,SAAS,KAAK;AAAA,EAAA;AAIlB,SAAQ,EAAqB;AAC/B;AAEO,MAAM,uBAAuB,CAClC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACI,GAAsB,wBAAwB,EAAE,OAAO,MACxD,OAAO,WAAW,OAAO;AAAA,EAAA;AAG9B,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAQ,EAAqB;AAAA,EAAA;AAGvB,SAAA,EAAqB,YAAa,EAAqB;AACjE;AAEO,MAAM,yBAAyB,CACpC,GACA,IAAgD,WAC7C;AACH,MAAI,MAAM,QAAQ;AAChB,YACG,GAAG,wBAAwB,EAAE,QAAQ,MACrC,OAAO,WAAW,OAAO;AAAA,EAAA;AAG9B,MAAI,iBAAiB,CAAmB,EAAE,aAAa,UAAU;AAC/D,WAAO,EAAE;AAAA,EAAA;AAGJ,SAAA,EAAE,aAAc,EAAqB;AAC9C;AAEO,MAAM,gBAAgB,CAC3B,SACA,WACA,SAAS,GACT,cACG;AACH,MAAI,cAAc,MAAM;AACtB;AAAA,EAAA;AAGF,MAAI,cAAc,OAAO;AACjB,UAAA,WAAW,uBAAuB,SAAS,SAAS;AAC1D,eAAW,WAAW;AAAA,MACpB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,OACI;AACC,UAAA,UAAU,qBAAqB,SAAS,SAAS;AACvD,eAAW,WAAW;AAAA,MACpB,KAAK,UAAU;AAAA,MACf,UAAU;AAAA,IAAA,CACX;AAAA,EAAA;AAEH,UAAQ,MAAM,EAAE,eAAe,KAAA,CAAM;AACvC;AAEa,MAAA,wBAAwB,CACnC,cACG;AACH,MAAI,cAAc,MAAM;AACf,WAAA;AAAA,EAAA;AAGH,QAAA,qBAAqB,aAAa,SAAS;AAEjD,MAAI,cAAc,QAAQ;AAExB,UAAM,eACJ,SAAS,iBAAiB,gBAAgB,SAAS,KAAK;AAEnD,WAAA,qBAAqB,OAAO,eAAe;AAAA,EAAA;AAIlD,SAAA,qBAAsB,UAA6B,gBAClD,UAA6B;AAElC;AAEO,MAAM,0BAA0B,CACrC,WACA,SACA,WACG;AACH,MAAI,cAAc,MAAM;AACf,WAAA;AAAA,EAAA;AAEH,QAAA,YAAY,qBAAqB,SAAS;AAEhD,MAAI,IAAI;AAGR,SAAO,IAAI,QAAQ,QAAQ,KAAK,GAAG;AACjC,UAAM,MAAM,SAAS,eAAe,QAAQ,CAAC,EAAE,KAAK;AAEpD,QAAI,KAAK;AACP,YAAM,UAAU,qBAAqB,GAAG,KAAK,QAAQ,CAAC,EAAE,UAAU;AAElE,UAAI,UAAU,WAAW;AACvB;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAIF,SAAO,IAAI;AACb;"}