@hitachivantara/uikit-react-core 5.102.0 → 5.103.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.
@@ -4,10 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
4
4
  const uikitStyles = require("@hitachivantara/uikit-styles");
5
5
  const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardContent", {
6
6
  content: {
7
- padding: `0 ${uikitStyles.theme.space.sm} 15px ${uikitStyles.theme.space.sm}`,
8
- "&:last-child": {
9
- paddingBottom: uikitStyles.theme.space.sm
10
- }
7
+ padding: uikitStyles.theme.space.sm
11
8
  }
12
9
  });
13
10
  exports.staticClasses = staticClasses;
@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
5
5
  const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardHeader", {
6
6
  root: {
7
7
  position: "relative",
8
- padding: uikitStyles.theme.spacing("12px", "xs", "sm", "sm"),
8
+ padding: uikitStyles.theme.spacing("xs", "sm"),
9
9
  gap: uikitStyles.theme.space.xs,
10
10
  alignItems: "center",
11
11
  display: "flex"
@@ -25,6 +25,7 @@ const HvCheckBox = React.forwardRef(
25
25
  statusMessage,
26
26
  label,
27
27
  labelProps,
28
+ labelPosition = "right",
28
29
  inputProps,
29
30
  value = "on",
30
31
  required,
@@ -145,7 +146,7 @@ const HvCheckBox = React.forwardRef(
145
146
  hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
146
147
  "div",
147
148
  {
148
- className: cx(classes.container, {
149
+ className: cx(classes.container, classes[labelPosition], {
149
150
  [classes.invalidContainer]: isStateInvalid,
150
151
  [classes.disabled]: disabled
151
152
  }),
@@ -16,6 +16,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
16
16
  },
17
17
  ":where(:has($label)) $checkbox": {
18
18
  borderRadius: "inherit"
19
+ },
20
+ "&$left": {
21
+ flexDirection: "row-reverse",
22
+ justifyContent: "flex-end"
23
+ },
24
+ "&$right": {
25
+ flexDirection: "row"
19
26
  }
20
27
  },
21
28
  invalidContainer: {},
@@ -31,15 +38,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
31
38
  invalidCheckbox: {},
32
39
  label: {
33
40
  verticalAlign: "middle",
34
- paddingRight: uikitStyles.theme.space.xs,
35
41
  ...uikitStyles.theme.typography.body,
36
42
  cursor: "pointer",
37
- lineHeight: "32px",
38
- width: "100%"
43
+ lineHeight: "32px"
39
44
  },
40
45
  checked: {},
41
46
  indeterminate: {},
42
- semantic: {}
47
+ semantic: {},
48
+ left: {
49
+ "& .HvCheckBox-label": {
50
+ paddingLeft: uikitStyles.theme.space.xs
51
+ }
52
+ },
53
+ right: {
54
+ "& .HvCheckBox-label": {
55
+ paddingRight: uikitStyles.theme.space.xs
56
+ }
57
+ }
43
58
  });
44
59
  exports.staticClasses = staticClasses;
45
60
  exports.useClasses = useClasses;
@@ -198,7 +198,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
198
198
  if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
199
199
  setFocused(false);
200
200
  const inputValidity = performValidation();
201
- onBlur?.(event, event.target.value, inputValidity);
201
+ onBlur?.(event, event.target?.value, inputValidity);
202
202
  };
203
203
  const onFocusHandler = (event) => {
204
204
  setFocused(true);
@@ -28,6 +28,7 @@ const HvRadio = React.forwardRef(
28
28
  "aria-labelledby": ariaLabelledBy,
29
29
  "aria-describedby": ariaDescribedBy,
30
30
  labelProps,
31
+ labelPosition = "right",
31
32
  checked,
32
33
  defaultChecked = false,
33
34
  onChange,
@@ -114,7 +115,7 @@ const HvRadio = React.forwardRef(
114
115
  hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
115
116
  "div",
116
117
  {
117
- className: cx(classes.container, {
118
+ className: cx(classes.container, classes[labelPosition], {
118
119
  [classes.focusVisible]: !!(focusVisible && label),
119
120
  [classes.semantic]: semantic,
120
121
  [classes.checked]: isChecked,
@@ -16,6 +16,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
16
16
  },
17
17
  ":where(:has($label)) $radio": {
18
18
  borderRadius: "inherit"
19
+ },
20
+ "&$left": {
21
+ flexDirection: "row-reverse",
22
+ justifyContent: "flex-end"
23
+ },
24
+ "&$right": {
25
+ flexDirection: "row"
19
26
  }
20
27
  },
21
28
  invalidContainer: {},
@@ -31,14 +38,22 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
31
38
  invalidRadio: {},
32
39
  label: {
33
40
  verticalAlign: "middle",
34
- paddingRight: uikitStyles.theme.space.xs,
35
41
  ...uikitStyles.theme.typography.body,
36
42
  cursor: "pointer",
37
- lineHeight: "32px",
38
- width: "100%"
43
+ lineHeight: "32px"
39
44
  },
40
45
  checked: {},
41
- semantic: {}
46
+ semantic: {},
47
+ left: {
48
+ "& .HvRadio-label": {
49
+ paddingLeft: uikitStyles.theme.space.xs
50
+ }
51
+ },
52
+ right: {
53
+ "& .HvRadio-label": {
54
+ paddingRight: uikitStyles.theme.space.xs
55
+ }
56
+ }
42
57
  });
43
58
  exports.staticClasses = staticClasses;
44
59
  exports.useClasses = useClasses;
@@ -28,6 +28,7 @@ const HvSwitch = React.forwardRef(
28
28
  "aria-labelledby": ariaLabelledBy,
29
29
  "aria-describedby": ariaDescribedBy,
30
30
  labelProps,
31
+ labelPosition = "top",
31
32
  checked,
32
33
  defaultChecked = false,
33
34
  onChange,
@@ -76,48 +77,50 @@ const HvSwitch = React.forwardRef(
76
77
  readOnly,
77
78
  className: cx(classes.root, className),
78
79
  children: [
79
- label && /* @__PURE__ */ jsxRuntime.jsx(
80
- Label.HvLabel,
81
- {
82
- showGutter: true,
83
- id: setId.setId(elementId, "label"),
84
- htmlFor: setId.setId(elementId, "input"),
85
- label,
86
- className: classes.label,
87
- ...labelProps
88
- }
89
- ),
90
- /* @__PURE__ */ jsxRuntime.jsx(
91
- "div",
92
- {
93
- className: cx(classes.switchContainer, {
94
- [classes.invalidSwitch]: isStateInvalid
95
- }),
96
- children: /* @__PURE__ */ jsxRuntime.jsx(
97
- BaseSwitch.HvBaseSwitch,
98
- {
99
- ref,
100
- id: label ? setId.setId(elementId, "input") : setId.setId(id, "input"),
101
- name,
102
- disabled,
103
- readOnly,
104
- required,
105
- onChange: onLocalChange,
106
- value,
107
- checked: isChecked,
108
- inputProps: {
109
- "aria-invalid": isStateInvalid ? true : void 0,
110
- "aria-errormessage": errorMessageId,
111
- "aria-label": ariaLabel,
112
- "aria-labelledby": ariaLabelledBy,
113
- "aria-describedby": ariaDescribedBy,
114
- ...inputProps
115
- },
116
- ...others
117
- }
118
- )
119
- }
120
- ),
80
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.container, classes[labelPosition]), children: [
81
+ label && /* @__PURE__ */ jsxRuntime.jsx(
82
+ Label.HvLabel,
83
+ {
84
+ showGutter: true,
85
+ id: setId.setId(elementId, "label"),
86
+ htmlFor: setId.setId(elementId, "input"),
87
+ label,
88
+ className: classes.label,
89
+ ...labelProps
90
+ }
91
+ ),
92
+ /* @__PURE__ */ jsxRuntime.jsx(
93
+ "div",
94
+ {
95
+ className: cx(classes.switchContainer, {
96
+ [classes.invalidSwitch]: isStateInvalid
97
+ }),
98
+ children: /* @__PURE__ */ jsxRuntime.jsx(
99
+ BaseSwitch.HvBaseSwitch,
100
+ {
101
+ ref,
102
+ id: label ? setId.setId(elementId, "input") : setId.setId(id, "input"),
103
+ name,
104
+ disabled,
105
+ readOnly,
106
+ required,
107
+ onChange: onLocalChange,
108
+ value,
109
+ checked: isChecked,
110
+ inputProps: {
111
+ "aria-invalid": isStateInvalid ? true : void 0,
112
+ "aria-errormessage": errorMessageId,
113
+ "aria-label": ariaLabel,
114
+ "aria-labelledby": ariaLabelledBy,
115
+ "aria-describedby": ariaDescribedBy,
116
+ ...inputProps
117
+ },
118
+ ...others
119
+ }
120
+ )
121
+ }
122
+ )
123
+ ] }),
121
124
  canShowError && /* @__PURE__ */ jsxRuntime.jsx(
122
125
  WarningText.HvWarningText,
123
126
  {
@@ -10,6 +10,29 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSwitch",
10
10
  },
11
11
  label: {},
12
12
  error: {},
13
+ container: {
14
+ display: "flex",
15
+ "&$left, &$right": {
16
+ alignItems: "center"
17
+ },
18
+ "&$left": {
19
+ flexDirection: "row",
20
+ paddingLeft: uikitStyles.theme.space.xs
21
+ },
22
+ "&$right": {
23
+ flexDirection: "row-reverse",
24
+ paddingRight: uikitStyles.theme.space.xs
25
+ },
26
+ "&$top": {
27
+ flexDirection: "column",
28
+ "&:hover": {
29
+ backgroundColor: "transparent"
30
+ },
31
+ "& $switchContainer:hover .HvBaseSwitch-root": {
32
+ backgroundColor: uikitStyles.theme.colors.bgHover
33
+ }
34
+ }
35
+ },
13
36
  switchContainer: {
14
37
  height: "32px",
15
38
  display: "flex",
@@ -20,6 +43,19 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSwitch",
20
43
  invalidSwitch: {
21
44
  paddingBottom: "1px",
22
45
  borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`
46
+ },
47
+ top: {},
48
+ left: {
49
+ "& .HvSwitch-label": {
50
+ paddingBottom: 0,
51
+ paddingRight: uikitStyles.theme.space.xxs
52
+ }
53
+ },
54
+ right: {
55
+ "& .HvSwitch-label": {
56
+ paddingBottom: 0,
57
+ paddingLeft: uikitStyles.theme.space.xxs
58
+ }
23
59
  }
24
60
  });
25
61
  exports.staticClasses = staticClasses;
@@ -271,6 +271,13 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
271
271
  borderTop: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
272
272
  }
273
273
  }
274
+ },
275
+ HvRadioIcon: {
276
+ classes: {
277
+ checked: {
278
+ "--bg-color": uikitStyles.theme.colors.primary
279
+ }
280
+ }
274
281
  }
275
282
  }
276
283
  });
@@ -182,6 +182,21 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
182
182
  }
183
183
  }
184
184
  },
185
+ HvSwitch: {
186
+ classes: {
187
+ container: {
188
+ borderRadius: uikitStyles.theme.radii.full,
189
+ "&:hover": {
190
+ backgroundColor: uikitStyles.theme.colors.bgHover
191
+ },
192
+ "& .HvBaseSwitch-root": {
193
+ "&:hover": {
194
+ backgroundColor: "transparent"
195
+ }
196
+ }
197
+ }
198
+ }
199
+ },
185
200
  HvSection: {
186
201
  classes: {
187
202
  content: {
@@ -663,7 +678,6 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
663
678
  paddingBottom: uikitStyles.theme.space.sm
664
679
  },
665
680
  "& .HvActionBar-root": {
666
- padding: uikitStyles.theme.spacing("xs", "sm"),
667
681
  borderTop: "none"
668
682
  }
669
683
  },
@@ -687,8 +701,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
687
701
  HvCardHeader: {
688
702
  classes: {
689
703
  root: {
690
- flexDirection: "row-reverse",
691
- padding: uikitStyles.theme.spacing("xs", "sm")
704
+ flexDirection: "row-reverse"
692
705
  },
693
706
  subheader: {
694
707
  color: uikitStyles.theme.colors.textSubtle
@@ -698,16 +711,6 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
698
711
  }
699
712
  }
700
713
  },
701
- HvCardContent: {
702
- classes: {
703
- content: {
704
- padding: uikitStyles.theme.spacing("xs", "sm"),
705
- "&:last-child": {
706
- paddingBottom: uikitStyles.theme.space.xs
707
- }
708
- }
709
- }
710
- },
711
714
  HvFooter: {
712
715
  name: "Pentaho"
713
716
  },
@@ -2,10 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
2
2
  import { theme } from "@hitachivantara/uikit-styles";
3
3
  const { staticClasses, useClasses } = createClasses("HvCardContent", {
4
4
  content: {
5
- padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
6
- "&:last-child": {
7
- paddingBottom: theme.space.sm
8
- }
5
+ padding: theme.space.sm
9
6
  }
10
7
  });
11
8
  export {
@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
3
3
  const { staticClasses, useClasses } = createClasses("HvCardHeader", {
4
4
  root: {
5
5
  position: "relative",
6
- padding: theme.spacing("12px", "xs", "sm", "sm"),
6
+ padding: theme.spacing("xs", "sm"),
7
7
  gap: theme.space.xs,
8
8
  alignItems: "center",
9
9
  display: "flex"
@@ -24,6 +24,7 @@ const HvCheckBox = forwardRef(
24
24
  statusMessage,
25
25
  label,
26
26
  labelProps,
27
+ labelPosition = "right",
27
28
  inputProps,
28
29
  value = "on",
29
30
  required,
@@ -144,7 +145,7 @@ const HvCheckBox = forwardRef(
144
145
  hasLabel ? /* @__PURE__ */ jsxs(
145
146
  "div",
146
147
  {
147
- className: cx(classes.container, {
148
+ className: cx(classes.container, classes[labelPosition], {
148
149
  [classes.invalidContainer]: isStateInvalid,
149
150
  [classes.disabled]: disabled
150
151
  }),
@@ -14,6 +14,13 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
14
14
  },
15
15
  ":where(:has($label)) $checkbox": {
16
16
  borderRadius: "inherit"
17
+ },
18
+ "&$left": {
19
+ flexDirection: "row-reverse",
20
+ justifyContent: "flex-end"
21
+ },
22
+ "&$right": {
23
+ flexDirection: "row"
17
24
  }
18
25
  },
19
26
  invalidContainer: {},
@@ -29,15 +36,23 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
29
36
  invalidCheckbox: {},
30
37
  label: {
31
38
  verticalAlign: "middle",
32
- paddingRight: theme.space.xs,
33
39
  ...theme.typography.body,
34
40
  cursor: "pointer",
35
- lineHeight: "32px",
36
- width: "100%"
41
+ lineHeight: "32px"
37
42
  },
38
43
  checked: {},
39
44
  indeterminate: {},
40
- semantic: {}
45
+ semantic: {},
46
+ left: {
47
+ "& .HvCheckBox-label": {
48
+ paddingLeft: theme.space.xs
49
+ }
50
+ },
51
+ right: {
52
+ "& .HvCheckBox-label": {
53
+ paddingRight: theme.space.xs
54
+ }
55
+ }
41
56
  });
42
57
  export {
43
58
  staticClasses,
@@ -197,7 +197,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
197
197
  if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
198
198
  setFocused(false);
199
199
  const inputValidity = performValidation();
200
- onBlur?.(event, event.target.value, inputValidity);
200
+ onBlur?.(event, event.target?.value, inputValidity);
201
201
  };
202
202
  const onFocusHandler = (event) => {
203
203
  setFocused(true);
@@ -27,6 +27,7 @@ const HvRadio = forwardRef(
27
27
  "aria-labelledby": ariaLabelledBy,
28
28
  "aria-describedby": ariaDescribedBy,
29
29
  labelProps,
30
+ labelPosition = "right",
30
31
  checked,
31
32
  defaultChecked = false,
32
33
  onChange,
@@ -113,7 +114,7 @@ const HvRadio = forwardRef(
113
114
  hasLabel ? /* @__PURE__ */ jsxs(
114
115
  "div",
115
116
  {
116
- className: cx(classes.container, {
117
+ className: cx(classes.container, classes[labelPosition], {
117
118
  [classes.focusVisible]: !!(focusVisible && label),
118
119
  [classes.semantic]: semantic,
119
120
  [classes.checked]: isChecked,
@@ -14,6 +14,13 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
14
14
  },
15
15
  ":where(:has($label)) $radio": {
16
16
  borderRadius: "inherit"
17
+ },
18
+ "&$left": {
19
+ flexDirection: "row-reverse",
20
+ justifyContent: "flex-end"
21
+ },
22
+ "&$right": {
23
+ flexDirection: "row"
17
24
  }
18
25
  },
19
26
  invalidContainer: {},
@@ -29,14 +36,22 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
29
36
  invalidRadio: {},
30
37
  label: {
31
38
  verticalAlign: "middle",
32
- paddingRight: theme.space.xs,
33
39
  ...theme.typography.body,
34
40
  cursor: "pointer",
35
- lineHeight: "32px",
36
- width: "100%"
41
+ lineHeight: "32px"
37
42
  },
38
43
  checked: {},
39
- semantic: {}
44
+ semantic: {},
45
+ left: {
46
+ "& .HvRadio-label": {
47
+ paddingLeft: theme.space.xs
48
+ }
49
+ },
50
+ right: {
51
+ "& .HvRadio-label": {
52
+ paddingRight: theme.space.xs
53
+ }
54
+ }
40
55
  });
41
56
  export {
42
57
  staticClasses,
@@ -27,6 +27,7 @@ const HvSwitch = forwardRef(
27
27
  "aria-labelledby": ariaLabelledBy,
28
28
  "aria-describedby": ariaDescribedBy,
29
29
  labelProps,
30
+ labelPosition = "top",
30
31
  checked,
31
32
  defaultChecked = false,
32
33
  onChange,
@@ -75,48 +76,50 @@ const HvSwitch = forwardRef(
75
76
  readOnly,
76
77
  className: cx(classes.root, className),
77
78
  children: [
78
- label && /* @__PURE__ */ jsx(
79
- HvLabel,
80
- {
81
- showGutter: true,
82
- id: setId(elementId, "label"),
83
- htmlFor: setId(elementId, "input"),
84
- label,
85
- className: classes.label,
86
- ...labelProps
87
- }
88
- ),
89
- /* @__PURE__ */ jsx(
90
- "div",
91
- {
92
- className: cx(classes.switchContainer, {
93
- [classes.invalidSwitch]: isStateInvalid
94
- }),
95
- children: /* @__PURE__ */ jsx(
96
- HvBaseSwitch,
97
- {
98
- ref,
99
- id: label ? setId(elementId, "input") : setId(id, "input"),
100
- name,
101
- disabled,
102
- readOnly,
103
- required,
104
- onChange: onLocalChange,
105
- value,
106
- checked: isChecked,
107
- inputProps: {
108
- "aria-invalid": isStateInvalid ? true : void 0,
109
- "aria-errormessage": errorMessageId,
110
- "aria-label": ariaLabel,
111
- "aria-labelledby": ariaLabelledBy,
112
- "aria-describedby": ariaDescribedBy,
113
- ...inputProps
114
- },
115
- ...others
116
- }
117
- )
118
- }
119
- ),
79
+ /* @__PURE__ */ jsxs("div", { className: cx(classes.container, classes[labelPosition]), children: [
80
+ label && /* @__PURE__ */ jsx(
81
+ HvLabel,
82
+ {
83
+ showGutter: true,
84
+ id: setId(elementId, "label"),
85
+ htmlFor: setId(elementId, "input"),
86
+ label,
87
+ className: classes.label,
88
+ ...labelProps
89
+ }
90
+ ),
91
+ /* @__PURE__ */ jsx(
92
+ "div",
93
+ {
94
+ className: cx(classes.switchContainer, {
95
+ [classes.invalidSwitch]: isStateInvalid
96
+ }),
97
+ children: /* @__PURE__ */ jsx(
98
+ HvBaseSwitch,
99
+ {
100
+ ref,
101
+ id: label ? setId(elementId, "input") : setId(id, "input"),
102
+ name,
103
+ disabled,
104
+ readOnly,
105
+ required,
106
+ onChange: onLocalChange,
107
+ value,
108
+ checked: isChecked,
109
+ inputProps: {
110
+ "aria-invalid": isStateInvalid ? true : void 0,
111
+ "aria-errormessage": errorMessageId,
112
+ "aria-label": ariaLabel,
113
+ "aria-labelledby": ariaLabelledBy,
114
+ "aria-describedby": ariaDescribedBy,
115
+ ...inputProps
116
+ },
117
+ ...others
118
+ }
119
+ )
120
+ }
121
+ )
122
+ ] }),
120
123
  canShowError && /* @__PURE__ */ jsx(
121
124
  HvWarningText,
122
125
  {
@@ -8,6 +8,29 @@ const { staticClasses, useClasses } = createClasses("HvSwitch", {
8
8
  },
9
9
  label: {},
10
10
  error: {},
11
+ container: {
12
+ display: "flex",
13
+ "&$left, &$right": {
14
+ alignItems: "center"
15
+ },
16
+ "&$left": {
17
+ flexDirection: "row",
18
+ paddingLeft: theme.space.xs
19
+ },
20
+ "&$right": {
21
+ flexDirection: "row-reverse",
22
+ paddingRight: theme.space.xs
23
+ },
24
+ "&$top": {
25
+ flexDirection: "column",
26
+ "&:hover": {
27
+ backgroundColor: "transparent"
28
+ },
29
+ "& $switchContainer:hover .HvBaseSwitch-root": {
30
+ backgroundColor: theme.colors.bgHover
31
+ }
32
+ }
33
+ },
11
34
  switchContainer: {
12
35
  height: "32px",
13
36
  display: "flex",
@@ -18,6 +41,19 @@ const { staticClasses, useClasses } = createClasses("HvSwitch", {
18
41
  invalidSwitch: {
19
42
  paddingBottom: "1px",
20
43
  borderBottom: `1px solid ${theme.form.errorColor}`
44
+ },
45
+ top: {},
46
+ left: {
47
+ "& .HvSwitch-label": {
48
+ paddingBottom: 0,
49
+ paddingRight: theme.space.xxs
50
+ }
51
+ },
52
+ right: {
53
+ "& .HvSwitch-label": {
54
+ paddingBottom: 0,
55
+ paddingLeft: theme.space.xxs
56
+ }
21
57
  }
22
58
  });
23
59
  export {
@@ -269,6 +269,13 @@ const ds5 = mergeTheme(ds5$1, {
269
269
  borderTop: `1px solid ${theme.colors.borderSubtle}`
270
270
  }
271
271
  }
272
+ },
273
+ HvRadioIcon: {
274
+ classes: {
275
+ checked: {
276
+ "--bg-color": theme.colors.primary
277
+ }
278
+ }
272
279
  }
273
280
  }
274
281
  });
@@ -180,6 +180,21 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
180
180
  }
181
181
  }
182
182
  },
183
+ HvSwitch: {
184
+ classes: {
185
+ container: {
186
+ borderRadius: theme.radii.full,
187
+ "&:hover": {
188
+ backgroundColor: theme.colors.bgHover
189
+ },
190
+ "& .HvBaseSwitch-root": {
191
+ "&:hover": {
192
+ backgroundColor: "transparent"
193
+ }
194
+ }
195
+ }
196
+ }
197
+ },
183
198
  HvSection: {
184
199
  classes: {
185
200
  content: {
@@ -661,7 +676,6 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
661
676
  paddingBottom: theme.space.sm
662
677
  },
663
678
  "& .HvActionBar-root": {
664
- padding: theme.spacing("xs", "sm"),
665
679
  borderTop: "none"
666
680
  }
667
681
  },
@@ -685,8 +699,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
685
699
  HvCardHeader: {
686
700
  classes: {
687
701
  root: {
688
- flexDirection: "row-reverse",
689
- padding: theme.spacing("xs", "sm")
702
+ flexDirection: "row-reverse"
690
703
  },
691
704
  subheader: {
692
705
  color: theme.colors.textSubtle
@@ -696,16 +709,6 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
696
709
  }
697
710
  }
698
711
  },
699
- HvCardContent: {
700
- classes: {
701
- content: {
702
- padding: theme.spacing("xs", "sm"),
703
- "&:last-child": {
704
- paddingBottom: theme.space.xs
705
- }
706
- }
707
- }
708
- },
709
712
  HvFooter: {
710
713
  name: "Pentaho"
711
714
  },
@@ -538,6 +538,8 @@ export declare const checkBoxClasses: {
538
538
  checked: string;
539
539
  indeterminate: string;
540
540
  semantic: string;
541
+ left: string;
542
+ right: string;
541
543
  };
542
544
 
543
545
  export declare const checkBoxGroupClasses: {
@@ -2534,6 +2536,10 @@ export declare interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, "clas
2534
2536
  * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
2535
2537
  */
2536
2538
  statusMessage?: React.ReactNode;
2539
+ /**
2540
+ * The position of the label relative to the control.
2541
+ */
2542
+ labelPosition?: "left" | "right";
2537
2543
  /**
2538
2544
  * A Jss Object used to override or extend the styles applied to the checkbox.
2539
2545
  */
@@ -5362,6 +5368,10 @@ export declare interface HvRadioProps extends Omit<RadioProps, "onChange" | "cla
5362
5368
  onFocusVisible?: (event: React.FocusEvent<any>) => void;
5363
5369
  /** @ignore */
5364
5370
  ref?: RadioProps["ref"];
5371
+ /**
5372
+ * The position of the label relative to the control.
5373
+ */
5374
+ labelPosition?: "left" | "right";
5365
5375
  /** @ignore */
5366
5376
  component?: RadioProps["component"];
5367
5377
  }
@@ -6216,6 +6226,10 @@ export declare interface HvSwitchProps extends Omit<SwitchProps, "color" | "onCh
6216
6226
  color?: HvColorAny;
6217
6227
  /** The size of the switch. */
6218
6228
  size?: HvBaseSwitchProps["size"];
6229
+ /**
6230
+ * The position of the label relative to the control.
6231
+ */
6232
+ labelPosition?: "top" | "left" | "right";
6219
6233
  }
6220
6234
 
6221
6235
  export declare const HvTab: ForwardRefExoticComponent<Omit<HvTabProps, "ref"> & RefAttributes<HTMLDivElement>>;
@@ -7862,6 +7876,8 @@ export declare const radioClasses: {
7862
7876
  label: string;
7863
7877
  checked: string;
7864
7878
  semantic: string;
7879
+ left: string;
7880
+ right: string;
7865
7881
  };
7866
7882
 
7867
7883
  export declare const radioGroupClasses: {
@@ -8051,8 +8067,12 @@ export declare const switchClasses: {
8051
8067
  root: string;
8052
8068
  label: string;
8053
8069
  error: string;
8070
+ container: string;
8054
8071
  switchContainer: string;
8055
8072
  invalidSwitch: string;
8073
+ top: string;
8074
+ left: string;
8075
+ right: string;
8056
8076
  };
8057
8077
 
8058
8078
  export declare const tabClasses: {
@@ -8561,13 +8581,17 @@ declare const useClasses_110: (classesProp?: Partial<Record<"icon" | "root", str
8561
8581
  readonly cx: (...args: any) => string;
8562
8582
  };
8563
8583
 
8564
- declare const useClasses_111: (classesProp?: Partial<Record<"label" | "root" | "error" | "switchContainer" | "invalidSwitch", string>>, addStatic?: boolean) => {
8584
+ declare const useClasses_111: (classesProp?: Partial<Record<"left" | "right" | "top" | "container" | "label" | "root" | "error" | "switchContainer" | "invalidSwitch", string>>, addStatic?: boolean) => {
8565
8585
  readonly classes: {
8566
8586
  root: string;
8567
8587
  label: string;
8568
8588
  error: string;
8589
+ container: string;
8569
8590
  switchContainer: string;
8570
8591
  invalidSwitch: string;
8592
+ top: string;
8593
+ left: string;
8594
+ right: string;
8571
8595
  };
8572
8596
  readonly css: any;
8573
8597
  readonly cx: (...args: any) => string;
@@ -9343,7 +9367,7 @@ declare const useClasses_36: (classesProp?: Partial<Record<"semantic" | "root" |
9343
9367
  readonly cx: (...args: any) => string;
9344
9368
  };
9345
9369
 
9346
- declare const useClasses_37: (classesProp?: Partial<Record<"container" | "label" | "semantic" | "checkbox" | "disabled" | "checked" | "root" | "focusVisible" | "indeterminate" | "invalidContainer" | "invalidCheckbox", string>>, addStatic?: boolean) => {
9370
+ declare const useClasses_37: (classesProp?: Partial<Record<"left" | "right" | "container" | "label" | "semantic" | "checkbox" | "disabled" | "checked" | "root" | "focusVisible" | "indeterminate" | "invalidContainer" | "invalidCheckbox", string>>, addStatic?: boolean) => {
9347
9371
  readonly classes: {
9348
9372
  root: string;
9349
9373
  container: string;
@@ -9356,6 +9380,8 @@ declare const useClasses_37: (classesProp?: Partial<Record<"container" | "label"
9356
9380
  checked: string;
9357
9381
  indeterminate: string;
9358
9382
  semantic: string;
9383
+ left: string;
9384
+ right: string;
9359
9385
  };
9360
9386
  readonly css: any;
9361
9387
  readonly cx: (...args: any) => string;
@@ -10358,7 +10384,7 @@ declare const useClasses_97: (classesProp?: Partial<Record<"root" | "removeButto
10358
10384
  readonly cx: (...args: any) => string;
10359
10385
  };
10360
10386
 
10361
- declare const useClasses_98: (classesProp?: Partial<Record<"container" | "label" | "semantic" | "radio" | "disabled" | "checked" | "root" | "focusVisible" | "invalidContainer" | "invalidRadio", string>>, addStatic?: boolean) => {
10387
+ declare const useClasses_98: (classesProp?: Partial<Record<"left" | "right" | "container" | "label" | "semantic" | "radio" | "disabled" | "checked" | "root" | "focusVisible" | "invalidContainer" | "invalidRadio", string>>, addStatic?: boolean) => {
10362
10388
  readonly classes: {
10363
10389
  root: string;
10364
10390
  container: string;
@@ -10370,6 +10396,8 @@ declare const useClasses_98: (classesProp?: Partial<Record<"container" | "label"
10370
10396
  label: string;
10371
10397
  checked: string;
10372
10398
  semantic: string;
10399
+ left: string;
10400
+ right: string;
10373
10401
  };
10374
10402
  readonly css: any;
10375
10403
  readonly cx: (...args: any) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-core",
3
- "version": "5.102.0",
3
+ "version": "5.103.0",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "UI Kit Core React components.",
@@ -61,7 +61,7 @@
61
61
  "access": "public",
62
62
  "directory": "package"
63
63
  },
64
- "gitHead": "ebaccbc2b47777ea570e856cb1e21cf163e37316",
64
+ "gitHead": "5799882b08854f3714634028eddac77ca7ece8ea",
65
65
  "exports": {
66
66
  ".": {
67
67
  "types": "./dist/types/index.d.ts",