@hitachivantara/uikit-react-core 5.69.0 → 5.70.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/Card/Content/Content.cjs +10 -8
- package/dist/cjs/Forms/Adornment/Adornment.cjs +11 -3
- package/dist/cjs/Forms/Adornment/Adornment.styles.cjs +6 -0
- package/dist/cjs/Header/Header.cjs +3 -9
- package/dist/cjs/Header/Header.styles.cjs +3 -3
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +6 -4
- package/dist/esm/Card/Content/Content.js +10 -8
- package/dist/esm/Card/Content/Content.js.map +1 -1
- package/dist/esm/Forms/Adornment/Adornment.js +11 -3
- package/dist/esm/Forms/Adornment/Adornment.js.map +1 -1
- package/dist/esm/Forms/Adornment/Adornment.styles.js +6 -0
- package/dist/esm/Forms/Adornment/Adornment.styles.js.map +1 -1
- package/dist/esm/Header/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/Header/Brand/Brand.styles.js.map +1 -1
- package/dist/esm/Header/Header.js +3 -9
- package/dist/esm/Header/Header.js.map +1 -1
- package/dist/esm/Header/Header.styles.js +3 -3
- package/dist/esm/Header/Header.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js.map +1 -1
- package/dist/esm/Header/Navigation/Navigation.styles.js.map +1 -1
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +7 -5
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/types/index.d.ts +350 -275
- package/package.json +6 -6
|
@@ -2,17 +2,19 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const MuiCardContent = require("@mui/material/CardContent");
|
|
5
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
6
|
const Content_styles = require("./Content.styles.cjs");
|
|
6
7
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
7
8
|
const MuiCardContent__default = /* @__PURE__ */ _interopDefault(MuiCardContent);
|
|
8
|
-
const HvCardContent = ({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
const HvCardContent = (props) => {
|
|
10
|
+
const {
|
|
11
|
+
id,
|
|
12
|
+
classes: classesProp,
|
|
13
|
+
className,
|
|
14
|
+
children,
|
|
15
|
+
onClick,
|
|
16
|
+
...others
|
|
17
|
+
} = uikitReactUtils.useDefaultProps("HvCardContent", props);
|
|
16
18
|
const { classes, cx } = Content_styles.useClasses(classesProp);
|
|
17
19
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18
20
|
MuiCardContent__default.default,
|
|
@@ -19,7 +19,7 @@ const HvAdornment = React.forwardRef(
|
|
|
19
19
|
...others
|
|
20
20
|
}, ref) => {
|
|
21
21
|
const { classes, cx } = Adornment_styles.useClasses(classesProp);
|
|
22
|
-
const { elementStatus = "" } = React.useContext(FormElementContext.HvFormElementContext);
|
|
22
|
+
const { elementStatus = "", elementDisabled } = React.useContext(FormElementContext.HvFormElementContext);
|
|
23
23
|
const { input } = React.useContext(FormElementDescriptorsContext.HvFormElementDescriptorsContext);
|
|
24
24
|
const displayIcon = isVisible ?? (showWhen === void 0 || elementStatus === showWhen);
|
|
25
25
|
const isClickable = !!onClick;
|
|
@@ -35,12 +35,17 @@ const HvAdornment = React.forwardRef(
|
|
|
35
35
|
classes.root,
|
|
36
36
|
classes.adornment,
|
|
37
37
|
classes.adornmentButton,
|
|
38
|
-
{
|
|
38
|
+
{
|
|
39
|
+
[classes.hideIcon]: !displayIcon,
|
|
40
|
+
[classes.disabled]: elementDisabled
|
|
41
|
+
},
|
|
39
42
|
className
|
|
40
43
|
),
|
|
41
44
|
onClick,
|
|
42
45
|
onMouseDown: (event) => event.preventDefault(),
|
|
43
46
|
onKeyDown: noop,
|
|
47
|
+
disabled: elementDisabled,
|
|
48
|
+
"aria-disabled": elementDisabled,
|
|
44
49
|
...others,
|
|
45
50
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon })
|
|
46
51
|
}
|
|
@@ -53,7 +58,10 @@ const HvAdornment = React.forwardRef(
|
|
|
53
58
|
classes.root,
|
|
54
59
|
classes.adornment,
|
|
55
60
|
classes.adornmentIcon,
|
|
56
|
-
{
|
|
61
|
+
{
|
|
62
|
+
[classes.hideIcon]: !displayIcon,
|
|
63
|
+
[classes.disabled]: elementDisabled
|
|
64
|
+
},
|
|
57
65
|
className
|
|
58
66
|
),
|
|
59
67
|
role: "presentation",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
5
|
const focusUtils = require("../../utils/focusUtils.cjs");
|
|
5
6
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAdornment", {
|
|
6
7
|
root: {},
|
|
@@ -18,6 +19,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAdornment
|
|
|
18
19
|
"&:focus": {
|
|
19
20
|
...focusUtils.outlineStyles
|
|
20
21
|
}
|
|
22
|
+
},
|
|
23
|
+
disabled: {
|
|
24
|
+
"&$adornmentButton": { cursor: "not-allowed" },
|
|
25
|
+
"&$adornmentIcon": { cursor: "not-allowed" },
|
|
26
|
+
"& svg *.color0": { fill: uikitStyles.theme.colors.secondary_60 }
|
|
21
27
|
}
|
|
22
28
|
});
|
|
23
29
|
exports.staticClasses = staticClasses;
|
|
@@ -11,21 +11,15 @@ const HvHeader = (props) => {
|
|
|
11
11
|
position = "fixed",
|
|
12
12
|
...others
|
|
13
13
|
} = uikitReactUtils.useDefaultProps("HvHeader", props);
|
|
14
|
-
const { classes, cx
|
|
14
|
+
const { classes, cx } = Header_styles.useClasses(classesProp);
|
|
15
15
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
16
|
"header",
|
|
17
17
|
{
|
|
18
|
+
style: { position },
|
|
18
19
|
className: cx(
|
|
19
20
|
classes.root,
|
|
20
21
|
classes.backgroundColor,
|
|
21
|
-
|
|
22
|
-
position,
|
|
23
|
-
...position === "fixed" && {
|
|
24
|
-
top: 0,
|
|
25
|
-
left: "auto",
|
|
26
|
-
right: 0
|
|
27
|
-
}
|
|
28
|
-
}),
|
|
22
|
+
{ [classes.fixed]: position === "fixed" },
|
|
29
23
|
className
|
|
30
24
|
),
|
|
31
25
|
...others,
|
|
@@ -12,8 +12,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader",
|
|
|
12
12
|
boxSizing: "border-box",
|
|
13
13
|
flexShrink: 0,
|
|
14
14
|
zIndex: uikitStyles.theme.zIndices.banner,
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
borderTop: "none",
|
|
16
|
+
boxShadow: uikitStyles.theme.colors.shadow
|
|
17
17
|
},
|
|
18
18
|
header: {
|
|
19
19
|
display: "flex",
|
|
@@ -21,11 +21,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader",
|
|
|
21
21
|
width: "100%",
|
|
22
22
|
height: "100%",
|
|
23
23
|
padding: `0 ${uikitStyles.theme.space.sm}`,
|
|
24
|
-
boxShadow: uikitStyles.theme.colors.shadow,
|
|
25
24
|
"& > *:not(nav)": {
|
|
26
25
|
zIndex: 2
|
|
27
26
|
}
|
|
28
27
|
},
|
|
28
|
+
fixed: { position: "fixed", top: 0, left: "auto", right: 0 },
|
|
29
29
|
backgroundColor: {}
|
|
30
30
|
});
|
|
31
31
|
exports.staticClasses = staticClasses;
|
|
@@ -304,10 +304,12 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
|
|
|
304
304
|
showAvatar: !icon && useIcons,
|
|
305
305
|
isOpen,
|
|
306
306
|
hasAnyChildWithData,
|
|
307
|
-
style:
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
307
|
+
style: uikitReactUtils.mergeStyles(
|
|
308
|
+
{},
|
|
309
|
+
{
|
|
310
|
+
"--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
|
|
311
|
+
}
|
|
312
|
+
),
|
|
311
313
|
className: classes.icon
|
|
312
314
|
}
|
|
313
315
|
),
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import MuiCardContent from "@mui/material/CardContent";
|
|
3
|
+
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
3
4
|
import { useClasses } from "./Content.styles.js";
|
|
4
5
|
import { staticClasses } from "./Content.styles.js";
|
|
5
|
-
const HvCardContent = ({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
const HvCardContent = (props) => {
|
|
7
|
+
const {
|
|
8
|
+
id,
|
|
9
|
+
classes: classesProp,
|
|
10
|
+
className,
|
|
11
|
+
children,
|
|
12
|
+
onClick,
|
|
13
|
+
...others
|
|
14
|
+
} = useDefaultProps("HvCardContent", props);
|
|
13
15
|
const { classes, cx } = useClasses(classesProp);
|
|
14
16
|
return /* @__PURE__ */ jsx(
|
|
15
17
|
MuiCardContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sources":["../../../../src/Card/Content/Content.tsx"],"sourcesContent":["import MuiCardContent, {\n CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport {
|
|
1
|
+
{"version":3,"file":"Content.js","sources":["../../../../src/Card/Content/Content.tsx"],"sourcesContent":["import MuiCardContent, {\n CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as cardContentClasses };\n\nexport type HvCardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardContentProps\n extends Omit<MuiCardContentProps, \"classes\"> {\n /** The function that will be executed when this section is clicked. */\n onClick?: (event: React.SyntheticEvent) => void;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardContentClasses;\n}\n\nexport const HvCardContent = (props: HvCardContentProps) => {\n const {\n id,\n classes: classesProp,\n className,\n children,\n onClick,\n ...others\n } = useDefaultProps(\"HvCardContent\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiCardContent\n id={id}\n className={cx(classes.content, className)}\n onClick={onClick}\n {...others}\n >\n {children}\n </MuiCardContent>\n );\n};\n"],"names":[],"mappings":";;;;;AAsBa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,SAAS,SAAS;AAAA,MACxC;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -18,7 +18,7 @@ const HvAdornment = forwardRef(
|
|
|
18
18
|
...others
|
|
19
19
|
}, ref) => {
|
|
20
20
|
const { classes, cx } = useClasses(classesProp);
|
|
21
|
-
const { elementStatus = "" } = useContext(HvFormElementContext);
|
|
21
|
+
const { elementStatus = "", elementDisabled } = useContext(HvFormElementContext);
|
|
22
22
|
const { input } = useContext(HvFormElementDescriptorsContext);
|
|
23
23
|
const displayIcon = isVisible ?? (showWhen === void 0 || elementStatus === showWhen);
|
|
24
24
|
const isClickable = !!onClick;
|
|
@@ -34,12 +34,17 @@ const HvAdornment = forwardRef(
|
|
|
34
34
|
classes.root,
|
|
35
35
|
classes.adornment,
|
|
36
36
|
classes.adornmentButton,
|
|
37
|
-
{
|
|
37
|
+
{
|
|
38
|
+
[classes.hideIcon]: !displayIcon,
|
|
39
|
+
[classes.disabled]: elementDisabled
|
|
40
|
+
},
|
|
38
41
|
className
|
|
39
42
|
),
|
|
40
43
|
onClick,
|
|
41
44
|
onMouseDown: (event) => event.preventDefault(),
|
|
42
45
|
onKeyDown: noop,
|
|
46
|
+
disabled: elementDisabled,
|
|
47
|
+
"aria-disabled": elementDisabled,
|
|
43
48
|
...others,
|
|
44
49
|
children: /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon })
|
|
45
50
|
}
|
|
@@ -52,7 +57,10 @@ const HvAdornment = forwardRef(
|
|
|
52
57
|
classes.root,
|
|
53
58
|
classes.adornment,
|
|
54
59
|
classes.adornmentIcon,
|
|
55
|
-
{
|
|
60
|
+
{
|
|
61
|
+
[classes.hideIcon]: !displayIcon,
|
|
62
|
+
[classes.disabled]: elementDisabled
|
|
63
|
+
},
|
|
56
64
|
className
|
|
57
65
|
),
|
|
58
66
|
role: "presentation",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Adornment.js","sources":["../../../../src/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport {\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n HvFormStatus,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n extends HvBaseProps<\n HTMLDivElement | HTMLButtonElement,\n \"onMouseDown\" | \"onKeyDown\"\n > {\n /** The icon to be added into the input. */\n icon: React.ReactNode;\n /** When the adornment should be displayed. */\n showWhen?: HvFormStatus;\n /** Function to be executed when this element is clicked. */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n isVisible?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n HTMLDivElement | HTMLButtonElement,\n HvAdornmentProps\n>(\n (\n {\n id,\n classes: classesProp,\n className,\n icon,\n showWhen = undefined,\n onClick,\n isVisible = undefined,\n ...others\n },\n ref,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { elementStatus = \"\" }
|
|
1
|
+
{"version":3,"file":"Adornment.js","sources":["../../../../src/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport {\n HvFormElementContext,\n HvFormElementDescriptorsContext,\n HvFormStatus,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n extends HvBaseProps<\n HTMLDivElement | HTMLButtonElement,\n \"onMouseDown\" | \"onKeyDown\"\n > {\n /** The icon to be added into the input. */\n icon: React.ReactNode;\n /** When the adornment should be displayed. */\n showWhen?: HvFormStatus;\n /** Function to be executed when this element is clicked. */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n isVisible?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n HTMLDivElement | HTMLButtonElement,\n HvAdornmentProps\n>(\n (\n {\n id,\n classes: classesProp,\n className,\n icon,\n showWhen = undefined,\n onClick,\n isVisible = undefined,\n ...others\n },\n ref,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { elementStatus = \"\", elementDisabled } =\n useContext(HvFormElementContext);\n\n const { input } = useContext(HvFormElementDescriptorsContext);\n\n const displayIcon =\n isVisible ?? (showWhen === undefined || elementStatus === showWhen);\n\n const isClickable = !!onClick;\n\n return isClickable ? (\n <button\n id={id}\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\n type=\"button\"\n tabIndex={-1}\n aria-controls={input?.[0]?.id}\n className={cx(\n classes.root,\n classes.adornment,\n classes.adornmentButton,\n {\n [classes.hideIcon]: !displayIcon,\n [classes.disabled]: elementDisabled,\n },\n className,\n )}\n onClick={onClick}\n onMouseDown={(event) => event.preventDefault()}\n onKeyDown={noop}\n disabled={elementDisabled}\n aria-disabled={elementDisabled}\n {...others}\n >\n <div className={classes.icon}>{icon}</div>\n </button>\n ) : (\n <div\n id={id}\n ref={ref as React.ForwardedRef<HTMLDivElement>}\n className={cx(\n classes.root,\n classes.adornment,\n classes.adornmentIcon,\n {\n [classes.hideIcon]: !displayIcon,\n [classes.disabled]: elementDisabled,\n },\n className,\n )}\n role=\"presentation\"\n {...others}\n >\n <div className={classes.icon}>{icon}</div>\n </div>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,OAAO,MAAM;AAAC;AAkCb,MAAM,cAAc;AAAA,EAIzB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,EAAE,gBAAgB,IAAI,gBAAgB,IAC1C,WAAW,oBAAoB;AAEjC,UAAM,EAAE,MAAA,IAAU,WAAW,+BAA+B;AAE5D,UAAM,cACJ,cAAc,aAAa,UAAa,kBAAkB;AAEtD,UAAA,cAAc,CAAC,CAAC;AAEtB,WAAO,cACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,iBAAe,QAAQ,CAAC,GAAG;AAAA,QAC3B,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,QAC7C,WAAW;AAAA,QACX,UAAU;AAAA,QACV,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA,IAGtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1C;AACF;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
3
|
import { outlineStyles } from "../../utils/focusUtils.js";
|
|
3
4
|
const { staticClasses, useClasses } = createClasses("HvAdornment", {
|
|
4
5
|
root: {},
|
|
@@ -16,6 +17,11 @@ const { staticClasses, useClasses } = createClasses("HvAdornment", {
|
|
|
16
17
|
"&:focus": {
|
|
17
18
|
...outlineStyles
|
|
18
19
|
}
|
|
20
|
+
},
|
|
21
|
+
disabled: {
|
|
22
|
+
"&$adornmentButton": { cursor: "not-allowed" },
|
|
23
|
+
"&$adornmentIcon": { cursor: "not-allowed" },
|
|
24
|
+
"& svg *.color0": { fill: theme.colors.secondary_60 }
|
|
19
25
|
}
|
|
20
26
|
});
|
|
21
27
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Adornment.styles.js","sources":["../../../../src/Forms/Adornment/Adornment.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAdornment\", {\n root: {},\n icon: { width: 32, height: 32 },\n adornment: {\n backgroundColor: \"transparent\",\n border: \"none\",\n padding: 0,\n margin: 0,\n },\n adornmentIcon: { cursor: \"default\", pointerEvents: \"none\" },\n hideIcon: { display: \"none\" },\n adornmentButton: {\n cursor: \"pointer\",\n \"&:focus\": {\n ...outlineStyles,\n },\n },\n});\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Adornment.styles.js","sources":["../../../../src/Forms/Adornment/Adornment.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAdornment\", {\n root: {},\n icon: { width: 32, height: 32 },\n adornment: {\n backgroundColor: \"transparent\",\n border: \"none\",\n padding: 0,\n margin: 0,\n },\n adornmentIcon: { cursor: \"default\", pointerEvents: \"none\" },\n hideIcon: { display: \"none\" },\n adornmentButton: {\n cursor: \"pointer\",\n \"&:focus\": {\n ...outlineStyles,\n },\n },\n disabled: {\n \"&$adornmentButton\": { cursor: \"not-allowed\" },\n \"&$adornmentIcon\": { cursor: \"not-allowed\" },\n \"& svg *.color0\": { fill: theme.colors.secondary_60 },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,MAAM,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,EAC9B,WAAW;AAAA,IACT,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe,EAAE,QAAQ,WAAW,eAAe,OAAO;AAAA,EAC1D,UAAU,EAAE,SAAS,OAAO;AAAA,EAC5B,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB,EAAE,QAAQ,cAAc;AAAA,IAC7C,mBAAmB,EAAE,QAAQ,cAAc;AAAA,IAC3C,kBAAkB,EAAE,MAAM,MAAM,OAAO,aAAa;AAAA,EACtD;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../../Button\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Actions\", {\n root: {\n backgroundColor: \"transparent\",\n display: \"flex\",\n gap: theme.space.xs,\n alignItems: \"center\",\n marginLeft: \"auto\",\n [`& .${buttonClasses?.root}`]: {\n \"&:hover\": { backgroundColor: theme.colors.containerBackgroundHover },\n },\n },\n});\n"],"names":["buttonClasses"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../../Button\";\n\n// TODO - rename to HvHeaderActions (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Actions\", {\n root: {\n backgroundColor: \"transparent\",\n display: \"flex\",\n gap: theme.space.xs,\n alignItems: \"center\",\n marginLeft: \"auto\",\n [`& .${buttonClasses?.root}`]: {\n \"&:hover\": { backgroundColor: theme.colors.containerBackgroundHover },\n },\n },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,CAAC,MAAMA,iBAAe,IAAI,EAAE,GAAG;AAAA,MAC7B,WAAW,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,IACtE;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Brand.styles.js","sources":["../../../../src/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n root: { display: \"flex\", alignItems: \"center\" },\n separator: {\n width: 1,\n height: theme.space.sm,\n margin: theme.space.xs,\n backgroundColor: theme.colors.secondary,\n },\n brandName: {},\n});\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Brand.styles.js","sources":["../../../../src/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// TODO - rename to HvHeaderBrand (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n root: { display: \"flex\", alignItems: \"center\" },\n separator: {\n width: 1,\n height: theme.space.sm,\n margin: theme.space.xs,\n backgroundColor: theme.colors.secondary,\n },\n brandName: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC9C,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ,MAAM,MAAM;AAAA,IACpB,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,WAAW,CAAC;AACd,CAAC;"}
|
|
@@ -10,21 +10,15 @@ const HvHeader = (props) => {
|
|
|
10
10
|
position = "fixed",
|
|
11
11
|
...others
|
|
12
12
|
} = useDefaultProps("HvHeader", props);
|
|
13
|
-
const { classes, cx
|
|
13
|
+
const { classes, cx } = useClasses(classesProp);
|
|
14
14
|
return /* @__PURE__ */ jsx(
|
|
15
15
|
"header",
|
|
16
16
|
{
|
|
17
|
+
style: { position },
|
|
17
18
|
className: cx(
|
|
18
19
|
classes.root,
|
|
19
20
|
classes.backgroundColor,
|
|
20
|
-
|
|
21
|
-
position,
|
|
22
|
-
...position === "fixed" && {
|
|
23
|
-
top: 0,
|
|
24
|
-
left: "auto",
|
|
25
|
-
right: 0
|
|
26
|
-
}
|
|
27
|
-
}),
|
|
21
|
+
{ [classes.fixed]: position === "fixed" },
|
|
28
22
|
className
|
|
29
23
|
),
|
|
30
24
|
...others,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../src/Header/Header.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n | \"fixed\"\n | \"absolute\"\n | \"sticky\"\n | \"static\"\n | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n /** The position of the header bar */\n position?: HvHeaderPosition;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n const {\n className,\n classes: classesProp,\n children,\n position = \"fixed\",\n ...others\n } = useDefaultProps(\"HvHeader\", props);\n\n const { classes, cx
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../src/Header/Header.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n | \"fixed\"\n | \"absolute\"\n | \"sticky\"\n | \"static\"\n | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n /** The position of the header bar */\n position?: HvHeaderPosition;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n const {\n className,\n classes: classesProp,\n children,\n position = \"fixed\",\n ...others\n } = useDefaultProps(\"HvHeader\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <header\n style={{ position }}\n className={cx(\n classes.root,\n classes.backgroundColor,\n { [classes.fixed]: position === \"fixed\" },\n className,\n )}\n {...others}\n >\n <div className={classes.header}>{children}</div>\n </header>\n );\n};\n"],"names":[],"mappings":";;;;AA6Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,SAAS;AAAA,MAClB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,KAAK,GAAG,aAAa,QAAQ;AAAA,QACxC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,UAAS;AAAA,IAAA;AAAA,EAAA;AAGhD;"}
|
|
@@ -10,8 +10,8 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
|
|
|
10
10
|
boxSizing: "border-box",
|
|
11
11
|
flexShrink: 0,
|
|
12
12
|
zIndex: theme.zIndices.banner,
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
borderTop: "none",
|
|
14
|
+
boxShadow: theme.colors.shadow
|
|
15
15
|
},
|
|
16
16
|
header: {
|
|
17
17
|
display: "flex",
|
|
@@ -19,11 +19,11 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
|
|
|
19
19
|
width: "100%",
|
|
20
20
|
height: "100%",
|
|
21
21
|
padding: `0 ${theme.space.sm}`,
|
|
22
|
-
boxShadow: theme.colors.shadow,
|
|
23
22
|
"& > *:not(nav)": {
|
|
24
23
|
zIndex: 2
|
|
25
24
|
}
|
|
26
25
|
},
|
|
26
|
+
fixed: { position: "fixed", top: 0, left: "auto", right: 0 },
|
|
27
27
|
backgroundColor: {}
|
|
28
28
|
});
|
|
29
29
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n root: {\n height: theme.header.height,\n backgroundColor: theme.colors.atmo1,\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n boxSizing: \"border-box\",\n flexShrink: 0,\n zIndex: theme.zIndices.banner,\n boxShadow: theme.colors.shadow,\n
|
|
1
|
+
{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n root: {\n height: theme.header.height,\n backgroundColor: theme.colors.atmo1,\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n boxSizing: \"border-box\",\n flexShrink: 0,\n zIndex: theme.zIndices.banner,\n borderTop: \"none\",\n boxShadow: theme.colors.shadow,\n },\n header: {\n display: \"flex\",\n alignItems: \"center\",\n width: \"100%\",\n height: \"100%\",\n padding: `0 ${theme.space.sm}`,\n \"& > *:not(nav)\": {\n zIndex: 2,\n },\n },\n fixed: { position: \"fixed\", top: 0, left: \"auto\", right: 0 },\n backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAC5B,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,UAAU,SAAS,KAAK,GAAG,MAAM,QAAQ,OAAO,EAAE;AAAA,EAC3D,iBAAiB,CAAC;AACpB,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.styles.js","sources":["../../../../../src/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst show = {\n top: theme.header.height,\n transition: [\"top\"],\n boxShadow: theme.colors.shadow,\n transitionDuration: \"500ms\",\n backgroundColor: theme.colors.atmo2,\n};\n\nconst hide = {\n top: 0,\n transition: [\"top\"],\n boxShadow: \"none\",\n transitionDuration: \"300ms\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n root: {\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n menu: {\n position: \"absolute\",\n zIndex: -2,\n height: theme.header.secondLevelHeight,\n backgroundColor: theme.colors.atmo2,\n \"& li > div\": {\n marginTop: 0,\n },\n },\n menubar: {\n position: \"relative\",\n backgroundColor: theme.colors.atmo1,\n },\n hidden: { ...hide },\n active: { ...show },\n list: {\n margin: 0,\n padding: 0,\n display: \"inherit\",\n alignItems: \"center\",\n height: \"100%\",\n \"&:hover $active\": {\n ...hide,\n },\n \"& li:hover > $hidden\": {\n ...show,\n },\n\n \"&:focus-within $active\": {\n ...hide,\n zIndex: -2,\n },\n \"& li:focus-within > $hidden\": {\n ...show,\n zIndex: -1,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,KAAK,MAAM,OAAO;AAAA,EAClB,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW,MAAM,OAAO;AAAA,EACxB,oBAAoB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAChC;AAEA,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AACtB;
|
|
1
|
+
{"version":3,"file":"Bar.styles.js","sources":["../../../../../src/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst show = {\n top: theme.header.height,\n transition: [\"top\"],\n boxShadow: theme.colors.shadow,\n transitionDuration: \"500ms\",\n backgroundColor: theme.colors.atmo2,\n};\n\nconst hide = {\n top: 0,\n transition: [\"top\"],\n boxShadow: \"none\",\n transitionDuration: \"300ms\",\n};\n\n// TODO - rename to HvHeaderMenuBar (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n root: {\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n menu: {\n position: \"absolute\",\n zIndex: -2,\n height: theme.header.secondLevelHeight,\n backgroundColor: theme.colors.atmo2,\n \"& li > div\": {\n marginTop: 0,\n },\n },\n menubar: {\n position: \"relative\",\n backgroundColor: theme.colors.atmo1,\n },\n hidden: { ...hide },\n active: { ...show },\n list: {\n margin: 0,\n padding: 0,\n display: \"inherit\",\n alignItems: \"center\",\n height: \"100%\",\n \"&:hover $active\": {\n ...hide,\n },\n \"& li:hover > $hidden\": {\n ...show,\n },\n\n \"&:focus-within $active\": {\n ...hide,\n zIndex: -2,\n },\n \"& li:focus-within > $hidden\": {\n ...show,\n zIndex: -1,\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,KAAK,MAAM,OAAO;AAAA,EAClB,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW,MAAM,OAAO;AAAA,EACxB,oBAAoB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAChC;AAEA,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AACtB;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAG;AAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -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\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-MenuItem\",\n {\n root: {\n display: \"inline\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-within\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n menu: {\n marginTop: 0,\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.atmo2}`,\n },\n menubar: {\n marginTop: \"0px\",\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: `0px solid ${theme.colors.atmo1}`,\n borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n },\n selected: {\n \"&$menu\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n \"& > * > span\": {\n color: theme.colors.secondary,\n },\n },\n \"&$menubar\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n },\n },\n link: {\n textDecoration: \"none\",\n ...item,\n } as CSSInterpolation,\n button: {\n color: \"inherit\",\n ...item,\n } as CSSInterpolation,\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,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;
|
|
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 \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-within\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n menu: {\n marginTop: 0,\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.atmo2}`,\n },\n menubar: {\n marginTop: \"0px\",\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: `0px solid ${theme.colors.atmo1}`,\n borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n },\n selected: {\n \"&$menu\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n \"& > * > span\": {\n color: theme.colors.secondary,\n },\n },\n \"&$menubar\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n },\n },\n link: {\n textDecoration: \"none\",\n ...item,\n } as CSSInterpolation,\n button: {\n color: \"inherit\",\n ...item,\n } as CSSInterpolation,\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,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,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,kBAAkB;AAAA,QAChB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,cAAc,GAAG,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-Navigation\",\n {\n root: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n zIndex: 1,\n top: \"0px\",\n left: \"0px\",\n },\n },\n);\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\n// TODO - rename to HvHeaderNavigation (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-Navigation\",\n {\n root: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n zIndex: 1,\n top: \"0px\",\n left: \"0px\",\n },\n },\n);\n"],"names":[],"mappings":";AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF;"}
|