@hitachivantara/uikit-react-core 5.3.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/Dialog/Dialog.cjs +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +3 -3
- 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/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 +19 -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/Dialog/Dialog.js +2 -2
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +3 -3
- 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/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 +38 -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 +193 -1
- package/package.json +5 -5
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const utils = require("./utils.cjs");
|
|
5
|
+
const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
|
|
6
|
+
const RETRY_MAX = 5;
|
|
7
|
+
const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
|
|
8
|
+
const scrollEle = React.useRef(window);
|
|
9
|
+
const requestedAnimationFrame = React.useRef(0);
|
|
10
|
+
const lastContainerScrollTop = React.useRef(0);
|
|
11
|
+
const selectedIndexRef = React.useRef(selectedIndex);
|
|
12
|
+
React.useEffect(() => {
|
|
13
|
+
selectedIndexRef.current = selectedIndex;
|
|
14
|
+
}, [selectedIndex]);
|
|
15
|
+
React.useEffect(() => {
|
|
16
|
+
scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
|
|
17
|
+
lastContainerScrollTop.current = utils.verticalScrollOffset(scrollEle.current);
|
|
18
|
+
}, [scrollElementId]);
|
|
19
|
+
const checkScroll = React.useCallback((event) => {
|
|
20
|
+
if (requestedAnimationFrame.current === 0 && (window == null ? void 0 : window.requestAnimationFrame)) {
|
|
21
|
+
requestedAnimationFrame.current = window.requestAnimationFrame(() => {
|
|
22
|
+
requestedAnimationFrame.current = 0;
|
|
23
|
+
const firstVisibleElementIndex = utils.findFirstVisibleElement(scrollEle.current, options, offset);
|
|
24
|
+
let newSelectedIndex = firstVisibleElementIndex;
|
|
25
|
+
if (firstVisibleElementIndex < 0) {
|
|
26
|
+
newSelectedIndex = 0;
|
|
27
|
+
}
|
|
28
|
+
if (newSelectedIndex < options.length - 1 && utils.isScrolledToTheBottom(scrollEle.current)) {
|
|
29
|
+
newSelectedIndex += 1;
|
|
30
|
+
}
|
|
31
|
+
const containerScrollTop = utils.getScrollTop(scrollEle.current);
|
|
32
|
+
const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
|
|
33
|
+
lastContainerScrollTop.current = containerScrollTop;
|
|
34
|
+
if (isScrollingDown) {
|
|
35
|
+
if (newSelectedIndex < selectedIndexRef.current) {
|
|
36
|
+
newSelectedIndex = selectedIndexRef.current;
|
|
37
|
+
}
|
|
38
|
+
} else if (newSelectedIndex > selectedIndexRef.current) {
|
|
39
|
+
newSelectedIndex = selectedIndexRef.current;
|
|
40
|
+
}
|
|
41
|
+
setSelectedIndex(newSelectedIndex);
|
|
42
|
+
onChange == null ? void 0 : onChange(event, newSelectedIndex);
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}, [offset, options, onChange]);
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
if (scrollEle.current) {
|
|
48
|
+
scrollEle.current.addEventListener("scroll", checkScroll, false);
|
|
49
|
+
}
|
|
50
|
+
return () => {
|
|
51
|
+
if (scrollEle.current) {
|
|
52
|
+
scrollEle.current.removeEventListener("scroll", checkScroll);
|
|
53
|
+
}
|
|
54
|
+
if (requestedAnimationFrame.current !== 0) {
|
|
55
|
+
window.cancelAnimationFrame(requestedAnimationFrame.current);
|
|
56
|
+
requestedAnimationFrame.current = 0;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}, [checkScroll]);
|
|
60
|
+
React.useEffect(() => {
|
|
61
|
+
let checkRenderedInterval;
|
|
62
|
+
if (href) {
|
|
63
|
+
const hashValue = document.location.hash.split("#")[1] || "";
|
|
64
|
+
const option = options.find((o) => o.value === hashValue);
|
|
65
|
+
if (option) {
|
|
66
|
+
let retry = 0;
|
|
67
|
+
checkRenderedInterval = setInterval(() => {
|
|
68
|
+
const ele = document.getElementById(option.value);
|
|
69
|
+
if (ele) {
|
|
70
|
+
utils.scrollElement(ele, scrollEle.current, option.offset || offset);
|
|
71
|
+
clearInterval(checkRenderedInterval);
|
|
72
|
+
} else {
|
|
73
|
+
retry += 1;
|
|
74
|
+
if (retry === RETRY_MAX) {
|
|
75
|
+
clearInterval(checkRenderedInterval);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}, 1e3);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return () => {
|
|
82
|
+
clearInterval(checkRenderedInterval);
|
|
83
|
+
};
|
|
84
|
+
}, []);
|
|
85
|
+
const setScrollTo = (event, id, index, wrappedOnChange) => {
|
|
86
|
+
const option = options.find((o) => o.value === id);
|
|
87
|
+
if (option) {
|
|
88
|
+
const ele = document.getElementById(id);
|
|
89
|
+
if (ele) {
|
|
90
|
+
utils.scrollElement(ele, scrollEle.current, option.offset || offset, direction);
|
|
91
|
+
}
|
|
92
|
+
if (href) {
|
|
93
|
+
window.history.pushState({}, "", `#${options[index].value}`);
|
|
94
|
+
}
|
|
95
|
+
setSelectedIndex(index);
|
|
96
|
+
wrappedOnChange == null ? void 0 : wrappedOnChange(index);
|
|
97
|
+
selectedIndexRef.current = index;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
return [selectedIndex, setScrollTo];
|
|
101
|
+
};
|
|
102
|
+
exports.useScrollTo = useScrollTo;
|
|
103
|
+
//# sourceMappingURL=useScrollTo.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollTo.cjs","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./Vertical\";\n\nexport const useScrollTo = (\n selectedIndexProp: number = 0,\n scrollElementId: string | undefined = undefined,\n href: boolean = false,\n offset: number = 0,\n options: HvScrollToVerticalOption[] = [],\n onChange:\n | ((\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void)\n | undefined = undefined,\n direction: \"column\" | \"row\" = \"column\"\n): [\n number,\n (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => void\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n const requestedAnimationFrame = useRef(0);\n const lastContainerScrollTop = useRef<number>(0);\n\n // Ref to use a often-changing value in useCallback, as recommended in\n // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n const selectedIndexRef = useRef(selectedIndex);\n\n useEffect(() => {\n selectedIndexRef.current = selectedIndex;\n }, [selectedIndex]);\n\n useEffect(() => {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }, [scrollElementId]);\n\n const checkScroll = useCallback(\n (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n ) => {\n if (\n requestedAnimationFrame.current === 0 &&\n window?.requestAnimationFrame\n ) {\n requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n requestedAnimationFrame.current = 0;\n\n const firstVisibleElementIndex = findFirstVisibleElement(\n scrollEle.current,\n options,\n offset\n );\n\n let newSelectedIndex = firstVisibleElementIndex;\n\n // select the first element when all elements are bellow the container's top\n if (firstVisibleElementIndex < 0) {\n newSelectedIndex = 0;\n }\n\n // if the user has reached the bottom of the container, select the first nav item still visible\n // (usually this selects the last nav item, when it can't reach the top the container)\n // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n if (\n newSelectedIndex < options.length - 1 &&\n isScrolledToTheBottom(scrollEle.current)\n ) {\n newSelectedIndex += 1;\n }\n\n const containerScrollTop = getScrollTop(scrollEle.current);\n const isScrollingDown =\n containerScrollTop > lastContainerScrollTop.current;\n lastContainerScrollTop.current = containerScrollTop;\n\n // only update the selected item if the scroll direction is moving away from it\n if (isScrollingDown) {\n if (newSelectedIndex < selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n } else if (newSelectedIndex > selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n\n setSelectedIndex(newSelectedIndex);\n onChange?.(event, newSelectedIndex);\n });\n }\n },\n [offset, options, onChange]\n );\n\n // Registers and unregisters the scroll listener\n useEffect(() => {\n if (scrollEle.current) {\n scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n }\n\n return () => {\n if (scrollEle.current) {\n scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n }\n\n if (requestedAnimationFrame.current !== 0) {\n window.cancelAnimationFrame(requestedAnimationFrame.current);\n requestedAnimationFrame.current = 0;\n }\n };\n }, [checkScroll]);\n\n // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n useEffect(() => {\n let checkRenderedInterval;\n\n if (href) {\n const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n const option = options.find((o) => o.value === hashValue);\n\n if (option) {\n let retry = 0;\n checkRenderedInterval = setInterval(() => {\n const ele = document.getElementById(option.value);\n\n if (ele) {\n scrollElement(ele, scrollEle.current, option.offset || offset);\n clearInterval(checkRenderedInterval);\n } else {\n retry += 1;\n if (retry === RETRY_MAX) {\n clearInterval(checkRenderedInterval);\n }\n }\n }, 1000);\n }\n }\n\n return () => {\n clearInterval(checkRenderedInterval);\n };\n\n // We really want to run this just in the first load\n // in fact this doesn't even belong here, the logic should be external\n }, []);\n\n const setScrollTo = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => {\n const option = options.find((o) => o.value === id);\n\n if (option) {\n const ele = document.getElementById(id);\n if (ele) {\n scrollElement(\n ele,\n scrollEle.current,\n option.offset || offset,\n direction\n );\n }\n\n if (href) {\n window.history.pushState({}, \"\", `#${options[index].value}`);\n }\n\n setSelectedIndex(index);\n wrappedOnChange?.(index);\n\n // Safari scrolls immediately (no smooth scroll support),\n // so this ref value must be updated asap\n selectedIndexRef.current = index;\n }\n };\n\n return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const getScrollTop = (c = window) => {
|
|
4
|
+
if (c === window) {
|
|
5
|
+
return window.scrollY || window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
|
|
6
|
+
}
|
|
7
|
+
return c.scrollTop;
|
|
8
|
+
};
|
|
9
|
+
const verticalScrollOffset = (t, c = window) => {
|
|
10
|
+
var _a;
|
|
11
|
+
if (c === window) {
|
|
12
|
+
return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).top) || 0) + (window.scrollY || window.pageYOffset);
|
|
13
|
+
}
|
|
14
|
+
if (getComputedStyle(c).position !== "static") {
|
|
15
|
+
return t.offsetTop;
|
|
16
|
+
}
|
|
17
|
+
return t.offsetTop - c.offsetTop;
|
|
18
|
+
};
|
|
19
|
+
const horizontalScrollOffset = (t, c = window) => {
|
|
20
|
+
var _a;
|
|
21
|
+
if (c === window) {
|
|
22
|
+
return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).left) || 0) + (window.scrollX || window.pageXOffset);
|
|
23
|
+
}
|
|
24
|
+
if (getComputedStyle(c).position !== "static") {
|
|
25
|
+
return t.offsetLeft;
|
|
26
|
+
}
|
|
27
|
+
return t.offsetLeft - c.offsetLeft;
|
|
28
|
+
};
|
|
29
|
+
const scrollElement = (element, container, offset = 0, direction) => {
|
|
30
|
+
var _a, _b;
|
|
31
|
+
if (direction === "row") {
|
|
32
|
+
const elemLeft = horizontalScrollOffset(element, container);
|
|
33
|
+
(_a = container == null ? void 0 : container.scrollTo) == null ? void 0 : _a.call(container, {
|
|
34
|
+
left: elemLeft - offset,
|
|
35
|
+
behavior: "smooth"
|
|
36
|
+
});
|
|
37
|
+
} else {
|
|
38
|
+
const elemTop = verticalScrollOffset(element, container);
|
|
39
|
+
(_b = container == null ? void 0 : container.scrollTo) == null ? void 0 : _b.call(container, {
|
|
40
|
+
top: elemTop - offset,
|
|
41
|
+
behavior: "smooth"
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
element.focus({
|
|
45
|
+
preventScroll: true
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
const isScrolledToTheBottom = (container) => {
|
|
49
|
+
const containerScrollTop = getScrollTop(container);
|
|
50
|
+
if (container === window) {
|
|
51
|
+
const scrollHeight = document.documentElement && document.documentElement.scrollHeight || document.body.scrollHeight;
|
|
52
|
+
return containerScrollTop + window.innerHeight >= scrollHeight;
|
|
53
|
+
}
|
|
54
|
+
return containerScrollTop + container.offsetHeight >= container.scrollHeight;
|
|
55
|
+
};
|
|
56
|
+
const findFirstVisibleElement = (container, options, offset) => {
|
|
57
|
+
const boundsTop = verticalScrollOffset(container);
|
|
58
|
+
let i = 0;
|
|
59
|
+
for (; i < options.length; i += 1) {
|
|
60
|
+
const ele = document.getElementById(options[i].value);
|
|
61
|
+
if (ele) {
|
|
62
|
+
const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);
|
|
63
|
+
if (elemTop > boundsTop) {
|
|
64
|
+
break;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return i - 1;
|
|
69
|
+
};
|
|
70
|
+
exports.findFirstVisibleElement = findFirstVisibleElement;
|
|
71
|
+
exports.getScrollTop = getScrollTop;
|
|
72
|
+
exports.horizontalScrollOffset = horizontalScrollOffset;
|
|
73
|
+
exports.isScrolledToTheBottom = isScrolledToTheBottom;
|
|
74
|
+
exports.scrollElement = scrollElement;
|
|
75
|
+
exports.verticalScrollOffset = verticalScrollOffset;
|
|
76
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","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;;AACH,MAAID,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;;AACH,MAAID,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;;AACH,MAAIA,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
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const withTooltip$1 = require("../../hocs/withTooltip.cjs");
|
|
5
|
+
const Typography = require("../Typography/Typography.cjs");
|
|
6
|
+
const hideTooltip = (event) => {
|
|
7
|
+
const isOverFlow = event.target.children.length > 1 ? Array.of(...event.target.children).some((child) => child.scrollWidth > child.clientWidth) : event.target.scrollWidth > event.target.clientWidth;
|
|
8
|
+
return !isOverFlow;
|
|
9
|
+
};
|
|
10
|
+
const withTooltip = (label, componentType, tooltipPosition = "top", hideOnOverflow = true) => {
|
|
11
|
+
const component = (props) => /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
|
|
12
|
+
component: componentType,
|
|
13
|
+
...props,
|
|
14
|
+
children: props.children
|
|
15
|
+
});
|
|
16
|
+
const hideTooltipFunc = hideOnOverflow ? hideTooltip : void 0;
|
|
17
|
+
return withTooltip$1.default(component, label, tooltipPosition, hideTooltipFunc);
|
|
18
|
+
};
|
|
19
|
+
exports.withTooltip = withTooltip;
|
|
20
|
+
//# sourceMappingURL=withTooltip.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"withTooltip.cjs","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,2BAAAA,IAACC,WAAAA,cAAY;AAAA,IAACH,WAAWH;AAAAA,IAAc,GAAKI;AAAAA,IAAKd,UAC9Cc,MAAMd;AAAAA,EAAAA,CAEV;AAEKiB,QAAAA,kBAAkBL,iBAAiBhB,cAAcsB;AAEvD,SAAOC,cAAgBN,QAAAA,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;;"}
|
|
@@ -17,8 +17,8 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
|
|
|
17
17
|
const title = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
|
|
18
18
|
children: label
|
|
19
19
|
});
|
|
20
|
-
const handleMouseEnter = (
|
|
21
|
-
const isHidden = hideTooltip == null ? void 0 : hideTooltip(
|
|
20
|
+
const handleMouseEnter = (event) => {
|
|
21
|
+
const isHidden = hideTooltip == null ? void 0 : hideTooltip(event);
|
|
22
22
|
setIsHoverDisabled(isHidden);
|
|
23
23
|
setOpen(!isHidden);
|
|
24
24
|
};
|
|
@@ -47,6 +47,6 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
|
|
|
47
47
|
})
|
|
48
48
|
});
|
|
49
49
|
};
|
|
50
|
-
const
|
|
51
|
-
exports.default =
|
|
50
|
+
const withTooltipUtil = withTooltip;
|
|
51
|
+
exports.default = withTooltipUtil;
|
|
52
52
|
//# sourceMappingURL=withTooltip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withTooltip.cjs","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"withTooltip.cjs","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,eAC5C,KAAK;AAEP,QAAM,CAACC,MAAMC,OAAO,IAAIF,eAAkB,KAAK;AAEzCG,QAAAA,uCAASC,yBAAY;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,wCACGQ,QAAAA,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,yCAEhB,OAAA;AAAA,MAAA,GACMT;AAAAA,MACJmB,cAAcT;AAAAA,MACdU,cAAcP;AAAAA,MAAiBJ,yCAE9Bd,WAAS;AAAA,QAAA,GAAKM;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAAI;AAAA,EAAA,CAEhB;AAEhB;AAEF,MAAA,kBAAeP;;"}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -233,6 +233,15 @@ const Slider = require("./components/Slider/Slider.cjs");
|
|
|
233
233
|
const filterGroupClasses = require("./components/FilterGroup/filterGroupClasses.cjs");
|
|
234
234
|
const FilterGroup = require("./components/FilterGroup/FilterGroup.cjs");
|
|
235
235
|
const DatePicker = require("./components/DatePicker/DatePicker.cjs");
|
|
236
|
+
const scrollToVerticalClasses = require("./components/ScrollTo/Vertical/scrollToVerticalClasses.cjs");
|
|
237
|
+
const verticalScrollListItemClasses = require("./components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs");
|
|
238
|
+
const ScrollToVertical = require("./components/ScrollTo/Vertical/ScrollToVertical.cjs");
|
|
239
|
+
const scrollToHorizontalClasses = require("./components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs");
|
|
240
|
+
const horizontalScrollListItemClasses = require("./components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs");
|
|
241
|
+
const ScrollToHorizontal = require("./components/ScrollTo/Horizontal/ScrollToHorizontal.cjs");
|
|
242
|
+
const useScrollTo = require("./components/ScrollTo/useScrollTo.cjs");
|
|
243
|
+
const inlineEditorClasses = require("./components/InlineEditor/inlineEditorClasses.cjs");
|
|
244
|
+
const InlineEditor = require("./components/InlineEditor/InlineEditor.cjs");
|
|
236
245
|
const useUniqueId = require("./hooks/useUniqueId.cjs");
|
|
237
246
|
const useIsMounted = require("./hooks/useIsMounted.cjs");
|
|
238
247
|
const useClickOutside = require("./hooks/useClickOutside.cjs");
|
|
@@ -557,6 +566,15 @@ exports.HvSlider = Slider.HvSlider;
|
|
|
557
566
|
exports.filterGroupClasses = filterGroupClasses.default;
|
|
558
567
|
exports.HvFilterGroup = FilterGroup.HvFilterGroup;
|
|
559
568
|
exports.HvDatePicker = DatePicker.HvDatePicker;
|
|
569
|
+
exports.scrollToVerticalClasses = scrollToVerticalClasses.default;
|
|
570
|
+
exports.verticalScrollListItemClasses = verticalScrollListItemClasses.default;
|
|
571
|
+
exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
|
|
572
|
+
exports.scrollToHorizontalClasses = scrollToHorizontalClasses.default;
|
|
573
|
+
exports.horizontalScrollListItemClasses = horizontalScrollListItemClasses.default;
|
|
574
|
+
exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
|
|
575
|
+
exports.useScrollTo = useScrollTo.useScrollTo;
|
|
576
|
+
exports.inlineEditorClasses = inlineEditorClasses.default;
|
|
577
|
+
exports.HvInlineEditor = InlineEditor.HvInlineEditor;
|
|
560
578
|
exports.useUniqueId = useUniqueId.default;
|
|
561
579
|
exports.useIsMounted = useIsMounted.default;
|
|
562
580
|
exports.useClickOutside = useClickOutside.useClickOutside;
|
|
@@ -586,6 +604,7 @@ exports.isKeypress = keyCheck.isKeypress;
|
|
|
586
604
|
exports.decreaseSize = sizes.decreaseSize;
|
|
587
605
|
exports.increaseSize = sizes.increaseSize;
|
|
588
606
|
exports.createTheme = theme.createTheme;
|
|
607
|
+
exports.getVarValue = theme.getVarValue;
|
|
589
608
|
exports.processThemes = theme.processThemes;
|
|
590
609
|
exports.setElementAttrs = theme.setElementAttrs;
|
|
591
610
|
exports.setId = setId.setId;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/cjs/utils/theme.cjs
CHANGED
|
@@ -91,7 +91,16 @@ const processThemes = (themesList) => {
|
|
|
91
91
|
return [uikitStyles.themes.ds5];
|
|
92
92
|
}
|
|
93
93
|
};
|
|
94
|
+
const getVarValue = (cssVar) => {
|
|
95
|
+
const tempEl = document.createElement("div");
|
|
96
|
+
tempEl.style.setProperty("--temp", cssVar);
|
|
97
|
+
document.body.appendChild(tempEl);
|
|
98
|
+
const computedValue = getComputedStyle(tempEl).getPropertyValue("--temp").trim();
|
|
99
|
+
document.body.removeChild(tempEl);
|
|
100
|
+
return computedValue;
|
|
101
|
+
};
|
|
94
102
|
exports.createTheme = createTheme;
|
|
103
|
+
exports.getVarValue = getVarValue;
|
|
95
104
|
exports.processThemes = processThemes;
|
|
96
105
|
exports.setElementAttrs = setElementAttrs;
|
|
97
106
|
//# sourceMappingURL=theme.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.cjs","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.cjs","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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"}
|
|
@@ -7,7 +7,7 @@ const hideTooltip = (evt) => {
|
|
|
7
7
|
};
|
|
8
8
|
const wrapperTooltip = (hasTooltips, Component, label) => {
|
|
9
9
|
const ComponentFunction = () => Component;
|
|
10
|
-
return hasTooltips ? withTooltip.default(ComponentFunction, label, "top", hideTooltip
|
|
10
|
+
return hasTooltips ? withTooltip.default(ComponentFunction, label, "top", hideTooltip) : ComponentFunction;
|
|
11
11
|
};
|
|
12
12
|
exports.wrapperTooltip = wrapperTooltip;
|
|
13
13
|
//# sourceMappingURL=wrapperTooltip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wrapperTooltip.cjs","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.cjs","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,YAAAA,QAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;;"}
|
|
@@ -9,7 +9,7 @@ import dialogClasses from "./dialogClasses.js";
|
|
|
9
9
|
import { ClassNames } from "@emotion/react";
|
|
10
10
|
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
11
11
|
import { getFocusableList } from "../../utils/focusableElementFinder.js";
|
|
12
|
-
import
|
|
12
|
+
import withTooltipUtil from "../../hocs/withTooltip.js";
|
|
13
13
|
import { useTheme } from "../../hooks/useTheme.js";
|
|
14
14
|
import { setId } from "../../utils/setId.js";
|
|
15
15
|
import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
|
|
@@ -88,7 +88,7 @@ const HvDialog = ({
|
|
|
88
88
|
const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, {
|
|
89
89
|
role: "presentation"
|
|
90
90
|
});
|
|
91
|
-
const CloseButtonTooltipWrapper = buttonTitle ?
|
|
91
|
+
const CloseButtonTooltipWrapper = buttonTitle ? withTooltipUtil(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
|
|
92
92
|
return /* @__PURE__ */ jsx(ClassNames, {
|
|
93
93
|
children: ({
|
|
94
94
|
css
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport isNil from \"lodash/isNil\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Element id that should be focus when the Dialog opens. */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n classes,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n delete (others as any).fullScreen;\n\n const { activeTheme, selectedMode, rootId } = useTheme();\n\n const focusableQueue = useRef<{\n first?: HTMLElement;\n last?: HTMLElement;\n }>({ first: undefined, last: undefined });\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = (\n event,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation) {\n onClose?.(event, reason);\n } else if (!disableBackdropClick) {\n onClose?.(event, reason);\n }\n };\n\n const measuredRef = useCallback(\n (node) => {\n if (node) {\n const focusableList = getFocusableList(node);\n focusableQueue.current = {\n first: focusableList[1],\n last: focusableList[focusableList.length - 2],\n };\n if (isNil(firstFocusable)) focusableList[1].focus();\n else {\n const element =\n firstFocusable && document.getElementById(firstFocusable);\n if (element) element.focus();\n else {\n console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n focusableList[1].focus();\n }\n }\n }\n },\n [firstFocusable]\n );\n\n const keyDownHandler = (event) => {\n if (\n isKeypress(event, keyboardCodes.Tab) &&\n !isNil(event.target) &&\n !isNil(focusableQueue)\n ) {\n if (event.shiftKey && event.target === focusableQueue.current.first) {\n focusableQueue.current.last?.focus();\n event.preventDefault();\n }\n if (!event.shiftKey && event.target === focusableQueue.current.last) {\n focusableQueue.current.first?.focus();\n event.preventDefault();\n }\n }\n // Needed as this handler overrides the one in the material ui Modal.\n else if (isKeypress(event, keyboardCodes.Esc)) {\n if (\n \"onEscapeKeyDown\" in others &&\n typeof others.onEscapeKeyDown === \"function\"\n ) {\n others.onEscapeKeyDown(event);\n }\n\n if (!others.disableEscapeKeyDown) {\n // Swallow the event, in case someone is listening for the escape key on the body.\n event.stopPropagation();\n\n wrappedClose(event, true, \"escapeKeyDown\");\n }\n }\n };\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\", null, null, null)\n : closeButtonDisplay;\n\n return (\n <ClassNames>\n {({ css }) => (\n <MuiDialog\n container={document.getElementById(rootId || \"\") || document.body}\n className={clsx(dialogClasses.root, classes?.root, className)}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n onKeyDown={keyDownHandler}\n fullWidth\n maxWidth={false}\n slots={{\n backdrop: (backdropProps) => (\n <StyledBackdrop\n open={open}\n onClick={(event) => wrappedClose(event)}\n $backColor={\n activeTheme?.colors?.modes[selectedMode].atmo4 ||\n theme.colors.atmo4\n }\n {...backdropProps}\n />\n ),\n }}\n classes={{ container: css({ position: \"relative\" }) }}\n BackdropProps={{\n classes: {\n root: clsx(classes?.background, dialogClasses.background),\n },\n }}\n PaperProps={{\n classes: {\n root: clsx(\n css(styles.paper),\n classes?.paper,\n dialogClasses.paper,\n css({ position: \"absolute\" }),\n fullscreen &&\n clsx(\n dialogClasses.fullscreen,\n classes?.fullscreen,\n \"fullscreen\"\n )\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <StyledClose\n id={setId(id, \"close\")}\n className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </StyledClose>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c &&\n React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","ClassNames","css","MuiDialog","container","body","clsx","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","position","BackdropProps","background","PaperProps","styles","paper","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport isNil from \"lodash/isNil\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Element id that should be focus when the Dialog opens. */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n classes,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n delete (others as any).fullScreen;\n\n const { activeTheme, selectedMode, rootId } = useTheme();\n\n const focusableQueue = useRef<{\n first?: HTMLElement;\n last?: HTMLElement;\n }>({ first: undefined, last: undefined });\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = (\n event,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation) {\n onClose?.(event, reason);\n } else if (!disableBackdropClick) {\n onClose?.(event, reason);\n }\n };\n\n const measuredRef = useCallback(\n (node) => {\n if (node) {\n const focusableList = getFocusableList(node);\n focusableQueue.current = {\n first: focusableList[1],\n last: focusableList[focusableList.length - 2],\n };\n if (isNil(firstFocusable)) focusableList[1].focus();\n else {\n const element =\n firstFocusable && document.getElementById(firstFocusable);\n if (element) element.focus();\n else {\n console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n focusableList[1].focus();\n }\n }\n }\n },\n [firstFocusable]\n );\n\n const keyDownHandler = (event) => {\n if (\n isKeypress(event, keyboardCodes.Tab) &&\n !isNil(event.target) &&\n !isNil(focusableQueue)\n ) {\n if (event.shiftKey && event.target === focusableQueue.current.first) {\n focusableQueue.current.last?.focus();\n event.preventDefault();\n }\n if (!event.shiftKey && event.target === focusableQueue.current.last) {\n focusableQueue.current.first?.focus();\n event.preventDefault();\n }\n }\n // Needed as this handler overrides the one in the material ui Modal.\n else if (isKeypress(event, keyboardCodes.Esc)) {\n if (\n \"onEscapeKeyDown\" in others &&\n typeof others.onEscapeKeyDown === \"function\"\n ) {\n others.onEscapeKeyDown(event);\n }\n\n if (!others.disableEscapeKeyDown) {\n // Swallow the event, in case someone is listening for the escape key on the body.\n event.stopPropagation();\n\n wrappedClose(event, true, \"escapeKeyDown\");\n }\n }\n };\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n return (\n <ClassNames>\n {({ css }) => (\n <MuiDialog\n container={document.getElementById(rootId || \"\") || document.body}\n className={clsx(dialogClasses.root, classes?.root, className)}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n onKeyDown={keyDownHandler}\n fullWidth\n maxWidth={false}\n slots={{\n backdrop: (backdropProps) => (\n <StyledBackdrop\n open={open}\n onClick={(event) => wrappedClose(event)}\n $backColor={\n activeTheme?.colors?.modes[selectedMode].atmo4 ||\n theme.colors.atmo4\n }\n {...backdropProps}\n />\n ),\n }}\n classes={{ container: css({ position: \"relative\" }) }}\n BackdropProps={{\n classes: {\n root: clsx(classes?.background, dialogClasses.background),\n },\n }}\n PaperProps={{\n classes: {\n root: clsx(\n css(styles.paper),\n classes?.paper,\n dialogClasses.paper,\n css({ position: \"absolute\" }),\n fullscreen &&\n clsx(\n dialogClasses.fullscreen,\n classes?.fullscreen,\n \"fullscreen\"\n )\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <StyledClose\n id={setId(id, \"close\")}\n className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </StyledClose>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c &&\n React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","ClassNames","css","MuiDialog","container","body","clsx","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","position","BackdropProps","background","PaperProps","styles","paper","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":";;;;;;;;;;;;;;;;AA2CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC,uBAAuB;AAAA,EACvB,GAAGC;AACU,MAAM;AACnB,SAAQA,OAAeC;AAEjB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAWC,SAAU;AAExD,QAAMC,iBAAiBC,OAGpB;AAAA,IAAEC,OAAOC;AAAAA,IAAWC,MAAMD;AAAAA,EAAAA,CAAW;AAKxC,QAAME,eAAeA,CACnBC,OACAC,mBAA4B,OAC5BC,WACG;AACH,QAAID,kBAAkB;AACpBlB,yCAAUiB,OAAOE;AAAAA,IAAM,WACd,CAACf,sBAAsB;AAChCJ,yCAAUiB,OAAOE;AAAAA,IACnB;AAAA,EAAA;AAGIC,QAAAA,cAAcC,YACjBC,CAAS,SAAA;AACR,QAAIA,MAAM;AACFC,YAAAA,gBAAgBC,iBAAiBF,IAAI;AAC3CX,qBAAec,UAAU;AAAA,QACvBZ,OAAOU,cAAc,CAAC;AAAA,QACtBR,MAAMQ,cAAcA,cAAcG,SAAS,CAAC;AAAA,MAAA;AAE9C,UAAIC,MAAM1B,cAAc;AAAiB,sBAAA,CAAC,EAAE2B;WACvC;AACH,cAAMC,UACJ5B,kBAAkB6B,SAASC,eAAe9B,cAAc;AACtD4B,YAAAA;AAASA,kBAAQD,MAAK;AAAA,aACrB;AACKI,kBAAAA,KAAM,0BAAyB/B,2BAA2B;AAEpD,wBAAA,CAAC,EAAE2B;QACnB;AAAA,MACF;AAAA,IACF;AAAA,EAAA,GAEF,CAAC3B,cAAc,CAAC;AAGlB,QAAMgC,iBAAkBhB,CAAU,UAAA;;AAChC,QACEiB,WAAWjB,OAAOkB,cAAcC,GAAG,KACnC,CAACT,MAAMV,MAAMoB,MAAM,KACnB,CAACV,MAAMhB,cAAc,GACrB;AACA,UAAIM,MAAMqB,YAAYrB,MAAMoB,WAAW1B,eAAec,QAAQZ,OAAO;AACpDY,6BAAAA,QAAQV,SAARU,mBAAcG;AAC7BX,cAAMsB,eAAgB;AAAA,MACxB;AACA,UAAI,CAACtB,MAAMqB,YAAYrB,MAAMoB,WAAW1B,eAAec,QAAQV,MAAM;AACpDU,6BAAAA,QAAQZ,UAARY,mBAAeG;AAC9BX,cAAMsB,eAAgB;AAAA,MACxB;AAAA,IAGOL,WAAAA,WAAWjB,OAAOkB,cAAcK,GAAG,GAAG;AAC7C,UACE,qBAAqBnC,UACrB,OAAOA,OAAOoC,oBAAoB,YAClC;AACApC,eAAOoC,gBAAgBxB,KAAK;AAAA,MAC9B;AAEI,UAAA,CAACZ,OAAOqC,sBAAsB;AAEhCzB,cAAM0B,gBAAiB;AAEV1B,qBAAAA,OAAO,MAAM,eAAe;AAAA,MAC3C;AAAA,IACF;AAAA,EAAA;AAGI2B,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAiB;AAE9D,QAAMC,4BAA4B9C,cAC9B+C,gBAAYL,oBAAoB1C,aAAa,KAAK,IAClD0C;AAEJ,6BACGM,YAAU;AAAA,IAAApD,UACRA,CAAC;AAAA,MAAEqD;AAAAA,IAAAA,2BACDC,WAAS;AAAA,MACRC,WAAWvB,SAASC,eAAetB,UAAU,EAAE,KAAKqB,SAASwB;AAAAA,MAC7D1D,WAAW2D,KAAKC,cAAcC,MAAM9D,mCAAS8D,MAAM7D,SAAS;AAAA,MAC5DC;AAAAA,MACA6D,KAAKtC;AAAAA,MACLrB;AAAAA,MACAO,YAAYH;AAAAA,MACZH,SAASA,CAACiB,OAAOE,WAAWH,aAAaC,OAAOH,QAAWK,MAAM;AAAA,MACjEwC,WAAW1B;AAAAA,MACX2B,WAAS;AAAA,MACTC,UAAU;AAAA,MACVC,OAAO;AAAA,QACLC,UAAWC,CACTnB;;AAAAA,qCAACoB,gBAAc;AAAA,YACblE;AAAAA,YACAmE,SAAUjD,CAAUD,UAAAA,aAAaC,KAAK;AAAA,YACtCkD,cACE5D,gDAAa6D,WAAb7D,mBAAqB8D,MAAM7D,cAAc8D,UACzCC,MAAMH,OAAOE;AAAAA,YACd,GACGN;AAAAA,UAAAA,CAAa;AAAA;AAAA,MAGvB;AAAA,MACArE,SAAS;AAAA,QAAE0D,WAAWF,IAAI;AAAA,UAAEqB,UAAU;AAAA,QAAA,CAAY;AAAA,MAAE;AAAA,MACpDC,eAAe;AAAA,QACb9E,SAAS;AAAA,UACP8D,MAAMF,KAAK5D,mCAAS+E,YAAYlB,cAAckB,UAAU;AAAA,QAC1D;AAAA,MACF;AAAA,MACAC,YAAY;AAAA,QACVhF,SAAS;AAAA,UACP8D,MAAMF,KACJJ,IAAIyB,OAAOC,KAAK,GAChBlF,mCAASkF,OACTrB,cAAcqB,OACd1B,IAAI;AAAA,YAAEqB,UAAU;AAAA,UAAA,CAAY,GAC5BrE,cACEoD,KACEC,cAAcrD,YACdR,mCAASQ,YACT,YAAY,CACb;AAAA,QAEP;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MAAA,GACNE;AAAAA,MAAMP,UAAA,CAEV+C,oBAACiC,aAAW;AAAA,QACVjF,IAAIkF,MAAMlF,IAAI,OAAO;AAAA,QACrBD,WAAW2D,KAAKC,cAAcwB,aAAarF,mCAASqF,WAAW;AAAA,QAC/DC,SAAQ;AAAA,QACRf,SAAUjD,CAAAA,UAAUD,aAAaC,OAAO,MAAMH,MAAS;AAAA,QACvD,cAAYZ;AAAAA,QAAYJ,UAExB+C,oBAACG,2BAAyB,EAAA;AAAA,MAAG,CAAA,GAE9BlD,YAAY,OAAOA,aAAa,WAC7BoF,eAAMC,SAASC,IACbtF,UACA,CAACuF,MACCA,KACAH,eAAMI,aAAaD,GAAyB;AAAA,QAAElF;AAAAA,MAAAA,CAAY,CAAC,IAE/DL,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGL;AAEjB;"}
|
|
@@ -34,7 +34,7 @@ const styles = {
|
|
|
34
34
|
boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
|
|
35
35
|
borderRadius: theme.dialog.borderRadius,
|
|
36
36
|
[`&.${paperClasses.root}`]: {
|
|
37
|
-
width: "inherit",
|
|
37
|
+
// width: "inherit",
|
|
38
38
|
minWidth: "33.3333333%",
|
|
39
39
|
maxWidth: "83.3333333%",
|
|
40
40
|
"&.fullscreen": {
|
|
@@ -59,7 +59,7 @@ const StyledBackdrop = /* @__PURE__ */ _styled(Backdrop, process.env.NODE_ENV ==
|
|
|
59
59
|
$backColor
|
|
60
60
|
}) => ({
|
|
61
61
|
background: fade($backColor, 0.8)
|
|
62
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
62
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IHsgW2tleTogc3RyaW5nXTogQ1NTSW50ZXJwb2xhdGlvbiB9ID0ge1xuICBwYXBlcjoge1xuICAgIFtgJi5NdWlEaWFsb2ctcGFwZXJgXToge1xuICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICBmbGV4OiBcIjAgMCA4My4zMzMzMzMzJVwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgYm94U2hhZG93OiBbXCJub25lXCIsIFwiMCAycHggMTJweCByZ2JhKDY1LDY1LDY1LDAuMTIpXCJdLFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgW2AmLiR7TXVpUGFwZXJDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgLy8gd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICBtYXhXaWR0aDogXCI4My4zMzMzMzMzJVwiLFxuICAgICAgICBcIiYuZnVsbHNjcmVlblwiOiB7XG4gICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjBcIixcbiAgICAgICAgICB3aWR0aDogXCJpbmhlcml0XCIsXG4gICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICBtaW5IZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBwYWRkaW5nOiAwLFxuICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogdGhlbWUuc3BhY2Uuc20sXG4gIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG4iXX0= */");
|
|
63
63
|
const StyledClose = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
|
|
64
64
|
return /* @__PURE__ */ jsx(HvButton, {
|
|
65
65
|
...props,
|
|
@@ -78,7 +78,7 @@ const StyledClose = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
|
|
|
78
78
|
right: theme.space.sm,
|
|
79
79
|
width: 32,
|
|
80
80
|
height: 32
|
|
81
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
81
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IHsgW2tleTogc3RyaW5nXTogQ1NTSW50ZXJwb2xhdGlvbiB9ID0ge1xuICBwYXBlcjoge1xuICAgIFtgJi5NdWlEaWFsb2ctcGFwZXJgXToge1xuICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICBmbGV4OiBcIjAgMCA4My4zMzMzMzMzJVwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgYm94U2hhZG93OiBbXCJub25lXCIsIFwiMCAycHggMTJweCByZ2JhKDY1LDY1LDY1LDAuMTIpXCJdLFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgW2AmLiR7TXVpUGFwZXJDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgLy8gd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICBtYXhXaWR0aDogXCI4My4zMzMzMzMzJVwiLFxuICAgICAgICBcIiYuZnVsbHNjcmVlblwiOiB7XG4gICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjBcIixcbiAgICAgICAgICB3aWR0aDogXCJpbmhlcml0XCIsXG4gICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICBtaW5IZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBwYWRkaW5nOiAwLFxuICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogdGhlbWUuc3BhY2Uuc20sXG4gIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG4iXX0= */");
|
|
82
82
|
export {
|
|
83
83
|
StyledBackdrop,
|
|
84
84
|
StyledClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n paperClasses as MuiPaperClasses,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n paper: {\n [`&.MuiDialog-paper`]: {\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n display: \"flex\",\n flexDirection: \"column\",\n color: theme.colors.secondary,\n flex: \"0 0 83.3333333%\",\n backgroundColor: theme.colors.atmo1,\n padding: \"0px\",\n overflow: \"auto\",\n boxShadow: [\"none\", \"0 2px 12px rgba(65,65,65,0.12)\"],\n borderRadius: theme.dialog.borderRadius,\n [`&.${MuiPaperClasses.root}`]: {\n width: \"inherit\",\n minWidth: \"33.3333333%\",\n maxWidth: \"83.3333333%\",\n \"&.fullscreen\": {\n flex: \"1\",\n borderRadius: \"0\",\n width: \"inherit\",\n minWidth: \"100%\",\n maxWidth: \"100%\",\n minHeight: \"100%\",\n maxHeight: \"100%\",\n },\n },\n },\n },\n};\n\nexport const StyledBackdrop = styled(\n MuiBackdrop,\n transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n return <HvButton {...props} ref={ref} />;\n })\n)({\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n});\n"],"names":["styles","paper","maxHeight","theme","dialog","margin","display","flexDirection","color","colors","secondary","flex","backgroundColor","atmo1","padding","overflow","boxShadow","borderRadius","MuiPaperClasses","root","
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n paperClasses as MuiPaperClasses,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n paper: {\n [`&.MuiDialog-paper`]: {\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n display: \"flex\",\n flexDirection: \"column\",\n color: theme.colors.secondary,\n flex: \"0 0 83.3333333%\",\n backgroundColor: theme.colors.atmo1,\n padding: \"0px\",\n overflow: \"auto\",\n boxShadow: [\"none\", \"0 2px 12px rgba(65,65,65,0.12)\"],\n borderRadius: theme.dialog.borderRadius,\n [`&.${MuiPaperClasses.root}`]: {\n // width: \"inherit\",\n minWidth: \"33.3333333%\",\n maxWidth: \"83.3333333%\",\n \"&.fullscreen\": {\n flex: \"1\",\n borderRadius: \"0\",\n width: \"inherit\",\n minWidth: \"100%\",\n maxWidth: \"100%\",\n minHeight: \"100%\",\n maxHeight: \"100%\",\n },\n },\n },\n },\n};\n\nexport const StyledBackdrop = styled(\n MuiBackdrop,\n transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n return <HvButton {...props} ref={ref} />;\n })\n)({\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n});\n"],"names":["styles","paper","maxHeight","theme","dialog","margin","display","flexDirection","color","colors","secondary","flex","backgroundColor","atmo1","padding","overflow","boxShadow","borderRadius","MuiPaperClasses","root","minWidth","maxWidth","width","minHeight","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","background","fade","StyledClose","_styled","forwardRef","props","ref","HvButton","position","top","space","sm","right","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYO,MAAMA,SAA8C;AAAA,EACzDC,OAAO;AAAA,IACL,CAAE,mBAAkB,GAAG;AAAA,MACrBC,WAAY,oBAAmBC,MAAMC,OAAOC;AAAAA,MAC5CC,SAAS;AAAA,MACTC,eAAe;AAAA,MACfC,OAAOL,MAAMM,OAAOC;AAAAA,MACpBC,MAAM;AAAA,MACNC,iBAAiBT,MAAMM,OAAOI;AAAAA,MAC9BC,SAAS;AAAA,MACTC,UAAU;AAAA,MACVC,WAAW,CAAC,QAAQ,gCAAgC;AAAA,MACpDC,cAAcd,MAAMC,OAAOa;AAAAA,MAC3B,CAAE,KAAIC,aAAgBC,MAAM,GAAG;AAAA;AAAA,QAE7BC,UAAU;AAAA,QACVC,UAAU;AAAA,QACV,gBAAgB;AAAA,UACdV,MAAM;AAAA,UACNM,cAAc;AAAA,UACdK,OAAO;AAAA,UACPF,UAAU;AAAA,UACVC,UAAU;AAAA,UACVE,WAAW;AAAA,UACXrB,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEasB,MAAAA,yCACXC,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7CC,YAAYC,KAAKF,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,q7FAAA;AAEI,MAAMQ,cAAcC,wBACzBC,WAAW,CAACC,OAAsBC,QAAiC;AACjE,6BAAQC,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAACd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EACF;AAAA,EACAlB,SAAS;AAAA,EACTM,UAAU;AAAA,EACVsB,UAAU;AAAA,EACVC,KAAKxC,MAAMyC,MAAMC;AAAAA,EACjBC,OAAO3C,MAAMyC,MAAMC;AAAAA,EACnBvB,OAAO;AAAA,EACPyB,QAAQ;AACV,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q7FAAA;"}
|