@hitachivantara/uikit-react-core 5.2.0 → 5.4.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 (138) hide show
  1. package/dist/cjs/components/Button/Button.cjs +6 -0
  2. package/dist/cjs/components/Button/Button.cjs.map +1 -1
  3. package/dist/cjs/components/Button/Button.styles.cjs +15 -7
  4. package/dist/cjs/components/Button/Button.styles.cjs.map +1 -1
  5. package/dist/cjs/components/Button/buttonClasses.cjs +1 -1
  6. package/dist/cjs/components/Button/buttonClasses.cjs.map +1 -1
  7. package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs +4 -4
  8. package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs.map +1 -1
  9. package/dist/cjs/components/DatePicker/DatePicker.cjs +347 -0
  10. package/dist/cjs/components/DatePicker/DatePicker.cjs.map +1 -0
  11. package/dist/cjs/components/DatePicker/DatePicker.styles.cjs +78 -0
  12. package/dist/cjs/components/DatePicker/DatePicker.styles.cjs.map +1 -0
  13. package/dist/cjs/components/DatePicker/datePickerClasses.cjs +8 -0
  14. package/dist/cjs/components/DatePicker/datePickerClasses.cjs.map +1 -0
  15. package/dist/cjs/components/DatePicker/useVisibleDate.cjs +193 -0
  16. package/dist/cjs/components/DatePicker/useVisibleDate.cjs.map +1 -0
  17. package/dist/cjs/components/DatePicker/utils.cjs +32 -0
  18. package/dist/cjs/components/DatePicker/utils.cjs.map +1 -0
  19. package/dist/cjs/components/Dialog/Dialog.cjs +3 -7
  20. package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
  21. package/dist/cjs/components/Dialog/Dialog.styles.cjs +32 -31
  22. package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
  23. package/dist/cjs/components/InlineEditor/InlineEditor.cjs +122 -0
  24. package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -0
  25. package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs +74 -0
  26. package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -0
  27. package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs +8 -0
  28. package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs.map +1 -0
  29. package/dist/cjs/components/MultiButton/MultiButton.styles.cjs +2 -3
  30. package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map +1 -1
  31. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs +51 -0
  32. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map +1 -0
  33. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +54 -0
  34. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -0
  35. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs +8 -0
  36. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs.map +1 -0
  37. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +126 -0
  38. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -0
  39. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs +46 -0
  40. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -0
  41. package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs +8 -0
  42. package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs.map +1 -0
  43. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +90 -0
  44. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -0
  45. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs +43 -0
  46. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -0
  47. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +71 -0
  48. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -0
  49. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +54 -0
  50. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -0
  51. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs +8 -0
  52. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs.map +1 -0
  53. package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs +8 -0
  54. package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs.map +1 -0
  55. package/dist/cjs/components/ScrollTo/useScrollTo.cjs +103 -0
  56. package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -0
  57. package/dist/cjs/components/ScrollTo/utils.cjs +76 -0
  58. package/dist/cjs/components/ScrollTo/utils.cjs.map +1 -0
  59. package/dist/cjs/components/ScrollTo/withTooltip.cjs +20 -0
  60. package/dist/cjs/components/ScrollTo/withTooltip.cjs.map +1 -0
  61. package/dist/cjs/hocs/withTooltip.cjs +4 -4
  62. package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
  63. package/dist/cjs/index.cjs +21 -0
  64. package/dist/cjs/index.cjs.map +1 -1
  65. package/dist/cjs/utils/theme.cjs +9 -0
  66. package/dist/cjs/utils/theme.cjs.map +1 -1
  67. package/dist/cjs/utils/wrapperTooltip.cjs +1 -1
  68. package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
  69. package/dist/esm/components/Button/Button.js +6 -0
  70. package/dist/esm/components/Button/Button.js.map +1 -1
  71. package/dist/esm/components/Button/Button.styles.js +15 -7
  72. package/dist/esm/components/Button/Button.styles.js.map +1 -1
  73. package/dist/esm/components/Button/buttonClasses.js +1 -1
  74. package/dist/esm/components/Button/buttonClasses.js.map +1 -1
  75. package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js +4 -4
  76. package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js.map +1 -1
  77. package/dist/esm/components/DatePicker/DatePicker.js +345 -0
  78. package/dist/esm/components/DatePicker/DatePicker.js.map +1 -0
  79. package/dist/esm/components/DatePicker/DatePicker.styles.js +78 -0
  80. package/dist/esm/components/DatePicker/DatePicker.styles.js.map +1 -0
  81. package/dist/esm/components/DatePicker/datePickerClasses.js +8 -0
  82. package/dist/esm/components/DatePicker/datePickerClasses.js.map +1 -0
  83. package/dist/esm/components/DatePicker/useVisibleDate.js +193 -0
  84. package/dist/esm/components/DatePicker/useVisibleDate.js.map +1 -0
  85. package/dist/esm/components/DatePicker/utils.js +32 -0
  86. package/dist/esm/components/DatePicker/utils.js.map +1 -0
  87. package/dist/esm/components/Dialog/Dialog.js +5 -9
  88. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  89. package/dist/esm/components/Dialog/Dialog.styles.js +33 -32
  90. package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
  91. package/dist/esm/components/InlineEditor/InlineEditor.js +122 -0
  92. package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -0
  93. package/dist/esm/components/InlineEditor/InlineEditor.styles.js +74 -0
  94. package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -0
  95. package/dist/esm/components/InlineEditor/inlineEditorClasses.js +8 -0
  96. package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map +1 -0
  97. package/dist/esm/components/MultiButton/MultiButton.styles.js +2 -3
  98. package/dist/esm/components/MultiButton/MultiButton.styles.js.map +1 -1
  99. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js +51 -0
  100. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
  101. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +54 -0
  102. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
  103. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js +8 -0
  104. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js.map +1 -0
  105. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +126 -0
  106. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -0
  107. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js +46 -0
  108. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -0
  109. package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js +8 -0
  110. package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js.map +1 -0
  111. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +90 -0
  112. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -0
  113. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js +43 -0
  114. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -0
  115. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +71 -0
  116. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
  117. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +54 -0
  118. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
  119. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js +8 -0
  120. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js.map +1 -0
  121. package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js +8 -0
  122. package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js.map +1 -0
  123. package/dist/esm/components/ScrollTo/useScrollTo.js +103 -0
  124. package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -0
  125. package/dist/esm/components/ScrollTo/utils.js +76 -0
  126. package/dist/esm/components/ScrollTo/utils.js.map +1 -0
  127. package/dist/esm/components/ScrollTo/withTooltip.js +20 -0
  128. package/dist/esm/components/ScrollTo/withTooltip.js.map +1 -0
  129. package/dist/esm/hocs/withTooltip.js +4 -4
  130. package/dist/esm/hocs/withTooltip.js.map +1 -1
  131. package/dist/esm/index.js +40 -19
  132. package/dist/esm/index.js.map +1 -1
  133. package/dist/esm/utils/theme.js +9 -0
  134. package/dist/esm/utils/theme.js.map +1 -1
  135. package/dist/esm/utils/wrapperTooltip.js +2 -2
  136. package/dist/esm/utils/wrapperTooltip.js.map +1 -1
  137. package/dist/types/index.d.ts +388 -1
  138. package/package.json +5 -5
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
+ const styles = {
5
+ root: {
6
+ display: "flex",
7
+ padding: "0 30px",
8
+ listStyleType: "none",
9
+ flexWrap: "wrap",
10
+ backdropFilter: `blur(${uikitStyles.theme.scrollTo.backgroundColorBlur})`
11
+ },
12
+ positionSticky: {
13
+ position: "sticky",
14
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
15
+ top: 0,
16
+ left: 0
17
+ },
18
+ positionFixed: {
19
+ position: "fixed",
20
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
21
+ top: 0,
22
+ left: 0
23
+ },
24
+ notSelectedRoot: {
25
+ display: uikitStyles.theme.scrollTo.horizontal.dotDisplay,
26
+ justifyContent: "center",
27
+ alignItems: "center",
28
+ height: uikitStyles.theme.scrollTo.dotRootSize,
29
+ width: uikitStyles.theme.scrollTo.dotRootSize,
30
+ borderRadius: uikitStyles.theme.scrollTo.dotRootRadius
31
+ },
32
+ notSelected: {
33
+ height: uikitStyles.theme.scrollTo.dotNotSelectedSize,
34
+ width: uikitStyles.theme.scrollTo.dotNotSelectedSize,
35
+ borderRadius: "50%",
36
+ display: "inline-block",
37
+ backgroundColor: uikitStyles.theme.scrollTo.dotNotSelectedColor
38
+ },
39
+ selected: {
40
+ display: uikitStyles.theme.scrollTo.horizontal.dotDisplay,
41
+ height: uikitStyles.theme.scrollTo.dotRootSize,
42
+ width: uikitStyles.theme.scrollTo.dotRootSize
43
+ }
44
+ };
45
+ exports.styles = styles;
46
+ //# sourceMappingURL=ScrollToHorizontal.styles.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToHorizontal.styles.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: {\n root: CSSInterpolation;\n positionSticky: CSSInterpolation;\n positionFixed: CSSInterpolation;\n notSelectedRoot: CSSInterpolation;\n notSelected: CSSInterpolation;\n selected: CSSInterpolation;\n} = {\n root: {\n display: \"flex\",\n padding: \"0 30px\",\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\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 display: theme.scrollTo.horizontal.dotDisplay,\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n },\n notSelected: {\n height: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n selected: {\n display: theme.scrollTo.horizontal.dotDisplay,\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n },\n};\n"],"names":["styles","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";;;AAGO,MAAMA,SAOT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,YAAAA,MAAMC,SAASC;AAAAA,EACzC;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,YAAMC,MAAAA,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,YAAAA,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,YAAAA,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,YAAAA,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,YAAAA,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,YAAAA,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,YAAAA,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,YAAMC,MAAAA,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,YAAAA,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,YAAAA,MAAMC,SAASgB;AAAAA,EACxB;AACF;;"}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const classes = require("../../../utils/classes.cjs");
4
+ const classKeys = ["root", "positionSticky", "positionFixed", "notSelectedRoot", "notSelected", "selected"];
5
+ const scrollToHorizontalClasses = classes.getClasses(classKeys, "HvScrollToHorizontal");
6
+ const scrollToHorizontalClasses$1 = scrollToHorizontalClasses;
7
+ exports.default = scrollToHorizontalClasses$1;
8
+ //# sourceMappingURL=scrollToHorizontalClasses.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollToHorizontalClasses.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/scrollToHorizontalClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvScrollToHorizontalClasses {\n root?: string;\n positionSticky?: string;\n positionFixed?: string;\n notSelectedRoot?: string;\n notSelected?: string;\n selected?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"positionSticky\",\n \"positionFixed\",\n \"notSelectedRoot\",\n \"notSelected\",\n \"selected\",\n];\n\nconst scrollToHorizontalClasses = getClasses<HvScrollToHorizontalClasses>(\n classKeys,\n \"HvScrollToHorizontal\"\n);\n\nexport default scrollToHorizontalClasses;\n"],"names":["classKeys","scrollToHorizontalClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAsB,CAC1B,QACA,kBACA,iBACA,mBACA,eACA,UAAU;AAGZ,MAAMC,4BAA4BC,QAChCF,WAAAA,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;;"}
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const scrollToVerticalClasses = require("./scrollToVerticalClasses.cjs");
4
+ const ScrollToVertical_styles = require("./ScrollToVertical.styles.cjs");
5
+ const clsx = require("clsx");
6
+ const useScrollTo = require("../useScrollTo.cjs");
7
+ const React = require("react");
8
+ const withTooltip = require("../withTooltip.cjs");
9
+ const react = require("@emotion/react");
10
+ const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
11
+ const jsxRuntime = require("@emotion/react/jsx-runtime");
12
+ const useUniqueId = require("../../../hooks/useUniqueId.cjs");
13
+ const VerticalScrollListItem = require("./VerticalScrollListItem/VerticalScrollListItem.cjs");
14
+ const useTheme = require("../../../hooks/useTheme.cjs");
15
+ const setId = require("../../../utils/setId.cjs");
16
+ const keyCheck = require("../../../utils/keyboardUtils/keyCheck.cjs");
17
+ const keyboardCodes = require("../../../utils/keyboardUtils/keyboardCodes.cjs");
18
+ const {
19
+ Enter
20
+ } = keyboardCodes.keyboardCodes;
21
+ const HvScrollToVertical = ({
22
+ id,
23
+ defaultSelectedIndex = 0,
24
+ scrollElementId,
25
+ href = true,
26
+ onChange,
27
+ onClick,
28
+ onEnter,
29
+ className,
30
+ classes,
31
+ options,
32
+ offset = 0,
33
+ position = "relative",
34
+ tooltipPosition = "left",
35
+ ...others
36
+ }) => {
37
+ const {
38
+ activeTheme,
39
+ selectedMode
40
+ } = useTheme.useTheme();
41
+ const elementId = useUniqueId.default(id, "hvVerticalScrollto");
42
+ const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
43
+ const handleSelection = (event, value, index) => {
44
+ event.preventDefault();
45
+ const wrappedOnChange = () => {
46
+ onChange == null ? void 0 : onChange(event, index);
47
+ };
48
+ setScrollTo(event, value, index, wrappedOnChange);
49
+ };
50
+ const tooltipWrappers = React.useMemo(() => {
51
+ return options.map((option) => {
52
+ return withTooltip.withTooltip(option.label, "div", tooltipPosition, false);
53
+ });
54
+ }, [options, tooltipPosition]);
55
+ const tabs = options.map((option, index) => {
56
+ const selected = selectedIndex === index;
57
+ const tooltipWrapper = tooltipWrappers[index];
58
+ return /* @__PURE__ */ jsxRuntime.jsx(VerticalScrollListItem.HvVerticalScrollListItem, {
59
+ id: setId.setId(elementId, `item-${index}`),
60
+ onClick: (event) => {
61
+ handleSelection(event, option.value, index);
62
+ onClick == null ? void 0 : onClick(event, index);
63
+ },
64
+ onKeyDown: (event) => {
65
+ if (keyCheck.isKeypress(event, Enter) === true) {
66
+ handleSelection(event, option.value, index);
67
+ onEnter == null ? void 0 : onEnter(event, index);
68
+ }
69
+ },
70
+ tooltipWrapper,
71
+ selected,
72
+ "aria-label": option.label
73
+ }, option.key || option.label);
74
+ });
75
+ const dynamicClasses = ScrollToVertical_styles.generateDynamicStyles(options.length);
76
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
77
+ children: ({
78
+ css
79
+ }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
80
+ className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToVerticalClasses.default.root, css(ScrollToVertical_styles.styles.root), css({
81
+ backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
82
+ }), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToVerticalClasses.default.positionFixed, css(dynamicClasses.positionFixed)), position === "absolute" && clsx.clsx(classes == null ? void 0 : classes.positionAbsolute, scrollToVerticalClasses.default.positionAbsolute, css(dynamicClasses.positionAbsolute))),
83
+ id: elementId,
84
+ ...others,
85
+ children: tabs
86
+ })
87
+ });
88
+ };
89
+ exports.HvScrollToVertical = HvScrollToVertical;
90
+ //# sourceMappingURL=ScrollToVertical.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\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 = ({\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n ...others\n}: HvScrollToVerticalProps) => {\n const { activeTheme, selectedMode } = 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 (isKeypress(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 dynamicClasses = generateDynamicStyles(options.length);\n\n return (\n <ClassNames>\n {({ css }) => (\n <ol\n className={clsx(\n className,\n classes?.root,\n scrollToVerticalClasses.root,\n css(styles.root),\n css({\n backgroundColor: fade(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n position === \"fixed\" &&\n clsx(\n classes?.positionFixed,\n scrollToVerticalClasses.positionFixed,\n css(dynamicClasses.positionFixed)\n ),\n position === \"absolute\" &&\n clsx(\n classes?.positionAbsolute,\n scrollToVerticalClasses.positionAbsolute,\n css(dynamicClasses.positionAbsolute)\n )\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n )}\n </ClassNames>\n );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","clsx","root","scrollToVerticalClasses","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","positionFixed","positionAbsolute"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,wBACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,wBAAAA,sBAAsBlC,QAAQmC,MAAM;AAE3D,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACExC,WAAWyC,KACTzC,KAAAA,WACAC,mCAASyC,MACTC,wBAAAA,QAAwBD,MACxBF,IAAII,wBAAAA,OAAOF,IAAI,GACfF,IAAI;AAAA,QACFK,iBAAiBC,UACfvC,QAAAA,2CAAawC,OAAOC,MAAMxC,cAAcyC,OACxC1C,2CAAa2C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACD/C,aAAa,WACXqC,KAAAA,KACExC,mCAASmD,eACTT,wBAAAA,QAAwBS,eACxBZ,IAAIL,eAAeiB,aAAa,CAAC,GAErChD,aAAa,cACXqC,UACExC,mCAASoD,kBACTV,gCAAwBU,kBACxBb,IAAIL,eAAekB,gBAAgB,CAAC,CACrC;AAAA,MAEL5D,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
+ const styles = {
5
+ root: {
6
+ display: "flex",
7
+ width: "32px",
8
+ padding: "0",
9
+ margin: 0,
10
+ listStyleType: "none",
11
+ flexWrap: "wrap",
12
+ flexDirection: "column",
13
+ backdropFilter: `blur(${uikitStyles.theme.scrollTo.backgroundColorBlur})`
14
+ }
15
+ };
16
+ const calculateOffset = (quantityOfOptions) => {
17
+ const itemSize = 32;
18
+ const halfOptions = Math.round(quantityOfOptions * 0.5);
19
+ return halfOptions * itemSize;
20
+ };
21
+ const generateDynamicStyles = (quantityOfOptions) => {
22
+ const positionOffset = calculateOffset(quantityOfOptions);
23
+ const generatedStyles = {
24
+ positionAbsolute: {
25
+ width: "32px",
26
+ position: "absolute",
27
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
28
+ right: "0",
29
+ top: `calc(50% - ${positionOffset}px)`
30
+ },
31
+ positionFixed: {
32
+ width: "32px",
33
+ position: "fixed",
34
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
35
+ right: "0",
36
+ top: `calc(50% - ${positionOffset}px)`
37
+ }
38
+ };
39
+ return generatedStyles;
40
+ };
41
+ exports.generateDynamicStyles = generateDynamicStyles;
42
+ exports.styles = styles;
43
+ //# sourceMappingURL=ScrollToVertical.styles.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToVertical.styles.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n root: CSSInterpolation;\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(${theme.scrollTo.backgroundColorBlur})`,\n },\n};\n\nconst calculateOffset = (quantityOfOptions: number) => {\n const itemSize = 32;\n const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n return halfOptions * itemSize;\n};\n\nexport const generateDynamicStyles = (quantityOfOptions: number) => {\n const positionOffset = calculateOffset(quantityOfOptions);\n\n const generatedStyles: {\n positionAbsolute: CSSInterpolation;\n positionFixed: CSSInterpolation;\n } = {\n positionAbsolute: {\n width: \"32px\",\n position: \"absolute\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n top: `calc(50% - ${positionOffset}px)`,\n },\n positionFixed: {\n width: \"32px\",\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n top: `calc(50% - ${positionOffset}px)`,\n },\n };\n\n return generatedStyles;\n};\n"],"names":["styles","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round","generateDynamicStyles","positionOffset","generatedStyles","positionAbsolute","position","zIndex","zIndices","banner","right","top","positionFixed"],"mappings":";;;AAGO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,YAAAA,MAAMC,SAASC;AAAAA,EACzC;AACF;AAEA,MAAMC,kBAAkBA,CAACC,sBAA8B;AACrD,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;AAEaI,MAAAA,wBAAwBA,CAACL,sBAA8B;AAC5DM,QAAAA,iBAAiBP,gBAAgBC,iBAAiB;AAExD,QAAMO,kBAGF;AAAA,IACFC,kBAAkB;AAAA,MAChBnB,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,YAAAA,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,IACAS,eAAe;AAAA,MACb1B,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,YAAAA,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,EAAA;AAGKC,SAAAA;AACT;;;"}
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const verticalScrollListItemClasses = require("./verticalScrollListItemClasses.cjs");
4
+ const react = require("@emotion/react");
5
+ const clsx = require("clsx");
6
+ const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
7
+ const React = require("react");
8
+ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
9
+ const jsxRuntime = require("@emotion/react/jsx-runtime");
10
+ const useTheme = require("../../../../hooks/useTheme.cjs");
11
+ const setId = require("../../../../utils/setId.cjs");
12
+ const HvVerticalScrollListItem = ({
13
+ id,
14
+ className,
15
+ classes,
16
+ selected,
17
+ "aria-label": ariaLabel,
18
+ onClick,
19
+ onKeyDown,
20
+ tooltipWrapper,
21
+ ...others
22
+ }) => {
23
+ const {
24
+ activeTheme
25
+ } = useTheme.useTheme();
26
+ const variant = selected ? "label" : "body";
27
+ const labelId = setId.setId(id, "label");
28
+ const buttonId = setId.setId(id, "button");
29
+ const Tooltip = tooltipWrapper;
30
+ const NotSelected = React.useCallback(() => {
31
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
32
+ children: ({
33
+ css
34
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
35
+ className: clsx.clsx(classes == null ? void 0 : classes.notSelected, verticalScrollListItemClasses.default.notSelected, css(VerticalScrollListItem_styles.styles.notSelected))
36
+ })
37
+ });
38
+ }, [classes == null ? void 0 : classes.notSelected]);
39
+ const icon = selected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
40
+ height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
41
+ width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize
42
+ }) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {});
43
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
44
+ children: ({
45
+ css
46
+ }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
47
+ id,
48
+ className: clsx.clsx(className, classes == null ? void 0 : classes.root, verticalScrollListItemClasses.default.root, css(VerticalScrollListItem_styles.styles.root)),
49
+ "aria-current": selected,
50
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
51
+ id: buttonId,
52
+ role: "button",
53
+ tabIndex: 0,
54
+ onClick,
55
+ onKeyDown,
56
+ className: clsx.clsx(classes == null ? void 0 : classes.button, verticalScrollListItemClasses.default.button, css(VerticalScrollListItem_styles.styles.button)),
57
+ "aria-label": ariaLabel,
58
+ "aria-labelledby": labelId,
59
+ ...others,
60
+ children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
61
+ id: labelId,
62
+ className: clsx.clsx(classes == null ? void 0 : classes.text, verticalScrollListItemClasses.default.text, css(VerticalScrollListItem_styles.styles.text)),
63
+ variant,
64
+ children: icon
65
+ })
66
+ })
67
+ })
68
+ });
69
+ };
70
+ exports.HvVerticalScrollListItem = HvVerticalScrollListItem;
71
+ //# sourceMappingURL=VerticalScrollListItem.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\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 id,\n className,\n classes,\n selected,\n \"aria-label\": ariaLabel,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n}: HvVerticalScrollListItemProps) => {\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 NotSelected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n classes?.notSelected,\n verticalScrollListItemClasses.notSelected,\n css(styles.notSelected)\n )}\n />\n )}\n </ClassNames>\n );\n }, [classes?.notSelected]);\n\n const icon = selected ? (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n />\n ) : (\n <NotSelected />\n );\n\n return (\n <ClassNames>\n {({ css }) => (\n <li\n id={id}\n className={clsx(\n className,\n classes?.root,\n verticalScrollListItemClasses.root,\n css(styles.root)\n )}\n aria-current={selected}\n >\n <div\n id={buttonId}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={clsx(\n classes?.button,\n verticalScrollListItemClasses.button,\n css(styles.button)\n )}\n aria-label={ariaLabel}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip\n id={labelId}\n className={clsx(\n classes?.text,\n verticalScrollListItemClasses.text,\n css(styles.text)\n )}\n variant={variant}\n >\n {icon}\n </Tooltip>\n </div>\n </li>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","clsx","notSelected","verticalScrollListItemClasses","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;;;AAkCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAAA,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAAA,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,qCACF,OAAA;AAAA,QACEnB,WAAWoB,KAAAA,KACTnB,mCAASoB,aACTC,8BAAAA,QAA8BD,aAC9BF,IAAII,qCAAOF,WAAW,CAAC;AAAA,MAAA,CACvB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACpB,mCAASoB,WAAW,CAAC;AAEnBG,QAAAA,OAAOtB,WACXuB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,2BAAAA,IAAAA,aACF,CAAA,CAAA;AAED,wCACGE,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEpB;AAAAA,MACAC,WAAWoB,KACTpB,KAAAA,WACAC,mCAAS8B,MACTT,sCAA8BS,MAC9BZ,IAAII,qCAAOQ,IAAI,CAAC;AAAA,MAElB,gBAAc7B;AAAAA,MAASgB,yCAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,KAAAA,KACTnB,mCAASiC,QACTZ,8BAAAA,QAA8BY,QAC9Bf,IAAII,qCAAOW,MAAM,CAAC;AAAA,QAEpB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,yCAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,KAAAA,KACTnB,mCAASkC,MACTb,8BAAAA,QAA8Ba,MAC9BhB,IAAII,qCAAOY,IAAI,CAAC;AAAA,UAElBzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
+ const verticalScrollListItemClasses = require("./verticalScrollListItemClasses.cjs");
5
+ const focusUtils = require("../../../../utils/focusUtils.cjs");
6
+ const styles = {
7
+ root: {
8
+ padding: "0",
9
+ height: "32px",
10
+ width: "32px",
11
+ display: "flex",
12
+ justifyContent: "center",
13
+ alignItems: "center"
14
+ },
15
+ notSelected: {
16
+ height: uikitStyles.theme.scrollTo.dotNotSelectedSize,
17
+ width: uikitStyles.theme.scrollTo.dotNotSelectedSize,
18
+ borderRadius: "50%",
19
+ display: "inline-block",
20
+ backgroundColor: uikitStyles.theme.scrollTo.dotNotSelectedColor
21
+ },
22
+ text: {
23
+ height: uikitStyles.theme.scrollTo.dotRootSize,
24
+ width: uikitStyles.theme.scrollTo.dotRootSize,
25
+ display: "flex",
26
+ justifyContent: "center",
27
+ alignItems: "center"
28
+ },
29
+ button: {
30
+ display: "flex",
31
+ justifyContent: "center",
32
+ alignItems: "center",
33
+ height: uikitStyles.theme.scrollTo.dotRootSize,
34
+ width: uikitStyles.theme.scrollTo.dotRootSize,
35
+ borderRadius: uikitStyles.theme.scrollTo.dotRootRadius,
36
+ cursor: "pointer",
37
+ "&:hover": {
38
+ backgroundColor: uikitStyles.theme.scrollTo.dotHoverBackgroundColor,
39
+ [`& .${verticalScrollListItemClasses.default.notSelected}`]: {
40
+ height: uikitStyles.theme.scrollTo.dotHoverSize,
41
+ width: uikitStyles.theme.scrollTo.dotHoverSize,
42
+ backgroundColor: uikitStyles.theme.scrollTo.dotHoverColor
43
+ }
44
+ },
45
+ "&:focus": {
46
+ outline: "none"
47
+ },
48
+ "&:focus-visible": {
49
+ ...focusUtils.outlineStyles
50
+ }
51
+ }
52
+ };
53
+ exports.styles = styles;
54
+ //# sourceMappingURL=VerticalScrollListItem.styles.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VerticalScrollListItem.styles.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalScrollListItemClasses from \"./verticalScrollListItemClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n button: CSSInterpolation;\n notSelected: CSSInterpolation;\n text: CSSInterpolation;\n} = {\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: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n text: {\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n\n [`& .${verticalScrollListItemClasses.notSelected}`]: {\n height: theme.scrollTo.dotHoverSize,\n width: theme.scrollTo.dotHoverSize,\n backgroundColor: theme.scrollTo.dotHoverColor,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n};\n"],"names":["styles","root","padding","height","width","display","justifyContent","alignItems","notSelected","theme","scrollTo","dotNotSelectedSize","borderRadius","backgroundColor","dotNotSelectedColor","text","dotRootSize","button","dotRootRadius","cursor","dotHoverBackgroundColor","verticalScrollListItemClasses","dotHoverSize","dotHoverColor","outline","outlineStyles"],"mappings":";;;;;AAKO,MAAMA,SAKT;AAAA,EACFC,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,QAAQM,YAAAA,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,YAAAA,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,YAAAA,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,YAAAA,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,YAAAA,MAAMC,SAASM;AAAAA,IACtBX,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAU,QAAQ;AAAA,IACNZ,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQM,YAAAA,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,YAAAA,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,YAAAA,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,YAAAA,MAAMC,SAASU;AAAAA,MAEhC,CAAE,MAAKC,sCAA8Bb,aAAa,GAAG;AAAA,QACnDL,QAAQM,YAAAA,MAAMC,SAASY;AAAAA,QACvBlB,OAAOK,YAAAA,MAAMC,SAASY;AAAAA,QACtBT,iBAAiBJ,YAAAA,MAAMC,SAASa;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AACF;;"}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const classes = require("../../../../utils/classes.cjs");
4
+ const classKeys = ["root", "notSelected", "button", "text"];
5
+ const verticalScrollListItemClasses = classes.getClasses(classKeys, "HvVerticalScrollListItem");
6
+ const verticalScrollListItemClasses$1 = verticalScrollListItemClasses;
7
+ exports.default = verticalScrollListItemClasses$1;
8
+ //# sourceMappingURL=verticalScrollListItemClasses.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"verticalScrollListItemClasses.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvVerticalScrollListItemClasses {\n root?: string;\n notSelected?: string;\n button?: string;\n text?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"notSelected\", \"button\", \"text\"];\n\nconst verticalScrollListItemClasses =\n getClasses<HvVerticalScrollListItemClasses>(\n classKeys,\n \"HvVerticalScrollListItem\"\n );\n\nexport default verticalScrollListItemClasses;\n"],"names":["classKeys","verticalScrollListItemClasses","getClasses"],"mappings":";;;AASA,MAAMA,YAAsB,CAAC,QAAQ,eAAe,UAAU,MAAM;AAEpE,MAAMC,gCACJC,QACEF,WAAAA,WACA,0BAA0B;AAG9B,MAAA,kCAAeC;;"}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const classes = require("../../../utils/classes.cjs");
4
+ const classKeys = ["root", "positionAbsolute", "positionFixed"];
5
+ const scrollToVerticalClasses = classes.getClasses(classKeys, "HvScrollToVertical");
6
+ const scrollToVerticalClasses$1 = scrollToVerticalClasses;
7
+ exports.default = scrollToVerticalClasses$1;
8
+ //# sourceMappingURL=scrollToVerticalClasses.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollToVerticalClasses.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/scrollToVerticalClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvScrollToVerticalClasses {\n root?: string;\n positionAbsolute?: string;\n positionFixed?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"positionAbsolute\", \"positionFixed\"];\n\nconst scrollToVerticalClasses = getClasses<HvScrollToVerticalClasses>(\n classKeys,\n \"HvScrollToVertical\"\n);\n\nexport default scrollToVerticalClasses;\n"],"names":["classKeys","scrollToVerticalClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAsB,CAAC,QAAQ,oBAAoB,eAAe;AAExE,MAAMC,0BAA0BC,QAC9BF,WAAAA,WACA,oBAAoB;AAGtB,MAAA,4BAAeC;;"}
@@ -0,0 +1,103 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const React = require("react");
4
+ const utils = require("./utils.cjs");
5
+ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
6
+ const RETRY_MAX = 5;
7
+ const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
8
+ const scrollEle = React.useRef(window);
9
+ const requestedAnimationFrame = React.useRef(0);
10
+ const lastContainerScrollTop = React.useRef(0);
11
+ const selectedIndexRef = React.useRef(selectedIndex);
12
+ React.useEffect(() => {
13
+ selectedIndexRef.current = selectedIndex;
14
+ }, [selectedIndex]);
15
+ React.useEffect(() => {
16
+ scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
17
+ lastContainerScrollTop.current = utils.verticalScrollOffset(scrollEle.current);
18
+ }, [scrollElementId]);
19
+ const checkScroll = React.useCallback((event) => {
20
+ if (requestedAnimationFrame.current === 0 && (window == null ? void 0 : window.requestAnimationFrame)) {
21
+ requestedAnimationFrame.current = window.requestAnimationFrame(() => {
22
+ requestedAnimationFrame.current = 0;
23
+ const firstVisibleElementIndex = utils.findFirstVisibleElement(scrollEle.current, options, offset);
24
+ let newSelectedIndex = firstVisibleElementIndex;
25
+ if (firstVisibleElementIndex < 0) {
26
+ newSelectedIndex = 0;
27
+ }
28
+ if (newSelectedIndex < options.length - 1 && utils.isScrolledToTheBottom(scrollEle.current)) {
29
+ newSelectedIndex += 1;
30
+ }
31
+ const containerScrollTop = utils.getScrollTop(scrollEle.current);
32
+ const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
33
+ lastContainerScrollTop.current = containerScrollTop;
34
+ if (isScrollingDown) {
35
+ if (newSelectedIndex < selectedIndexRef.current) {
36
+ newSelectedIndex = selectedIndexRef.current;
37
+ }
38
+ } else if (newSelectedIndex > selectedIndexRef.current) {
39
+ newSelectedIndex = selectedIndexRef.current;
40
+ }
41
+ setSelectedIndex(newSelectedIndex);
42
+ onChange == null ? void 0 : onChange(event, newSelectedIndex);
43
+ });
44
+ }
45
+ }, [offset, options, onChange]);
46
+ React.useEffect(() => {
47
+ if (scrollEle.current) {
48
+ scrollEle.current.addEventListener("scroll", checkScroll, false);
49
+ }
50
+ return () => {
51
+ if (scrollEle.current) {
52
+ scrollEle.current.removeEventListener("scroll", checkScroll);
53
+ }
54
+ if (requestedAnimationFrame.current !== 0) {
55
+ window.cancelAnimationFrame(requestedAnimationFrame.current);
56
+ requestedAnimationFrame.current = 0;
57
+ }
58
+ };
59
+ }, [checkScroll]);
60
+ React.useEffect(() => {
61
+ let checkRenderedInterval;
62
+ if (href) {
63
+ const hashValue = document.location.hash.split("#")[1] || "";
64
+ const option = options.find((o) => o.value === hashValue);
65
+ if (option) {
66
+ let retry = 0;
67
+ checkRenderedInterval = setInterval(() => {
68
+ const ele = document.getElementById(option.value);
69
+ if (ele) {
70
+ utils.scrollElement(ele, scrollEle.current, option.offset || offset);
71
+ clearInterval(checkRenderedInterval);
72
+ } else {
73
+ retry += 1;
74
+ if (retry === RETRY_MAX) {
75
+ clearInterval(checkRenderedInterval);
76
+ }
77
+ }
78
+ }, 1e3);
79
+ }
80
+ }
81
+ return () => {
82
+ clearInterval(checkRenderedInterval);
83
+ };
84
+ }, []);
85
+ const setScrollTo = (event, id, index, wrappedOnChange) => {
86
+ const option = options.find((o) => o.value === id);
87
+ if (option) {
88
+ const ele = document.getElementById(id);
89
+ if (ele) {
90
+ utils.scrollElement(ele, scrollEle.current, option.offset || offset, direction);
91
+ }
92
+ if (href) {
93
+ window.history.pushState({}, "", `#${options[index].value}`);
94
+ }
95
+ setSelectedIndex(index);
96
+ wrappedOnChange == null ? void 0 : wrappedOnChange(index);
97
+ selectedIndexRef.current = index;
98
+ }
99
+ };
100
+ return [selectedIndex, setScrollTo];
101
+ };
102
+ exports.useScrollTo = useScrollTo;
103
+ //# sourceMappingURL=useScrollTo.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollTo.cjs","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./Vertical\";\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 }, []);\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":";;;;AAUO,MAAMA,cAAcA,CACzBC,oBAA4B,GAC5BC,kBAAsCC,QACtCC,OAAgB,OAChBC,SAAiB,GACjBC,UAAsC,IACtCC,WAQgBJ,QAChBK,YAA8B,aAW3B;AACH,QAAMC,YAAoB;AAC1B,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,eAAiBX,iBAAiB;AAEtEY,QAAAA,YAAYC,aAAmDC,MAAM;AACrEC,QAAAA,0BAA0BF,aAAO,CAAC;AAClCG,QAAAA,yBAAyBH,aAAe,CAAC;AAIzCI,QAAAA,mBAAmBJ,aAAOJ,aAAa;AAE7CS,QAAAA,UAAU,MAAM;AACdD,qBAAiBE,UAAUV;AAAAA,EAAAA,GAC1B,CAACA,aAAa,CAAC;AAElBS,QAAAA,UAAU,MAAM;AACdN,cAAUO,UACPlB,mBAAmBmB,SAASC,eAAepB,eAAe,KAAMa;AAE5CK,2BAAAA,UAAUG,MAAAA,qBAAqBV,UAAUO,OAAO;AAAA,EAAA,GACtE,CAAClB,eAAe,CAAC;AAEdsB,QAAAA,cAAcC,kBAClB,CACEC,UAIG;AACH,QACEV,wBAAwBI,YAAY,MACpCL,iCAAQY,wBACR;AACwBP,8BAAAA,UAAUL,OAAOY,sBAAsB,MAAM;AACnEX,gCAAwBI,UAAU;AAElC,cAAMQ,2BAA2BC,MAAAA,wBAC/BhB,UAAUO,SACVd,SACAD,MAAM;AAGR,YAAIyB,mBAAmBF;AAGvB,YAAIA,2BAA2B,GAAG;AACb,6BAAA;AAAA,QACrB;AAKA,YACEE,mBAAmBxB,QAAQyB,SAAS,KACpCC,4BAAsBnB,UAAUO,OAAO,GACvC;AACoB,8BAAA;AAAA,QACtB;AAEMa,cAAAA,qBAAqBC,MAAAA,aAAarB,UAAUO,OAAO;AACnDe,cAAAA,kBACJF,qBAAqBhB,uBAAuBG;AAC9CH,+BAAuBG,UAAUa;AAGjC,YAAIE,iBAAiB;AACfL,cAAAA,mBAAmBZ,iBAAiBE,SAAS;AAC/CU,+BAAmBZ,iBAAiBE;AAAAA,UACtC;AAAA,QAAA,WACSU,mBAAmBZ,iBAAiBE,SAAS;AACtDU,6BAAmBZ,iBAAiBE;AAAAA,QACtC;AAEAT,yBAAiBmB,gBAAgB;AACjCvB,6CAAWmB,OAAOI;AAAAA,MAAgB,CACnC;AAAA,IACH;AAAA,EAEF,GAAA,CAACzB,QAAQC,SAASC,QAAQ,CAAC;AAI7BY,QAAAA,UAAU,MAAM;AACd,QAAIN,UAAUO,SAAS;AACrBP,gBAAUO,QAAQgB,iBAAiB,UAAUZ,aAAa,KAAK;AAAA,IACjE;AAEA,WAAO,MAAM;AACX,UAAIX,UAAUO,SAAS;AACXA,kBAAAA,QAAQiB,oBAAoB,UAAUb,WAAW;AAAA,MAC7D;AAEIR,UAAAA,wBAAwBI,YAAY,GAAG;AAClCkB,eAAAA,qBAAqBtB,wBAAwBI,OAAO;AAC3DJ,gCAAwBI,UAAU;AAAA,MACpC;AAAA,IAAA;AAAA,EACF,GACC,CAACI,WAAW,CAAC;AAGhBL,QAAAA,UAAU,MAAM;AACVoB,QAAAA;AAEJ,QAAInC,MAAM;AACFoC,YAAAA,YAAYnB,SAASoB,SAASC,KAAKC,MAAM,GAAG,EAAE,CAAC,KAAK;AAE1D,YAAMC,SAAStC,QAAQuC,KAAMC,CAAMA,MAAAA,EAAEC,UAAUP,SAAS;AAExD,UAAII,QAAQ;AACV,YAAII,QAAQ;AACZT,gCAAwBU,YAAY,MAAM;AACxC,gBAAMC,MAAM7B,SAASC,eAAesB,OAAOG,KAAK;AAEhD,cAAIG,KAAK;AACPC,kBAAAA,cAAcD,KAAKrC,UAAUO,SAASwB,OAAOvC,UAAUA,MAAM;AAC7D+C,0BAAcb,qBAAqB;AAAA,UAAA,OAC9B;AACI,qBAAA;AACT,gBAAIS,UAAUvC,WAAW;AACvB2C,4BAAcb,qBAAqB;AAAA,YACrC;AAAA,UACF;AAAA,WACC,GAAI;AAAA,MACT;AAAA,IACF;AAEA,WAAO,MAAM;AACXa,oBAAcb,qBAAqB;AAAA,IAAA;AAAA,EAKvC,GAAG,CAAE,CAAA;AAEL,QAAMc,cAAcA,CAClB3B,OAGA4B,IACAC,OACAC,oBACG;AACH,UAAMZ,SAAStC,QAAQuC,KAAMC,CAAMA,MAAAA,EAAEC,UAAUO,EAAE;AAEjD,QAAIV,QAAQ;AACJM,YAAAA,MAAM7B,SAASC,eAAegC,EAAE;AACtC,UAAIJ,KAAK;AACPC,4BACED,KACArC,UAAUO,SACVwB,OAAOvC,UAAUA,QACjBG,SAAS;AAAA,MAEb;AAEA,UAAIJ,MAAM;AACDqD,eAAAA,QAAQC,UAAU,CAAA,GAAI,IAAK,IAAGpD,QAAQiD,KAAK,EAAER,OAAO;AAAA,MAC7D;AAEApC,uBAAiB4C,KAAK;AACtBC,yDAAkBD;AAIlBrC,uBAAiBE,UAAUmC;AAAAA,IAC7B;AAAA,EAAA;AAGK,SAAA,CAAC7C,eAAe2C,WAAW;AACpC;;"}
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const getScrollTop = (c = window) => {
4
+ if (c === window) {
5
+ return window.scrollY || window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
6
+ }
7
+ return c.scrollTop;
8
+ };
9
+ const verticalScrollOffset = (t, c = window) => {
10
+ var _a;
11
+ if (c === window) {
12
+ return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).top) || 0) + (window.scrollY || window.pageYOffset);
13
+ }
14
+ if (getComputedStyle(c).position !== "static") {
15
+ return t.offsetTop;
16
+ }
17
+ return t.offsetTop - c.offsetTop;
18
+ };
19
+ const horizontalScrollOffset = (t, c = window) => {
20
+ var _a;
21
+ if (c === window) {
22
+ return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).left) || 0) + (window.scrollX || window.pageXOffset);
23
+ }
24
+ if (getComputedStyle(c).position !== "static") {
25
+ return t.offsetLeft;
26
+ }
27
+ return t.offsetLeft - c.offsetLeft;
28
+ };
29
+ const scrollElement = (element, container, offset = 0, direction) => {
30
+ var _a, _b;
31
+ if (direction === "row") {
32
+ const elemLeft = horizontalScrollOffset(element, container);
33
+ (_a = container == null ? void 0 : container.scrollTo) == null ? void 0 : _a.call(container, {
34
+ left: elemLeft - offset,
35
+ behavior: "smooth"
36
+ });
37
+ } else {
38
+ const elemTop = verticalScrollOffset(element, container);
39
+ (_b = container == null ? void 0 : container.scrollTo) == null ? void 0 : _b.call(container, {
40
+ top: elemTop - offset,
41
+ behavior: "smooth"
42
+ });
43
+ }
44
+ element.focus({
45
+ preventScroll: true
46
+ });
47
+ };
48
+ const isScrolledToTheBottom = (container) => {
49
+ const containerScrollTop = getScrollTop(container);
50
+ if (container === window) {
51
+ const scrollHeight = document.documentElement && document.documentElement.scrollHeight || document.body.scrollHeight;
52
+ return containerScrollTop + window.innerHeight >= scrollHeight;
53
+ }
54
+ return containerScrollTop + container.offsetHeight >= container.scrollHeight;
55
+ };
56
+ const findFirstVisibleElement = (container, options, offset) => {
57
+ const boundsTop = verticalScrollOffset(container);
58
+ let i = 0;
59
+ for (; i < options.length; i += 1) {
60
+ const ele = document.getElementById(options[i].value);
61
+ if (ele) {
62
+ const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);
63
+ if (elemTop > boundsTop) {
64
+ break;
65
+ }
66
+ }
67
+ }
68
+ return i - 1;
69
+ };
70
+ exports.findFirstVisibleElement = findFirstVisibleElement;
71
+ exports.getScrollTop = getScrollTop;
72
+ exports.horizontalScrollOffset = horizontalScrollOffset;
73
+ exports.isScrolledToTheBottom = isScrolledToTheBottom;
74
+ exports.scrollElement = scrollElement;
75
+ exports.verticalScrollOffset = verticalScrollOffset;
76
+ //# sourceMappingURL=utils.cjs.map