@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.
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const uikitStyles = require("@hitachivantara/uikit-styles");
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(uikitStyles.themes[base], customizations) : { ...uikitStyles.themes[base] };
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 (!uikitStyles.themes[base].colors.modes[mode]) {
45
+ if (!index.themes[base].colors.modes[mode]) {
46
46
  customizedTheme.colors.modes[mode] = {
47
- ...uikitStyles.themes[base].colors.modes.dawn,
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 [uikitStyles.themes.ds5];
78
+ return [index.themes.ds5];
79
79
  };
80
80
  const getVarValue = (cssVar, rootElementId) => {
81
81
  const root = document.getElementById(rootElementId || "hv-root");
@@ -11,7 +11,7 @@ class CalendarModel {
11
11
  *
12
12
  * @param month - Number of the month (1 to 12).
13
13
  * @param year - Number of the year.
14
- * @memberOf CalendarModel
14
+ * @memberof CalendarModel
15
15
  */
16
16
  updateModel = (month, year) => {
17
17
  let validMonth = month;
@@ -66,23 +66,10 @@ const HvDropdownList = (props) => {
66
66
  }
67
67
  }, [values, notifyChangesOnFirstRender, onChange]);
68
68
  const handleSearch = (str) => {
69
- const results = list ? list.filter(
70
- ({
71
- searchValue,
72
- label,
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
- () => applyClassNameAndStateToElement(
63
- startAdornment,
64
- selected,
65
- disabled,
66
- handleClick,
67
- cx(
68
- classes.startAdornment,
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
- selected,
80
- startAdornment
81
- ]
82
- );
83
- const clonedEndAdornment = useMemo(
84
- () => applyClassNameToElement(
85
- endAdornment,
86
- cx(
87
- classes.endAdornment,
88
- { [classes.disabled]: disabled },
89
- isValidElement(endAdornment) ? endAdornment.props.className : void 0
90
- )
91
- ),
92
- [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]
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
- "&$withStartAdornment": {
32
+ ":has($startAdornment)": {
35
33
  paddingLeft: 0
36
34
  },
37
- "&$withEndAdornment": {
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
- withStartAdornment: {
57
- "& > div": {
58
- float: "left"
59
- },
60
- "& svg": {
61
- boxShadow: "none !important",
62
- outline: "none !important"
63
- }
54
+ startAdornment: {
55
+ float: "left"
64
56
  },
65
- withEndAdornment: {
66
- "& > div": { float: "right" },
67
- "& svg": {
68
- boxShadow: "none !important",
69
- outline: "none !important"
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,
@@ -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,
@@ -12,9 +12,9 @@ const HvTypographyMap = {
12
12
  title4: "h4",
13
13
  body: "p",
14
14
  label: "span",
15
- captionLabel: "p",
16
- caption1: "p",
17
- caption2: "p",
15
+ captionLabel: "div",
16
+ caption1: "div",
17
+ caption2: "div",
18
18
  // LEGACY
19
19
  "5xlTitle": "h1",
20
20
  "4xlTitle": "h1",
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
- import { ds3, ds5, pentahoPlus, theme, themes } from "@hitachivantara/uikit-styles";
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";