@hitachivantara/uikit-react-core 5.72.0 → 5.72.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/Header/Actions/Actions.cjs +4 -3
- package/dist/cjs/Header/Brand/Brand.cjs +4 -3
- package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs +13 -28
- package/dist/cjs/Header/Navigation/MenuItem/MenuItem.styles.cjs +11 -43
- package/dist/cjs/Header/Navigation/Navigation.cjs +4 -3
- package/dist/cjs/SimpleGrid/SimpleGrid.cjs +2 -2
- package/dist/cjs/SimpleGrid/SimpleGrid.styles.cjs +17 -22
- package/dist/esm/Header/Actions/Actions.js +4 -3
- package/dist/esm/Header/Actions/Actions.js.map +1 -1
- package/dist/esm/Header/Brand/Brand.js +4 -3
- package/dist/esm/Header/Brand/Brand.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.js +13 -28
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js +11 -43
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/Navigation.js +4 -3
- package/dist/esm/Header/Navigation/Navigation.js.map +1 -1
- package/dist/esm/SimpleGrid/SimpleGrid.js +2 -2
- package/dist/esm/SimpleGrid/SimpleGrid.js.map +1 -1
- package/dist/esm/SimpleGrid/SimpleGrid.styles.js +17 -22
- package/dist/esm/SimpleGrid/SimpleGrid.styles.js.map +1 -1
- package/dist/types/index.d.ts +17 -23
- package/package.json +6 -6
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
6
|
const Actions_styles = require("./Actions.styles.cjs");
|
|
6
|
-
const HvHeaderActions = (props) => {
|
|
7
|
+
const HvHeaderActions = React.forwardRef((props, ref) => {
|
|
7
8
|
const {
|
|
8
9
|
classes: classesProp,
|
|
9
10
|
className,
|
|
@@ -11,7 +12,7 @@ const HvHeaderActions = (props) => {
|
|
|
11
12
|
...others
|
|
12
13
|
} = uikitReactUtils.useDefaultProps("HvHeaderActions", props);
|
|
13
14
|
const { classes, cx } = Actions_styles.useClasses(classesProp);
|
|
14
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
|
|
15
|
-
};
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
|
|
16
|
+
});
|
|
16
17
|
exports.headerActionsClasses = Actions_styles.staticClasses;
|
|
17
18
|
exports.HvHeaderActions = HvHeaderActions;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
6
|
const Brand_styles = require("./Brand.styles.cjs");
|
|
6
7
|
const Typography = require("../../Typography/Typography.cjs");
|
|
7
|
-
const HvHeaderBrand = (props) => {
|
|
8
|
+
const HvHeaderBrand = React.forwardRef((props, ref) => {
|
|
8
9
|
const {
|
|
9
10
|
classes: classesProp,
|
|
10
11
|
logo,
|
|
@@ -13,11 +14,11 @@ const HvHeaderBrand = (props) => {
|
|
|
13
14
|
...others
|
|
14
15
|
} = uikitReactUtils.useDefaultProps("HvHeaderBrand", props);
|
|
15
16
|
const { classes, cx } = Brand_styles.useClasses(classesProp);
|
|
16
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
|
|
17
18
|
logo,
|
|
18
19
|
logo && name && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator }),
|
|
19
20
|
name && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.brandName, variant: "label", children: name })
|
|
20
21
|
] });
|
|
21
|
-
};
|
|
22
|
+
});
|
|
22
23
|
exports.headerBrandClasses = Brand_styles.staticClasses;
|
|
23
24
|
exports.HvHeaderBrand = HvHeaderBrand;
|
|
@@ -59,11 +59,6 @@ const HvHeaderMenuItem = (props) => {
|
|
|
59
59
|
const handleFocus = (event) => {
|
|
60
60
|
dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
|
|
61
61
|
};
|
|
62
|
-
const itemProps = {
|
|
63
|
-
onClick: actionHandler,
|
|
64
|
-
onKeyDown: actionHandler,
|
|
65
|
-
onFocus: handleFocus
|
|
66
|
-
};
|
|
67
62
|
const label = /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
63
|
Typography.HvTypography,
|
|
69
64
|
{
|
|
@@ -80,6 +75,8 @@ const HvHeaderMenuItem = (props) => {
|
|
|
80
75
|
itemHref = href;
|
|
81
76
|
itemTarget = target;
|
|
82
77
|
}
|
|
78
|
+
const ItemComponent = itemHref ? "a" : "div";
|
|
79
|
+
const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
|
|
83
80
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
84
81
|
"li",
|
|
85
82
|
{
|
|
@@ -94,31 +91,20 @@ const HvHeaderMenuItem = (props) => {
|
|
|
94
91
|
className
|
|
95
92
|
),
|
|
96
93
|
children: [
|
|
97
|
-
|
|
98
|
-
|
|
94
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
95
|
+
ItemComponent,
|
|
99
96
|
{
|
|
100
|
-
className: classes.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
97
|
+
className: cx(classes.item, {
|
|
98
|
+
[classes.link]: itemHref,
|
|
99
|
+
[classes.button]: !itemHref
|
|
100
|
+
}),
|
|
101
|
+
onFocus: handleFocus,
|
|
102
|
+
onClick: actionHandler,
|
|
103
|
+
onKeyDown: actionHandler,
|
|
104
104
|
"aria-current": isCurrent,
|
|
105
|
-
|
|
105
|
+
...itemProps,
|
|
106
106
|
children: label
|
|
107
107
|
}
|
|
108
|
-
) : (
|
|
109
|
-
// keeping this code path for backwards compatibility, but
|
|
110
|
-
// shouldn't really be used as it's not accessible
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
112
|
-
"div",
|
|
113
|
-
{
|
|
114
|
-
className: classes.button,
|
|
115
|
-
role: "button",
|
|
116
|
-
...itemProps,
|
|
117
|
-
tabIndex: 0,
|
|
118
|
-
"aria-current": isCurrent,
|
|
119
|
-
children: label
|
|
120
|
-
}
|
|
121
|
-
)
|
|
122
108
|
),
|
|
123
109
|
hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
110
|
HvHeaderMenuItem,
|
|
@@ -132,8 +118,7 @@ const HvHeaderMenuItem = (props) => {
|
|
|
132
118
|
itm.id
|
|
133
119
|
)) })
|
|
134
120
|
]
|
|
135
|
-
}
|
|
136
|
-
item.label
|
|
121
|
+
}
|
|
137
122
|
);
|
|
138
123
|
};
|
|
139
124
|
exports.headerMenuItemClasses = MenuItem_styles.staticClasses;
|
|
@@ -21,6 +21,7 @@ const item = {
|
|
|
21
21
|
},
|
|
22
22
|
"& span": {
|
|
23
23
|
display: "inline-flex",
|
|
24
|
+
color: "inherit",
|
|
24
25
|
flexDirection: "column",
|
|
25
26
|
alignItems: "center",
|
|
26
27
|
justifyContent: "space-between"
|
|
@@ -43,57 +44,24 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
|
|
|
43
44
|
{
|
|
44
45
|
root: {
|
|
45
46
|
display: "inline",
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"&:focus-within": {
|
|
47
|
+
height: "100%",
|
|
48
|
+
borderBottom: "4px solid transparent",
|
|
49
|
+
":hover, :focus-within": {
|
|
50
50
|
backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
|
-
menu: {
|
|
54
|
-
|
|
55
|
-
paddingBottom: "4px",
|
|
56
|
-
paddingTop: "4px",
|
|
57
|
-
height: "100%",
|
|
58
|
-
borderTop: "none",
|
|
59
|
-
borderBottom: `4px solid ${uikitStyles.theme.colors.atmo2}`
|
|
60
|
-
},
|
|
61
|
-
menubar: {
|
|
62
|
-
marginTop: "0px",
|
|
63
|
-
paddingBottom: "4px",
|
|
64
|
-
paddingTop: "4px",
|
|
65
|
-
height: "100%",
|
|
66
|
-
borderTop: `0px solid ${uikitStyles.theme.colors.atmo1}`,
|
|
67
|
-
borderBottom: `${"4px"} solid ${uikitStyles.theme.colors.atmo1}`
|
|
68
|
-
},
|
|
53
|
+
menu: {},
|
|
54
|
+
menubar: {},
|
|
69
55
|
selected: {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
paddingBottom: 0,
|
|
73
|
-
borderTop: "none",
|
|
74
|
-
borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
|
|
75
|
-
paddingTop: "4px",
|
|
76
|
-
height: "100%",
|
|
77
|
-
"& > * > span": {
|
|
78
|
-
color: uikitStyles.theme.colors.secondary
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
"&$menubar": {
|
|
82
|
-
marginTop: 0,
|
|
83
|
-
paddingBottom: 0,
|
|
84
|
-
borderTop: "none",
|
|
85
|
-
borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
|
|
86
|
-
paddingTop: "4px",
|
|
87
|
-
height: "100%"
|
|
88
|
-
}
|
|
56
|
+
borderColor: uikitStyles.theme.colors.secondary,
|
|
57
|
+
color: uikitStyles.theme.colors.secondary
|
|
89
58
|
},
|
|
59
|
+
item,
|
|
90
60
|
link: {
|
|
91
|
-
textDecoration: "none"
|
|
92
|
-
...item
|
|
61
|
+
textDecoration: "none"
|
|
93
62
|
},
|
|
94
63
|
button: {
|
|
95
|
-
color: "inherit"
|
|
96
|
-
...item
|
|
64
|
+
color: "inherit"
|
|
97
65
|
}
|
|
98
66
|
}
|
|
99
67
|
);
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
6
|
const Navigation_styles = require("./Navigation.styles.cjs");
|
|
6
7
|
const useSelectionPath = require("./useSelectionPath.cjs");
|
|
7
8
|
const FocusContext = require("./utils/FocusContext.cjs");
|
|
8
9
|
const SelectionContext = require("./utils/SelectionContext.cjs");
|
|
9
10
|
const MenuBar = require("./MenuBar/MenuBar.cjs");
|
|
10
|
-
const HvHeaderNavigation = (props) => {
|
|
11
|
+
const HvHeaderNavigation = React.forwardRef((props, ref) => {
|
|
11
12
|
const {
|
|
12
13
|
data,
|
|
13
14
|
selected,
|
|
@@ -23,7 +24,7 @@ const HvHeaderNavigation = (props) => {
|
|
|
23
24
|
event.preventDefault();
|
|
24
25
|
onClick?.(event, selection);
|
|
25
26
|
};
|
|
26
|
-
return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
28
|
MenuBar.HvHeaderMenuBar,
|
|
28
29
|
{
|
|
29
30
|
data,
|
|
@@ -33,6 +34,6 @@ const HvHeaderNavigation = (props) => {
|
|
|
33
34
|
currentLevel: 1
|
|
34
35
|
}
|
|
35
36
|
) }) }) });
|
|
36
|
-
};
|
|
37
|
+
});
|
|
37
38
|
exports.headerNavigationClasses = Navigation_styles.staticClasses;
|
|
38
39
|
exports.HvHeaderNavigation = HvHeaderNavigation;
|
|
@@ -7,14 +7,14 @@ const HvSimpleGrid = (props) => {
|
|
|
7
7
|
const {
|
|
8
8
|
children,
|
|
9
9
|
breakpoints,
|
|
10
|
-
spacing
|
|
10
|
+
spacing,
|
|
11
11
|
cols,
|
|
12
12
|
className,
|
|
13
13
|
classes: classesProp,
|
|
14
14
|
...others
|
|
15
15
|
} = uikitReactUtils.useDefaultProps("HvSimpleGrid", props);
|
|
16
16
|
const { classes, cx, css } = SimpleGrid_styles.useClasses(classesProp);
|
|
17
|
-
const containerStyle = SimpleGrid_styles.getContainerStyle(
|
|
17
|
+
const containerStyle = SimpleGrid_styles.getContainerStyle(breakpoints, spacing, cols);
|
|
18
18
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
19
|
"div",
|
|
20
20
|
{
|
|
@@ -3,13 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
5
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSimpleGrid", {
|
|
6
|
-
root: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return props.size;
|
|
6
|
+
root: {
|
|
7
|
+
display: "grid",
|
|
8
|
+
boxSizing: "border-box",
|
|
9
|
+
gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
|
|
11
10
|
}
|
|
12
|
-
|
|
11
|
+
});
|
|
12
|
+
function getSize(size) {
|
|
13
|
+
return size || Number(uikitStyles.theme.breakpoints.values.md);
|
|
13
14
|
}
|
|
14
15
|
function getSortedBreakpoints(breakpoints) {
|
|
15
16
|
if (breakpoints.length === 0) {
|
|
@@ -17,29 +18,23 @@ function getSortedBreakpoints(breakpoints) {
|
|
|
17
18
|
}
|
|
18
19
|
const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
|
|
19
20
|
const sorted = [...breakpoints].sort(
|
|
20
|
-
(a, b) =>
|
|
21
|
+
(a, b) => getSize(b[property]) - getSize(a[property])
|
|
21
22
|
);
|
|
22
23
|
return property === "minWidth" ? sorted.reverse() : sorted;
|
|
23
24
|
}
|
|
24
|
-
const getContainerStyle = ({
|
|
25
|
-
breakpoints,
|
|
26
|
-
spacing,
|
|
27
|
-
cols
|
|
28
|
-
}) => {
|
|
25
|
+
const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
|
|
29
26
|
return {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
|
|
27
|
+
// TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]
|
|
28
|
+
"--cols": cols,
|
|
33
29
|
gap: uikitStyles.theme.space[spacing],
|
|
34
30
|
...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
|
|
35
31
|
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
36
|
-
const breakpointSize =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
})
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
gap: uikitStyles.theme.space[spacing]
|
|
32
|
+
const breakpointSize = getSize(
|
|
33
|
+
property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth
|
|
34
|
+
);
|
|
35
|
+
acc[`@media (${property}: ${breakpointSize}px)`] = {
|
|
36
|
+
["--cols"]: breakpoint.cols,
|
|
37
|
+
gap: uikitStyles.theme.space[breakpoint.spacing || spacing]
|
|
43
38
|
};
|
|
44
39
|
return acc;
|
|
45
40
|
}, {})
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
2
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
3
4
|
import { useClasses } from "./Actions.styles.js";
|
|
4
5
|
import { staticClasses } from "./Actions.styles.js";
|
|
5
|
-
const HvHeaderActions = (props) => {
|
|
6
|
+
const HvHeaderActions = forwardRef((props, ref) => {
|
|
6
7
|
const {
|
|
7
8
|
classes: classesProp,
|
|
8
9
|
className,
|
|
@@ -10,8 +11,8 @@ const HvHeaderActions = (props) => {
|
|
|
10
11
|
...others
|
|
11
12
|
} = useDefaultProps("HvHeaderActions", props);
|
|
12
13
|
const { classes, cx } = useClasses(classesProp);
|
|
13
|
-
return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children });
|
|
14
|
-
};
|
|
14
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), ...others, children });
|
|
15
|
+
});
|
|
15
16
|
export {
|
|
16
17
|
HvHeaderActions,
|
|
17
18
|
staticClasses as headerActionsClasses
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../src/Header/Actions/Actions.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as headerActionsClasses };\n\nexport type HvHeaderActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = (props
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../src/Header/Actions/Actions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as headerActionsClasses };\n\nexport type HvHeaderActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = forwardRef<\n React.ElementRef<\"div\">,\n HvHeaderActionsProps\n>((props, ref) => {\n const {\n classes: classesProp,\n className,\n children,\n ...others\n } = useDefaultProps(\"HvHeaderActions\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div ref={ref} className={cx(classes.root, className)} {...others}>\n {children}\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,kBAAkB,WAG7B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
2
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
3
4
|
import { useClasses } from "./Brand.styles.js";
|
|
4
5
|
import { staticClasses } from "./Brand.styles.js";
|
|
5
6
|
import { HvTypography } from "../../Typography/Typography.js";
|
|
6
|
-
const HvHeaderBrand = (props) => {
|
|
7
|
+
const HvHeaderBrand = forwardRef((props, ref) => {
|
|
7
8
|
const {
|
|
8
9
|
classes: classesProp,
|
|
9
10
|
logo,
|
|
@@ -12,12 +13,12 @@ const HvHeaderBrand = (props) => {
|
|
|
12
13
|
...others
|
|
13
14
|
} = useDefaultProps("HvHeaderBrand", props);
|
|
14
15
|
const { classes, cx } = useClasses(classesProp);
|
|
15
|
-
return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
|
|
16
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
|
|
16
17
|
logo,
|
|
17
18
|
logo && name && /* @__PURE__ */ jsx("div", { className: classes.separator }),
|
|
18
19
|
name && /* @__PURE__ */ jsx(HvTypography, { className: classes.brandName, variant: "label", children: name })
|
|
19
20
|
] });
|
|
20
|
-
};
|
|
21
|
+
});
|
|
21
22
|
export {
|
|
22
23
|
HvHeaderBrand,
|
|
23
24
|
staticClasses as headerBrandClasses
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Brand.js","sources":["../../../../src/Header/Brand/Brand.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n logo?: React.ReactNode;\n name?: string;\n classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props
|
|
1
|
+
{"version":3,"file":"Brand.js","sources":["../../../../src/Header/Brand/Brand.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n logo?: React.ReactNode;\n name?: string;\n classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = forwardRef<\n React.ElementRef<\"div\">,\n HvHeaderBrandProps\n>((props, ref) => {\n const {\n classes: classesProp,\n logo,\n name,\n className,\n ...others\n } = useDefaultProps(\"HvHeaderBrand\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div ref={ref} className={cx(classes.root, className)} {...others}>\n {logo}\n {logo && name && <div className={classes.separator} />}\n {name && (\n <HvTypography className={classes.brandName} variant=\"label\">\n {name}\n </HvTypography>\n )}\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,gBAAgB,WAG3B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACA,QAAQ,QAAQ,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,IACnD,4BACE,cAAa,EAAA,WAAW,QAAQ,WAAW,SAAQ,SACjD,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -58,11 +58,6 @@ const HvHeaderMenuItem = (props) => {
|
|
|
58
58
|
const handleFocus = (event) => {
|
|
59
59
|
dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
|
|
60
60
|
};
|
|
61
|
-
const itemProps = {
|
|
62
|
-
onClick: actionHandler,
|
|
63
|
-
onKeyDown: actionHandler,
|
|
64
|
-
onFocus: handleFocus
|
|
65
|
-
};
|
|
66
61
|
const label = /* @__PURE__ */ jsx(
|
|
67
62
|
HvTypography,
|
|
68
63
|
{
|
|
@@ -79,6 +74,8 @@ const HvHeaderMenuItem = (props) => {
|
|
|
79
74
|
itemHref = href;
|
|
80
75
|
itemTarget = target;
|
|
81
76
|
}
|
|
77
|
+
const ItemComponent = itemHref ? "a" : "div";
|
|
78
|
+
const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
|
|
82
79
|
return /* @__PURE__ */ jsxs(
|
|
83
80
|
"li",
|
|
84
81
|
{
|
|
@@ -93,31 +90,20 @@ const HvHeaderMenuItem = (props) => {
|
|
|
93
90
|
className
|
|
94
91
|
),
|
|
95
92
|
children: [
|
|
96
|
-
|
|
97
|
-
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
ItemComponent,
|
|
98
95
|
{
|
|
99
|
-
className: classes.
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
96
|
+
className: cx(classes.item, {
|
|
97
|
+
[classes.link]: itemHref,
|
|
98
|
+
[classes.button]: !itemHref
|
|
99
|
+
}),
|
|
100
|
+
onFocus: handleFocus,
|
|
101
|
+
onClick: actionHandler,
|
|
102
|
+
onKeyDown: actionHandler,
|
|
103
103
|
"aria-current": isCurrent,
|
|
104
|
-
|
|
104
|
+
...itemProps,
|
|
105
105
|
children: label
|
|
106
106
|
}
|
|
107
|
-
) : (
|
|
108
|
-
// keeping this code path for backwards compatibility, but
|
|
109
|
-
// shouldn't really be used as it's not accessible
|
|
110
|
-
/* @__PURE__ */ jsx(
|
|
111
|
-
"div",
|
|
112
|
-
{
|
|
113
|
-
className: classes.button,
|
|
114
|
-
role: "button",
|
|
115
|
-
...itemProps,
|
|
116
|
-
tabIndex: 0,
|
|
117
|
-
"aria-current": isCurrent,
|
|
118
|
-
children: label
|
|
119
|
-
}
|
|
120
|
-
)
|
|
121
107
|
),
|
|
122
108
|
hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsx(
|
|
123
109
|
HvHeaderMenuItem,
|
|
@@ -131,8 +117,7 @@ const HvHeaderMenuItem = (props) => {
|
|
|
131
117
|
itm.id
|
|
132
118
|
)) })
|
|
133
119
|
]
|
|
134
|
-
}
|
|
135
|
-
item.label
|
|
120
|
+
}
|
|
136
121
|
);
|
|
137
122
|
};
|
|
138
123
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTypography } from \"../../../Typography\";\nimport { isKey } from \"../../../utils/keyboardUtils\";\nimport { Bar } from \"../MenuBar/Bar\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { staticClasses, useClasses } from \"./MenuItem.styles\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n item: HvHeaderNavigationItemProp;\n type?: string;\n onClick?: (\n event: React.MouseEvent,\n selection: HvHeaderNavigationItemProp,\n ) => void;\n levels: number;\n currentLevel: number;\n classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (\n node: HvHeaderNavigationItemProp,\n): { href?: string; target?: string } => {\n let href: string | undefined;\n let target: string | undefined;\n\n if (node?.href) {\n href = node?.href;\n target = node?.target;\n } else if (node?.data != null && node?.data?.length > 0) {\n let i = 0;\n while (href == null && i < node.data.length) {\n const childNavItem = traverseItem(node?.data[i]);\n if (childNavItem?.href != null) {\n href = childNavItem?.href;\n target = childNavItem?.target;\n break;\n }\n\n i += 1;\n }\n }\n\n return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n const {\n id,\n item,\n type,\n onClick,\n levels,\n currentLevel,\n classes: classesProp,\n className,\n } = useDefaultProps(\"HvHeaderMenuItem\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const selectionPath = useContext(SelectionContext);\n\n const { dispatch } = useContext(FocusContext);\n\n const { data } = item;\n\n const hasSubLevel = data?.length;\n\n const isMenu = type === \"menu\";\n\n const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n // page: used when the selected item is actually the current page the user is seeing\n const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n const actionHandler = (event: any) => {\n if (\n event.type === \"click\" ||\n isKey(event, \"Enter\") ||\n isKey(event, \"Space\")\n ) {\n if (event.type === \"click\") {\n event.currentTarget.blur();\n }\n\n onClick?.(event, item);\n }\n };\n\n const handleFocus = (event: React.FocusEvent) => {\n dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n };\n\n const
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvTypography } from \"../../../Typography\";\nimport { isKey } from \"../../../utils/keyboardUtils\";\nimport { Bar } from \"../MenuBar/Bar\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { staticClasses, useClasses } from \"./MenuItem.styles\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n item: HvHeaderNavigationItemProp;\n type?: string;\n onClick?: (\n event: React.MouseEvent,\n selection: HvHeaderNavigationItemProp,\n ) => void;\n levels: number;\n currentLevel: number;\n classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (\n node: HvHeaderNavigationItemProp,\n): { href?: string; target?: string } => {\n let href: string | undefined;\n let target: string | undefined;\n\n if (node?.href) {\n href = node?.href;\n target = node?.target;\n } else if (node?.data != null && node?.data?.length > 0) {\n let i = 0;\n while (href == null && i < node.data.length) {\n const childNavItem = traverseItem(node?.data[i]);\n if (childNavItem?.href != null) {\n href = childNavItem?.href;\n target = childNavItem?.target;\n break;\n }\n\n i += 1;\n }\n }\n\n return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n const {\n id,\n item,\n type,\n onClick,\n levels,\n currentLevel,\n classes: classesProp,\n className,\n } = useDefaultProps(\"HvHeaderMenuItem\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const selectionPath = useContext(SelectionContext);\n\n const { dispatch } = useContext(FocusContext);\n\n const { data } = item;\n\n const hasSubLevel = data?.length;\n\n const isMenu = type === \"menu\";\n\n const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n // page: used when the selected item is actually the current page the user is seeing\n const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n const actionHandler = (event: any) => {\n if (\n event.type === \"click\" ||\n isKey(event, \"Enter\") ||\n isKey(event, \"Space\")\n ) {\n if (event.type === \"click\") {\n event.currentTarget.blur();\n }\n\n onClick?.(event, item);\n }\n };\n\n const handleFocus = (event: React.FocusEvent) => {\n dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n };\n\n const label = (\n <HvTypography\n component=\"span\"\n variant={isSelected ? \"label\" : \"body\"}\n data-text={item.label}\n >\n {item.label}\n </HvTypography>\n );\n\n let itemHref = item?.href;\n let itemTarget = item?.target;\n\n // apps should configure the href even on parent items without content\n // so the fallback logic is theirs, but if not we'll do our best to find a link\n if (item?.href == null) {\n const { href, target } = traverseItem(item);\n itemHref = href;\n itemTarget = target;\n }\n\n // TODO: change to \"a\" only in v6, as buttons aren't accessible links. Allow custom `ItemComponent` to be passed\n const ItemComponent = itemHref ? \"a\" : \"div\";\n // TODO: allow any custom props to be passed\n const itemProps = itemHref\n ? { href: itemHref, target: itemTarget, \"aria-label\": item.label }\n : { role: \"button\", tabIndex: 0 };\n\n return (\n <li\n id={id}\n className={cx(\n classes.root,\n {\n [classes.menu]: isMenu,\n [classes.menubar]: !isMenu,\n [classes.selected]: !!isSelected,\n },\n className,\n )}\n >\n <ItemComponent\n className={cx(classes.item, {\n [classes.link]: itemHref,\n [classes.button]: !itemHref,\n })}\n onFocus={handleFocus}\n onClick={actionHandler}\n onKeyDown={actionHandler}\n aria-current={isCurrent}\n {...itemProps}\n >\n {label}\n </ItemComponent>\n {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n <Bar data={data} type=\"menu\">\n {data.map((itm) => (\n <HvHeaderMenuItem\n key={itm.id}\n item={itm}\n type=\"menu\"\n onClick={onClick}\n levels={levels}\n currentLevel={currentLevel + 1}\n />\n ))}\n </Bar>\n )}\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiCA,MAAM,eAAe,CACnB,SACuC;AACnC,MAAA;AACA,MAAA;AAEJ,MAAI,MAAM,MAAM;AACd,WAAO,MAAM;AACb,aAAS,MAAM;AAAA,EAAA,WACN,MAAM,QAAQ,QAAQ,MAAM,MAAM,SAAS,GAAG;AACvD,QAAI,IAAI;AACR,WAAO,QAAQ,QAAQ,IAAI,KAAK,KAAK,QAAQ;AAC3C,YAAM,eAAe,aAAa,MAAM,KAAK,CAAC,CAAC;AAC3C,UAAA,cAAc,QAAQ,MAAM;AAC9B,eAAO,cAAc;AACrB,iBAAS,cAAc;AACvB;AAAA,MACF;AAEK,WAAA;AAAA,IACP;AAAA,EACF;AAEO,SAAA,EAAE,MAAM;AACjB;AAEa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EAAA,IACE,gBAAgB,oBAAoB,KAAK;AAC7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,WAAW,gBAAgB;AAEjD,QAAM,EAAE,SAAA,IAAa,WAAW,YAAY;AAEtC,QAAA,EAAE,KAAS,IAAA;AAEjB,QAAM,cAAc,MAAM;AAE1B,QAAM,SAAS,SAAS;AAExB,QAAM,aAAa,gBAAgB,SAAS,IAAI,CAAC,MAAM,KAAK;AAI5D,QAAM,YAAY,aAAc,cAAc,OAAO,SAAU;AAEzD,QAAA,gBAAgB,CAAC,UAAe;AAElC,QAAA,MAAM,SAAS,WACf,MAAM,OAAO,OAAO,KACpB,MAAM,OAAO,OAAO,GACpB;AACI,UAAA,MAAM,SAAS,SAAS;AAC1B,cAAM,cAAc;MACtB;AAEA,gBAAU,OAAO,IAAI;AAAA,IACvB;AAAA,EAAA;AAGI,QAAA,cAAc,CAAC,UAA4B;AAC/C,eAAW,EAAE,MAAM,kBAAkB,aAAa,MAAM,eAAe;AAAA,EAAA;AAGzE,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS,aAAa,UAAU;AAAA,MAChC,aAAW,KAAK;AAAA,MAEf,UAAK,KAAA;AAAA,IAAA;AAAA,EAAA;AAIV,MAAI,WAAW,MAAM;AACrB,MAAI,aAAa,MAAM;AAInB,MAAA,MAAM,QAAQ,MAAM;AACtB,UAAM,EAAE,MAAM,OAAO,IAAI,aAAa,IAAI;AAC/B,eAAA;AACE,iBAAA;AAAA,EACf;AAGM,QAAA,gBAAgB,WAAW,MAAM;AAEvC,QAAM,YAAY,WACd,EAAE,MAAM,UAAU,QAAQ,YAAY,cAAc,KAAK,MACzD,IAAA,EAAE,MAAM,UAAU,UAAU;AAG9B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,MAAM;AAAA,cAC1B,CAAC,QAAQ,IAAI,GAAG;AAAA,cAChB,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,YAAA,CACpB;AAAA,YACD,SAAS;AAAA,YACT,SAAS;AAAA,YACT,WAAW;AAAA,YACX,gBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAEC,eAAe,eAAe,UAAU,eAAe,KACtD,oBAAC,KAAI,EAAA,MAAY,MAAK,QACnB,UAAK,KAAA,IAAI,CAAC,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAM;AAAA,YACN,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,cAAc,eAAe;AAAA,UAAA;AAAA,UALxB,IAAI;AAAA,QAOZ,CAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -19,6 +19,7 @@ const item = {
|
|
|
19
19
|
},
|
|
20
20
|
"& span": {
|
|
21
21
|
display: "inline-flex",
|
|
22
|
+
color: "inherit",
|
|
22
23
|
flexDirection: "column",
|
|
23
24
|
alignItems: "center",
|
|
24
25
|
justifyContent: "space-between"
|
|
@@ -41,57 +42,24 @@ const { staticClasses, useClasses } = createClasses(
|
|
|
41
42
|
{
|
|
42
43
|
root: {
|
|
43
44
|
display: "inline",
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"&:focus-within": {
|
|
45
|
+
height: "100%",
|
|
46
|
+
borderBottom: "4px solid transparent",
|
|
47
|
+
":hover, :focus-within": {
|
|
48
48
|
backgroundColor: theme.colors.containerBackgroundHover
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
-
menu: {
|
|
52
|
-
|
|
53
|
-
paddingBottom: "4px",
|
|
54
|
-
paddingTop: "4px",
|
|
55
|
-
height: "100%",
|
|
56
|
-
borderTop: "none",
|
|
57
|
-
borderBottom: `4px solid ${theme.colors.atmo2}`
|
|
58
|
-
},
|
|
59
|
-
menubar: {
|
|
60
|
-
marginTop: "0px",
|
|
61
|
-
paddingBottom: "4px",
|
|
62
|
-
paddingTop: "4px",
|
|
63
|
-
height: "100%",
|
|
64
|
-
borderTop: `0px solid ${theme.colors.atmo1}`,
|
|
65
|
-
borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
|
|
66
|
-
},
|
|
51
|
+
menu: {},
|
|
52
|
+
menubar: {},
|
|
67
53
|
selected: {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
paddingBottom: 0,
|
|
71
|
-
borderTop: "none",
|
|
72
|
-
borderBottom: `4px solid ${theme.colors.secondary}`,
|
|
73
|
-
paddingTop: "4px",
|
|
74
|
-
height: "100%",
|
|
75
|
-
"& > * > span": {
|
|
76
|
-
color: theme.colors.secondary
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
"&$menubar": {
|
|
80
|
-
marginTop: 0,
|
|
81
|
-
paddingBottom: 0,
|
|
82
|
-
borderTop: "none",
|
|
83
|
-
borderBottom: `4px solid ${theme.colors.secondary}`,
|
|
84
|
-
paddingTop: "4px",
|
|
85
|
-
height: "100%"
|
|
86
|
-
}
|
|
54
|
+
borderColor: theme.colors.secondary,
|
|
55
|
+
color: theme.colors.secondary
|
|
87
56
|
},
|
|
57
|
+
item,
|
|
88
58
|
link: {
|
|
89
|
-
textDecoration: "none"
|
|
90
|
-
...item
|
|
59
|
+
textDecoration: "none"
|
|
91
60
|
},
|
|
92
61
|
button: {
|
|
93
|
-
color: "inherit"
|
|
94
|
-
...item
|
|
62
|
+
color: "inherit"
|
|
95
63
|
}
|
|
96
64
|
}
|
|
97
65
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst item: CSSInterpolation = {\n border: \"none\",\n cursor: \"pointer\",\n padding: `${theme.space.xs} ${theme.space.sm}`,\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n \"&:active\": {\n outline: \"none\",\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"& span\": {\n display: \"inline-flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n },\n \"& span::after\": {\n content: \"attr(data-text)\",\n height: 0,\n visibility: \"hidden\",\n overflow: \"hidden\",\n userSelect: \"none\",\n pointerEvents: \"none\",\n fontWeight: theme.fontWeights.semibold,\n\n \"@media speech\": {\n display: \"none\",\n },\n },\n};\n\n// TODO - rename to HvHeaderMenuItem (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-MenuItem\",\n {\n root: {\n display: \"inline\",\n
|
|
1
|
+
{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst item: CSSInterpolation = {\n border: \"none\",\n cursor: \"pointer\",\n padding: `${theme.space.xs} ${theme.space.sm}`,\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n \"&:active\": {\n outline: \"none\",\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"& span\": {\n display: \"inline-flex\",\n color: \"inherit\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n },\n \"& span::after\": {\n content: \"attr(data-text)\",\n height: 0,\n visibility: \"hidden\",\n overflow: \"hidden\",\n userSelect: \"none\",\n pointerEvents: \"none\",\n fontWeight: theme.fontWeights.semibold,\n\n \"@media speech\": {\n display: \"none\",\n },\n },\n};\n\n// TODO - rename to HvHeaderMenuItem (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-MenuItem\",\n {\n root: {\n display: \"inline\",\n height: \"100%\",\n borderBottom: \"4px solid transparent\",\n\n \":hover, :focus-within\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n menu: {},\n menubar: {},\n selected: {\n borderColor: theme.colors.secondary,\n color: theme.colors.secondary,\n },\n item,\n link: {\n textDecoration: \"none\",\n },\n button: {\n color: \"inherit\",\n },\n },\n);\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,cAAc;AAAA,MAEd,yBAAyB;AAAA,QACvB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS,CAAC;AAAA,IACV,UAAU;AAAA,MACR,aAAa,MAAM,OAAO;AAAA,MAC1B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
2
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
3
4
|
import { useClasses } from "./Navigation.styles.js";
|
|
4
5
|
import { staticClasses } from "./Navigation.styles.js";
|
|
@@ -6,7 +7,7 @@ import { useSelectionPath } from "./useSelectionPath.js";
|
|
|
6
7
|
import { FocusProvider } from "./utils/FocusContext.js";
|
|
7
8
|
import { SelectionContext } from "./utils/SelectionContext.js";
|
|
8
9
|
import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
|
|
9
|
-
const HvHeaderNavigation = (props) => {
|
|
10
|
+
const HvHeaderNavigation = forwardRef((props, ref) => {
|
|
10
11
|
const {
|
|
11
12
|
data,
|
|
12
13
|
selected,
|
|
@@ -22,7 +23,7 @@ const HvHeaderNavigation = (props) => {
|
|
|
22
23
|
event.preventDefault();
|
|
23
24
|
onClick?.(event, selection);
|
|
24
25
|
};
|
|
25
|
-
return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(
|
|
26
|
+
return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx("nav", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(
|
|
26
27
|
HvHeaderMenuBar,
|
|
27
28
|
{
|
|
28
29
|
data,
|
|
@@ -32,7 +33,7 @@ const HvHeaderNavigation = (props) => {
|
|
|
32
33
|
currentLevel: 1
|
|
33
34
|
}
|
|
34
35
|
) }) }) });
|
|
35
|
-
};
|
|
36
|
+
});
|
|
36
37
|
export {
|
|
37
38
|
HvHeaderNavigation,
|
|
38
39
|
staticClasses as headerNavigationClasses
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport {\n HvHeaderNavigationItemProp,\n useSelectionPath,\n} from \"./useSelectionPath\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n data: HvHeaderNavigationItemProp[];\n selected?: string;\n onClick?: (\n event: React.MouseEvent,\n selection: HvHeaderNavigationItemProp,\n ) => void;\n classes?: HvHeaderNavigationClasses;\n /**\n * The number of levels to show: the first level (1) or the first and second level (2).\n *\n * Defaults to `2`.\n * */\n levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport {\n HvHeaderNavigationItemProp,\n useSelectionPath,\n} from \"./useSelectionPath\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n data: HvHeaderNavigationItemProp[];\n selected?: string;\n onClick?: (\n event: React.MouseEvent,\n selection: HvHeaderNavigationItemProp,\n ) => void;\n classes?: HvHeaderNavigationClasses;\n /**\n * The number of levels to show: the first level (1) or the first and second level (2).\n *\n * Defaults to `2`.\n * */\n levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = forwardRef<\n React.ElementRef<\"nav\">,\n HvHeaderNavigationProps\n>((props, ref) => {\n const {\n data,\n selected,\n onClick,\n className,\n classes: classesProp,\n levels = 2,\n ...others\n } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const selectionPath = useSelectionPath(data, selected);\n\n const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n event.preventDefault();\n\n onClick?.(event, selection);\n };\n\n return (\n <SelectionContext.Provider value={selectionPath}>\n <FocusProvider>\n <nav ref={ref} className={cx(classes.root, className)} {...others}>\n <HvHeaderMenuBar\n data={data}\n type=\"menubar\"\n onClick={handleClick}\n levels={levels}\n currentLevel={1}\n />\n </nav>\n </FocusProvider>\n </SelectionContext.Provider>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;AAqCO,MAAM,qBAAqB,WAGhC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CAAC,OAAO,cAAc;AACzE,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,6BACG,iBAAiB,UAAjB,EAA0B,OAAO,eAChC,8BAAC,eACC,EAAA,UAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ,CAAC;"}
|
|
@@ -6,14 +6,14 @@ const HvSimpleGrid = (props) => {
|
|
|
6
6
|
const {
|
|
7
7
|
children,
|
|
8
8
|
breakpoints,
|
|
9
|
-
spacing
|
|
9
|
+
spacing,
|
|
10
10
|
cols,
|
|
11
11
|
className,
|
|
12
12
|
classes: classesProp,
|
|
13
13
|
...others
|
|
14
14
|
} = useDefaultProps("HvSimpleGrid", props);
|
|
15
15
|
const { classes, cx, css } = useClasses(classesProp);
|
|
16
|
-
const containerStyle = getContainerStyle(
|
|
16
|
+
const containerStyle = getContainerStyle(breakpoints, spacing, cols);
|
|
17
17
|
return /* @__PURE__ */ jsx(
|
|
18
18
|
"div",
|
|
19
19
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleGrid.js","sources":["../../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n getContainerStyle,\n staticClasses,\n useClasses,\n} from \"./SimpleGrid.styles\";\
|
|
1
|
+
{"version":3,"file":"SimpleGrid.js","sources":["../../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n getContainerStyle,\n staticClasses,\n useClasses,\n} from \"./SimpleGrid.styles\";\n\nexport { staticClasses as simpleGridClasses };\n\n// TODO: remove in v6\nexport type Spacing = HvBreakpoints;\n\n// TODO: rename in v6 (or inline)\nexport interface Breakpoint {\n cols?: number;\n maxWidth?: number;\n minWidth?: number;\n spacing?: HvBreakpoints;\n}\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */\nexport interface HvSimpleGridProps extends HvBaseProps {\n /** Spacing with pre-defined values according the values defined in the theme */\n spacing?: HvBreakpoints;\n /**\n * Provide an array to define responsive behavior:\n * - `maxWidth` or `minWidth`: max-width or min-width at which media query will work\n * - `cols`: number of columns per row at given max-width\n * - `spacing`: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n */\n breakpoints?: Breakpoint[];\n /** Number of how many columns the content will be displayed */\n cols?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n const {\n children,\n breakpoints,\n spacing,\n cols,\n className,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvSimpleGrid\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const containerStyle = getContainerStyle(breakpoints, spacing, cols);\n\n return (\n <div\n className={cx(css(containerStyle), classes.root, className)}\n {...others}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AA6Ca,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,iBAAiB,kBAAkB,aAAa,SAAS,IAAI;AAGjE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,IAAI,cAAc,GAAG,QAAQ,MAAM,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { staticClasses, useClasses } = createClasses("HvSimpleGrid", {
|
|
4
|
-
root: {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
return props.size;
|
|
4
|
+
root: {
|
|
5
|
+
display: "grid",
|
|
6
|
+
boxSizing: "border-box",
|
|
7
|
+
gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
|
|
9
8
|
}
|
|
10
|
-
|
|
9
|
+
});
|
|
10
|
+
function getSize(size) {
|
|
11
|
+
return size || Number(theme.breakpoints.values.md);
|
|
11
12
|
}
|
|
12
13
|
function getSortedBreakpoints(breakpoints) {
|
|
13
14
|
if (breakpoints.length === 0) {
|
|
@@ -15,29 +16,23 @@ function getSortedBreakpoints(breakpoints) {
|
|
|
15
16
|
}
|
|
16
17
|
const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
|
|
17
18
|
const sorted = [...breakpoints].sort(
|
|
18
|
-
(a, b) =>
|
|
19
|
+
(a, b) => getSize(b[property]) - getSize(a[property])
|
|
19
20
|
);
|
|
20
21
|
return property === "minWidth" ? sorted.reverse() : sorted;
|
|
21
22
|
}
|
|
22
|
-
const getContainerStyle = ({
|
|
23
|
-
breakpoints,
|
|
24
|
-
spacing,
|
|
25
|
-
cols
|
|
26
|
-
}) => {
|
|
23
|
+
const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
|
|
27
24
|
return {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
|
|
25
|
+
// TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]
|
|
26
|
+
"--cols": cols,
|
|
31
27
|
gap: theme.space[spacing],
|
|
32
28
|
...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
|
|
33
29
|
const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
|
|
34
|
-
const breakpointSize =
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
})
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
gap: theme.space[spacing]
|
|
30
|
+
const breakpointSize = getSize(
|
|
31
|
+
property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth
|
|
32
|
+
);
|
|
33
|
+
acc[`@media (${property}: ${breakpointSize}px)`] = {
|
|
34
|
+
["--cols"]: breakpoint.cols,
|
|
35
|
+
gap: theme.space[breakpoint.spacing || spacing]
|
|
41
36
|
};
|
|
42
37
|
return acc;
|
|
43
38
|
}, {})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleGrid.styles.js","sources":["../../../src/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"SimpleGrid.styles.js","sources":["../../../src/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { HvBreakpoints, theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { Breakpoint } from \"./SimpleGrid\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {\n root: {\n display: \"grid\",\n boxSizing: \"border-box\",\n gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`,\n },\n});\n\nfunction getSize(size?: number) {\n return size || Number(theme.breakpoints.values.md);\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n if (breakpoints.length === 0) {\n return breakpoints;\n }\n\n const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n const sorted = [...breakpoints].sort(\n (a, b) => getSize(b[property]) - getSize(a[property]),\n );\n\n return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = (\n breakpoints?: Breakpoint[],\n spacing: HvBreakpoints = \"sm\",\n cols = 1,\n) => {\n return {\n // TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]\n \"--cols\": cols,\n gap: theme.space[spacing],\n\n ...(breakpoints &&\n getSortedBreakpoints(breakpoints).reduce<\n Record<string, React.CSSProperties>\n >((acc, breakpoint) => {\n const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n const breakpointSize = getSize(\n property === \"max-width\" ? breakpoint.maxWidth : breakpoint.minWidth,\n );\n\n acc[`@media (${property}: ${breakpointSize}px)`] = {\n [\"--cols\" as string]: breakpoint.cols,\n gap: theme.space[breakpoint.spacing || spacing],\n };\n\n return acc;\n }, {})),\n };\n};\n"],"names":[],"mappings":";;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,qBAAqB;AAAA,EACvB;AACF,CAAC;AAED,SAAS,QAAQ,MAAe;AAC9B,SAAO,QAAQ,OAAO,MAAM,YAAY,OAAO,EAAE;AACnD;AAEA,SAAS,qBAAqB,aAA2B;AACnD,MAAA,YAAY,WAAW,GAAG;AACrB,WAAA;AAAA,EACT;AAEA,QAAM,WAAW,cAAc,YAAY,CAAC,IAAI,aAAa;AAC7D,QAAM,SAAS,CAAC,GAAG,WAAW,EAAE;AAAA,IAC9B,CAAC,GAAG,MAAM,QAAQ,EAAE,QAAQ,CAAC,IAAI,QAAQ,EAAE,QAAQ,CAAC;AAAA,EAAA;AAGtD,SAAO,aAAa,aAAa,OAAO,QAAA,IAAY;AACtD;AAEO,MAAM,oBAAoB,CAC/B,aACA,UAAyB,MACzB,OAAO,MACJ;AACI,SAAA;AAAA;AAAA,IAEL,UAAU;AAAA,IACV,KAAK,MAAM,MAAM,OAAO;AAAA,IAExB,GAAI,eACF,qBAAqB,WAAW,EAAE,OAEhC,CAAC,KAAK,eAAe;AACf,YAAA,WAAW,cAAc,aAAa,cAAc;AAC1D,YAAM,iBAAiB;AAAA,QACrB,aAAa,cAAc,WAAW,WAAW,WAAW;AAAA,MAAA;AAG9D,UAAI,WAAW,QAAQ,KAAK,cAAc,KAAK,IAAI;AAAA,QACjD,CAAC,QAAkB,GAAG,WAAW;AAAA,QACjC,KAAK,MAAM,MAAM,WAAW,WAAW,OAAO;AAAA,MAAA;AAGzC,aAAA;AAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -406,7 +406,7 @@ export declare interface Breakpoint {
|
|
|
406
406
|
cols?: number;
|
|
407
407
|
maxWidth?: number;
|
|
408
408
|
minWidth?: number;
|
|
409
|
-
spacing?:
|
|
409
|
+
spacing?: HvBreakpoints;
|
|
410
410
|
}
|
|
411
411
|
|
|
412
412
|
export declare const buildAriaPropsFromContext: (props: InputBaseComponentProps, context: HvFormElementDescriptorsContextValue, isInvalid: boolean, inputId?: string) => default_2.AriaAttributes;
|
|
@@ -3953,7 +3953,7 @@ export declare type HvGridSpacing = "xs" | "sm" | "md" | "lg" | "xl" | "auto" |
|
|
|
3953
3953
|
*/
|
|
3954
3954
|
export declare const HvHeader: (props: HvHeaderProps) => JSX_3.Element;
|
|
3955
3955
|
|
|
3956
|
-
export declare const HvHeaderActions:
|
|
3956
|
+
export declare const HvHeaderActions: ForwardRefExoticComponent<HvHeaderActionsProps & RefAttributes<HTMLDivElement>>;
|
|
3957
3957
|
|
|
3958
3958
|
export declare type HvHeaderActionsClasses = ExtractNames<typeof useClasses_76>;
|
|
3959
3959
|
|
|
@@ -3964,7 +3964,7 @@ export declare interface HvHeaderActionsProps extends HvBaseProps {
|
|
|
3964
3964
|
/**
|
|
3965
3965
|
* Header component is used to render a header bar with logo and brand name, navigation and actions.
|
|
3966
3966
|
*/
|
|
3967
|
-
export declare const HvHeaderBrand:
|
|
3967
|
+
export declare const HvHeaderBrand: ForwardRefExoticComponent<HvHeaderBrandProps & RefAttributes<HTMLDivElement>>;
|
|
3968
3968
|
|
|
3969
3969
|
export declare type HvHeaderBrandClasses = ExtractNames<typeof useClasses_77>;
|
|
3970
3970
|
|
|
@@ -4006,7 +4006,7 @@ declare interface HvHeaderMenuItemProps extends HvBaseProps<HTMLDivElement, "onC
|
|
|
4006
4006
|
classes?: HvHeaderMenuItemClasses;
|
|
4007
4007
|
}
|
|
4008
4008
|
|
|
4009
|
-
export declare const HvHeaderNavigation:
|
|
4009
|
+
export declare const HvHeaderNavigation: ForwardRefExoticComponent<HvHeaderNavigationProps & RefAttributes<HTMLElement>>;
|
|
4010
4010
|
|
|
4011
4011
|
export declare type HvHeaderNavigationClasses = ExtractNames<typeof useClasses_80>;
|
|
4012
4012
|
|
|
@@ -5704,23 +5704,16 @@ export declare type HvSimpleGridClasses = ExtractNames<typeof useClasses_100>;
|
|
|
5704
5704
|
|
|
5705
5705
|
/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */
|
|
5706
5706
|
export declare interface HvSimpleGridProps extends HvBaseProps {
|
|
5707
|
-
/**
|
|
5708
|
-
|
|
5709
|
-
*/
|
|
5710
|
-
spacing?: Spacing;
|
|
5707
|
+
/** Spacing with pre-defined values according the values defined in the theme */
|
|
5708
|
+
spacing?: HvBreakpoints;
|
|
5711
5709
|
/**
|
|
5712
5710
|
* Provide an array to define responsive behavior:
|
|
5713
|
-
*
|
|
5714
|
-
*
|
|
5715
|
-
*
|
|
5716
|
-
* cols: number of columns per row at given max-width
|
|
5717
|
-
*
|
|
5718
|
-
* spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead
|
|
5711
|
+
* - `maxWidth` or `minWidth`: max-width or min-width at which media query will work
|
|
5712
|
+
* - `cols`: number of columns per row at given max-width
|
|
5713
|
+
* - `spacing`: optional spacing at given max-width, if not provided spacing from component prop will be used instead
|
|
5719
5714
|
*/
|
|
5720
5715
|
breakpoints?: Breakpoint[];
|
|
5721
|
-
/**
|
|
5722
|
-
* Number of how many columns the content will be displayed
|
|
5723
|
-
*/
|
|
5716
|
+
/** Number of how many columns the content will be displayed */
|
|
5724
5717
|
cols?: number;
|
|
5725
5718
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
5726
5719
|
classes?: HvSimpleGridClasses;
|
|
@@ -7974,7 +7967,7 @@ export declare const snackbarProviderClasses: {
|
|
|
7974
7967
|
snackItemRoot: "HvSnackbarProvider-snackItemRoot";
|
|
7975
7968
|
};
|
|
7976
7969
|
|
|
7977
|
-
export declare type Spacing =
|
|
7970
|
+
export declare type Spacing = HvBreakpoints;
|
|
7978
7971
|
|
|
7979
7972
|
export declare const stackClasses: {
|
|
7980
7973
|
xs: "HvStack-xs";
|
|
@@ -9923,27 +9916,28 @@ declare const useClasses_77: (classesProp?: Partial<Record<"root" | "separator"
|
|
|
9923
9916
|
cx: (...args: any) => string;
|
|
9924
9917
|
};
|
|
9925
9918
|
|
|
9926
|
-
declare const useClasses_78: (classesProp?: Partial<Record<"root" | "active" | "list" | "
|
|
9919
|
+
declare const useClasses_78: (classesProp?: Partial<Record<"root" | "active" | "list" | "hidden" | "menu" | "menubar", string>>, addStatic?: boolean) => {
|
|
9927
9920
|
classes: {
|
|
9928
9921
|
root: string;
|
|
9929
9922
|
active: string;
|
|
9930
9923
|
list: string;
|
|
9924
|
+
hidden: string;
|
|
9931
9925
|
menu: string;
|
|
9932
9926
|
menubar: string;
|
|
9933
|
-
hidden: string;
|
|
9934
9927
|
};
|
|
9935
9928
|
css: any;
|
|
9936
9929
|
cx: (...args: any) => string;
|
|
9937
9930
|
};
|
|
9938
9931
|
|
|
9939
|
-
declare const useClasses_79: (classesProp?: Partial<Record<"link" | "root" | "
|
|
9932
|
+
declare const useClasses_79: (classesProp?: Partial<Record<"link" | "root" | "selected" | "button" | "menu" | "menubar" | "item", string>>, addStatic?: boolean) => {
|
|
9940
9933
|
classes: {
|
|
9941
9934
|
link: string;
|
|
9942
9935
|
root: string;
|
|
9943
|
-
menu: string;
|
|
9944
|
-
menubar: string;
|
|
9945
9936
|
selected: string;
|
|
9946
9937
|
button: string;
|
|
9938
|
+
menu: string;
|
|
9939
|
+
menubar: string;
|
|
9940
|
+
item: string;
|
|
9947
9941
|
};
|
|
9948
9942
|
css: any;
|
|
9949
9943
|
cx: (...args: any) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.72.
|
|
3
|
+
"version": "5.72.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@emotion/cache": "^11.11.0",
|
|
34
34
|
"@emotion/serialize": "^1.1.2",
|
|
35
|
-
"@hitachivantara/uikit-react-icons": "^5.11.
|
|
36
|
-
"@hitachivantara/uikit-react-shared": "^5.3.
|
|
37
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
38
|
-
"@hitachivantara/uikit-styles": "^5.33.
|
|
35
|
+
"@hitachivantara/uikit-react-icons": "^5.11.1",
|
|
36
|
+
"@hitachivantara/uikit-react-shared": "^5.3.4",
|
|
37
|
+
"@hitachivantara/uikit-react-utils": "^0.2.4",
|
|
38
|
+
"@hitachivantara/uikit-styles": "^5.33.2",
|
|
39
39
|
"@internationalized/date": "^3.2.0",
|
|
40
40
|
"@mui/base": "^5.0.0-beta.40",
|
|
41
41
|
"@popperjs/core": "^2.11.8",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "b6ee74d9581f4f8d3014c785c6ceb86c481d3b3f",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"types": "./dist/types/index.d.ts",
|