@hitachivantara/uikit-react-core 5.2.0 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Button/Button.cjs +6 -0
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/Button/Button.styles.cjs +15 -7
- package/dist/cjs/components/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/components/Button/buttonClasses.cjs +1 -1
- package/dist/cjs/components/Button/buttonClasses.cjs.map +1 -1
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs +4 -4
- package/dist/cjs/components/Calendar/SingleCalendar/SingleCalendar.styles.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.cjs +347 -0
- package/dist/cjs/components/DatePicker/DatePicker.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs +78 -0
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/datePickerClasses.cjs +8 -0
- package/dist/cjs/components/DatePicker/datePickerClasses.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/useVisibleDate.cjs +193 -0
- package/dist/cjs/components/DatePicker/useVisibleDate.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/utils.cjs +32 -0
- package/dist/cjs/components/DatePicker/utils.cjs.map +1 -0
- package/dist/cjs/components/Dialog/Dialog.cjs +3 -7
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +32 -31
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs +122 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs +74 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs +8 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs.map +1 -0
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs +2 -3
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs +51 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +126 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs +46 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +90 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs +43 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +71 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs +103 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/utils.cjs +76 -0
- package/dist/cjs/components/ScrollTo/utils.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs +20 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs.map +1 -0
- package/dist/cjs/hocs/withTooltip.cjs +4 -4
- package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
- package/dist/cjs/index.cjs +21 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/utils/theme.cjs +9 -0
- package/dist/cjs/utils/theme.cjs.map +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
- package/dist/esm/components/Button/Button.js +6 -0
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/Button.styles.js +15 -7
- package/dist/esm/components/Button/Button.styles.js.map +1 -1
- package/dist/esm/components/Button/buttonClasses.js +1 -1
- package/dist/esm/components/Button/buttonClasses.js.map +1 -1
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js +4 -4
- package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePicker.js +345 -0
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -0
- package/dist/esm/components/DatePicker/DatePicker.styles.js +78 -0
- package/dist/esm/components/DatePicker/DatePicker.styles.js.map +1 -0
- package/dist/esm/components/DatePicker/datePickerClasses.js +8 -0
- package/dist/esm/components/DatePicker/datePickerClasses.js.map +1 -0
- package/dist/esm/components/DatePicker/useVisibleDate.js +193 -0
- package/dist/esm/components/DatePicker/useVisibleDate.js.map +1 -0
- package/dist/esm/components/DatePicker/utils.js +32 -0
- package/dist/esm/components/DatePicker/utils.js.map +1 -0
- package/dist/esm/components/Dialog/Dialog.js +5 -9
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +33 -32
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.js +122 -0
- package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js +74 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js +8 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map +1 -0
- package/dist/esm/components/MultiButton/MultiButton.styles.js +2 -3
- package/dist/esm/components/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js +51 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +126 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js +46 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +90 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js +43 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +71 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js +103 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -0
- package/dist/esm/components/ScrollTo/utils.js +76 -0
- package/dist/esm/components/ScrollTo/utils.js.map +1 -0
- package/dist/esm/components/ScrollTo/withTooltip.js +20 -0
- package/dist/esm/components/ScrollTo/withTooltip.js.map +1 -0
- package/dist/esm/hocs/withTooltip.js +4 -4
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/index.js +40 -19
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/theme.js +9 -0
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/esm/utils/wrapperTooltip.js +2 -2
- package/dist/esm/utils/wrapperTooltip.js.map +1 -1
- package/dist/types/index.d.ts +388 -1
- package/package.json +5 -5
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ClassNames } from \"@emotion/react\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { getVarValue, isKeypress, keyboardCodes } from \"@core/utils\";\nimport {\n HvButtonProps,\n HvTypographyVariants,\n HvTypographyProps,\n HvInput,\n HvButton,\n HvTypography,\n} from \"@core/components\";\nimport inlineEditorClasses, {\n HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\nimport { styles } from \"./InlineEditor.styles\";\nimport { HvThemeTypographyProps, theme } from \"@hitachivantara/uikit-styles\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nexport interface HvInlineEditorProps\n extends Omit<HvBaseProps<HTMLDivElement>, \"onBlur\" | \"onChange\"> {\n /** The value of the form element. */\n value?: string;\n /** Whether the Edit icon should always be visible */\n showIcon?: boolean;\n /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n component?: React.ElementType;\n /** Variant of the HvTypography to display */\n variant?: HvTypographyVariants;\n /** Called when the input is blurred. */\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n value: string\n ) => void;\n /** Called when the input value changes. */\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /** Props passed to the HvButton component */\n buttonProps?: HvButtonProps;\n /** Props passed to the HvTypography text component */\n typographyProps?: HvTypographyProps;\n /** A Jss Object used to override or extend the styles applied to the empty state component. */\n classes?: HvInlineEditorClasses;\n}\n\nconst getTypographyStyles = (typography): HvThemeTypographyProps => {\n let typographyStyles = {};\n Object.keys(typography).map((k) => {\n typographyStyles[k] = getVarValue(typography[k]);\n });\n return typographyStyles;\n};\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n className,\n classes,\n value: valueProp,\n defaultValue,\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n ...others\n}: HvInlineEditorProps) => {\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n\n const typographyStyles = getTypographyStyles(theme.typography[variant] || {});\n const { lineHeight } = typographyStyles;\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur = (event) => {\n setEditMode(false);\n\n const newValue = value || cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown = (event) => {\n if (isKeypress(event, keyboardCodes.Esc)) {\n setEditMode(false);\n setValue(cachedValue);\n }\n onKeyDown?.(event);\n };\n\n const handleChange = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n className,\n inlineEditorClasses.root,\n classes?.root,\n css(styles.root)\n )}\n >\n {editMode ? (\n <InputComponent\n inputRef={inputRef}\n classes={{\n root: clsx(classes?.inputRoot, inlineEditorClasses.inputRoot),\n input: clsx(\n classes?.input,\n inlineEditorClasses.input,\n css(styles.input)\n ),\n inputBorderContainer: clsx(\n classes?.inputBorderContainer,\n inlineEditorClasses.inputBorderContainer,\n css(styles.inputBorderContainer)\n ),\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n className={clsx(\n classes?.button,\n inlineEditorClasses.button,\n css(styles.button),\n parseInt(lineHeight as string, 10) >= 28 &&\n clsx(\n classes?.largeText,\n inlineEditorClasses.largeText,\n css(styles.largeText)\n )\n )}\n onClick={handleClick}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={clsx(\n classes?.text,\n inlineEditorClasses.text,\n css(styles.text),\n !value &&\n clsx(\n classes?.textEmpty,\n inlineEditorClasses.textEmpty,\n css(styles.textEmpty)\n )\n )}\n {...typographyProps}\n >\n {value || placeholder}\n </HvTypography>\n <Edit\n color=\"secondary_60\"\n role=\"presentation\"\n className={clsx(\n classes?.icon,\n inlineEditorClasses.icon,\n css(styles.icon),\n showIcon &&\n clsx(\n classes?.iconVisible,\n inlineEditorClasses.iconVisible,\n css(styles.iconVisible)\n )\n )}\n />\n </HvButton>\n )}\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["getTypographyStyles","typography","typographyStyles","Object","keys","map","k","getVarValue","HvInlineEditor","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","theme","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKeypress","keyboardCodes","Esc","handleChange","val","ClassNames","children","css","clsx","inlineEditorClasses","root","styles","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","_jsxs","HvButton","overrideIconColors","button","parseInt","largeText","onClick","HvTypography","noWrap","text","textEmpty","Edit","color","role","icon","iconVisible"],"mappings":"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"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const inlineEditorClasses = require("./inlineEditorClasses.cjs");
|
|
5
|
+
const baseInputClasses = require("../BaseInput/baseInputClasses.cjs");
|
|
6
|
+
const inputClasses = require("../Input/inputClasses.cjs");
|
|
7
|
+
const styles = {
|
|
8
|
+
root: {
|
|
9
|
+
[`& .${baseInputClasses.default.inputRoot}.${inputClasses.default.inputRoot}`]: {
|
|
10
|
+
height: "100%"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
inputBorderContainer: {
|
|
14
|
+
top: "unset",
|
|
15
|
+
bottom: 0
|
|
16
|
+
},
|
|
17
|
+
input: {
|
|
18
|
+
padding: uikitStyles.theme.spacing([0, "8px"])
|
|
19
|
+
},
|
|
20
|
+
text: {
|
|
21
|
+
overflow: "hidden",
|
|
22
|
+
textOverflow: "ellipsis",
|
|
23
|
+
whiteSpace: "nowrap",
|
|
24
|
+
alignSelf: "center"
|
|
25
|
+
},
|
|
26
|
+
textEmpty: {
|
|
27
|
+
color: uikitStyles.theme.typography.placeholderText.color
|
|
28
|
+
},
|
|
29
|
+
button: {
|
|
30
|
+
padding: uikitStyles.theme.spacing([0, "8px"]),
|
|
31
|
+
boxSizing: "border-box",
|
|
32
|
+
cursor: "text",
|
|
33
|
+
height: "100%",
|
|
34
|
+
width: "100%",
|
|
35
|
+
maxWidth: "100%",
|
|
36
|
+
justifyContent: "flex-start",
|
|
37
|
+
backgroundColor: "transparent",
|
|
38
|
+
"&:hover, &:focus": {
|
|
39
|
+
outline: `1px solid ${uikitStyles.theme.inlineEditor.hoverBorderColor}`,
|
|
40
|
+
backgroundColor: "transparent",
|
|
41
|
+
[`& .${inlineEditorClasses.default.icon}`]: {
|
|
42
|
+
visibility: "visible"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"&:active": {
|
|
46
|
+
outline: `1px solid ${uikitStyles.theme.inlineEditor.activeBorderColor}`,
|
|
47
|
+
backgroundColor: "transparent",
|
|
48
|
+
[`& .${inlineEditorClasses.default.icon}`]: {
|
|
49
|
+
visibility: "visible"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"& > div": {
|
|
53
|
+
width: "100%"
|
|
54
|
+
},
|
|
55
|
+
"& > div > span": {
|
|
56
|
+
width: "100%",
|
|
57
|
+
overflow: "hidden"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
icon: {
|
|
61
|
+
cursor: "pointer",
|
|
62
|
+
visibility: "hidden",
|
|
63
|
+
minWidth: 32,
|
|
64
|
+
alignSelf: "center"
|
|
65
|
+
},
|
|
66
|
+
iconVisible: {
|
|
67
|
+
visibility: "visible"
|
|
68
|
+
},
|
|
69
|
+
largeText: {
|
|
70
|
+
margin: uikitStyles.theme.spacing([0, "8px"])
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
exports.styles = styles;
|
|
74
|
+
//# sourceMappingURL=InlineEditor.styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"../index\";\nimport inlineEditorClasses from \"./inlineEditorClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n inputBorderContainer: CSSInterpolation;\n input: CSSInterpolation;\n text: CSSInterpolation;\n textEmpty: CSSInterpolation;\n button: CSSInterpolation;\n icon: CSSInterpolation;\n iconVisible: CSSInterpolation;\n largeText: CSSInterpolation;\n} = {\n root: {\n [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n height: \"100%\",\n },\n },\n inputBorderContainer: {\n top: \"unset\",\n bottom: 0,\n },\n input: {\n padding: theme.spacing([0, \"8px\"]),\n },\n text: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n alignSelf: \"center\",\n },\n textEmpty: {\n color: theme.typography.placeholderText.color,\n },\n button: {\n padding: theme.spacing([0, \"8px\"]),\n boxSizing: \"border-box\",\n cursor: \"text\",\n height: \"100%\",\n width: \"100%\",\n maxWidth: \"100%\",\n justifyContent: \"flex-start\",\n\n backgroundColor: \"transparent\",\n \"&:hover, &:focus\": {\n outline: `1px solid ${theme.inlineEditor.hoverBorderColor}`,\n backgroundColor: \"transparent\",\n [`& .${inlineEditorClasses.icon}`]: {\n visibility: \"visible\",\n },\n },\n \"&:active\": {\n outline: `1px solid ${theme.inlineEditor.activeBorderColor}`,\n backgroundColor: \"transparent\",\n [`& .${inlineEditorClasses.icon}`]: {\n visibility: \"visible\",\n },\n },\n \"& > div\": {\n width: \"100%\",\n },\n \"& > div > span\": {\n width: \"100%\",\n overflow: \"hidden\",\n },\n },\n icon: {\n cursor: \"pointer\",\n visibility: \"hidden\",\n minWidth: 32,\n alignSelf: \"center\",\n },\n iconVisible: {\n visibility: \"visible\",\n },\n largeText: {\n margin: theme.spacing([0, \"8px\"]),\n },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","inputBorderContainer","top","bottom","input","padding","theme","spacing","text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","typography","placeholderText","button","boxSizing","cursor","width","maxWidth","justifyContent","backgroundColor","outline","inlineEditor","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","iconVisible","largeText","margin"],"mappings":";;;;;;AAKO,MAAMA,SAUT;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,yBAAiBC,aAAaC,aAAAA,QAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO;AAAA,IACLC,SAASC,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EACnC;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,OAAOR,YAAMS,MAAAA,WAAWC,gBAAgBF;AAAAA,EAC1C;AAAA,EACAG,QAAQ;AAAA,IACNZ,SAASC,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IACjCW,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,MAClBC,SAAU,aAAYlB,YAAAA,MAAMmB,aAAaC;AAAAA,MACzCH,iBAAiB;AAAA,MACjB,CAAE,MAAKI,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVL,SAAU,aAAYlB,YAAAA,MAAMmB,aAAaK;AAAAA,MACzCP,iBAAiB;AAAA,MACjB,CAAE,MAAKI,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,MACPX,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAmB,MAAM;AAAA,IACJT,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZE,UAAU;AAAA,IACVnB,WAAW;AAAA,EACb;AAAA,EACAoB,aAAa;AAAA,IACXH,YAAY;AAAA,EACd;AAAA,EACAI,WAAW;AAAA,IACTC,QAAQ5B,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EAClC;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", "button", "largeText", "text", "textEmpty", "icon", "iconVisible", "inputRoot", "input", "inputBorderContainer"];
|
|
5
|
+
const inlineEditorClasses = classes.getClasses(classKeys, "HvInlineEditor");
|
|
6
|
+
const inlineEditorClasses$1 = inlineEditorClasses;
|
|
7
|
+
exports.default = inlineEditorClasses$1;
|
|
8
|
+
//# sourceMappingURL=inlineEditorClasses.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inlineEditorClasses.cjs","sources":["../../../../src/components/InlineEditor/inlineEditorClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvInlineEditorClasses {\n root?: string;\n button?: string;\n largeText?: string;\n text?: string;\n textEmpty?: string;\n icon?: string;\n iconVisible?: string;\n inputRoot?: string;\n input?: string;\n inputBorderContainer?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"button\",\n \"largeText\",\n \"text\",\n \"textEmpty\",\n \"icon\",\n \"iconVisible\",\n \"inputRoot\",\n \"input\",\n \"inputBorderContainer\",\n];\n\nconst inlineEditorClasses = getClasses<HvInlineEditorClasses>(\n classKeys,\n \"HvInlineEditor\"\n);\n\nexport default inlineEditorClasses;\n"],"names":["classKeys","inlineEditorClasses","getClasses"],"mappings":";;;AAeA,MAAMA,YAAsB,CAC1B,QACA,UACA,aACA,QACA,aACA,QACA,eACA,aACA,SACA,sBAAsB;AAGxB,MAAMC,sBAAsBC,QAC1BF,WAAAA,WACA,gBAAgB;AAGlB,MAAA,wBAAeC;;"}
|
|
@@ -105,7 +105,7 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
|
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
108
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTXVsdGlCdXR0b24vTXVsdGlCdXR0b24uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9NdWx0aUJ1dHRvbi9NdWx0aUJ1dHRvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY2xzeCB9IGZyb20gXCJjbHN4XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdmVydGljYWwgfTogeyAkdmVydGljYWw6IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGhlaWdodDogMzIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIHRyYW5zaXRpb246IFwibm9uZVwiLFxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIHpJbmRleDogMCxcblxuICAvLyBwcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgXCImPi5IdklzRm9jdXNWaXNpYmxlXCI6IHtcbiAgICB6SW5kZXg6IDUsXG4gIH0sXG5cbiAgLi4uKCR2ZXJ0aWNhbCAmJiB7XG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBoZWlnaHQ6IFwiYXV0b1wiLFxuICAgIGJ0blNlY29uZGFyeToge1xuICAgICAgZmxleDogXCIxIDEgMjBweFwiLFxuICAgIH0sXG4gICAgXCImIGJ1dHRvbi5idXR0b25cIjoge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgYm9yZGVyTGVmdDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgIGJvcmRlckJvdHRvbTogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICBib3JkZXJMZWZ0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlclJpZ2h0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgYm9yZGVyQm90dG9tOiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlckxlZnQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgICBib3JkZXJSaWdodDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgICBib3JkZXJCb3R0b206IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmZpcnN0LW9mLXR5cGVcIjoge1xuICAgICAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogXCIycHhcIixcbiAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIFwiJjpkaXNhYmxlZDpob3ZlclwiOiB7XG4gICAgICAgICAgYm9yZGVyVG9wOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmxhc3QtY2hpbGRcIjoge1xuICAgICAgICBib3JkZXJCb3R0b206IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogXCIycHhcIixcbiAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIFwiJjpkaXNhYmxlZDpob3ZlclwiOiB7XG4gICAgICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOm5vdCg6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBtYXJnaW5MZWZ0OiAwLFxuICAgICAgICBtYXJnaW5Ub3A6IC0xLFxuICAgICAgfSxcbiAgICAgIFwiJi5zZWxlY3RlZFwiOiB7XG4gICAgICAgIGhlaWdodDogMzIsXG4gICAgICAgIHdpZHRoOiBgY2FsYygxMDAlICsgMnB4KSAhaW1wb3J0YW50YCxcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICAgIHpJbmRleDogMixcbiAgICAgICAgXCImOmhvdmVyLCAmOmZvY3VzXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgICAgekluZGV4OiAxLFxuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSAoRWxlbWVudCkgPT5cbiAgc3R5bGVkKCh7IGNsYXNzTmFtZSB9KSA9PiAoXG4gICAgPEVsZW1lbnQudHlwZVxuICAgICAgey4uLkVsZW1lbnQucHJvcHN9XG4gICAgICBjbGFzc05hbWU9e2Nsc3goXG4gICAgICAgIFwiYnV0dG9uXCIsXG4gICAgICAgIEVsZW1lbnQucHJvcHMuc2VsZWN0ZWQgJiYgXCJzZWxlY3RlZFwiLFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgLz5cbiAgKSkoe1xuICAgIGhlaWdodDogMzIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIG1pbldpZHRoOiAzMixcbiAgICBtYXhXaWR0aDogMjAwLFxuICAgIHRyYW5zaXRpb246IFwibm9uZVwiLFxuICAgIGZsZXg6IFwiMSAwIDBweFwiLFxuICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIGJvcmRlckJvdHRvbTogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIGJvcmRlckxlZnQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgYm9yZGVyUmlnaHQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8yLFxuICAgIFwiOmRpc2FibGVkXCI6IHsgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5tdWx0aUJ1dHRvbi5kaXNhYmxlZEJhY2tncm91bmRDb2xvciB9LFxuICAgIFwiOmhvdmVyXCI6IHtcbiAgICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBib3JkZXJMZWZ0OiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgYm9yZGVyUmlnaHQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgfSxcbiAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5ib2R5IGFzIENTU1Byb3BlcnRpZXMpLFxuICAgIFwiJjphY3RpdmVcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBgJHt0aGVtZS5jb2xvcnMuYXRtbzN9YCxcbiAgICB9LFxuICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlckxlZnQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICAgIGJvcmRlclJpZ2h0OiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgfSxcbiAgICB9LFxuICAgIFwiJjpmaXJzdC1vZi10eXBlXCI6IHtcbiAgICAgIGJvcmRlckxlZnQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IHRoZW1lLnJhZGlpLmJhc2UsXG4gICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgXCImOmRpc2FibGVkOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyTGVmdDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgfSxcbiAgICB9LFxuICAgIFwiJjpsYXN0LWNoaWxkXCI6IHtcbiAgICAgIGJvcmRlclJpZ2h0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogdGhlbWUucmFkaWkuYmFzZSxcbiAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgXCImOmRpc2FibGVkOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyUmlnaHQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBcIiY6bm90KDpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBtYXJnaW5MZWZ0OiBcIi0xcHhcIixcbiAgICB9LFxuICAgIFwiJi5zZWxlY3RlZFwiOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBoZWlnaHQ6IDM0LFxuICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkubGFiZWwgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICB6SW5kZXg6IDIsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIFwiJjpub3QoOmRpc2FibGVkKVwiOiB7XG4gICAgICAgICAgYm9yZGVyOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6ZGlzYWJsZWRcIjoge1xuICAgICAgICAgIGJvcmRlcjogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICAgIFwiJjpmaXJzdC1vZi10eXBlLCAmOmxhc3QtY2hpbGRcIjoge1xuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICB9LFxuXG4gICAgICAvLyBwcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgICAgIC8vIGV2ZW4gd2hlbiBzZWxlY3RlZFxuICAgICAgXCImLkh2SXNGb2N1c1Zpc2libGVcIjoge1xuICAgICAgICB6SW5kZXg6IDUsXG4gICAgICB9LFxuICAgICAgXCImOmRpc2FibGVkXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSk7XG4iXX0= */");
|
|
109
109
|
const StyledButton = (Element) => /* @__PURE__ */ _styled__default.default(({
|
|
110
110
|
className
|
|
111
111
|
}) => /* @__PURE__ */ jsxRuntime.jsx(Element.type, {
|
|
@@ -121,7 +121,6 @@ const StyledButton = (Element) => /* @__PURE__ */ _styled__default.default(({
|
|
|
121
121
|
width: "100%",
|
|
122
122
|
minWidth: 32,
|
|
123
123
|
maxWidth: 200,
|
|
124
|
-
padding: 0,
|
|
125
124
|
transition: "none",
|
|
126
125
|
flex: "1 0 0px",
|
|
127
126
|
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
@@ -203,7 +202,7 @@ const StyledButton = (Element) => /* @__PURE__ */ _styled__default.default(({
|
|
|
203
202
|
border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
204
203
|
}
|
|
205
204
|
}
|
|
206
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
205
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTXVsdGlCdXR0b24vTXVsdGlCdXR0b24uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRkUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9NdWx0aUJ1dHRvbi9NdWx0aUJ1dHRvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY2xzeCB9IGZyb20gXCJjbHN4XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdmVydGljYWwgfTogeyAkdmVydGljYWw6IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGhlaWdodDogMzIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIHRyYW5zaXRpb246IFwibm9uZVwiLFxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIHpJbmRleDogMCxcblxuICAvLyBwcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgXCImPi5IdklzRm9jdXNWaXNpYmxlXCI6IHtcbiAgICB6SW5kZXg6IDUsXG4gIH0sXG5cbiAgLi4uKCR2ZXJ0aWNhbCAmJiB7XG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBoZWlnaHQ6IFwiYXV0b1wiLFxuICAgIGJ0blNlY29uZGFyeToge1xuICAgICAgZmxleDogXCIxIDEgMjBweFwiLFxuICAgIH0sXG4gICAgXCImIGJ1dHRvbi5idXR0b25cIjoge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgYm9yZGVyTGVmdDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgIGJvcmRlckJvdHRvbTogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICBib3JkZXJMZWZ0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlclJpZ2h0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgYm9yZGVyQm90dG9tOiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlckxlZnQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgICBib3JkZXJSaWdodDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgICBib3JkZXJCb3R0b206IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmZpcnN0LW9mLXR5cGVcIjoge1xuICAgICAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogXCIycHhcIixcbiAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIFwiJjpkaXNhYmxlZDpob3ZlclwiOiB7XG4gICAgICAgICAgYm9yZGVyVG9wOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmxhc3QtY2hpbGRcIjoge1xuICAgICAgICBib3JkZXJCb3R0b206IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogXCIycHhcIixcbiAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIFwiJjpkaXNhYmxlZDpob3ZlclwiOiB7XG4gICAgICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOm5vdCg6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBtYXJnaW5MZWZ0OiAwLFxuICAgICAgICBtYXJnaW5Ub3A6IC0xLFxuICAgICAgfSxcbiAgICAgIFwiJi5zZWxlY3RlZFwiOiB7XG4gICAgICAgIGhlaWdodDogMzIsXG4gICAgICAgIHdpZHRoOiBgY2FsYygxMDAlICsgMnB4KSAhaW1wb3J0YW50YCxcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICAgIHpJbmRleDogMixcbiAgICAgICAgXCImOmhvdmVyLCAmOmZvY3VzXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgICAgekluZGV4OiAxLFxuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSAoRWxlbWVudCkgPT5cbiAgc3R5bGVkKCh7IGNsYXNzTmFtZSB9KSA9PiAoXG4gICAgPEVsZW1lbnQudHlwZVxuICAgICAgey4uLkVsZW1lbnQucHJvcHN9XG4gICAgICBjbGFzc05hbWU9e2Nsc3goXG4gICAgICAgIFwiYnV0dG9uXCIsXG4gICAgICAgIEVsZW1lbnQucHJvcHMuc2VsZWN0ZWQgJiYgXCJzZWxlY3RlZFwiLFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgLz5cbiAgKSkoe1xuICAgIGhlaWdodDogMzIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIG1pbldpZHRoOiAzMixcbiAgICBtYXhXaWR0aDogMjAwLFxuICAgIHRyYW5zaXRpb246IFwibm9uZVwiLFxuICAgIGZsZXg6IFwiMSAwIDBweFwiLFxuICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIGJvcmRlckJvdHRvbTogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgIGJvcmRlckxlZnQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgYm9yZGVyUmlnaHQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8yLFxuICAgIFwiOmRpc2FibGVkXCI6IHsgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5tdWx0aUJ1dHRvbi5kaXNhYmxlZEJhY2tncm91bmRDb2xvciB9LFxuICAgIFwiOmhvdmVyXCI6IHtcbiAgICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBib3JkZXJMZWZ0OiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgYm9yZGVyUmlnaHQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgfSxcbiAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5ib2R5IGFzIENTU1Byb3BlcnRpZXMpLFxuICAgIFwiJjphY3RpdmVcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBgJHt0aGVtZS5jb2xvcnMuYXRtbzN9YCxcbiAgICB9LFxuICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlckxlZnQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICAgIGJvcmRlclJpZ2h0OiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgfSxcbiAgICB9LFxuICAgIFwiJjpmaXJzdC1vZi10eXBlXCI6IHtcbiAgICAgIGJvcmRlckxlZnQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IHRoZW1lLnJhZGlpLmJhc2UsXG4gICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgXCImOmRpc2FibGVkOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyTGVmdDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgfSxcbiAgICB9LFxuICAgIFwiJjpsYXN0LWNoaWxkXCI6IHtcbiAgICAgIGJvcmRlclJpZ2h0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogdGhlbWUucmFkaWkuYmFzZSxcbiAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgXCImOmRpc2FibGVkOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyUmlnaHQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBcIiY6bm90KDpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBtYXJnaW5MZWZ0OiBcIi0xcHhcIixcbiAgICB9LFxuICAgIFwiJi5zZWxlY3RlZFwiOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBoZWlnaHQ6IDM0LFxuICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkubGFiZWwgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICB6SW5kZXg6IDIsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIFwiJjpub3QoOmRpc2FibGVkKVwiOiB7XG4gICAgICAgICAgYm9yZGVyOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6ZGlzYWJsZWRcIjoge1xuICAgICAgICAgIGJvcmRlcjogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICAgIFwiJjpmaXJzdC1vZi10eXBlLCAmOmxhc3QtY2hpbGRcIjoge1xuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICB9LFxuXG4gICAgICAvLyBwcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgICAgIC8vIGV2ZW4gd2hlbiBzZWxlY3RlZFxuICAgICAgXCImLkh2SXNGb2N1c1Zpc2libGVcIjoge1xuICAgICAgICB6SW5kZXg6IDUsXG4gICAgICB9LFxuICAgICAgXCImOmRpc2FibGVkXCI6IHtcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSk7XG4iXX0= */");
|
|
207
206
|
exports.StyledButton = StyledButton;
|
|
208
207
|
exports.StyledRoot = StyledRoot;
|
|
209
208
|
//# sourceMappingURL=MultiButton.styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n \"div\",\n transientOptions\n)(({ $vertical }: { $vertical: boolean }) => ({\n display: \"flex\",\n height: 32,\n alignItems: \"center\",\n transition: \"none\",\n background: theme.colors.atmo2,\n position: \"relative\",\n zIndex: 0,\n\n // prevent the focus ring to be hidden by sibling hover background\n \"&>.HvIsFocusVisible\": {\n zIndex: 5,\n },\n\n ...($vertical && {\n flexDirection: \"column\",\n height: \"auto\",\n btnSecondary: {\n flex: \"1 1 20px\",\n },\n \"& button.button\": {\n width: \"100%\",\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:hover\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: \"2px\",\n borderTopRightRadius: \"2px\",\n \"&:disabled:hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:last-child\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderBottomLeftRadius: \"2px\",\n borderBottomRightRadius: \"2px\",\n \"&:disabled:hover\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: 0,\n marginTop: -1,\n },\n \"&.selected\": {\n height: 32,\n width: `calc(100% + 2px) !important`,\n background: theme.colors.atmo1,\n ...(theme.typography.label as CSSProperties),\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover, &:focus\": {\n background: theme.colors.atmo3,\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n },\n }),\n}));\n\nexport const StyledButton = (Element) =>\n styled(({ className }) => (\n <Element.type\n {...Element.props}\n className={clsx(\n \"button\",\n Element.props.selected && \"selected\",\n className\n )}\n />\n ))({\n height: 32,\n width: \"100%\",\n minWidth: 32,\n maxWidth: 200,\n padding: 0,\n transition: \"none\",\n flex: \"1 0 0px\",\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n borderRadius: 0,\n backgroundColor: theme.colors.atmo2,\n \":disabled\": { backgroundColor: theme.multiButton.disabledBackgroundColor },\n \":hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n },\n ...(theme.typography.body as CSSProperties),\n \"&:active\": {\n backgroundColor: `${theme.colors.atmo3}`,\n },\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n \"&:hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: theme.radii.base,\n borderBottomLeftRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:last-child\": {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTopRightRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: \"-1px\",\n },\n \"&.selected\": {\n background: theme.colors.atmo1,\n height: 34,\n ...(theme.typography.label as CSSProperties),\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover\": {\n background: theme.colors.atmo3,\n \"&:not(:disabled)\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n \"&:disabled\": {\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:first-of-type, &:last-child\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n\n // prevent the focus ring to be hidden by sibling hover background\n // even when selected\n \"&.HvIsFocusVisible\": {\n zIndex: 5,\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n });\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$vertical","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","flexDirection","btnSecondary","flex","width","borderLeft","atmo4","borderRight","borderTop","borderBottom","color","secondary_60","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","marginLeft","marginTop","atmo1","typography","borderRadius","radii","base","border","secondary","atmo3","StyledButton","Element","_styled","className","_jsx","type","props","clsx","selected","minWidth","maxWidth","padding","backgroundColor","multiButton","disabledBackgroundColor","body"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n \"div\",\n transientOptions\n)(({ $vertical }: { $vertical: boolean }) => ({\n display: \"flex\",\n height: 32,\n alignItems: \"center\",\n transition: \"none\",\n background: theme.colors.atmo2,\n position: \"relative\",\n zIndex: 0,\n\n // prevent the focus ring to be hidden by sibling hover background\n \"&>.HvIsFocusVisible\": {\n zIndex: 5,\n },\n\n ...($vertical && {\n flexDirection: \"column\",\n height: \"auto\",\n btnSecondary: {\n flex: \"1 1 20px\",\n },\n \"& button.button\": {\n width: \"100%\",\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n \"&:hover\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTop: \"solid 1px transparent\",\n borderBottom: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: \"2px\",\n borderTopRightRadius: \"2px\",\n \"&:disabled:hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:last-child\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderBottomLeftRadius: \"2px\",\n borderBottomRightRadius: \"2px\",\n \"&:disabled:hover\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: 0,\n marginTop: -1,\n },\n \"&.selected\": {\n height: 32,\n width: `calc(100% + 2px) !important`,\n background: theme.colors.atmo1,\n ...(theme.typography.label as CSSProperties),\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover, &:focus\": {\n background: theme.colors.atmo3,\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n },\n }),\n}));\n\nexport const StyledButton = (Element) =>\n styled(({ className }) => (\n <Element.type\n {...Element.props}\n className={clsx(\n \"button\",\n Element.props.selected && \"selected\",\n className\n )}\n />\n ))({\n height: 32,\n width: \"100%\",\n minWidth: 32,\n maxWidth: 200,\n transition: \"none\",\n flex: \"1 0 0px\",\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n borderRadius: 0,\n backgroundColor: theme.colors.atmo2,\n \":disabled\": { backgroundColor: theme.multiButton.disabledBackgroundColor },\n \":hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n },\n ...(theme.typography.body as CSSProperties),\n \"&:active\": {\n backgroundColor: `${theme.colors.atmo3}`,\n },\n \"&:disabled\": {\n color: theme.colors.secondary_60,\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n \"&:hover\": {\n borderTop: `solid 1px ${theme.colors.atmo4}`,\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderLeft: \"solid 1px transparent\",\n borderRight: \"solid 1px transparent\",\n },\n },\n \"&:first-of-type\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n borderTopLeftRadius: theme.radii.base,\n borderBottomLeftRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:last-child\": {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n borderTopRightRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: \"-1px\",\n },\n \"&.selected\": {\n background: theme.colors.atmo1,\n height: 34,\n ...(theme.typography.label as CSSProperties),\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover\": {\n background: theme.colors.atmo3,\n \"&:not(:disabled)\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n \"&:disabled\": {\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n \"&:first-of-type, &:last-child\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n\n // prevent the focus ring to be hidden by sibling hover background\n // even when selected\n \"&.HvIsFocusVisible\": {\n zIndex: 5,\n },\n \"&:disabled\": {\n zIndex: 1,\n color: theme.colors.secondary_60,\n background: theme.colors.atmo1,\n border: `solid 1px ${theme.colors.atmo4}`,\n },\n },\n });\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$vertical","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","flexDirection","btnSecondary","flex","width","borderLeft","atmo4","borderRight","borderTop","borderBottom","color","secondary_60","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","marginLeft","marginTop","atmo1","typography","borderRadius","radii","base","border","secondary","atmo3","StyledButton","Element","_styled","className","_jsx","type","props","clsx","selected","minWidth","maxWidth","backgroundColor","multiButton","disabledBackgroundColor","body"],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const horizontalScrollListItemClasses = require("./horizontalScrollListItemClasses.cjs");
|
|
4
|
+
const react = require("@emotion/react");
|
|
5
|
+
const clsx = require("clsx");
|
|
6
|
+
const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
|
|
7
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
|
+
const setId = require("../../../../utils/setId.cjs");
|
|
9
|
+
const HvHorizontalScrollListItem = ({
|
|
10
|
+
id,
|
|
11
|
+
className,
|
|
12
|
+
classes,
|
|
13
|
+
selected,
|
|
14
|
+
children,
|
|
15
|
+
onClick,
|
|
16
|
+
onKeyDown,
|
|
17
|
+
tooltipWrapper,
|
|
18
|
+
...others
|
|
19
|
+
}) => {
|
|
20
|
+
const variant = selected ? "label" : "body";
|
|
21
|
+
const labelId = setId.setId(id, "label");
|
|
22
|
+
const buttonId = setId.setId(id, "button");
|
|
23
|
+
const Tooltip = tooltipWrapper;
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
25
|
+
children: ({
|
|
26
|
+
css
|
|
27
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
28
|
+
id,
|
|
29
|
+
className: clsx.clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.default.root, css(HorizontalScrollListItem_styles.styles.root)),
|
|
30
|
+
"aria-current": selected,
|
|
31
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
32
|
+
id: buttonId,
|
|
33
|
+
role: "button",
|
|
34
|
+
tabIndex: 0,
|
|
35
|
+
onClick,
|
|
36
|
+
onKeyDown,
|
|
37
|
+
className: clsx.clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.default.button, css(HorizontalScrollListItem_styles.styles.button)),
|
|
38
|
+
"aria-labelledby": labelId,
|
|
39
|
+
...others,
|
|
40
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
|
|
41
|
+
id: labelId,
|
|
42
|
+
className: clsx.clsx(classes == null ? void 0 : classes.text, horizontalScrollListItemClasses.default.text, css(HorizontalScrollListItem_styles.styles.text), selected && clsx.clsx(classes == null ? void 0 : classes.selected, horizontalScrollListItemClasses.default.selected, css(HorizontalScrollListItem_styles.styles.selected))),
|
|
43
|
+
variant,
|
|
44
|
+
children
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
exports.HvHorizontalScrollListItem = HvHorizontalScrollListItem;
|
|
51
|
+
//# sourceMappingURL=HorizontalScrollListItem.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HorizontalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n /** The text to render. */\n children: React.ReactNode;\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 /** 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 /** A Jss Object used to override or extend the styles applied. */\n classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n id,\n className,\n classes,\n selected,\n children,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n}: HvVerticalScrollListItemProps) => {\n const variant = selected ? \"label\" : \"body\";\n const labelId = setId(id, \"label\");\n const buttonId = setId(id, \"button\");\n const Tooltip = tooltipWrapper;\n\n return (\n <ClassNames>\n {({ css }) => (\n <li\n id={id}\n className={clsx(\n className,\n classes?.root,\n horizontalScrollListItemClasses.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 horizontalScrollListItemClasses.button,\n css(styles.button)\n )}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip\n id={labelId}\n className={clsx(\n classes?.text,\n horizontalScrollListItemClasses.text,\n css(styles.text),\n selected &&\n clsx(\n classes?.selected,\n horizontalScrollListItemClasses.selected,\n css(styles.selected)\n )\n )}\n variant={variant}\n >\n {children}\n </Tooltip>\n </div>\n </li>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","clsx","root","horizontalScrollListItemClasses","styles","role","tabIndex","button","text"],"mappings":";;;;;;;;AAiCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAAA,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAAA,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,wCACGO,MAAAA,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEf;AAAAA,MACAC,WAAWe,KACTf,KAAAA,WACAC,mCAASe,MACTC,wCAAgCD,MAChCF,IAAII,uCAAOF,IAAI,CAAC;AAAA,MAElB,gBAAcd;AAAAA,MAASC,yCAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,KAAAA,KACTd,mCAASoB,QACTJ,gCAAAA,QAAgCI,QAChCP,IAAII,uCAAOG,MAAM,CAAC;AAAA,QAEpB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,yCAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,KAAAA,KACTd,mCAASqB,MACTL,wCAAgCK,MAChCR,IAAII,uCAAOI,IAAI,GACfpB,YACEa,UACEd,mCAASC,UACTe,gCAAgCf,QAAAA,UAChCY,IAAII,gCAAAA,OAAOhB,QAAQ,CAAC,CACrB;AAAA,UAELM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;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 scrollToHorizontalClasses = require("../scrollToHorizontalClasses.cjs");
|
|
5
|
+
const focusUtils = require("../../../../utils/focusUtils.cjs");
|
|
6
|
+
const styles = {
|
|
7
|
+
root: {
|
|
8
|
+
padding: "10px 0"
|
|
9
|
+
},
|
|
10
|
+
button: {
|
|
11
|
+
display: "flex",
|
|
12
|
+
justifyContent: "center",
|
|
13
|
+
alignItems: "center",
|
|
14
|
+
height: uikitStyles.theme.scrollTo.horizontal.buttonHeight,
|
|
15
|
+
cursor: "pointer",
|
|
16
|
+
borderBottom: uikitStyles.theme.scrollTo.horizontal.buttonBottomBorder,
|
|
17
|
+
"&:hover": {
|
|
18
|
+
backgroundColor: uikitStyles.theme.scrollTo.horizontal.buttonHoverBackgroundColor,
|
|
19
|
+
[`& .${scrollToHorizontalClasses.default.notSelected}`]: {
|
|
20
|
+
height: uikitStyles.theme.scrollTo.dotHoverSize,
|
|
21
|
+
width: uikitStyles.theme.scrollTo.dotHoverSize,
|
|
22
|
+
backgroundColor: uikitStyles.theme.scrollTo.dotHoverColor
|
|
23
|
+
},
|
|
24
|
+
[`& .${scrollToHorizontalClasses.default.notSelectedRoot}`]: {
|
|
25
|
+
backgroundColor: uikitStyles.theme.scrollTo.dotHoverBackgroundColor
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"&:focus": {
|
|
29
|
+
outline: "none"
|
|
30
|
+
},
|
|
31
|
+
"&:focus-visible": {
|
|
32
|
+
...focusUtils.outlineStyles
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
text: {
|
|
36
|
+
display: "flex",
|
|
37
|
+
flexDirection: "column",
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
height: uikitStyles.theme.scrollTo.horizontal.buttonHeight,
|
|
41
|
+
borderBottom: uikitStyles.theme.scrollTo.horizontal.buttonBottomBorder,
|
|
42
|
+
"& p": {
|
|
43
|
+
padding: uikitStyles.theme.scrollTo.horizontal.textPadding,
|
|
44
|
+
maxWidth: uikitStyles.theme.scrollTo.horizontal.textMaxWidth,
|
|
45
|
+
textOverflow: "ellipsis",
|
|
46
|
+
overflow: "hidden"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
selected: {
|
|
50
|
+
borderBottom: uikitStyles.theme.scrollTo.horizontal.selectedButtonBottomBorder
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
exports.styles = styles;
|
|
54
|
+
//# sourceMappingURL=HorizontalScrollListItem.styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HorizontalScrollListItem.styles.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport scrollToHorizontalClasses from \"../scrollToHorizontalClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n button: CSSInterpolation;\n text: CSSInterpolation;\n selected: CSSInterpolation;\n} = {\n root: {\n padding: \"10px 0\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.horizontal.buttonHeight,\n cursor: \"pointer\",\n borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n \"&:hover\": {\n backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n [`& .${scrollToHorizontalClasses.notSelected}`]: {\n height: theme.scrollTo.dotHoverSize,\n width: theme.scrollTo.dotHoverSize,\n backgroundColor: theme.scrollTo.dotHoverColor,\n },\n\n [`& .${scrollToHorizontalClasses.notSelectedRoot}`]: {\n backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n text: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: theme.scrollTo.horizontal.buttonHeight,\n borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n \"& p\": {\n padding: theme.scrollTo.horizontal.textPadding,\n maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n },\n },\n selected: {\n borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n },\n};\n"],"names":["styles","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","scrollToHorizontalClasses","notSelected","dotHoverSize","width","dotHoverColor","notSelectedRoot","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;;;AAKO,MAAMA,SAKT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,YAAMC,MAAAA,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,YAAMC,MAAAA,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,YAAMC,MAAAA,SAASC,WAAWM;AAAAA,MAE3C,CAAE,MAAKC,kCAA0BC,aAAa,GAAG;AAAA,QAC/CX,QAAQC,YAAAA,MAAMC,SAASU;AAAAA,QACvBC,OAAOZ,YAAAA,MAAMC,SAASU;AAAAA,QACtBJ,iBAAiBP,YAAAA,MAAMC,SAASY;AAAAA,MAClC;AAAA,MAEA,CAAE,MAAKJ,kCAA0BK,iBAAiB,GAAG;AAAA,QACnDP,iBAAiBP,YAAAA,MAAMC,SAASc;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfrB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,YAAMC,MAAAA,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,YAAMC,MAAAA,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,YAAMC,MAAAA,SAASC,WAAWkB;AAAAA,MACnCC,UAAUrB,YAAMC,MAAAA,SAASC,WAAWoB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRpB,cAAcL,YAAMC,MAAAA,SAASC,WAAWwB;AAAAA,EAC1C;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", "selected", "button", "text"];
|
|
5
|
+
const horizontalScrollListItemClasses = classes.getClasses(classKeys, "HvHorizontalScrollListItem");
|
|
6
|
+
const horizontalScrollListItemClasses$1 = horizontalScrollListItemClasses;
|
|
7
|
+
exports.default = horizontalScrollListItemClasses$1;
|
|
8
|
+
//# sourceMappingURL=horizontalScrollListItemClasses.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"horizontalScrollListItemClasses.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvHorizontalScrollListItemClasses {\n root?: string;\n selected?: string;\n button?: string;\n text?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"selected\", \"button\", \"text\"];\n\nconst horizontalScrollListItemClasses =\n getClasses<HvHorizontalScrollListItemClasses>(\n classKeys,\n \"HvHorizontalScrollListItem\"\n );\n\nexport default horizontalScrollListItemClasses;\n"],"names":["classKeys","horizontalScrollListItemClasses","getClasses"],"mappings":";;;AASA,MAAMA,YAAsB,CAAC,QAAQ,YAAY,UAAU,MAAM;AAEjE,MAAMC,kCACJC,QACEF,WAAAA,WACA,4BAA4B;AAGhC,MAAA,oCAAeC;;"}
|
|
@@ -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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"}
|