@hitachivantara/uikit-react-core 5.95.1 → 5.96.1
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/Calendar/model.cjs +1 -1
- package/dist/cjs/Dropdown/List/List.cjs +4 -17
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +27 -47
- package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs +11 -19
- package/dist/cjs/Slider/utils.cjs +2 -2
- 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/Calendar/model.js +1 -1
- package/dist/esm/Dropdown/List/List.js +4 -17
- package/dist/esm/ListContainer/ListItem/ListItem.js +27 -47
- package/dist/esm/ListContainer/ListItem/ListItem.styles.js +11 -19
- package/dist/esm/Slider/utils.js +2 -2
- 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 +113 -117
- package/package.json +6 -6
package/dist/cjs/utils/theme.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const index = require("../themes/index.cjs");
|
|
4
4
|
const document = require("./document.cjs");
|
|
5
5
|
const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
|
|
6
6
|
const element = document.getContainerElement(themeRootId);
|
|
@@ -37,14 +37,14 @@ const createTheme = (props) => {
|
|
|
37
37
|
inheritColorModes = true,
|
|
38
38
|
...customizations
|
|
39
39
|
} = props;
|
|
40
|
-
const customizedTheme = customizations ? applyThemeCustomizations(
|
|
40
|
+
const customizedTheme = customizations ? applyThemeCustomizations(index.themes[base], customizations) : { ...index.themes[base] };
|
|
41
41
|
customizedTheme.name = name.trim();
|
|
42
42
|
customizedTheme.base = base;
|
|
43
43
|
if (customizations) {
|
|
44
44
|
Object.keys(customizedTheme.colors.modes).forEach((mode) => {
|
|
45
|
-
if (!
|
|
45
|
+
if (!index.themes[base].colors.modes[mode]) {
|
|
46
46
|
customizedTheme.colors.modes[mode] = {
|
|
47
|
-
...
|
|
47
|
+
...index.themes[base].colors.modes.dawn,
|
|
48
48
|
...customizedTheme.colors.modes[mode]
|
|
49
49
|
};
|
|
50
50
|
}
|
|
@@ -75,7 +75,7 @@ const processThemes = (themesList) => {
|
|
|
75
75
|
});
|
|
76
76
|
return list;
|
|
77
77
|
}
|
|
78
|
-
return [
|
|
78
|
+
return [index.themes.ds5];
|
|
79
79
|
};
|
|
80
80
|
const getVarValue = (cssVar, rootElementId) => {
|
|
81
81
|
const root = document.getElementById(rootElementId || "hv-root");
|
|
@@ -66,23 +66,10 @@ const HvDropdownList = (props) => {
|
|
|
66
66
|
}
|
|
67
67
|
}, [values, notifyChangesOnFirstRender, onChange]);
|
|
68
68
|
const handleSearch = (str) => {
|
|
69
|
-
const results = list
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
value
|
|
74
|
-
}) => {
|
|
75
|
-
let stringValue = "";
|
|
76
|
-
if (typeof searchValue === "string" || searchValue instanceof String) {
|
|
77
|
-
stringValue = searchValue.toLowerCase();
|
|
78
|
-
} else if (typeof label === "string" || label instanceof String) {
|
|
79
|
-
stringValue = label.toLowerCase();
|
|
80
|
-
} else if (typeof value === "string" || value instanceof String) {
|
|
81
|
-
stringValue = value.toLowerCase();
|
|
82
|
-
}
|
|
83
|
-
return stringValue.indexOf(str.toLowerCase()) >= 0;
|
|
84
|
-
}
|
|
85
|
-
) : null;
|
|
69
|
+
const results = list?.filter(({ searchValue, label, value }) => {
|
|
70
|
+
const stringValue = typeof searchValue === "string" && searchValue || typeof label === "string" && label || typeof value === "string" && value || "";
|
|
71
|
+
return stringValue.toLowerCase().indexOf(str.toLowerCase()) >= 0;
|
|
72
|
+
});
|
|
86
73
|
if (results != null) {
|
|
87
74
|
const newList = list.map((elem) => {
|
|
88
75
|
const isResult = results.find((result) => result.label === elem.label);
|
|
@@ -5,21 +5,6 @@ import { useClasses } from "./ListItem.styles.js";
|
|
|
5
5
|
import { staticClasses } from "./ListItem.styles.js";
|
|
6
6
|
import ListContext from "../ListContext/ListContext.js";
|
|
7
7
|
import { HvFocus } from "../../Focus/Focus.js";
|
|
8
|
-
const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
|
|
9
|
-
if (element == null) return null;
|
|
10
|
-
return cloneElement(element, {
|
|
11
|
-
className,
|
|
12
|
-
checked: !!selected,
|
|
13
|
-
disabled,
|
|
14
|
-
onChange: onClick
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
const applyClassNameToElement = (element, className) => {
|
|
18
|
-
if (element == null) return null;
|
|
19
|
-
return cloneElement(element, {
|
|
20
|
-
className
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
8
|
const HvListItem = forwardRef(function HvListItem2(props, ref) {
|
|
24
9
|
const {
|
|
25
10
|
classes: classesProp,
|
|
@@ -58,39 +43,34 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
|
|
|
58
43
|
},
|
|
59
44
|
[disabled, onClick]
|
|
60
45
|
);
|
|
61
|
-
const clonedStartAdornment = useMemo(
|
|
62
|
-
()
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
{ [classes.disabled]: disabled },
|
|
70
|
-
isValidElement(startAdornment) ? startAdornment.props.className : void 0
|
|
71
|
-
)
|
|
72
|
-
),
|
|
73
|
-
[
|
|
74
|
-
cx,
|
|
75
|
-
classes?.startAdornment,
|
|
76
|
-
classes?.disabled,
|
|
46
|
+
const clonedStartAdornment = useMemo(() => {
|
|
47
|
+
if (!isValidElement(startAdornment)) return startAdornment;
|
|
48
|
+
return cloneElement(startAdornment, {
|
|
49
|
+
className: cx(classes.startAdornment, startAdornment.props.className, {
|
|
50
|
+
// TODO: remove 👇 props below
|
|
51
|
+
[classes.disabled]: disabled
|
|
52
|
+
}),
|
|
53
|
+
checked: !!selected,
|
|
77
54
|
disabled,
|
|
78
|
-
handleClick
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
55
|
+
onChange: handleClick
|
|
56
|
+
});
|
|
57
|
+
}, [
|
|
58
|
+
cx,
|
|
59
|
+
classes?.startAdornment,
|
|
60
|
+
classes?.disabled,
|
|
61
|
+
disabled,
|
|
62
|
+
handleClick,
|
|
63
|
+
selected,
|
|
64
|
+
startAdornment
|
|
65
|
+
]);
|
|
66
|
+
const clonedEndAdornment = useMemo(() => {
|
|
67
|
+
if (!isValidElement(endAdornment)) return endAdornment;
|
|
68
|
+
return cloneElement(endAdornment, {
|
|
69
|
+
className: cx(classes.endAdornment, endAdornment.props.className, {
|
|
70
|
+
[classes.disabled]: disabled
|
|
71
|
+
})
|
|
72
|
+
});
|
|
73
|
+
}, [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
|
|
94
74
|
const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
|
|
95
75
|
"aria-disabled": disabled || void 0,
|
|
96
76
|
"aria-selected": selected
|
|
@@ -27,14 +27,12 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },
|
|
30
|
-
startAdornment: {},
|
|
31
|
-
endAdornment: {},
|
|
32
30
|
gutters: {
|
|
33
31
|
padding: `0 ${theme.space.xs}`,
|
|
34
|
-
"
|
|
32
|
+
":has($startAdornment)": {
|
|
35
33
|
paddingLeft: 0
|
|
36
34
|
},
|
|
37
|
-
"
|
|
35
|
+
":has($endAdornment)": {
|
|
38
36
|
paddingRight: 0
|
|
39
37
|
}
|
|
40
38
|
},
|
|
@@ -53,22 +51,16 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
|
|
|
53
51
|
color: theme.colors.textDisabled,
|
|
54
52
|
backgroundColor: theme.colors.bgDisabled
|
|
55
53
|
},
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
float: "left"
|
|
59
|
-
},
|
|
60
|
-
"& svg": {
|
|
61
|
-
boxShadow: "none !important",
|
|
62
|
-
outline: "none !important"
|
|
63
|
-
}
|
|
54
|
+
startAdornment: {
|
|
55
|
+
float: "left"
|
|
64
56
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
57
|
+
endAdornment: {
|
|
58
|
+
float: "right"
|
|
59
|
+
},
|
|
60
|
+
/** @deprecated use `:has($startAdornment)` instead */
|
|
61
|
+
withStartAdornment: {},
|
|
62
|
+
/** @deprecated use `:has($endAdornment)` instead */
|
|
63
|
+
withEndAdornment: {}
|
|
72
64
|
});
|
|
73
65
|
export {
|
|
74
66
|
staticClasses,
|
package/dist/esm/Slider/utils.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { sliderStyles } from "./Slider.styles.js";
|
|
3
3
|
const knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
|
|
4
|
-
const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : NaN;
|
|
4
|
+
const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : Number.NaN;
|
|
5
5
|
const knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
|
|
6
6
|
const knobsPositions = [];
|
|
7
7
|
values.forEach((value, index) => {
|
|
@@ -225,7 +225,7 @@ const statusArrayToFormStatus = (arrayStatus) => {
|
|
|
225
225
|
const knobsValuesToString = (knobsValues, markDigits) => knobsValues.map(
|
|
226
226
|
(knobValue) => Number.isNaN(knobValue) ? "" : knobValue.toFixed(markDigits)
|
|
227
227
|
);
|
|
228
|
-
const stringValuesToKnobs = (inputsValues) => inputsValues.map((inputValue) => parseFloat(inputValue));
|
|
228
|
+
const stringValuesToKnobs = (inputsValues) => inputsValues.map((inputValue) => Number.parseFloat(inputValue));
|
|
229
229
|
export {
|
|
230
230
|
calculateStepValue,
|
|
231
231
|
convertStatusToArray,
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { createClasses, useCss, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
|
|
3
|
+
import { themes } from "./themes/index.js";
|
|
3
4
|
import { HvFormElement } from "./FormElement/FormElement.js";
|
|
4
5
|
import { useClickOutside } from "./hooks/useClickOutside.js";
|
|
5
6
|
import { useComputation } from "./hooks/useComputation.js";
|
|
@@ -27,6 +28,9 @@ import { decreaseSize, increaseSize } from "./utils/sizes.js";
|
|
|
27
28
|
import { createTheme, getVarValue, processThemes, setElementAttrs } from "./utils/theme.js";
|
|
28
29
|
import { useSavedState } from "./utils/useSavedState.js";
|
|
29
30
|
import { uniqueId } from "./utils/helpers.js";
|
|
31
|
+
import { ds3 } from "./themes/ds3.js";
|
|
32
|
+
import { ds5 } from "./themes/ds5.js";
|
|
33
|
+
import { pentahoPlus } from "./themes/pentahoPlus.js";
|
|
30
34
|
import { typographyVariants } from "./Typography/utils.js";
|
|
31
35
|
import { staticClasses } from "./Typography/Typography.styles.js";
|
|
32
36
|
import { HvTypography } from "./Typography/Typography.js";
|