@hitachivantara/uikit-react-core 6.8.1 → 6.8.2

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.
Files changed (7) hide show
  1. package/dist/Badge/Badge.js +2 -0
  2. package/dist/Badge/Badge.styles.js +10 -4
  3. package/dist/QueryBuilder/Rule/Attribute.js +1 -0
  4. package/dist/QueryBuilder/Rule/Operator.js +1 -0
  5. package/dist/QueryBuilder/Rule/Rule.js +43 -51
  6. package/dist/QueryBuilder/Rule/Rule.styles.js +14 -12
  7. package/package.json +2 -2
package/dist/Badge/Badge.js CHANGED
@@ -18,6 +18,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
18
18
  ...others
19
19
  } = useDefaultProps("HvBadge", props);
20
20
  const { classes, cx } = useClasses(classesProp);
21
+ const hasContent = !!(children || icon);
21
22
  const label = useMemo(() => {
22
23
  if (typeof labelProp !== "number") return labelProp;
23
24
  if (labelProp <= 0) return null;
@@ -33,6 +34,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
33
34
  style: mergeStyles(style, {
34
35
  "--bg-color": color && getColor(color)
35
36
  }),
37
+ "data-badge-inline": !hasContent ? "" : void 0,
36
38
  className: cx(classes.badge, {
37
39
  [classes.badgeHidden]: label == null,
38
40
  [classes.badgeIcon]: icon,
package/dist/Badge/Badge.styles.js CHANGED
@@ -15,9 +15,11 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
15
15
  },
16
16
  /** class applied to the badge */
17
17
  badge: {
18
- position: "absolute",
19
- top: 0,
20
- left: "100%",
18
+ "&:not([data-badge-inline])": {
19
+ position: "absolute",
20
+ top: 0,
21
+ left: "100%"
22
+ },
21
23
  ...theme.typography.caption2,
22
24
  color: theme.colors.textDimmed,
23
25
  borderRadius: theme.radii.full,
@@ -27,6 +29,10 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
27
29
  padding: "0 5px",
28
30
  wordBreak: "keep-all",
29
31
  textAlign: "center",
32
+ "&$badgeIcon": {
33
+ top: "1px",
34
+ left: "calc(100% - 7px)"
35
+ },
30
36
  ":empty": {
31
37
  height: 8,
32
38
  width: 8,
@@ -37,7 +43,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
37
43
  badgeHidden: {
38
44
  display: "none"
39
45
  },
40
- badgeIcon: { top: "1px", left: "calc(100% - 7px)" },
46
+ badgeIcon: {},
41
47
  badgeOneDigit: { padding: 0, width: "16px" }
42
48
  });
43
49
  export {
package/dist/QueryBuilder/Rule/Attribute.js CHANGED
@@ -29,6 +29,7 @@ const Attribute = ({
29
29
  disabled,
30
30
  readOnly,
31
31
  status: isInvalid ? "invalid" : "valid",
32
+ style: { gridArea: "attribute" },
32
33
  statusMessage: labels.rule.attribute.exists,
33
34
  onChange: (selected) => {
34
35
  if (selected) {
package/dist/QueryBuilder/Rule/Operator.js CHANGED
@@ -31,6 +31,7 @@ const Operator = ({
31
31
  label: labels.rule.operator.label,
32
32
  placeholder: labels.rule.operator.placeholder,
33
33
  values,
34
+ style: { gridArea: "operator" },
34
35
  disabled: values.length === 0,
35
36
  readOnly,
36
37
  onChange: (selected) => {
package/dist/QueryBuilder/Rule/Rule.js CHANGED
@@ -9,7 +9,6 @@ import { Value } from "../Value/Value.js";
9
9
  import { Attribute } from "./Attribute.js";
10
10
  import { Operator } from "./Operator.js";
11
11
  import { useClasses } from "./Rule.styles.js";
12
- import { HvGrid } from "../../Grid/Grid.js";
13
12
  import { HvIconButton } from "../../IconButton/IconButton.js";
14
13
  const Rule = (props) => {
15
14
  const {
@@ -47,56 +46,49 @@ const Rule = (props) => {
47
46
  }
48
47
  return -1;
49
48
  }, [attribute, attributes, combinator, operators]);
50
- return /* @__PURE__ */ jsxs(
51
- HvGrid,
52
- {
53
- container: true,
54
- className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
55
- spacing: 0,
56
- children: [
57
- /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
58
- Attribute,
59
- {
60
- attribute,
61
- id,
62
- disabled,
63
- isInvalid
64
- }
65
- ) }),
66
- attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
67
- Operator,
68
- {
69
- id,
70
- combinator,
71
- attribute,
72
- operator
73
- }
74
- ) }),
75
- attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: true, children: /* @__PURE__ */ jsx(
76
- Value,
77
- {
78
- attribute,
79
- id,
80
- operator,
81
- value
82
- }
83
- ) }),
84
- /* @__PURE__ */ jsx(HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsx(
85
- HvIconButton,
86
- {
87
- placement: "bottom",
88
- title: labels.rule.delete.tooltip,
89
- onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
90
- actions: [{ type: "remove-node", id }],
91
- dialog: labels.rule.delete
92
- }),
93
- disabled: readOnly,
94
- children: /* @__PURE__ */ jsx(HvIcon, { name: "Delete" })
95
- }
96
- ) })
97
- ]
98
- }
99
- );
49
+ return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, { [classes.isMdDown]: isMdDown }), children: [
50
+ /* @__PURE__ */ jsx(
51
+ Attribute,
52
+ {
53
+ attribute,
54
+ id,
55
+ disabled,
56
+ isInvalid
57
+ }
58
+ ),
59
+ attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(
60
+ Operator,
61
+ {
62
+ id,
63
+ combinator,
64
+ attribute,
65
+ operator
66
+ }
67
+ ),
68
+ attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx("div", { style: { gridArea: "value" }, children: /* @__PURE__ */ jsx(
69
+ Value,
70
+ {
71
+ attribute,
72
+ id,
73
+ operator,
74
+ value
75
+ }
76
+ ) }),
77
+ /* @__PURE__ */ jsx(
78
+ HvIconButton,
79
+ {
80
+ placement: "bottom",
81
+ className: classes.actionsContainer,
82
+ title: labels.rule.delete.tooltip,
83
+ onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
84
+ actions: [{ type: "remove-node", id }],
85
+ dialog: labels.rule.delete
86
+ }),
87
+ disabled: readOnly,
88
+ children: /* @__PURE__ */ jsx(HvIcon, { name: "Delete" })
89
+ }
90
+ )
91
+ ] });
100
92
  };
101
93
  export {
102
94
  Rule
package/dist/QueryBuilder/Rule/Rule.styles.js CHANGED
@@ -6,8 +6,12 @@ const { useClasses } = createClasses("HvQueryBuilderRule", {
6
6
  position: "relative",
7
7
  marginTop: theme.space.xs,
8
8
  minHeight: 94,
9
- "&>div:not(:last-child)": {
10
- paddingRight: theme.space.md
9
+ display: "grid",
10
+ gridTemplateColumns: "1fr 1fr 2fr 32px",
11
+ gridTemplateAreas: '"attribute operator value actions"',
12
+ gap: theme.space.md,
13
+ "&:>*": {
14
+ minWidth: 0
11
15
  },
12
16
  // hide required * as all fields are required
13
17
  "& label>span[aria-hidden]": {
@@ -36,18 +40,16 @@ const { useClasses } = createClasses("HvQueryBuilderRule", {
36
40
  }
37
41
  },
38
42
  actionsContainer: {
39
- marginLeft: "auto",
40
- marginTop: "24px",
41
- "&>:not(:last-child)": {
42
- marginRight: theme.space.xs
43
- }
43
+ gridArea: "actions",
44
+ justifySelf: "end",
45
+ marginTop: "24px"
44
46
  },
45
47
  isMdDown: {
46
- "&>div:not(:last-child)": {
47
- paddingRight: 0
48
- },
49
- "&>div:not(:first-of-type)": {
50
- marginTop: theme.space.xs
48
+ gridTemplateColumns: "1fr",
49
+ gridTemplateAreas: '"attribute" "operator" "value" "actions"',
50
+ gap: theme.space.xs,
51
+ "& $actionsContainer": {
52
+ marginTop: 0
51
53
  }
52
54
  }
53
55
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-core",
3
- "version": "6.8.1",
3
+ "version": "6.8.2",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "author": "Hitachi Vantara UI Kit Team",
@@ -61,7 +61,7 @@
61
61
  "access": "public",
62
62
  "directory": "package"
63
63
  },
64
- "gitHead": "b9034f709fcfa749a28a52ed31dab060455493d6",
64
+ "gitHead": "333e132a9823018d508ebbe71c81d0b467f9008d",
65
65
  "exports": {
66
66
  ".": {
67
67
  "types": "./dist/index.d.ts",