@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,126 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const scrollToHorizontalClasses = require("./scrollToHorizontalClasses.cjs");
|
|
4
|
+
const react = require("@emotion/react");
|
|
5
|
+
const clsx = require("clsx");
|
|
6
|
+
const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
|
|
7
|
+
const useScrollTo = require("../useScrollTo.cjs");
|
|
8
|
+
const React = require("react");
|
|
9
|
+
const withTooltip = require("../withTooltip.cjs");
|
|
10
|
+
const styles = require("@mui/material/styles");
|
|
11
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
12
|
+
const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
|
|
13
|
+
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
14
|
+
const material = require("@mui/material");
|
|
15
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
16
|
+
const useUniqueId = require("../../../hooks/useUniqueId.cjs");
|
|
17
|
+
const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
|
|
18
|
+
const useTheme = require("../../../hooks/useTheme.cjs");
|
|
19
|
+
const setId = require("../../../utils/setId.cjs");
|
|
20
|
+
const keyCheck = require("../../../utils/keyboardUtils/keyCheck.cjs");
|
|
21
|
+
const keyboardCodes = require("../../../utils/keyboardUtils/keyboardCodes.cjs");
|
|
22
|
+
const {
|
|
23
|
+
Enter
|
|
24
|
+
} = keyboardCodes.keyboardCodes;
|
|
25
|
+
const HvScrollToHorizontal = ({
|
|
26
|
+
id,
|
|
27
|
+
defaultSelectedIndex = 0,
|
|
28
|
+
scrollElementId,
|
|
29
|
+
href = true,
|
|
30
|
+
onChange,
|
|
31
|
+
onClick,
|
|
32
|
+
onEnter,
|
|
33
|
+
className,
|
|
34
|
+
classes,
|
|
35
|
+
options,
|
|
36
|
+
offset = 0,
|
|
37
|
+
position = "relative",
|
|
38
|
+
tooltipPosition = "top",
|
|
39
|
+
...others
|
|
40
|
+
}) => {
|
|
41
|
+
const muiTheme = styles.useTheme();
|
|
42
|
+
const downSm = material.useMediaQuery(muiTheme.breakpoints.down("sm"));
|
|
43
|
+
const upMd = material.useMediaQuery(muiTheme.breakpoints.up("md"));
|
|
44
|
+
const {
|
|
45
|
+
activeTheme,
|
|
46
|
+
selectedMode
|
|
47
|
+
} = useTheme.useTheme();
|
|
48
|
+
const elementId = useUniqueId.default(id, "hvHorizontalScrollto");
|
|
49
|
+
const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
|
|
50
|
+
const handleSelection = (event, value, index) => {
|
|
51
|
+
event.preventDefault();
|
|
52
|
+
const wrappedOnChange = () => {
|
|
53
|
+
onChange == null ? void 0 : onChange(event, index);
|
|
54
|
+
};
|
|
55
|
+
setScrollTo(event, value, index, wrappedOnChange);
|
|
56
|
+
};
|
|
57
|
+
const tooltipWrappers = React.useMemo(() => {
|
|
58
|
+
return options.map((option) => {
|
|
59
|
+
return withTooltip.withTooltip(option.label, "div", tooltipPosition);
|
|
60
|
+
});
|
|
61
|
+
}, [options, tooltipPosition]);
|
|
62
|
+
const NotSelected = React.useCallback(() => {
|
|
63
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
64
|
+
children: ({
|
|
65
|
+
css
|
|
66
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
67
|
+
className: clsx.clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.default.notSelectedRoot, css(ScrollToHorizontal_styles.styles.notSelectedRoot)),
|
|
68
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
69
|
+
className: clsx.clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.default.notSelected, css(ScrollToHorizontal_styles.styles.notSelected))
|
|
70
|
+
})
|
|
71
|
+
})
|
|
72
|
+
});
|
|
73
|
+
}, [classes == null ? void 0 : classes.notSelectedRoot, classes == null ? void 0 : classes.notSelected]);
|
|
74
|
+
const Selected = React.useCallback(() => {
|
|
75
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
76
|
+
children: ({
|
|
77
|
+
css
|
|
78
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
|
|
79
|
+
height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
|
|
80
|
+
width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
|
|
81
|
+
className: clsx.clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.default.selected, css(ScrollToHorizontal_styles.styles.selected))
|
|
82
|
+
})
|
|
83
|
+
});
|
|
84
|
+
}, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
|
|
85
|
+
const tabs = options.map((option, index) => {
|
|
86
|
+
const selected = selectedIndex === index;
|
|
87
|
+
const tooltipWrapper = tooltipWrappers[index];
|
|
88
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(HorizontalScrollListItem.HvHorizontalScrollListItem, {
|
|
89
|
+
id: setId.setId(elementId, `item-${index}`),
|
|
90
|
+
onClick: (event) => {
|
|
91
|
+
handleSelection(event, option.value, index);
|
|
92
|
+
onClick == null ? void 0 : onClick(event, index);
|
|
93
|
+
},
|
|
94
|
+
onKeyDown: (event) => {
|
|
95
|
+
if (keyCheck.isKeypress(event, Enter) === true) {
|
|
96
|
+
handleSelection(event, option.value, index);
|
|
97
|
+
onEnter == null ? void 0 : onEnter(event, index);
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
tooltipWrapper,
|
|
101
|
+
selected,
|
|
102
|
+
children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
|
|
103
|
+
children: option.label
|
|
104
|
+
}), selected ? /* @__PURE__ */ jsxRuntime.jsx(Selected, {}) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {})]
|
|
105
|
+
}, option.key || option.label);
|
|
106
|
+
});
|
|
107
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
108
|
+
children: ({
|
|
109
|
+
css
|
|
110
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
|
|
111
|
+
className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.default.root, css(ScrollToHorizontal_styles.styles.root), css({
|
|
112
|
+
width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
|
|
113
|
+
marginTop: 0,
|
|
114
|
+
marginBottom: 0,
|
|
115
|
+
marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
|
|
116
|
+
marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
|
|
117
|
+
backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
|
|
118
|
+
}), position === "sticky" && clsx.clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.default.positionSticky, css(ScrollToHorizontal_styles.styles.positionSticky)), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.default.positionFixed, css(ScrollToHorizontal_styles.styles.positionFixed))),
|
|
119
|
+
id: elementId,
|
|
120
|
+
...others,
|
|
121
|
+
children: tabs
|
|
122
|
+
})
|
|
123
|
+
});
|
|
124
|
+
};
|
|
125
|
+
exports.HvScrollToHorizontal = HvScrollToHorizontal;
|
|
126
|
+
//# sourceMappingURL=ScrollToHorizontal.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\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: HvScrollToHorizontalOption[];\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 Horizontal scroll to. */\n position?: HvScrollToHorizontalPositions;\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?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = ({\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 = \"top\",\n ...others\n}: HvScrollToHorizontalProps) => {\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\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);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n classes?.notSelectedRoot,\n scrollToHorizontalClasses.notSelectedRoot,\n css(styles.notSelectedRoot)\n )}\n >\n <div\n className={clsx(\n classes?.notSelected,\n scrollToHorizontalClasses.notSelected,\n css(styles.notSelected)\n )}\n />\n </div>\n )}\n </ClassNames>\n );\n }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={clsx(\n classes?.selected,\n scrollToHorizontalClasses.selected,\n css(styles.selected)\n )}\n />\n )}\n </ClassNames>\n );\n }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\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 >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ClassNames>\n {({ css }) => (\n <ol\n className={clsx(\n className,\n classes?.root,\n scrollToHorizontalClasses.root,\n css(styles.root),\n css({\n width:\n position === \"fixed\" && (upMd || downSm)\n ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: fade(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n position === \"sticky\" &&\n clsx(\n classes?.positionSticky,\n scrollToHorizontalClasses.positionSticky,\n css(styles.positionSticky)\n ),\n position === \"fixed\" &&\n clsx(\n classes?.positionFixed,\n scrollToHorizontalClasses.positionFixed,\n css(styles.positionFixed)\n )\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n )}\n </ClassNames>\n );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","clsx","notSelectedRoot","scrollToHorizontalClasses","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","positionSticky","positionFixed"],"mappings":"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"}
|
|
@@ -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;;"}
|