@hitachivantara/uikit-react-core 5.24.5 → 5.24.6
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/BaseDropdown/BaseDropdown.cjs +5 -0
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/components/Dropdown/Dropdown.cjs +1 -0
- package/dist/cjs/components/Dropdown/Dropdown.cjs.map +1 -1
- package/dist/cjs/components/Focus/Focus.cjs +25 -39
- package/dist/cjs/components/Focus/Focus.cjs.map +1 -1
- package/dist/cjs/components/Focus/Focus.styles.cjs +43 -40
- package/dist/cjs/components/Focus/Focus.styles.cjs.map +1 -1
- package/dist/cjs/components/List/List.cjs +38 -28
- package/dist/cjs/components/List/List.cjs.map +1 -1
- package/dist/cjs/components/List/List.styles.cjs +38 -149
- package/dist/cjs/components/List/List.styles.cjs.map +1 -1
- package/dist/cjs/components/MultiButton/MultiButton.cjs +15 -11
- package/dist/cjs/components/MultiButton/MultiButton.cjs.map +1 -1
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs +109 -151
- package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/components/SimpleGrid/SimpleGrid.cjs +11 -3
- package/dist/cjs/components/SimpleGrid/SimpleGrid.cjs.map +1 -1
- package/dist/cjs/components/SimpleGrid/SimpleGrid.styles.cjs +29 -28
- package/dist/cjs/components/SimpleGrid/SimpleGrid.styles.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs +1 -1
- package/dist/cjs/index.cjs +6 -6
- package/dist/esm/components/BaseDropdown/BaseDropdown.js +5 -0
- package/dist/esm/components/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js +1 -0
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/Focus/Focus.js +27 -41
- package/dist/esm/components/Focus/Focus.js.map +1 -1
- package/dist/esm/components/Focus/Focus.styles.js +43 -38
- package/dist/esm/components/Focus/Focus.styles.js.map +1 -1
- package/dist/esm/components/List/List.js +39 -28
- package/dist/esm/components/List/List.js.map +1 -1
- package/dist/esm/components/List/List.styles.js +38 -147
- package/dist/esm/components/List/List.styles.js.map +1 -1
- package/dist/esm/components/MultiButton/MultiButton.js +18 -13
- package/dist/esm/components/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/components/MultiButton/MultiButton.styles.js +109 -149
- package/dist/esm/components/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/components/SimpleGrid/SimpleGrid.js +12 -4
- package/dist/esm/components/SimpleGrid/SimpleGrid.js.map +1 -1
- package/dist/esm/components/SimpleGrid/SimpleGrid.styles.js +29 -26
- package/dist/esm/components/SimpleGrid/SimpleGrid.styles.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js +1 -1
- package/dist/esm/index.js +238 -238
- package/dist/types/index.d.ts +395 -374
- package/package.json +5 -5
- package/dist/cjs/components/Focus/focusClasses.cjs +0 -8
- package/dist/cjs/components/Focus/focusClasses.cjs.map +0 -1
- package/dist/cjs/components/List/listClasses.cjs +0 -8
- package/dist/cjs/components/List/listClasses.cjs.map +0 -1
- package/dist/cjs/components/MultiButton/multiButtonClasses.cjs +0 -8
- package/dist/cjs/components/MultiButton/multiButtonClasses.cjs.map +0 -1
- package/dist/esm/components/Focus/focusClasses.js +0 -8
- package/dist/esm/components/Focus/focusClasses.js.map +0 -1
- package/dist/esm/components/List/listClasses.js +0 -8
- package/dist/esm/components/List/listClasses.js.map +0 -1
- package/dist/esm/components/MultiButton/multiButtonClasses.js +0 -8
- package/dist/esm/components/MultiButton/multiButtonClasses.js.map +0 -1
|
@@ -1,52 +1,114 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const _styled = require("@emotion/styled/base");
|
|
4
|
-
const clsx = require("clsx");
|
|
5
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
const classes = require("../../utils/classes.cjs");
|
|
5
|
+
const {
|
|
6
|
+
staticClasses,
|
|
7
|
+
useClasses
|
|
8
|
+
} = classes.createClasses("HvFooter", {
|
|
9
|
+
root: {
|
|
10
|
+
display: "flex",
|
|
11
|
+
height: 32,
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
transition: "none",
|
|
14
|
+
background: uikitStyles.theme.colors.atmo2,
|
|
15
|
+
position: "relative",
|
|
16
|
+
zIndex: 0,
|
|
17
|
+
// prevent the focus ring to be hidden by sibling hover background
|
|
18
|
+
"&>.HvIsFocusVisible": {
|
|
19
|
+
zIndex: 5
|
|
20
|
+
},
|
|
21
|
+
"& button$button": {
|
|
22
|
+
height: 32,
|
|
23
|
+
width: "100%",
|
|
24
|
+
minWidth: 32,
|
|
25
|
+
maxWidth: 200,
|
|
26
|
+
padding: 0,
|
|
27
|
+
transition: "none",
|
|
28
|
+
flex: "1 0 0px",
|
|
29
|
+
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
30
|
+
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
31
|
+
borderLeft: "solid 1px transparent",
|
|
32
|
+
borderRight: "solid 1px transparent",
|
|
33
|
+
borderRadius: 0,
|
|
34
|
+
...uikitStyles.theme.typography.body,
|
|
35
|
+
"&:active": {
|
|
36
|
+
backgroundColor: `${uikitStyles.theme.colors.atmo3}`
|
|
37
|
+
},
|
|
38
|
+
"&:disabled": {
|
|
39
|
+
color: uikitStyles.theme.colors.secondary_60,
|
|
40
|
+
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
41
|
+
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
42
|
+
"&:hover": {
|
|
43
|
+
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
44
|
+
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
45
|
+
borderLeft: "solid 1px transparent",
|
|
46
|
+
borderRight: "solid 1px transparent"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"&:first-of-type": {
|
|
50
|
+
borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
51
|
+
borderTopLeftRadius: uikitStyles.theme.radii.base,
|
|
52
|
+
borderBottomLeftRadius: uikitStyles.theme.radii.base
|
|
53
|
+
},
|
|
54
|
+
"&:last-of-type": {
|
|
55
|
+
borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
56
|
+
borderTopRightRadius: uikitStyles.theme.radii.base,
|
|
57
|
+
borderBottomRightRadius: uikitStyles.theme.radii.base,
|
|
58
|
+
"&:disabled:hover": {
|
|
59
|
+
borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4} !important`
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"&:not(:first-of-type)": {
|
|
63
|
+
marginLeft: "-1px"
|
|
64
|
+
},
|
|
65
|
+
"&$selected": {
|
|
66
|
+
"&:hover": {
|
|
67
|
+
"&:not(:disabled)": {
|
|
68
|
+
border: `solid 1px ${uikitStyles.theme.colors.secondary}`
|
|
69
|
+
},
|
|
70
|
+
"&:disabled": {
|
|
71
|
+
border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"&:disabled": {
|
|
75
|
+
zIndex: 1,
|
|
76
|
+
color: uikitStyles.theme.colors.secondary_60,
|
|
77
|
+
background: uikitStyles.theme.colors.atmo1,
|
|
78
|
+
border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
17
79
|
}
|
|
18
80
|
}
|
|
81
|
+
},
|
|
82
|
+
"& button$button$selected": {
|
|
83
|
+
background: uikitStyles.theme.colors.atmo1,
|
|
84
|
+
height: 34,
|
|
85
|
+
...uikitStyles.theme.typography.label,
|
|
86
|
+
borderRadius: uikitStyles.theme.radii.base,
|
|
87
|
+
border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
|
|
88
|
+
zIndex: 2,
|
|
89
|
+
"&:hover": {
|
|
90
|
+
background: uikitStyles.theme.colors.atmo3
|
|
91
|
+
},
|
|
92
|
+
"&:first-of-type, &:last-of-type": {
|
|
93
|
+
border: `solid 1px ${uikitStyles.theme.colors.secondary}`
|
|
94
|
+
},
|
|
95
|
+
// prevent the focus ring to be hidden by sibling hover background
|
|
96
|
+
// even when selected
|
|
97
|
+
"&.HvIsFocusVisible": {
|
|
98
|
+
zIndex: 5
|
|
99
|
+
}
|
|
19
100
|
}
|
|
20
|
-
return target;
|
|
21
|
-
};
|
|
22
|
-
return _extends.apply(this, arguments);
|
|
23
|
-
}
|
|
24
|
-
const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
|
|
25
|
-
target: "e17vrbb41"
|
|
26
|
-
}, transientOptions.transientOptions) : _extends({}, {
|
|
27
|
-
target: "e17vrbb41",
|
|
28
|
-
label: "StyledRoot"
|
|
29
|
-
}, transientOptions.transientOptions))(({
|
|
30
|
-
$vertical
|
|
31
|
-
}) => ({
|
|
32
|
-
display: "flex",
|
|
33
|
-
height: 32,
|
|
34
|
-
alignItems: "center",
|
|
35
|
-
transition: "none",
|
|
36
|
-
background: uikitStyles.theme.colors.atmo2,
|
|
37
|
-
position: "relative",
|
|
38
|
-
zIndex: 0,
|
|
39
|
-
// prevent the focus ring to be hidden by sibling hover background
|
|
40
|
-
"&>.HvIsFocusVisible": {
|
|
41
|
-
zIndex: 5
|
|
42
101
|
},
|
|
43
|
-
|
|
102
|
+
button: {},
|
|
103
|
+
selected: {},
|
|
104
|
+
// vertical button display Styling
|
|
105
|
+
vertical: {
|
|
44
106
|
flexDirection: "column",
|
|
45
107
|
height: "auto",
|
|
46
108
|
btnSecondary: {
|
|
47
109
|
flex: "1 1 20px"
|
|
48
110
|
},
|
|
49
|
-
"& button
|
|
111
|
+
"& button$button": {
|
|
50
112
|
width: "100%",
|
|
51
113
|
borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
52
114
|
borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
@@ -67,25 +129,22 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
|
|
|
67
129
|
},
|
|
68
130
|
"&:first-of-type": {
|
|
69
131
|
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
70
|
-
borderTopLeftRadius:
|
|
71
|
-
borderTopRightRadius:
|
|
72
|
-
"&:disabled:hover": {
|
|
73
|
-
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
74
|
-
}
|
|
132
|
+
borderTopLeftRadius: uikitStyles.theme.radii.base,
|
|
133
|
+
borderTopRightRadius: uikitStyles.theme.radii.base
|
|
75
134
|
},
|
|
76
|
-
"&:last-
|
|
135
|
+
"&:last-of-type": {
|
|
77
136
|
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
78
|
-
borderBottomLeftRadius:
|
|
79
|
-
borderBottomRightRadius:
|
|
137
|
+
borderBottomLeftRadius: uikitStyles.theme.radii.base,
|
|
138
|
+
borderBottomRightRadius: uikitStyles.theme.radii.base,
|
|
80
139
|
"&:disabled:hover": {
|
|
81
|
-
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
140
|
+
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4} !important`
|
|
82
141
|
}
|
|
83
142
|
},
|
|
84
143
|
"&:not(:first-of-type)": {
|
|
85
144
|
marginLeft: 0,
|
|
86
145
|
marginTop: -1
|
|
87
146
|
},
|
|
88
|
-
"
|
|
147
|
+
"&$selected": {
|
|
89
148
|
height: 32,
|
|
90
149
|
width: `calc(100% + 2px) !important`,
|
|
91
150
|
background: uikitStyles.theme.colors.atmo1,
|
|
@@ -105,108 +164,7 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
|
|
|
105
164
|
}
|
|
106
165
|
}
|
|
107
166
|
}
|
|
108
|
-
})
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
props
|
|
112
|
-
}) => /* @__PURE__ */ _styled__default.default(({
|
|
113
|
-
className
|
|
114
|
-
}) => /* @__PURE__ */ jsxRuntime.jsx(Component, {
|
|
115
|
-
...props,
|
|
116
|
-
className: clsx.clsx("button", props.selected && "selected", className)
|
|
117
|
-
}), process.env.NODE_ENV === "production" ? {
|
|
118
|
-
target: "e17vrbb40"
|
|
119
|
-
} : {
|
|
120
|
-
target: "e17vrbb40",
|
|
121
|
-
label: "StyledButton"
|
|
122
|
-
})({
|
|
123
|
-
height: 32,
|
|
124
|
-
width: "100%",
|
|
125
|
-
minWidth: 32,
|
|
126
|
-
maxWidth: 200,
|
|
127
|
-
transition: "none",
|
|
128
|
-
flex: "1 0 0px",
|
|
129
|
-
padding: 0,
|
|
130
|
-
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
131
|
-
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
132
|
-
borderLeft: "solid 1px transparent",
|
|
133
|
-
borderRight: "solid 1px transparent",
|
|
134
|
-
borderRadius: 0,
|
|
135
|
-
backgroundColor: uikitStyles.theme.colors.atmo2,
|
|
136
|
-
":disabled": {
|
|
137
|
-
backgroundColor: uikitStyles.theme.multiButton.disabledBackgroundColor
|
|
138
|
-
},
|
|
139
|
-
":hover": {
|
|
140
|
-
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
141
|
-
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
142
|
-
borderLeft: "solid 1px transparent",
|
|
143
|
-
borderRight: "solid 1px transparent"
|
|
144
|
-
},
|
|
145
|
-
...uikitStyles.theme.typography.body,
|
|
146
|
-
"&:active": {
|
|
147
|
-
backgroundColor: `${uikitStyles.theme.colors.atmo3}`
|
|
148
|
-
},
|
|
149
|
-
"&:disabled": {
|
|
150
|
-
color: uikitStyles.theme.colors.secondary_60,
|
|
151
|
-
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
152
|
-
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
153
|
-
"&:hover": {
|
|
154
|
-
borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
155
|
-
borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
156
|
-
borderLeft: "solid 1px transparent",
|
|
157
|
-
borderRight: "solid 1px transparent"
|
|
158
|
-
}
|
|
159
|
-
},
|
|
160
|
-
"&:first-of-type": {
|
|
161
|
-
borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
162
|
-
borderTopLeftRadius: uikitStyles.theme.radii.base,
|
|
163
|
-
borderBottomLeftRadius: uikitStyles.theme.radii.base,
|
|
164
|
-
"&:disabled:hover": {
|
|
165
|
-
borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
"&:last-child": {
|
|
169
|
-
borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
|
|
170
|
-
borderTopRightRadius: uikitStyles.theme.radii.base,
|
|
171
|
-
borderBottomRightRadius: uikitStyles.theme.radii.base,
|
|
172
|
-
"&:disabled:hover": {
|
|
173
|
-
borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
"&:not(:first-of-type)": {
|
|
177
|
-
marginLeft: "-1px"
|
|
178
|
-
},
|
|
179
|
-
"&.selected": {
|
|
180
|
-
background: uikitStyles.theme.colors.atmo1,
|
|
181
|
-
height: 34,
|
|
182
|
-
...uikitStyles.theme.typography.label,
|
|
183
|
-
border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
|
|
184
|
-
zIndex: 2,
|
|
185
|
-
"&:hover": {
|
|
186
|
-
background: uikitStyles.theme.colors.atmo3,
|
|
187
|
-
"&:not(:disabled)": {
|
|
188
|
-
border: `solid 1px ${uikitStyles.theme.colors.secondary}`
|
|
189
|
-
},
|
|
190
|
-
"&:disabled": {
|
|
191
|
-
border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
192
|
-
}
|
|
193
|
-
},
|
|
194
|
-
"&:first-of-type, &:last-child": {
|
|
195
|
-
border: `solid 1px ${uikitStyles.theme.colors.secondary}`
|
|
196
|
-
},
|
|
197
|
-
// prevent the focus ring to be hidden by sibling hover background
|
|
198
|
-
// even when selected
|
|
199
|
-
"&.HvIsFocusVisible": {
|
|
200
|
-
zIndex: 5
|
|
201
|
-
},
|
|
202
|
-
"&:disabled": {
|
|
203
|
-
zIndex: 1,
|
|
204
|
-
color: uikitStyles.theme.colors.secondary_60,
|
|
205
|
-
background: uikitStyles.theme.colors.atmo1,
|
|
206
|
-
border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTXVsdGlCdXR0b24vTXVsdGlCdXR0b24uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRkUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9NdWx0aUJ1dHRvbi9NdWx0aUJ1dHRvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY2xzeCB9IGZyb20gXCJjbHN4XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdmVydGljYWwgfTogeyAkdmVydGljYWw6IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGhlaWdodDogMzIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIHRyYW5zaXRpb246IFwibm9uZVwiLFxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIHpJbmRleDogMCxcblxuICAvLyBwcmV2ZW50IHRoZSBmb2N1cyByaW5nIHRvIGJlIGhpZGRlbiBieSBzaWJsaW5nIGhvdmVyIGJhY2tncm91bmRcbiAgXCImPi5IdklzRm9jdXNWaXNpYmxlXCI6IHtcbiAgICB6SW5kZXg6IDUsXG4gIH0sXG5cbiAgLi4uKCR2ZXJ0aWNhbCAmJiB7XG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBoZWlnaHQ6IFwiYXV0b1wiLFxuICAgIGJ0blNlY29uZGFyeToge1xuICAgICAgZmxleDogXCIxIDEgMjBweFwiLFxuICAgIH0sXG4gICAgXCImIGJ1dHRvbi5idXR0b25cIjoge1xuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgYm9yZGVyTGVmdDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgIGJvcmRlckJvdHRvbTogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICBib3JkZXJMZWZ0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlclJpZ2h0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgYm9yZGVyQm90dG9tOiBcInNvbGlkIDFweCB0cmFuc3BhcmVudFwiLFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlckxlZnQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgICBib3JkZXJSaWdodDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgICAgIGJvcmRlclRvcDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgICBib3JkZXJCb3R0b206IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmZpcnN0LW9mLXR5cGVcIjoge1xuICAgICAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogXCIycHhcIixcbiAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIFwiJjpkaXNhYmxlZDpob3ZlclwiOiB7XG4gICAgICAgICAgYm9yZGVyVG9wOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmxhc3QtY2hpbGRcIjoge1xuICAgICAgICBib3JkZXJCb3R0b206IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogXCIycHhcIixcbiAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIFwiJjpkaXNhYmxlZDpob3ZlclwiOiB7XG4gICAgICAgICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOm5vdCg6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBtYXJnaW5MZWZ0OiAwLFxuICAgICAgICBtYXJnaW5Ub3A6IC0xLFxuICAgICAgfSxcbiAgICAgIFwiJi5zZWxlY3RlZFwiOiB7XG4gICAgICAgIGhlaWdodDogMzIsXG4gICAgICAgIHdpZHRoOiBgY2FsYygxMDAlICsgMnB4KSAhaW1wb3J0YW50YCxcbiAgICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICAgIHpJbmRleDogMixcbiAgICAgICAgXCImOmhvdmVyLCAmOmZvY3VzXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgICAgekluZGV4OiAxLFxuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSAoeyB0eXBlOiBDb21wb25lbnQsIHByb3BzIH0pID0+XG4gIHN0eWxlZCgoeyBjbGFzc05hbWUgfSkgPT4gKFxuICAgIDxDb21wb25lbnRcbiAgICAgIHsuLi5wcm9wc31cbiAgICAgIGNsYXNzTmFtZT17Y2xzeChcImJ1dHRvblwiLCBwcm9wcy5zZWxlY3RlZCAmJiBcInNlbGVjdGVkXCIsIGNsYXNzTmFtZSl9XG4gICAgLz5cbiAgKSkoe1xuICAgIGhlaWdodDogMzIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIG1pbldpZHRoOiAzMixcbiAgICBtYXhXaWR0aDogMjAwLFxuICAgIHRyYW5zaXRpb246IFwibm9uZVwiLFxuICAgIGZsZXg6IFwiMSAwIDBweFwiLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgYm9yZGVyVG9wOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgYm9yZGVyQm90dG9tOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgYm9yZGVyTGVmdDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICBib3JkZXJSaWdodDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzIsXG4gICAgXCI6ZGlzYWJsZWRcIjogeyBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLm11bHRpQnV0dG9uLmRpc2FibGVkQmFja2dyb3VuZENvbG9yIH0sXG4gICAgXCI6aG92ZXJcIjoge1xuICAgICAgYm9yZGVyVG9wOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBib3JkZXJCb3R0b206IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlckxlZnQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICBib3JkZXJSaWdodDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICB9LFxuICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgXCImOmFjdGl2ZVwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGAke3RoZW1lLmNvbG9ycy5hdG1vM31gLFxuICAgIH0sXG4gICAgXCImOmRpc2FibGVkXCI6IHtcbiAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgYm9yZGVyVG9wOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICBib3JkZXJCb3R0b206IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgICBib3JkZXJCb3R0b206IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgICAgYm9yZGVyTGVmdDogXCJzb2xpZCAxcHggdHJhbnNwYXJlbnRcIixcbiAgICAgICAgYm9yZGVyUmlnaHQ6IFwic29saWQgMXB4IHRyYW5zcGFyZW50XCIsXG4gICAgICB9LFxuICAgIH0sXG4gICAgXCImOmZpcnN0LW9mLXR5cGVcIjoge1xuICAgICAgYm9yZGVyTGVmdDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogdGhlbWUucmFkaWkuYmFzZSxcbiAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IHRoZW1lLnJhZGlpLmJhc2UsXG4gICAgICBcIiY6ZGlzYWJsZWQ6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJMZWZ0OiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgXCImOmxhc3QtY2hpbGRcIjoge1xuICAgICAgYm9yZGVyUmlnaHQ6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcbiAgICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiB0aGVtZS5yYWRpaS5iYXNlLFxuICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IHRoZW1lLnJhZGlpLmJhc2UsXG4gICAgICBcIiY6ZGlzYWJsZWQ6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJSaWdodDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgfSxcbiAgICB9LFxuICAgIFwiJjpub3QoOmZpcnN0LW9mLXR5cGUpXCI6IHtcbiAgICAgIG1hcmdpbkxlZnQ6IFwiLTFweFwiLFxuICAgIH0sXG4gICAgXCImLnNlbGVjdGVkXCI6IHtcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICAgIGhlaWdodDogMzQsXG4gICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5sYWJlbCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIGJvcmRlcjogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIHpJbmRleDogMixcbiAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgXCImOm5vdCg6ZGlzYWJsZWQpXCI6IHtcbiAgICAgICAgICBib3JkZXI6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgICAgYm9yZGVyOiBgc29saWQgMXB4ICR7dGhlbWUuY29sb3JzLmF0bW80fWAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgXCImOmZpcnN0LW9mLXR5cGUsICY6bGFzdC1jaGlsZFwiOiB7XG4gICAgICAgIGJvcmRlcjogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIH0sXG5cbiAgICAgIC8vIHByZXZlbnQgdGhlIGZvY3VzIHJpbmcgdG8gYmUgaGlkZGVuIGJ5IHNpYmxpbmcgaG92ZXIgYmFja2dyb3VuZFxuICAgICAgLy8gZXZlbiB3aGVuIHNlbGVjdGVkXG4gICAgICBcIiYuSHZJc0ZvY3VzVmlzaWJsZVwiOiB7XG4gICAgICAgIHpJbmRleDogNSxcbiAgICAgIH0sXG4gICAgICBcIiY6ZGlzYWJsZWRcIjoge1xuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICAgIGJvcmRlcjogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgfSxcbiAgICB9LFxuICB9KTtcbiJdfQ== */");
|
|
210
|
-
exports.StyledButton = StyledButton;
|
|
211
|
-
exports.StyledRoot = StyledRoot;
|
|
167
|
+
});
|
|
168
|
+
exports.staticClasses = staticClasses;
|
|
169
|
+
exports.useClasses = useClasses;
|
|
212
170
|
//# 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 = ({ type: Component, props }) =>\n styled(({ className }) => (\n <Component\n {...props}\n className={clsx(\"button\", props.selected && \"selected\", className)}\n />\n ))({\n height: 32,\n width: \"100%\",\n minWidth: 32,\n maxWidth: 200,\n transition: \"none\",\n flex: \"1 0 0px\",\n padding: 0,\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","type","Component","props","className","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 { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFooter\", {\n root: {\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 \"& button$button\": {\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 ...theme.typography.body,\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 },\n \"&:last-of-type\": {\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} !important`,\n },\n },\n \"&:not(:first-of-type)\": {\n marginLeft: \"-1px\",\n },\n \"&$selected\": {\n \"&:hover\": {\n \"&:not(:disabled)\": {\n border: `solid 1px ${theme.colors.secondary}`,\n },\n \"&:disabled\": {\n border: `solid 1px ${theme.colors.atmo4}`,\n },\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 \"& button$button$selected\": {\n background: theme.colors.atmo1,\n height: 34,\n ...theme.typography.label,\n borderRadius: theme.radii.base,\n border: `solid 1px ${theme.colors.secondary}`,\n zIndex: 2,\n \"&:hover\": {\n background: theme.colors.atmo3,\n },\n \"&:first-of-type, &:last-of-type\": {\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 },\n },\n button: {},\n selected: {},\n // vertical button display Styling\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: theme.radii.base,\n borderTopRightRadius: theme.radii.base,\n },\n \"&:last-of-type\": {\n borderBottom: `solid 1px ${theme.colors.atmo4}`,\n borderBottomLeftRadius: theme.radii.base,\n borderBottomRightRadius: theme.radii.base,\n \"&:disabled:hover\": {\n borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\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,\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"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":"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"}
|
|
@@ -9,12 +9,20 @@ const HvSimpleGrid = (props) => {
|
|
|
9
9
|
breakpoints,
|
|
10
10
|
spacing = "sm",
|
|
11
11
|
cols,
|
|
12
|
+
className,
|
|
12
13
|
...others
|
|
13
14
|
} = useDefaultProps.useDefaultProps("HvSimpleGrid", props);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
const {
|
|
16
|
+
cx,
|
|
17
|
+
css
|
|
18
|
+
} = SimpleGrid_styles.useClasses();
|
|
19
|
+
const containerStyle = SimpleGrid_styles.getContainerStyle({
|
|
17
20
|
breakpoints,
|
|
21
|
+
spacing,
|
|
22
|
+
cols
|
|
23
|
+
});
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
25
|
+
className: cx(css(containerStyle), className),
|
|
18
26
|
...others,
|
|
19
27
|
children
|
|
20
28
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleGrid.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"SimpleGrid.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Breakpoint, Spacing } from \"./types\";\nimport { getContainerStyle, useClasses } from \"./SimpleGrid.styles\";\n\nexport interface HvSimpleGridProps extends HvBaseProps {\n /**\n * Spacing with pre-defined values according the values defined in the theme\n */\n spacing?: Spacing;\n /**\n * Provide an array to define responsive behavior:\n *\n * maxWidth or minWidth: max-width or min-width at which media query will work\n *\n * cols: number of columns per row at given max-width\n *\n * spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n */\n breakpoints?: Breakpoint[];\n /**\n * Number of how many columns the content will be displayed\n */\n cols?: number;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n const {\n children,\n breakpoints,\n spacing = \"sm\",\n cols,\n className,\n ...others\n } = useDefaultProps(\"HvSimpleGrid\", props);\n\n const { cx, css } = useClasses();\n\n const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n return (\n <div className={cx(css(containerStyle), className)} {...others}>\n {children}\n </div>\n );\n};\n"],"names":["HvSimpleGrid","props","children","breakpoints","spacing","cols","className","others","useDefaultProps","cx","css","useClasses","containerStyle","getContainerStyle"],"mappings":";;;;;AA2BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBP,KAAK;AAEnC,QAAA;AAAA,IAAEQ;AAAAA,IAAIC;AAAAA,MAAQC,kBAAW,WAAA;AAE/B,QAAMC,iBAAiBC,kBAAAA,kBAAkB;AAAA,IAAEV;AAAAA,IAAaC;AAAAA,IAASC;AAAAA,EAAAA,CAAM;AAEvE,wCACE,OAAA;AAAA,IAAKC,WAAWG,GAAGC,IAAIE,cAAc,GAAGN,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAML;AAAAA,EAAAA,CAEzD;AAET;;"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const _styled = require("@emotion/styled/base");
|
|
4
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
4
|
+
const classes = require("../../utils/classes.cjs");
|
|
5
|
+
const {
|
|
6
|
+
staticClasses,
|
|
7
|
+
useClasses
|
|
8
|
+
} = classes.createClasses("HvSimpleGrid", {});
|
|
7
9
|
function size(props) {
|
|
8
10
|
if (typeof props.size === "number") {
|
|
9
11
|
return props.size;
|
|
@@ -24,32 +26,31 @@ function getSortedBreakpoints(breakpoints) {
|
|
|
24
26
|
}));
|
|
25
27
|
return property === "minWidth" ? sorted.reverse() : sorted;
|
|
26
28
|
}
|
|
27
|
-
const
|
|
28
|
-
target: "e3u1m6d0"
|
|
29
|
-
} : {
|
|
30
|
-
target: "e3u1m6d0",
|
|
31
|
-
label: "StyledContainer"
|
|
32
|
-
})(({
|
|
29
|
+
const getContainerStyle = ({
|
|
33
30
|
breakpoints,
|
|
34
31
|
spacing,
|
|
35
32
|
cols
|
|
36
|
-
}) =>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
33
|
+
}) => {
|
|
34
|
+
return {
|
|
35
|
+
boxSizing: "border-box",
|
|
36
|
+
display: "grid",
|
|
37
|
+
gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
|
|
38
|
+
gap: uikitStyles.theme.space[spacing],
|
|
39
|
+
...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
|
|
40
|
+
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
41
|
+
const breakpointSize = size({
|
|
42
|
+
size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
|
|
43
|
+
sizes: uikitStyles.theme.breakpoints
|
|
44
|
+
});
|
|
45
|
+
acc[`@media (${property}: ${breakpointSize + (property === "max-width" ? 0 : 1)}px)`] = {
|
|
46
|
+
gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,
|
|
47
|
+
gap: uikitStyles.theme.space[spacing]
|
|
48
|
+
};
|
|
49
|
+
return acc;
|
|
50
|
+
}, {})
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
exports.getContainerStyle = getContainerStyle;
|
|
54
|
+
exports.staticClasses = staticClasses;
|
|
55
|
+
exports.useClasses = useClasses;
|
|
55
56
|
//# sourceMappingURL=SimpleGrid.styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleGrid.styles.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"SimpleGrid.styles.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import { CSSObject } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { Spacing, Breakpoint } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {});\n\nfunction size(props: { size: any; sizes: any }) {\n if (typeof props.size === \"number\") {\n return props.size;\n }\n\n return props.sizes[props.size] || props.size || props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n if (breakpoints.length === 0) {\n return breakpoints;\n }\n\n const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n const sorted = [...breakpoints].sort(\n (a, b) =>\n size({ size: b[property], sizes: theme.breakpoints }) -\n size({ size: a[property], sizes: theme.breakpoints })\n );\n\n return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n breakpoints,\n spacing,\n cols,\n}: {\n breakpoints?: Breakpoint[];\n spacing: Spacing;\n cols?: number;\n}): CSSObject => {\n return {\n boxSizing: \"border-box\",\n display: \"grid\",\n gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n ...(breakpoints &&\n getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {\n const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n const breakpointSize = size({\n size:\n property === \"max-width\"\n ? breakpoint.maxWidth\n : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n acc[\n `@media (${property}: ${\n breakpointSize + (property === \"max-width\" ? 0 : 1)\n }px)`\n ] = {\n gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n };\n\n return acc;\n }, {})),\n };\n};\n"],"names":["staticClasses","useClasses","createClasses","size","props","sizes","md","getSortedBreakpoints","breakpoints","length","property","sorted","sort","a","b","theme","reverse","getContainerStyle","spacing","cols","boxSizing","display","gridTemplateColumns","gap","space","reduce","acc","breakpoint","breakpointSize","maxWidth","minWidth"],"mappings":";;;;AAQa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB,EAAE;AAE7E,SAASC,KAAKC,OAAkC;AAC1C,MAAA,OAAOA,MAAMD,SAAS,UAAU;AAClC,WAAOC,MAAMD;AAAAA,EACf;AAEOC,SAAAA,MAAMC,MAAMD,MAAMD,IAAI,KAAKC,MAAMD,QAAQC,MAAMC,MAAMC;AAC9D;AAEA,SAASC,qBAAqBC,aAA2B;AACnDA,MAAAA,YAAYC,WAAW,GAAG;AACrBD,WAAAA;AAAAA,EACT;AAEA,QAAME,WAAW,cAAcF,YAAY,CAAC,IAAI,aAAa;AACvDG,QAAAA,SAAS,CAAC,GAAGH,WAAW,EAAEI,KAC9B,CAACC,GAAGC,MACFX,KAAK;AAAA,IAAEA,MAAMW,EAAEJ,QAAQ;AAAA,IAAGL,OAAOU,YAAMP,MAAAA;AAAAA,EAAa,CAAA,IACpDL,KAAK;AAAA,IAAEA,MAAMU,EAAEH,QAAQ;AAAA,IAAGL,OAAOU,YAAMP,MAAAA;AAAAA,EAAa,CAAA,CACxD;AAEA,SAAOE,aAAa,aAAaC,OAAOK,QAAAA,IAAYL;AACtD;AAEO,MAAMM,oBAAoBA,CAAC;AAAA,EAChCT;AAAAA,EACAU;AAAAA,EACAC;AAKF,MAAiB;AACR,SAAA;AAAA,IACLC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,qBAAsB,UAASH;AAAAA,IAC/BI,KAAKR,YAAAA,MAAMS,MAAMN,OAAO;AAAA,IACxB,GAAIV,eACFD,qBAAqBC,WAAW,EAAEiB,OAAO,CAACC,KAAKC,eAAe;AACtDjB,YAAAA,WAAW,cAAciB,aAAa,cAAc;AAC1D,YAAMC,iBAAiBzB,KAAK;AAAA,QAC1BA,MACEO,aAAa,cACTiB,WAAWE,WACXF,WAAWG;AAAAA,QACjBzB,OAAOU,YAAMP,MAAAA;AAAAA,MAAAA,CACd;AAEDkB,UACG,WAAUhB,aACTkB,kBAAkBlB,aAAa,cAAc,IAAI,OAC9C,IACH;AAAA,QACFY,qBAAsB,UAASK,WAAWR;AAAAA,QAC1CI,KAAKR,YAAAA,MAAMS,MAAMN,OAAO;AAAA,MAAA;AAGnBQ,aAAAA;AAAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const _styled = require("@emotion/styled/base");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
|
|
6
5
|
const ListItem_styles = require("../../ListContainer/ListItem/ListItem.styles.cjs");
|
|
6
|
+
const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
|
|
7
7
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
8
8
|
const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
|
|
9
9
|
const StyledListItem = /* @__PURE__ */ _styled__default.default(ListItem.HvListItem, process.env.NODE_ENV === "production" ? {
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -8,7 +8,7 @@ const utils = require("./components/Typography/utils.cjs");
|
|
|
8
8
|
const Typography_styles = require("./components/Typography/Typography.styles.cjs");
|
|
9
9
|
const Typography = require("./components/Typography/Typography.cjs");
|
|
10
10
|
const Box = require("./components/Box/Box.cjs");
|
|
11
|
-
const
|
|
11
|
+
const Focus_styles = require("./components/Focus/Focus.styles.cjs");
|
|
12
12
|
const Focus = require("./components/Focus/Focus.cjs");
|
|
13
13
|
const ListContainer_styles = require("./components/ListContainer/ListContainer.styles.cjs");
|
|
14
14
|
const ListContainer = require("./components/ListContainer/ListContainer.cjs");
|
|
@@ -93,7 +93,7 @@ const Link_styles = require("./components/Link/Link.styles.cjs");
|
|
|
93
93
|
const Link = require("./components/Link/Link.cjs");
|
|
94
94
|
const Loading_styles = require("./components/Loading/Loading.styles.cjs");
|
|
95
95
|
const Loading = require("./components/Loading/Loading.cjs");
|
|
96
|
-
const
|
|
96
|
+
const MultiButton_styles = require("./components/MultiButton/MultiButton.styles.cjs");
|
|
97
97
|
const MultiButton = require("./components/MultiButton/MultiButton.cjs");
|
|
98
98
|
const Panel_styles = require("./components/Panel/Panel.styles.cjs");
|
|
99
99
|
const Panel = require("./components/Panel/Panel.cjs");
|
|
@@ -137,7 +137,7 @@ const TagsInput_styles = require("./components/TagsInput/TagsInput.styles.cjs");
|
|
|
137
137
|
const TagsInput = require("./components/TagsInput/TagsInput.cjs");
|
|
138
138
|
const CheckBoxGroup_styles = require("./components/CheckBoxGroup/CheckBoxGroup.styles.cjs");
|
|
139
139
|
const CheckBoxGroup = require("./components/CheckBoxGroup/CheckBoxGroup.cjs");
|
|
140
|
-
const
|
|
140
|
+
const List_styles = require("./components/List/List.styles.cjs");
|
|
141
141
|
const List = require("./components/List/List.cjs");
|
|
142
142
|
const RadioGroup_styles = require("./components/RadioGroup/RadioGroup.styles.cjs");
|
|
143
143
|
const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
|
|
@@ -315,7 +315,7 @@ exports.typographyVariants = utils.typographyVariants;
|
|
|
315
315
|
exports.typographyClasses = Typography_styles.staticClasses;
|
|
316
316
|
exports.HvTypography = Typography.HvTypography;
|
|
317
317
|
exports.HvBox = Box.HvBox;
|
|
318
|
-
exports.focusClasses =
|
|
318
|
+
exports.focusClasses = Focus_styles.staticClasses;
|
|
319
319
|
exports.HvFocus = Focus.HvFocus;
|
|
320
320
|
exports.listContainerClasses = ListContainer_styles.staticClasses;
|
|
321
321
|
exports.HvListContainer = ListContainer.HvListContainer;
|
|
@@ -413,7 +413,7 @@ exports.linkClasses = Link_styles.staticClasses;
|
|
|
413
413
|
exports.HvLink = Link.HvLink;
|
|
414
414
|
exports.loadingClasses = Loading_styles.staticClasses;
|
|
415
415
|
exports.HvLoading = Loading.HvLoading;
|
|
416
|
-
exports.multiButtonClasses =
|
|
416
|
+
exports.multiButtonClasses = MultiButton_styles.staticClasses;
|
|
417
417
|
exports.HvMultiButton = MultiButton.HvMultiButton;
|
|
418
418
|
exports.panelClasses = Panel_styles.staticClasses;
|
|
419
419
|
exports.HvPanel = Panel.HvPanel;
|
|
@@ -458,7 +458,7 @@ exports.tagsInputClasses = TagsInput_styles.staticClasses;
|
|
|
458
458
|
exports.HvTagsInput = TagsInput.HvTagsInput;
|
|
459
459
|
exports.checkBoxGroupClasses = CheckBoxGroup_styles.staticClasses;
|
|
460
460
|
exports.HvCheckBoxGroup = CheckBoxGroup.HvCheckBoxGroup;
|
|
461
|
-
exports.listClasses =
|
|
461
|
+
exports.listClasses = List_styles.staticClasses;
|
|
462
462
|
exports.HvList = List.HvList;
|
|
463
463
|
exports.radioGroupClasses = RadioGroup_styles.staticClasses;
|
|
464
464
|
exports.HvRadioGroup = RadioGroup.HvRadioGroup;
|
|
@@ -34,6 +34,7 @@ const HvBaseDropdown = (props) => {
|
|
|
34
34
|
defaultExpanded = false,
|
|
35
35
|
disabled = false,
|
|
36
36
|
readOnly = false,
|
|
37
|
+
required = false,
|
|
37
38
|
disablePortal = false,
|
|
38
39
|
variableWidth = false,
|
|
39
40
|
placement = "right",
|
|
@@ -193,6 +194,8 @@ const HvBaseDropdown = (props) => {
|
|
|
193
194
|
"aria-controls": isOpen ? setId(elementId, "children-container") : void 0,
|
|
194
195
|
"aria-label": others["aria-label"] ?? void 0,
|
|
195
196
|
"aria-labelledby": others["aria-labelledby"] ?? void 0,
|
|
197
|
+
"aria-required": required ?? void 0,
|
|
198
|
+
"aria-readonly": readOnly ?? void 0,
|
|
196
199
|
tabIndex: disabled ? -1 : 0,
|
|
197
200
|
ref: handleDropdownHeaderRef,
|
|
198
201
|
...dropdownHeaderProps,
|
|
@@ -287,6 +290,8 @@ const HvBaseDropdown = (props) => {
|
|
|
287
290
|
role: ariaRole,
|
|
288
291
|
"aria-expanded": ariaExpanded,
|
|
289
292
|
"aria-owns": isOpen ? setId(elementId, "children-container") : void 0,
|
|
293
|
+
"aria-required": required ?? void 0,
|
|
294
|
+
"aria-readonly": readOnly ?? void 0,
|
|
290
295
|
className: cx(classes.anchor, {
|
|
291
296
|
[classes.rootDisabled]: disabled
|
|
292
297
|
}, className),
|