@hitachivantara/uikit-react-core 5.95.0 → 5.96.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/Avatar/Avatar.styles.cjs +1 -1
- package/dist/cjs/Badge/Badge.styles.cjs +1 -1
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +27 -47
- package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs +11 -19
- package/dist/cjs/Typography/Typography.cjs +3 -3
- package/dist/cjs/index.cjs +8 -16
- package/dist/cjs/themes/ds3.cjs +1208 -0
- package/dist/cjs/themes/ds5.cjs +142 -0
- package/dist/cjs/themes/index.cjs +10 -0
- package/dist/cjs/themes/pentahoPlus.cjs +761 -0
- package/dist/cjs/utils/theme.cjs +5 -5
- package/dist/esm/Avatar/Avatar.styles.js +1 -1
- package/dist/esm/Badge/Badge.styles.js +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.js +27 -47
- package/dist/esm/ListContainer/ListItem/ListItem.styles.js +11 -19
- package/dist/esm/Typography/Typography.js +3 -3
- package/dist/esm/index.js +5 -1
- package/dist/esm/themes/ds3.js +1208 -0
- package/dist/esm/themes/ds5.js +142 -0
- package/dist/esm/themes/index.js +10 -0
- package/dist/esm/themes/pentahoPlus.js +761 -0
- package/dist/esm/utils/theme.js +1 -1
- package/dist/types/index.d.ts +121 -116
- package/package.json +6 -6
|
@@ -37,7 +37,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
|
|
|
37
37
|
md: { width: 40, height: 40, fontSize: "1rem" },
|
|
38
38
|
lg: { width: 52, height: 52, fontSize: "1.5rem" },
|
|
39
39
|
xl: { width: 88, height: 88, fontSize: "2rem" },
|
|
40
|
-
avatar: {},
|
|
40
|
+
avatar: { borderRadius: "inherit" },
|
|
41
41
|
badge: {
|
|
42
42
|
width: 8,
|
|
43
43
|
height: 8,
|
|
@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
|
|
|
9
9
|
":has($badgeIcon)": {
|
|
10
10
|
width: "fit-content",
|
|
11
11
|
height: "fit-content",
|
|
12
|
-
"&>div:first-
|
|
12
|
+
"&>div:first-of-type": {
|
|
13
13
|
minWidth: 32,
|
|
14
14
|
minHeight: 32,
|
|
15
15
|
"--icsize": "100%"
|
|
@@ -6,21 +6,6 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
6
6
|
const ListItem_styles = require("./ListItem.styles.cjs");
|
|
7
7
|
const ListContext = require("../ListContext/ListContext.cjs");
|
|
8
8
|
const Focus = require("../../Focus/Focus.cjs");
|
|
9
|
-
const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
|
|
10
|
-
if (element == null) return null;
|
|
11
|
-
return React.cloneElement(element, {
|
|
12
|
-
className,
|
|
13
|
-
checked: !!selected,
|
|
14
|
-
disabled,
|
|
15
|
-
onChange: onClick
|
|
16
|
-
});
|
|
17
|
-
};
|
|
18
|
-
const applyClassNameToElement = (element, className) => {
|
|
19
|
-
if (element == null) return null;
|
|
20
|
-
return React.cloneElement(element, {
|
|
21
|
-
className
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
9
|
const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
|
|
25
10
|
const {
|
|
26
11
|
classes: classesProp,
|
|
@@ -59,39 +44,34 @@ const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
|
|
|
59
44
|
},
|
|
60
45
|
[disabled, onClick]
|
|
61
46
|
);
|
|
62
|
-
const clonedStartAdornment = React.useMemo(
|
|
63
|
-
()
|
|
64
|
-
|
|
65
|
-
|
|
47
|
+
const clonedStartAdornment = React.useMemo(() => {
|
|
48
|
+
if (!React.isValidElement(startAdornment)) return startAdornment;
|
|
49
|
+
return React.cloneElement(startAdornment, {
|
|
50
|
+
className: cx(classes.startAdornment, startAdornment.props.className, {
|
|
51
|
+
// TODO: remove 👇 props below
|
|
52
|
+
[classes.disabled]: disabled
|
|
53
|
+
}),
|
|
54
|
+
checked: !!selected,
|
|
66
55
|
disabled,
|
|
67
|
-
handleClick
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
endAdornment,
|
|
87
|
-
cx(
|
|
88
|
-
classes.endAdornment,
|
|
89
|
-
{ [classes.disabled]: disabled },
|
|
90
|
-
React.isValidElement(endAdornment) ? endAdornment.props.className : void 0
|
|
91
|
-
)
|
|
92
|
-
),
|
|
93
|
-
[cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]
|
|
94
|
-
);
|
|
56
|
+
onChange: handleClick
|
|
57
|
+
});
|
|
58
|
+
}, [
|
|
59
|
+
cx,
|
|
60
|
+
classes?.startAdornment,
|
|
61
|
+
classes?.disabled,
|
|
62
|
+
disabled,
|
|
63
|
+
handleClick,
|
|
64
|
+
selected,
|
|
65
|
+
startAdornment
|
|
66
|
+
]);
|
|
67
|
+
const clonedEndAdornment = React.useMemo(() => {
|
|
68
|
+
if (!React.isValidElement(endAdornment)) return endAdornment;
|
|
69
|
+
return React.cloneElement(endAdornment, {
|
|
70
|
+
className: cx(classes.endAdornment, endAdornment.props.className, {
|
|
71
|
+
[classes.disabled]: disabled
|
|
72
|
+
})
|
|
73
|
+
});
|
|
74
|
+
}, [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
|
|
95
75
|
const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
|
|
96
76
|
"aria-disabled": disabled || void 0,
|
|
97
77
|
"aria-selected": selected
|
|
@@ -29,14 +29,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
focus: { backgroundColor: uikitStyles.theme.colors.bgPageSecondary, zIndex: 2 },
|
|
32
|
-
startAdornment: {},
|
|
33
|
-
endAdornment: {},
|
|
34
32
|
gutters: {
|
|
35
33
|
padding: `0 ${uikitStyles.theme.space.xs}`,
|
|
36
|
-
"
|
|
34
|
+
":has($startAdornment)": {
|
|
37
35
|
paddingLeft: 0
|
|
38
36
|
},
|
|
39
|
-
"
|
|
37
|
+
":has($endAdornment)": {
|
|
40
38
|
paddingRight: 0
|
|
41
39
|
}
|
|
42
40
|
},
|
|
@@ -55,22 +53,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
|
|
|
55
53
|
color: uikitStyles.theme.colors.textDisabled,
|
|
56
54
|
backgroundColor: uikitStyles.theme.colors.bgDisabled
|
|
57
55
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
float: "left"
|
|
61
|
-
},
|
|
62
|
-
"& svg": {
|
|
63
|
-
boxShadow: "none !important",
|
|
64
|
-
outline: "none !important"
|
|
65
|
-
}
|
|
56
|
+
startAdornment: {
|
|
57
|
+
float: "left"
|
|
66
58
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
59
|
+
endAdornment: {
|
|
60
|
+
float: "right"
|
|
61
|
+
},
|
|
62
|
+
/** @deprecated use `:has($startAdornment)` instead */
|
|
63
|
+
withStartAdornment: {},
|
|
64
|
+
/** @deprecated use `:has($endAdornment)` instead */
|
|
65
|
+
withEndAdornment: {}
|
|
74
66
|
});
|
|
75
67
|
exports.staticClasses = staticClasses;
|
|
76
68
|
exports.useClasses = useClasses;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
4
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
|
+
const index = require("./themes/index.cjs");
|
|
5
6
|
const FormElement = require("./FormElement/FormElement.cjs");
|
|
6
7
|
const useClickOutside = require("./hooks/useClickOutside.cjs");
|
|
7
8
|
const useComputation = require("./hooks/useComputation.cjs");
|
|
@@ -29,6 +30,9 @@ const sizes = require("./utils/sizes.cjs");
|
|
|
29
30
|
const theme = require("./utils/theme.cjs");
|
|
30
31
|
const useSavedState = require("./utils/useSavedState.cjs");
|
|
31
32
|
const helpers = require("./utils/helpers.cjs");
|
|
33
|
+
const ds3 = require("./themes/ds3.cjs");
|
|
34
|
+
const ds5 = require("./themes/ds5.cjs");
|
|
35
|
+
const pentahoPlus = require("./themes/pentahoPlus.cjs");
|
|
32
36
|
const utils = require("./Typography/utils.cjs");
|
|
33
37
|
const Typography_styles = require("./Typography/Typography.styles.cjs");
|
|
34
38
|
const Typography = require("./Typography/Typography.cjs");
|
|
@@ -307,26 +311,10 @@ const IconContainer = require("./IconContainer/IconContainer.cjs");
|
|
|
307
311
|
const Skeleton_styles = require("./Skeleton/Skeleton.styles.cjs");
|
|
308
312
|
const Skeleton = require("./Skeleton/Skeleton.cjs");
|
|
309
313
|
const uikitReactShared = require("@hitachivantara/uikit-react-shared");
|
|
310
|
-
Object.defineProperty(exports, "ds3", {
|
|
311
|
-
enumerable: true,
|
|
312
|
-
get: () => uikitStyles.ds3
|
|
313
|
-
});
|
|
314
|
-
Object.defineProperty(exports, "ds5", {
|
|
315
|
-
enumerable: true,
|
|
316
|
-
get: () => uikitStyles.ds5
|
|
317
|
-
});
|
|
318
|
-
Object.defineProperty(exports, "pentahoPlus", {
|
|
319
|
-
enumerable: true,
|
|
320
|
-
get: () => uikitStyles.pentahoPlus
|
|
321
|
-
});
|
|
322
314
|
Object.defineProperty(exports, "theme", {
|
|
323
315
|
enumerable: true,
|
|
324
316
|
get: () => uikitStyles.theme
|
|
325
317
|
});
|
|
326
|
-
Object.defineProperty(exports, "themes", {
|
|
327
|
-
enumerable: true,
|
|
328
|
-
get: () => uikitStyles.themes
|
|
329
|
-
});
|
|
330
318
|
Object.defineProperty(exports, "createClasses", {
|
|
331
319
|
enumerable: true,
|
|
332
320
|
get: () => uikitReactUtils.createClasses
|
|
@@ -343,6 +331,7 @@ Object.defineProperty(exports, "useTheme", {
|
|
|
343
331
|
enumerable: true,
|
|
344
332
|
get: () => uikitReactUtils.useTheme
|
|
345
333
|
});
|
|
334
|
+
exports.themes = index.themes;
|
|
346
335
|
exports.HvFormElement = FormElement.HvFormElement;
|
|
347
336
|
exports.useClickOutside = useClickOutside.useClickOutside;
|
|
348
337
|
exports.useComputation = useComputation.useComputation;
|
|
@@ -379,6 +368,9 @@ exports.processThemes = theme.processThemes;
|
|
|
379
368
|
exports.setElementAttrs = theme.setElementAttrs;
|
|
380
369
|
exports.useSavedState = useSavedState.useSavedState;
|
|
381
370
|
exports.uniqueId = helpers.uniqueId;
|
|
371
|
+
exports.ds3 = ds3.ds3;
|
|
372
|
+
exports.ds5 = ds5.ds5;
|
|
373
|
+
exports.pentahoPlus = pentahoPlus.pentahoPlus;
|
|
382
374
|
exports.typographyVariants = utils.typographyVariants;
|
|
383
375
|
exports.typographyClasses = Typography_styles.staticClasses;
|
|
384
376
|
exports.HvTypography = Typography.HvTypography;
|