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