@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.
- package/dist/cjs/components/Button/Button.cjs +6 -0
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.styles.cjs +15 -7
- package/dist/cjs/components/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/components/Button/buttonClasses.cjs +1 -1
- package/dist/cjs/components/Button/buttonClasses.cjs.map +1 -1
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs +4 -4
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.cjs +347 -0
- package/dist/cjs/components/DatePicker/DatePicker.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs +78 -0
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/datePickerClasses.cjs +8 -0
- package/dist/cjs/components/DatePicker/datePickerClasses.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/useVisibleDate.cjs +193 -0
- package/dist/cjs/components/DatePicker/useVisibleDate.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/utils.cjs +32 -0
- package/dist/cjs/components/DatePicker/utils.cjs.map +1 -0
- package/dist/cjs/components/Dialog/Dialog.cjs +3 -7
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +32 -31
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs +122 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs +74 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs +8 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs.map +1 -0
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs +2 -3
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs +51 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +126 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs +46 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +90 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs +43 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +71 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs +103 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/utils.cjs +76 -0
- package/dist/cjs/components/ScrollTo/utils.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs +20 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs.map +1 -0
- package/dist/cjs/hocs/withTooltip.cjs +4 -4
- package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
- package/dist/cjs/index.cjs +21 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/utils/theme.cjs +9 -0
- package/dist/cjs/utils/theme.cjs.map +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
- package/dist/esm/components/Button/Button.js +6 -0
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/Button.styles.js +15 -7
- package/dist/esm/components/Button/Button.styles.js.map +1 -1
- package/dist/esm/components/Button/buttonClasses.js +1 -1
- package/dist/esm/components/Button/buttonClasses.js.map +1 -1
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js +4 -4
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePicker.js +345 -0
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -0
- package/dist/esm/components/DatePicker/DatePicker.styles.js +78 -0
- package/dist/esm/components/DatePicker/DatePicker.styles.js.map +1 -0
- package/dist/esm/components/DatePicker/datePickerClasses.js +8 -0
- package/dist/esm/components/DatePicker/datePickerClasses.js.map +1 -0
- package/dist/esm/components/DatePicker/useVisibleDate.js +193 -0
- package/dist/esm/components/DatePicker/useVisibleDate.js.map +1 -0
- package/dist/esm/components/DatePicker/utils.js +32 -0
- package/dist/esm/components/DatePicker/utils.js.map +1 -0
- package/dist/esm/components/Dialog/Dialog.js +5 -9
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +33 -32
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.js +122 -0
- package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js +74 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js +8 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map +1 -0
- package/dist/esm/components/MultiButton/MultiButton.styles.js +2 -3
- package/dist/esm/components/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js +51 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +126 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js +46 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +90 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js +43 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +71 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js +103 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -0
- package/dist/esm/components/ScrollTo/utils.js +76 -0
- package/dist/esm/components/ScrollTo/utils.js.map +1 -0
- package/dist/esm/components/ScrollTo/withTooltip.js +20 -0
- package/dist/esm/components/ScrollTo/withTooltip.js.map +1 -0
- package/dist/esm/hocs/withTooltip.js +4 -4
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/index.js +40 -19
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/theme.js +9 -0
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/esm/utils/wrapperTooltip.js +2 -2
- package/dist/esm/utils/wrapperTooltip.js.map +1 -1
- package/dist/types/index.d.ts +388 -1
- 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 = (
|
|
19
|
-
const isHidden = hideTooltip == null ? void 0 : hideTooltip(
|
|
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
|
|
48
|
+
const withTooltipUtil = withTooltip;
|
|
49
49
|
export {
|
|
50
|
-
|
|
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 {
|
|
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 {
|
|
234
|
-
import { default as
|
|
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
|
|
247
|
-
import { default as
|
|
248
|
-
import { default as
|
|
249
|
-
import { default as
|
|
250
|
-
import { default as
|
|
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
|
|
262
|
-
import { default as
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
493
|
+
default128 as iconVariant,
|
|
478
494
|
increaseSize,
|
|
479
495
|
default15 as infoMessageClasses,
|
|
496
|
+
default125 as inlineEditorClasses,
|
|
480
497
|
default60 as inputClasses,
|
|
481
|
-
|
|
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
|
-
|
|
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
|
-
|
|
578
|
+
default127 as useIsMounted,
|
|
560
579
|
useLabels,
|
|
561
580
|
useSavedState,
|
|
581
|
+
useScrollTo,
|
|
562
582
|
useSelectionPath,
|
|
563
583
|
useTheme,
|
|
564
|
-
|
|
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
|
-
|
|
572
|
-
|
|
592
|
+
default134 as withId,
|
|
593
|
+
default133 as withTooltip,
|
|
573
594
|
wrapperTooltip
|
|
574
595
|
};
|
|
575
596
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/esm/utils/theme.js
CHANGED
|
@@ -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":";AAaA,MAAMA,kBAAkBA,CAACC,SAAsBC,UAAyB;AACtE,aAAWC,YAAYD,OAAO;AAC5BD,YAAQC,MAAMC,QAAQ,IAAID,MAAMC,QAAQ;AAAA,EAC1C;AACF;AAKO,MAAMC,kBAAkBA,CAC7BC,WACAC,UACAC,aACAC,gBACG;AACH,QAAMP,UAAUO,cACZC,SAASC,eAAeF,WAAW,IACnCC,SAASE;AAEb,MAAIV,SAAS;AACHW,YAAAA,aAAc,cAAaP,SAAS;AACpCO,YAAAA,aAAc,mBAAkBN,QAAQ;AAGhDN,oBAAgBC,SAAS;AAAA,MACvBM;AAAAA,MACAM,iBAAiBC,MAAMC,OAAOF;AAAAA,MAC9BG,aAAaF,MAAMC,OAAOE;AAAAA,MAC1BC,OAAOJ,MAAMC,OAAOE;AAAAA,MACpBE,UAAUL,MAAMM,WAAWT,KAAKQ;AAAAA,MAChCE,YAAYP,MAAMM,WAAWT,KAAKU;AAAAA,MAClCC,YAAYR,MAAMM,WAAWT,KAAKW;AAAAA,MAClCC,eAAeT,MAAMM,WAAWT,KAAKY;AAAAA,MACrCC,YAAYV,MAAMU,WAAWb;AAAAA,IAAAA,CAC9B;AAAA,EACH;AACF;AAKA,MAAMc,2BAA2BA,CAACC,KAAaC,mBAA2B;AAClEC,QAAAA,WAAWA,CAACC,QAChBA,OAAO,OAAOA,QAAQ,YAAY,CAACC,MAAMC,QAAQF,GAAG;AAGtD,QAAMG,kBAAkB;AAAA,IAAE,GAAGN;AAAAA,EAAAA;AAG7BO,SAAOC,KAAKP,cAAc,EAAEQ,QAASC,CAAQ,QAAA;AACvCJ,QAAAA,gBAAgBI,GAAG,GAAG;AACpBR,UAAAA,SAASI,gBAAgBI,GAAG,CAAC,KAAKR,SAASD,eAAeS,GAAG,CAAC,GAAG;AACnDA,wBAAAA,GAAG,IAAIX,yBACrBO,gBAAgBI,GAAG,GACnBT,eAAeS,GAAG,CAAC;AAAA,MAAA,WAEZ,OAAOJ,gBAAgBI,GAAG,KAAK,OAAOT,eAAeS,GAAG,GAAG;AACpDA,wBAAAA,GAAG,IAAIT,eAAeS,GAAG;AAAA,MAC3C;AAAA,IAAA,OACK;AACWA,sBAAAA,GAAG,IAAIT,eAAeS,GAAG;AAAA,IAC3C;AAAA,EAAA,CACD;AAEMJ,SAAAA;AACT;AAMaK,MAAAA,cAAcA,CACzBC,UAC+B;;AACzB,QAAA;AAAA,IACJC;AAAAA,IACAC,OAAO;AAAA,IACPC,oBAAoB;AAAA,IACpB,GAAGd;AAAAA,EACDW,IAAAA;AAGJ,QAAMN,kBAA8CL,iBAC/CF,yBAAyBiB,OAAOF,IAAI,GAAGb,cAAc,IACtD;AAAA,IAAE,GAAGe,OAAOF,IAAI;AAAA,EAAA;AAGJD,kBAAAA,OAAOA,KAAKI;AAG5B,MAAIhB,gBAAgB;AAClBM,WAAOC,KAAKF,gBAAgBjB,OAAO6B,KAAK,EAAET,QAASU,CAAS,SAAA;AAC1D,UAAI,CAACH,OAAOF,IAAI,EAAEzB,OAAO6B,MAAMC,IAAI,GAAG;AACpB9B,wBAAAA,OAAO6B,MAAMC,IAAI,IAAI;AAAA,UACnC,GAAGH,OAAOF,IAAI,EAAEzB,OAAO6B,MAAME;AAAAA,UAC7B,GAAId,gBAAgBjB,OAAO6B,MAAMC,IAAI;AAAA,QAAA;AAAA,MAIzC;AAAA,IAAA,CACD;AAAA,EACH;AAIA,MAAI,CAACJ,uBAAqBd,oBAAeZ,WAAfY,mBAAuBiB,QAAO;AACtDX,WAAOC,KAAKF,gBAAgBjB,OAAO6B,KAAK,EAAET,QAASU,CAAS,SAAA;;AACtD,UAAA,CAACZ,OAAOC,OAAKP,MAAAA,eAAeZ,WAAfY,gBAAAA,IAAuBiB,UAAS,EAAE,EAAEG,SAASF,IAAI,GAAG;AAC5Db,eAAAA,gBAAgBjB,OAAO6B,MAAMC,IAAI;AAAA,MAC1C;AAAA,IAAA,CACD;AAAA,EACH;AAGOb,SAAAA;AACT;AAOagB,MAAAA,gBAAgBA,CAC3BC,eACmC;AACnC,MAAIA,cAAcnB,MAAMC,QAAQkB,UAAU,KAAKA,WAAWC,SAAS,GAAG;AACpE,UAAMC,OAAuC,CAAA;AAE7CF,eAAWG,IAAKC,CAAQ,QAAA;AAChBC,YAAAA,IAAYH,KAAKI,UACpBC,CAAMA,MAAAA,EAAEjB,KAAKI,KAAWU,MAAAA,IAAId,KAAKI,KAAM,CAAA;AAG1C,UAAIW,MAAM,IAAI;AACPG,aAAAA,OAAOH,GAAG,CAAC;AAChBH,aAAKO,KAAKL,GAAG;AAAA,MAAA,OACR;AACLF,aAAKO,KAAKL,GAAG;AAAA,MACf;AAAA,IAAA,CACD;AAGMF,WAAAA;AAAAA,EAAAA,OACF;AAEE,WAAA,CAACT,OAAOiB,GAAG;AAAA,EACpB;AACF;"}
|
|
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
|
|
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 ?
|
|
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
|
|
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;"}
|