@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 @@
1
+ {"version":3,"file":"VerticalScrollListItem.styles.js","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,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,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,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,MAAMC,SAASU;AAAAA,MAEhC,CAAE,MAAKC,8BAA8Bb,aAAa,GAAG;AAAA,QACnDL,QAAQM,MAAMC,SAASY;AAAAA,QACvBlB,OAAOK,MAAMC,SAASY;AAAAA,QACtBT,iBAAiBJ,MAAMC,SAASa;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF;"}
@@ -0,0 +1,8 @@
1
+ import { getClasses } from "../../../../utils/classes.js";
2
+ const classKeys = ["root", "notSelected", "button", "text"];
3
+ const verticalScrollListItemClasses = getClasses(classKeys, "HvVerticalScrollListItem");
4
+ const verticalScrollListItemClasses$1 = verticalScrollListItemClasses;
5
+ export {
6
+ verticalScrollListItemClasses$1 as default
7
+ };
8
+ //# sourceMappingURL=verticalScrollListItemClasses.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"verticalScrollListItemClasses.js","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,WACEF,WACA,0BAA0B;AAG9B,MAAA,kCAAeC;"}
@@ -0,0 +1,8 @@
1
+ import { getClasses } from "../../../utils/classes.js";
2
+ const classKeys = ["root", "positionAbsolute", "positionFixed"];
3
+ const scrollToVerticalClasses = getClasses(classKeys, "HvScrollToVertical");
4
+ const scrollToVerticalClasses$1 = scrollToVerticalClasses;
5
+ export {
6
+ scrollToVerticalClasses$1 as default
7
+ };
8
+ //# sourceMappingURL=scrollToVerticalClasses.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollToVerticalClasses.js","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,WAC9BF,WACA,oBAAoB;AAGtB,MAAA,4BAAeC;"}
@@ -0,0 +1,103 @@
1
+ import { useState, useRef, useEffect, useCallback } from "react";
2
+ import { verticalScrollOffset, findFirstVisibleElement, isScrolledToTheBottom, getScrollTop, scrollElement } from "./utils.js";
3
+ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
4
+ const RETRY_MAX = 5;
5
+ const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
6
+ const scrollEle = useRef(window);
7
+ const requestedAnimationFrame = useRef(0);
8
+ const lastContainerScrollTop = useRef(0);
9
+ const selectedIndexRef = useRef(selectedIndex);
10
+ useEffect(() => {
11
+ selectedIndexRef.current = selectedIndex;
12
+ }, [selectedIndex]);
13
+ useEffect(() => {
14
+ scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
15
+ lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
16
+ }, [scrollElementId]);
17
+ const checkScroll = useCallback((event) => {
18
+ if (requestedAnimationFrame.current === 0 && (window == null ? void 0 : window.requestAnimationFrame)) {
19
+ requestedAnimationFrame.current = window.requestAnimationFrame(() => {
20
+ requestedAnimationFrame.current = 0;
21
+ const firstVisibleElementIndex = findFirstVisibleElement(scrollEle.current, options, offset);
22
+ let newSelectedIndex = firstVisibleElementIndex;
23
+ if (firstVisibleElementIndex < 0) {
24
+ newSelectedIndex = 0;
25
+ }
26
+ if (newSelectedIndex < options.length - 1 && isScrolledToTheBottom(scrollEle.current)) {
27
+ newSelectedIndex += 1;
28
+ }
29
+ const containerScrollTop = getScrollTop(scrollEle.current);
30
+ const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
31
+ lastContainerScrollTop.current = containerScrollTop;
32
+ if (isScrollingDown) {
33
+ if (newSelectedIndex < selectedIndexRef.current) {
34
+ newSelectedIndex = selectedIndexRef.current;
35
+ }
36
+ } else if (newSelectedIndex > selectedIndexRef.current) {
37
+ newSelectedIndex = selectedIndexRef.current;
38
+ }
39
+ setSelectedIndex(newSelectedIndex);
40
+ onChange == null ? void 0 : onChange(event, newSelectedIndex);
41
+ });
42
+ }
43
+ }, [offset, options, onChange]);
44
+ useEffect(() => {
45
+ if (scrollEle.current) {
46
+ scrollEle.current.addEventListener("scroll", checkScroll, false);
47
+ }
48
+ return () => {
49
+ if (scrollEle.current) {
50
+ scrollEle.current.removeEventListener("scroll", checkScroll);
51
+ }
52
+ if (requestedAnimationFrame.current !== 0) {
53
+ window.cancelAnimationFrame(requestedAnimationFrame.current);
54
+ requestedAnimationFrame.current = 0;
55
+ }
56
+ };
57
+ }, [checkScroll]);
58
+ useEffect(() => {
59
+ let checkRenderedInterval;
60
+ if (href) {
61
+ const hashValue = document.location.hash.split("#")[1] || "";
62
+ const option = options.find((o) => o.value === hashValue);
63
+ if (option) {
64
+ let retry = 0;
65
+ checkRenderedInterval = setInterval(() => {
66
+ const ele = document.getElementById(option.value);
67
+ if (ele) {
68
+ scrollElement(ele, scrollEle.current, option.offset || offset);
69
+ clearInterval(checkRenderedInterval);
70
+ } else {
71
+ retry += 1;
72
+ if (retry === RETRY_MAX) {
73
+ clearInterval(checkRenderedInterval);
74
+ }
75
+ }
76
+ }, 1e3);
77
+ }
78
+ }
79
+ return () => {
80
+ clearInterval(checkRenderedInterval);
81
+ };
82
+ }, []);
83
+ const setScrollTo = (event, id, index, wrappedOnChange) => {
84
+ const option = options.find((o) => o.value === id);
85
+ if (option) {
86
+ const ele = document.getElementById(id);
87
+ if (ele) {
88
+ scrollElement(ele, scrollEle.current, option.offset || offset, direction);
89
+ }
90
+ if (href) {
91
+ window.history.pushState({}, "", `#${options[index].value}`);
92
+ }
93
+ setSelectedIndex(index);
94
+ wrappedOnChange == null ? void 0 : wrappedOnChange(index);
95
+ selectedIndexRef.current = index;
96
+ }
97
+ };
98
+ return [selectedIndex, setScrollTo];
99
+ };
100
+ export {
101
+ useScrollTo
102
+ };
103
+ //# sourceMappingURL=useScrollTo.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollTo.js","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":"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"}
@@ -0,0 +1,76 @@
1
+ const getScrollTop = (c = window) => {
2
+ if (c === window) {
3
+ return window.scrollY || window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
4
+ }
5
+ return c.scrollTop;
6
+ };
7
+ const verticalScrollOffset = (t, c = window) => {
8
+ var _a;
9
+ if (c === window) {
10
+ return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).top) || 0) + (window.scrollY || window.pageYOffset);
11
+ }
12
+ if (getComputedStyle(c).position !== "static") {
13
+ return t.offsetTop;
14
+ }
15
+ return t.offsetTop - c.offsetTop;
16
+ };
17
+ const horizontalScrollOffset = (t, c = window) => {
18
+ var _a;
19
+ if (c === window) {
20
+ return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).left) || 0) + (window.scrollX || window.pageXOffset);
21
+ }
22
+ if (getComputedStyle(c).position !== "static") {
23
+ return t.offsetLeft;
24
+ }
25
+ return t.offsetLeft - c.offsetLeft;
26
+ };
27
+ const scrollElement = (element, container, offset = 0, direction) => {
28
+ var _a, _b;
29
+ if (direction === "row") {
30
+ const elemLeft = horizontalScrollOffset(element, container);
31
+ (_a = container == null ? void 0 : container.scrollTo) == null ? void 0 : _a.call(container, {
32
+ left: elemLeft - offset,
33
+ behavior: "smooth"
34
+ });
35
+ } else {
36
+ const elemTop = verticalScrollOffset(element, container);
37
+ (_b = container == null ? void 0 : container.scrollTo) == null ? void 0 : _b.call(container, {
38
+ top: elemTop - offset,
39
+ behavior: "smooth"
40
+ });
41
+ }
42
+ element.focus({
43
+ preventScroll: true
44
+ });
45
+ };
46
+ const isScrolledToTheBottom = (container) => {
47
+ const containerScrollTop = getScrollTop(container);
48
+ if (container === window) {
49
+ const scrollHeight = document.documentElement && document.documentElement.scrollHeight || document.body.scrollHeight;
50
+ return containerScrollTop + window.innerHeight >= scrollHeight;
51
+ }
52
+ return containerScrollTop + container.offsetHeight >= container.scrollHeight;
53
+ };
54
+ const findFirstVisibleElement = (container, options, offset) => {
55
+ const boundsTop = verticalScrollOffset(container);
56
+ let i = 0;
57
+ for (; i < options.length; i += 1) {
58
+ const ele = document.getElementById(options[i].value);
59
+ if (ele) {
60
+ const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);
61
+ if (elemTop > boundsTop) {
62
+ break;
63
+ }
64
+ }
65
+ }
66
+ return i - 1;
67
+ };
68
+ export {
69
+ findFirstVisibleElement,
70
+ getScrollTop,
71
+ horizontalScrollOffset,
72
+ isScrolledToTheBottom,
73
+ scrollElement,
74
+ verticalScrollOffset
75
+ };
76
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../../../../src/components/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./Vertical\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n window.scrollY ||\n window.pageYOffset ||\n (document.documentElement && document.documentElement.scrollTop) ||\n document.body.scrollTop\n );\n }\n\n return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n t: HTMLElement | (Window & typeof globalThis),\n c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n (window.scrollY || window.pageYOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return (t as ExtendedWindow).offsetTop;\n }\n\n return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n t: HTMLElement,\n c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n (t?.getBoundingClientRect?.().left || 0) +\n (window.scrollX || window.pageXOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return t.offsetLeft;\n }\n\n return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n element: HTMLElement,\n container: HTMLElement | (Window & typeof globalThis),\n offset: number = 0,\n direction?: \"row\" | \"column\"\n) => {\n if (direction === \"row\") {\n const elemLeft = horizontalScrollOffset(element, container);\n container?.scrollTo?.({\n left: elemLeft - offset,\n behavior: \"smooth\",\n });\n } else {\n const elemTop = verticalScrollOffset(element, container);\n container?.scrollTo?.({\n top: elemTop - offset,\n behavior: \"smooth\",\n });\n }\n element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n container: HTMLElement | (Window & typeof globalThis)\n) => {\n const containerScrollTop = getScrollTop(container);\n\n if (container === window) {\n // Accounting for cases where html/body are set to height:100%\n const scrollHeight =\n (document.documentElement && document.documentElement.scrollHeight) ||\n document.body.scrollHeight;\n\n return containerScrollTop + window.innerHeight >= scrollHeight;\n }\n\n return (\n containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n (container as ExtendedWindow).scrollHeight\n );\n};\n\nexport const findFirstVisibleElement = (\n container: HTMLElement | (Window & typeof globalThis),\n options: HvScrollToVerticalOption[],\n offset: number\n) => {\n const boundsTop = verticalScrollOffset(container);\n\n let i = 0;\n\n // Find index of first element whose top is still visible inside the container\n for (; i < options.length; i += 1) {\n const ele = document.getElementById(options[i].value);\n\n if (ele) {\n const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n if (elemTop > boundsTop) {\n break;\n }\n }\n }\n\n // Return the previous index, the element that last scrolled past the top\n return i - 1;\n};\n"],"names":["getScrollTop","c","window","scrollY","pageYOffset","document","documentElement","scrollTop","body","verticalScrollOffset","t","getBoundingClientRect","top","getComputedStyle","position","offsetTop","horizontalScrollOffset","left","scrollX","pageXOffset","offsetLeft","scrollElement","element","container","offset","direction","elemLeft","scrollTo","behavior","elemTop","focus","preventScroll","isScrolledToTheBottom","containerScrollTop","scrollHeight","innerHeight","offsetHeight","findFirstVisibleElement","options","boundsTop","i","length","ele","getElementById","value"],"mappings":"AAIaA,MAAAA,eAAeA,CAC1BC,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAEdA,WAAAA,OAAOC,WACPD,OAAOE,eACNC,SAASC,mBAAmBD,SAASC,gBAAgBC,aACtDF,SAASG,KAAKD;AAAAA,EAElB;AAEA,SAAQN,EAAqBM;AAC/B;AAEO,MAAME,uBAAuBA,CAClCC,GACAT,IAAgDC,WAC7C;AAlBQF;AAmBX,MAAIC,MAAMC,QAAQ;AAChB,cACIQ,4BAAsBC,0BAAtBD,2BAAgDE,QAAO,MACxDV,OAAOC,WAAWD,OAAOE;AAAAA,EAE9B;AACA,MAAIS,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAQJ,EAAqBK;AAAAA,EAC/B;AAEQL,SAAAA,EAAqBK,YAAad,EAAqBc;AACjE;AAEO,MAAMC,yBAAyBA,CACpCN,GACAT,IAAgDC,WAC7C;AAnCQF;AAoCX,MAAIC,MAAMC,QAAQ;AAChB,cACGQ,4BAAGC,0BAAHD,2BAA6BO,SAAQ,MACrCf,OAAOgB,WAAWhB,OAAOiB;AAAAA,EAE9B;AACA,MAAIN,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAOJ,EAAEU;AAAAA,EACX;AAEOV,SAAAA,EAAEU,aAAcnB,EAAqBmB;AAC9C;AAEO,MAAMC,gBAAgBA,CAC3BC,SACAC,WACAC,SAAiB,GACjBC,cACG;AAtDQzB;AAuDX,MAAIyB,cAAc,OAAO;AACjBC,UAAAA,WAAWV,uBAAuBM,SAASC,SAAS;AAC1DA,iDAAWI,aAAXJ,mCAAsB;AAAA,MACpBN,MAAMS,WAAWF;AAAAA,MACjBI,UAAU;AAAA,IAAA;AAAA,EACX,OACI;AACCC,UAAAA,UAAUpB,qBAAqBa,SAASC,SAAS;AACvDA,iDAAWI,aAAXJ,mCAAsB;AAAA,MACpBX,KAAKiB,UAAUL;AAAAA,MACfI,UAAU;AAAA,IAAA;AAAA,EAEd;AACAN,UAAQQ,MAAM;AAAA,IAAEC,eAAe;AAAA,EAAA,CAAM;AACvC;AAEaC,MAAAA,wBAAwBA,CACnCT,cACG;AACGU,QAAAA,qBAAqBjC,aAAauB,SAAS;AAEjD,MAAIA,cAAcrB,QAAQ;AAExB,UAAMgC,eACH7B,SAASC,mBAAmBD,SAASC,gBAAgB4B,gBACtD7B,SAASG,KAAK0B;AAETD,WAAAA,qBAAqB/B,OAAOiC,eAAeD;AAAAA,EACpD;AAGED,SAAAA,qBAAsBV,UAA6Ba,gBAClDb,UAA6BW;AAElC;AAEO,MAAMG,0BAA0BA,CACrCd,WACAe,SACAd,WACG;AACGe,QAAAA,YAAY9B,qBAAqBc,SAAS;AAEhD,MAAIiB,IAAI;AAGR,SAAOA,IAAIF,QAAQG,QAAQD,KAAK,GAAG;AACjC,UAAME,MAAMrC,SAASsC,eAAeL,QAAQE,CAAC,EAAEI,KAAK;AAEpD,QAAIF,KAAK;AACP,YAAMb,UAAUpB,qBAAqBiC,GAAG,KAAKJ,QAAQE,CAAC,EAAEhB,UAAUA;AAElE,UAAIK,UAAUU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAOC,IAAI;AACb;"}
@@ -0,0 +1,20 @@
1
+ import { jsx } from "@emotion/react/jsx-runtime";
2
+ import withTooltipUtil from "../../hocs/withTooltip.js";
3
+ import { HvTypography } from "../Typography/Typography.js";
4
+ const hideTooltip = (event) => {
5
+ const isOverFlow = event.target.children.length > 1 ? Array.of(...event.target.children).some((child) => child.scrollWidth > child.clientWidth) : event.target.scrollWidth > event.target.clientWidth;
6
+ return !isOverFlow;
7
+ };
8
+ const withTooltip = (label, componentType, tooltipPosition = "top", hideOnOverflow = true) => {
9
+ const component = (props) => /* @__PURE__ */ jsx(HvTypography, {
10
+ component: componentType,
11
+ ...props,
12
+ children: props.children
13
+ });
14
+ const hideTooltipFunc = hideOnOverflow ? hideTooltip : void 0;
15
+ return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);
16
+ };
17
+ export {
18
+ withTooltip
19
+ };
20
+ //# sourceMappingURL=withTooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"withTooltip.js","sources":["../../../../src/components/ScrollTo/withTooltip.tsx"],"sourcesContent":["import {\n HvScrollToTooltipPositions,\n HvTypography,\n HvTypographyProps,\n} from \"@core/components\";\nimport { withTooltip as withTooltipUtil } from \"@core/hocs\";\n\nconst hideTooltip = (event: React.MouseEvent<HTMLDivElement>) => {\n const isOverFlow =\n (event.target as HTMLDivElement).children.length > 1\n ? Array.of(...(event.target as HTMLDivElement).children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : (event.target as HTMLDivElement).scrollWidth >\n (event.target as HTMLDivElement).clientWidth;\n return !isOverFlow;\n};\n\nexport const withTooltip = (\n label: string,\n componentType: React.ElementType,\n tooltipPosition: HvScrollToTooltipPositions = \"top\",\n hideOnOverflow: boolean = true\n) => {\n const component = (props: HvTypographyProps) => (\n <HvTypography component={componentType} {...props}>\n {props.children}\n </HvTypography>\n );\n\n const hideTooltipFunc = hideOnOverflow ? hideTooltip : undefined;\n\n return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);\n};\n"],"names":["hideTooltip","event","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","withTooltip","label","componentType","tooltipPosition","hideOnOverflow","component","props","_jsx","HvTypography","hideTooltipFunc","undefined","withTooltipUtil"],"mappings":";;;AAOA,MAAMA,cAAcA,CAACC,UAA4C;AACzDC,QAAAA,aACHD,MAAME,OAA0BC,SAASC,SAAS,IAC/CC,MAAMC,GAAG,GAAIN,MAAME,OAA0BC,QAAQ,EAAEI,KACpDC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAEjDV,MAAME,OAA0BO,cAChCT,MAAME,OAA0BQ;AACvC,SAAO,CAACT;AACV;AAEO,MAAMU,cAAcA,CACzBC,OACAC,eACAC,kBAA8C,OAC9CC,iBAA0B,SACvB;AACH,QAAMC,YAAYA,CAACC,UACjBC,oBAACC,cAAY;AAAA,IAACH,WAAWH;AAAAA,IAAc,GAAKI;AAAAA,IAAKd,UAC9Cc,MAAMd;AAAAA,EAAAA,CAEV;AAEKiB,QAAAA,kBAAkBL,iBAAiBhB,cAAcsB;AAEvD,SAAOC,gBAAgBN,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;"}
@@ -15,8 +15,8 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
15
15
  const title = /* @__PURE__ */ jsx(HvTypography, {
16
16
  children: label
17
17
  });
18
- const handleMouseEnter = (evt) => {
19
- const isHidden = hideTooltip == null ? void 0 : hideTooltip(evt);
18
+ const handleMouseEnter = (event) => {
19
+ const isHidden = hideTooltip == null ? void 0 : hideTooltip(event);
20
20
  setIsHoverDisabled(isHidden);
21
21
  setOpen(!isHidden);
22
22
  };
@@ -45,8 +45,8 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
45
45
  })
46
46
  });
47
47
  };
48
- const withTooltip$1 = withTooltip;
48
+ const withTooltipUtil = withTooltip;
49
49
  export {
50
- withTooltip$1 as default
50
+ withTooltipUtil as default
51
51
  };
52
52
  //# sourceMappingURL=withTooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvTypography, HvTooltip } from \"@core/components\";\n\nconst styles = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nconst withTooltip =\n (\n Component,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement,\n hideTooltip,\n tooltipProps,\n tooltipContainerProps\n ) =>\n (props) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState(false);\n const [open, setOpen] = useState(false);\n\n const title = <HvTypography>{label}</HvTypography>;\n\n const handleMouseEnter = (evt) => {\n const isHidden = hideTooltip?.(evt);\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={title}\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\nexport default withTooltip;\n"],"names":["styles","truncate","overflow","textOverflow","whiteSpace","withTooltip","Component","label","placement","hideTooltip","tooltipProps","tooltipContainerProps","props","isHoverDisabled","setIsHoverDisabled","useState","open","setOpen","title","HvTypography","children","handleMouseEnter","evt","isHidden","handleMouseLeave","HvTooltip","style","disableHoverListener","disableFocusListener","disableTouchListener","onMouseEnter","onMouseLeave"],"mappings":";;;;AAGA,MAAMA,SAAS;AAAA,EACbC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AACF;AAEA,MAAMC,cACJA,CACEC,WAEAC,QAAQ,IACRC,WACAC,aACAC,cACAC,0BAEDC,CAAU,UAAA;AACT,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,SAAS,KAAK;AAC5D,QAAM,CAACC,MAAMC,OAAO,IAAIF,SAAS,KAAK;AAEhCG,QAAAA,4BAASC,cAAY;AAAA,IAAAC,UAAEb;AAAAA,EAAAA,CAAqB;AAElD,QAAMc,mBAAoBC,CAAQ,QAAA;AAC1BC,UAAAA,WAAWd,2CAAca;AAC/BR,uBAAmBS,QAAQ;AAC3BN,YAAQ,CAACM,QAAQ;AAAA,EAAA;AAGnB,QAAMC,mBAAmBA,MAAM;AAC7BV,uBAAmB,KAAK;AACxBG,YAAQ,KAAK;AAAA,EAAA;AAGf,6BACGQ,WAAS;AAAA,IACRC,OAAO;AAAA,MAAE,GAAG1B,OAAOC;AAAAA,IAAS;AAAA,IAC5B0B,sBAAsBd;AAAAA,IACtBe,sBAAoB;AAAA,IACpBC,sBAAoB;AAAA,IACpBX;AAAAA,IACAF;AAAAA,IACAR;AAAAA,IAAqB,GACjBE;AAAAA,IAAYU,8BAEhB,OAAA;AAAA,MAAA,GACMT;AAAAA,MACJmB,cAAcT;AAAAA,MACdU,cAAcP;AAAAA,MAAiBJ,8BAE9Bd,WAAS;AAAA,QAAA,GAAKM;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAAI;AAAA,EAAA,CAEhB;AAEhB;AAEF,MAAA,gBAAeP;"}
1
+ {"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n HvTypography,\n HvTooltip,\n HvTooltipPlacementType,\n HvTooltipProps,\n} from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nconst 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?: HvTooltipProps,\n tooltipContainerProps?: HvBaseProps\n ) =>\n (props) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n false\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const title = <HvTypography>{label}</HvTypography>;\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={title}\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\nexport default withTooltip;\n"],"names":["styles","truncate","overflow","textOverflow","whiteSpace","withTooltip","Component","label","placement","hideTooltip","tooltipProps","tooltipContainerProps","props","isHoverDisabled","setIsHoverDisabled","useState","open","setOpen","title","HvTypography","children","handleMouseEnter","event","isHidden","handleMouseLeave","HvTooltip","style","disableHoverListener","disableFocusListener","disableTouchListener","onMouseEnter","onMouseLeave"],"mappings":";;;;AASA,MAAMA,SAA4C;AAAA,EAChDC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AACF;AAEA,MAAMC,cACJA,CACEC,WAEAC,QAAQ,IACRC,WACAC,aACAC,cACAC,0BAEDC,CAAU,UAAA;AACT,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,SAC5C,KAAK;AAEP,QAAM,CAACC,MAAMC,OAAO,IAAIF,SAAkB,KAAK;AAEzCG,QAAAA,4BAASC,cAAY;AAAA,IAAAC,UAAEb;AAAAA,EAAAA,CAAqB;AAE5Cc,QAAAA,mBAAmBA,CAACC,UAA4C;AAC9DC,UAAAA,WAAWd,2CAAca;AAC/BR,uBAAmBS,QAAQ;AAC3BN,YAAQ,CAACM,QAAQ;AAAA,EAAA;AAGnB,QAAMC,mBAAmBA,MAAM;AAC7BV,uBAAmB,KAAK;AACxBG,YAAQ,KAAK;AAAA,EAAA;AAGf,6BACGQ,WAAS;AAAA,IACRC,OAAO;AAAA,MAAE,GAAG1B,OAAOC;AAAAA,IAAS;AAAA,IAC5B0B,sBAAsBd;AAAAA,IACtBe,sBAAoB;AAAA,IACpBC,sBAAoB;AAAA,IACpBX;AAAAA,IACAF;AAAAA,IACAR;AAAAA,IAAqB,GACjBE;AAAAA,IAAYU,8BAEhB,OAAA;AAAA,MAAA,GACMT;AAAAA,MACJmB,cAAcT;AAAAA,MACdU,cAAcP;AAAAA,MAAiBJ,8BAE9Bd,WAAS;AAAA,QAAA,GAAKM;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAAI;AAAA,EAAA,CAEhB;AAEhB;AAEF,MAAA,kBAAeP;"}
package/dist/esm/index.js CHANGED
@@ -230,8 +230,18 @@ import { default as default119 } from "./components/Slider/sliderClasses.js";
230
230
  import { HvSlider } from "./components/Slider/Slider.js";
231
231
  import { default as default120 } from "./components/FilterGroup/filterGroupClasses.js";
232
232
  import { HvFilterGroup } from "./components/FilterGroup/FilterGroup.js";
233
- import { default as default121 } from "./hooks/useUniqueId.js";
234
- import { default as default122 } from "./hooks/useIsMounted.js";
233
+ import { HvDatePicker } from "./components/DatePicker/DatePicker.js";
234
+ import { default as default121 } from "./components/ScrollTo/Vertical/scrollToVerticalClasses.js";
235
+ import { default as default122 } from "./components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js";
236
+ import { HvScrollToVertical } from "./components/ScrollTo/Vertical/ScrollToVertical.js";
237
+ import { default as default123 } from "./components/ScrollTo/Horizontal/scrollToHorizontalClasses.js";
238
+ import { default as default124 } from "./components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js";
239
+ import { HvScrollToHorizontal } from "./components/ScrollTo/Horizontal/ScrollToHorizontal.js";
240
+ import { useScrollTo } from "./components/ScrollTo/useScrollTo.js";
241
+ import { default as default125 } from "./components/InlineEditor/inlineEditorClasses.js";
242
+ import { HvInlineEditor } from "./components/InlineEditor/InlineEditor.js";
243
+ import { default as default126 } from "./hooks/useUniqueId.js";
244
+ import { default as default127 } from "./hooks/useIsMounted.js";
235
245
  import { useClickOutside } from "./hooks/useClickOutside.js";
236
246
  import { useControlled } from "./hooks/useControlled.js";
237
247
  import { useImageLoaded } from "./hooks/useImageLoaded.js";
@@ -243,23 +253,23 @@ import { useEnhancedEffect } from "./hooks/useEnhancedEffect.js";
243
253
  import { HvProvider } from "./providers/Provider.js";
244
254
  import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
245
255
  import { HvThemeProvider } from "./providers/ThemeProvider.js";
246
- import { default as default123 } from "./utils/iconVariant.js";
247
- import { default as default124 } from "./utils/hexToRgbA.js";
248
- import { default as default125 } from "./utils/browser.js";
249
- import { default as default126 } from "./utils/multiSelectionEventHandler.js";
250
- import { default as default127 } from "./utils/getComponentName.js";
256
+ import { default as default128 } from "./utils/iconVariant.js";
257
+ import { default as default129 } from "./utils/hexToRgbA.js";
258
+ import { default as default130 } from "./utils/browser.js";
259
+ import { default as default131 } from "./utils/multiSelectionEventHandler.js";
260
+ import { default as default132 } from "./utils/getComponentName.js";
251
261
  import { outlineStyles } from "./utils/focusUtils.js";
252
262
  import { keyboardCodes } from "./utils/keyboardUtils/keyboardCodes.js";
253
263
  import { getKeyCodeFromEvent, isKeycode, isKeypress } from "./utils/keyboardUtils/keyCheck.js";
254
264
  import { decreaseSize, increaseSize } from "./utils/sizes.js";
255
- import { createTheme, processThemes, setElementAttrs } from "./utils/theme.js";
265
+ import { createTheme, getVarValue, processThemes, setElementAttrs } from "./utils/theme.js";
256
266
  import { setId, setUid } from "./utils/setId.js";
257
267
  import { getClasses } from "./utils/classes.js";
258
268
  import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
259
269
  import { wrapperTooltip } from "./utils/wrapperTooltip.js";
260
270
  import { useSavedState } from "./utils/useSavedState.js";
261
- import { default as default128 } from "./hocs/withTooltip.js";
262
- import { default as default129 } from "./hocs/withId.js";
271
+ import { default as default133 } from "./hocs/withTooltip.js";
272
+ import { default as default134 } from "./hocs/withId.js";
263
273
  export {
264
274
  CellWithCheckBox,
265
275
  CellWithExpandButton,
@@ -294,6 +304,7 @@ export {
294
304
  HvContainer,
295
305
  HvControls,
296
306
  default101 as HvDateColumnCell,
307
+ HvDatePicker,
297
308
  HvDialog,
298
309
  HvDialogActions,
299
310
  HvDialogContent,
@@ -328,6 +339,7 @@ export {
328
339
  HvMenuItem as HvHeaderMenuItem,
329
340
  HvHeaderNavigation,
330
341
  HvInfoMessage,
342
+ HvInlineEditor,
331
343
  HvInput,
332
344
  HvKpi,
333
345
  HvLabel,
@@ -348,6 +360,8 @@ export {
348
360
  HvRadio,
349
361
  HvRadioGroup,
350
362
  HvRightControl,
363
+ HvScrollToHorizontal,
364
+ HvScrollToVertical,
351
365
  HvSelectionList,
352
366
  HvSimpleGrid,
353
367
  HvSlider,
@@ -445,7 +459,7 @@ export {
445
459
  default36 as footerClasses,
446
460
  default13 as formElementClasses,
447
461
  getClasses,
448
- default127 as getComponentName,
462
+ default132 as getComponentName,
449
463
  getFirstAndLastFocus,
450
464
  getFocusableList,
451
465
  getHeaderFooterPropsHook,
@@ -456,13 +470,15 @@ export {
456
470
  getPrevNextFocus,
457
471
  getSelectorIcons,
458
472
  getTableHeadPropsHook,
473
+ getVarValue,
459
474
  default83 as globalActionsClasses,
460
475
  default37 as gridClasses,
461
476
  default39 as headerActionsClasses,
462
477
  default40 as headerBrandClasses,
463
478
  default38 as headerClasses,
464
479
  default41 as headerNavigationClasses,
465
- default124 as hexToRgbA,
480
+ default129 as hexToRgbA,
481
+ default124 as horizontalScrollListItemClasses,
466
482
  hvDateColumn,
467
483
  hvDropdownColumn,
468
484
  hvExpandColumn,
@@ -474,11 +490,12 @@ export {
474
490
  hvSwitchColumn,
475
491
  hvTagColumn,
476
492
  hvTextColumn,
477
- default123 as iconVariant,
493
+ default128 as iconVariant,
478
494
  increaseSize,
479
495
  default15 as infoMessageClasses,
496
+ default125 as inlineEditorClasses,
480
497
  default60 as inputClasses,
481
- default125 as isBrowser,
498
+ default130 as isBrowser,
482
499
  isInvalid,
483
500
  isKeycode,
484
501
  isKeypress,
@@ -494,7 +511,7 @@ export {
494
511
  default44 as loadingClasses,
495
512
  default105 as loginClasses,
496
513
  default45 as multiButtonClasses,
497
- default126 as multiSelectionEventHandler,
514
+ default131 as multiSelectionEventHandler,
498
515
  normalizeProgressBar,
499
516
  outlineStyles,
500
517
  default53 as overflowTooltipClasses,
@@ -507,6 +524,8 @@ export {
507
524
  default67 as radioGroupClasses,
508
525
  reducer,
509
526
  default108 as rightControlClasses,
527
+ default123 as scrollToHorizontalClasses,
528
+ default121 as scrollToVerticalClasses,
510
529
  default17 as selectionListClasses,
511
530
  setElementAttrs,
512
531
  setId,
@@ -556,20 +575,22 @@ export {
556
575
  default92 as useHvTableStyles,
557
576
  useImageLoaded,
558
577
  useInstance,
559
- default122 as useIsMounted,
578
+ default127 as useIsMounted,
560
579
  useLabels,
561
580
  useSavedState,
581
+ useScrollTo,
562
582
  useSelectionPath,
563
583
  useTheme,
564
- default121 as useUniqueId,
584
+ default126 as useUniqueId,
565
585
  useWidth,
566
586
  default111 as verticalNavigationClasses,
567
587
  default112 as verticalNavigationHeaderClasses,
568
588
  default116 as verticalNavigationSliderClasses,
569
589
  default115 as verticalNavigationTreeClasses,
590
+ default122 as verticalScrollListItemClasses,
570
591
  default16 as warningTextClasses,
571
- default129 as withId,
572
- default128 as withTooltip,
592
+ default134 as withId,
593
+ default133 as withTooltip,
573
594
  wrapperTooltip
574
595
  };
575
596
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -89,8 +89,17 @@ const processThemes = (themesList) => {
89
89
  return [themes.ds5];
90
90
  }
91
91
  };
92
+ const getVarValue = (cssVar) => {
93
+ const tempEl = document.createElement("div");
94
+ tempEl.style.setProperty("--temp", cssVar);
95
+ document.body.appendChild(tempEl);
96
+ const computedValue = getComputedStyle(tempEl).getPropertyValue("--temp").trim();
97
+ document.body.removeChild(tempEl);
98
+ return computedValue;
99
+ };
92
100
  export {
93
101
  createTheme,
102
+ getVarValue,
94
103
  processThemes,
95
104
  setElementAttrs
96
105
  };
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport { CSSProperties } from \"react\";\nimport {\n themes,\n HvThemeColorModeStructure,\n HvThemeStructure,\n theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n for (const property in style) {\n element.style[property] = style[property];\n }\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string\n) => {\n const element = themeRootId\n ? document.getElementById(themeRootId)\n : document.body;\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // Set default properties for all components to inherit\n setElementStyle(element, {\n colorScheme: colorScheme,\n backgroundColor: theme.colors.backgroundColor,\n accentColor: theme.colors.secondary,\n color: theme.colors.secondary,\n fontSize: theme.typography.body.fontSize,\n fontWeight: theme.typography.body.fontWeight,\n lineHeight: theme.typography.body.lineHeight,\n letterSpacing: theme.typography.body.letterSpacing,\n fontFamily: theme.fontFamily.body,\n });\n }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key]\n );\n } else if (typeof customizedTheme[key] == typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme | HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme | HvThemeStructure)[] = [];\n\n themesList.map((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim()\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n } else {\n // DS5\n return [themes.ds5];\n }\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5"],"mappings":"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"}
1
+ {"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport { CSSProperties } from \"react\";\nimport {\n themes,\n HvThemeColorModeStructure,\n HvThemeStructure,\n theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n for (const property in style) {\n element.style[property] = style[property];\n }\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string\n) => {\n const element = themeRootId\n ? document.getElementById(themeRootId)\n : document.body;\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // Set default properties for all components to inherit\n setElementStyle(element, {\n colorScheme: colorScheme,\n backgroundColor: theme.colors.backgroundColor,\n accentColor: theme.colors.secondary,\n color: theme.colors.secondary,\n fontSize: theme.typography.body.fontSize,\n fontWeight: theme.typography.body.fontWeight,\n lineHeight: theme.typography.body.lineHeight,\n letterSpacing: theme.typography.body.letterSpacing,\n fontFamily: theme.fontFamily.body,\n });\n }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key]\n );\n } else if (typeof customizedTheme[key] == typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme | HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme | HvThemeStructure)[] = [];\n\n themesList.map((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim()\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n } else {\n // DS5\n return [themes.ds5];\n }\n};\n\n/**\n * Returns the computed value of a theme CSS var\n */\nexport const getVarValue = (cssVar: string): string => {\n const tempEl = document.createElement(\"div\");\n tempEl.style.setProperty(\"--temp\", cssVar);\n document.body.appendChild(tempEl);\n const computedValue = getComputedStyle(tempEl)\n .getPropertyValue(\"--temp\")\n .trim();\n document.body.removeChild(tempEl);\n return computedValue;\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5","getVarValue","cssVar","tempEl","createElement","setProperty","appendChild","computedValue","getComputedStyle","getPropertyValue","removeChild"],"mappings":"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"}
@@ -1,11 +1,11 @@
1
- import withTooltip from "../hocs/withTooltip.js";
1
+ import withTooltipUtil from "../hocs/withTooltip.js";
2
2
  const hideTooltip = (evt) => {
3
3
  const isOverFlow = evt.target.children.length > 1 ? Array.of(...evt.target.children).some((child) => child.scrollWidth > child.clientWidth) : evt.target.scrollWidth > evt.target.clientWidth;
4
4
  return !isOverFlow;
5
5
  };
6
6
  const wrapperTooltip = (hasTooltips, Component, label) => {
7
7
  const ComponentFunction = () => Component;
8
- return hasTooltips ? withTooltip(ComponentFunction, label, "top", hideTooltip, {}, {}) : ComponentFunction;
8
+ return hasTooltips ? withTooltipUtil(ComponentFunction, label, "top", hideTooltip) : ComponentFunction;
9
9
  };
10
10
  export {
11
11
  wrapperTooltip
@@ -1 +1 @@
1
- {"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip, {}, {})\n : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AACzBD,SAAAA,cACHI,YAAYD,mBAAmBD,OAAO,OAAOf,aAAa,CAAC,GAAG,EAAE,IAChEgB;AACN;"}
1
+ {"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AAChC,SAAOD,cACHI,gBAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;"}