@hitachivantara/uikit-react-core 5.84.4 → 5.85.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/Dialog/Actions/Actions.cjs +2 -2
- package/dist/cjs/Dialog/Actions/Actions.styles.cjs +3 -3
- package/dist/cjs/Dialog/Content/Content.styles.cjs +1 -3
- package/dist/cjs/Dialog/Dialog.cjs +15 -18
- package/dist/cjs/Dialog/Dialog.styles.cjs +9 -6
- package/dist/cjs/Dialog/Title/Title.cjs +15 -20
- package/dist/cjs/Dialog/Title/Title.styles.cjs +12 -15
- package/dist/cjs/Dialog/context.cjs +1 -1
- package/dist/cjs/Panel/Panel.styles.cjs +1 -0
- package/dist/cjs/Section/Section.cjs +1 -1
- package/dist/cjs/Section/Section.styles.cjs +2 -0
- package/dist/cjs/TableSection/TableSection.styles.cjs +0 -1
- package/dist/cjs/Tabs/Tabs.styles.cjs +2 -5
- package/dist/esm/Dialog/Actions/Actions.js +2 -2
- package/dist/esm/Dialog/Actions/Actions.js.map +1 -1
- package/dist/esm/Dialog/Actions/Actions.styles.js +3 -3
- package/dist/esm/Dialog/Actions/Actions.styles.js.map +1 -1
- package/dist/esm/Dialog/Content/Content.styles.js +1 -3
- package/dist/esm/Dialog/Content/Content.styles.js.map +1 -1
- package/dist/esm/Dialog/Dialog.js +15 -18
- package/dist/esm/Dialog/Dialog.js.map +1 -1
- package/dist/esm/Dialog/Dialog.styles.js +9 -6
- package/dist/esm/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/Dialog/Title/Title.js +16 -21
- package/dist/esm/Dialog/Title/Title.js.map +1 -1
- package/dist/esm/Dialog/Title/Title.styles.js +12 -15
- package/dist/esm/Dialog/Title/Title.styles.js.map +1 -1
- package/dist/esm/Dialog/context.js +1 -1
- package/dist/esm/Dialog/context.js.map +1 -1
- package/dist/esm/Panel/Panel.styles.js +1 -0
- package/dist/esm/Panel/Panel.styles.js.map +1 -1
- package/dist/esm/Section/Section.js +2 -2
- package/dist/esm/Section/Section.js.map +1 -1
- package/dist/esm/Section/Section.styles.js +2 -0
- package/dist/esm/Section/Section.styles.js.map +1 -1
- package/dist/esm/TableSection/TableSection.styles.js +0 -1
- package/dist/esm/TableSection/TableSection.styles.js.map +1 -1
- package/dist/esm/Tabs/Tabs.styles.js +2 -5
- package/dist/esm/Tabs/Tabs.styles.js.map +1 -1
- package/dist/types/index.d.ts +5 -1
- package/package.json +2 -2
|
@@ -16,14 +16,14 @@ const HvDialogActions = (props) => {
|
|
|
16
16
|
...others
|
|
17
17
|
} = uikitReactUtils.useDefaultProps("HvDialogActions", props);
|
|
18
18
|
const context$1 = context.useDialogContext();
|
|
19
|
-
const
|
|
19
|
+
const fullScreen = fullScreenProp ?? context$1.fullScreen;
|
|
20
20
|
const { classes, cx } = Actions_styles.useClasses(classesProp);
|
|
21
21
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
22
22
|
MuiDialogActions__default.default,
|
|
23
23
|
{
|
|
24
24
|
className,
|
|
25
25
|
classes: {
|
|
26
|
-
root: cx(classes.root, { [classes.fullscreen]:
|
|
26
|
+
root: cx(classes.root, { [classes.fullscreen]: fullScreen }),
|
|
27
27
|
spacing: classes.spacing
|
|
28
28
|
},
|
|
29
29
|
...others,
|
|
@@ -4,12 +4,12 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
5
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Action", {
|
|
6
6
|
root: {
|
|
7
|
-
margin:
|
|
7
|
+
margin: 0,
|
|
8
8
|
padding: uikitStyles.theme.space.sm,
|
|
9
|
+
backgroundColor: "inherit",
|
|
9
10
|
borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
|
|
10
11
|
height: 65,
|
|
11
|
-
maxHeight: 65
|
|
12
|
-
flex: 1
|
|
12
|
+
maxHeight: 65
|
|
13
13
|
},
|
|
14
14
|
fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
|
|
15
15
|
spacing: {
|
|
@@ -4,13 +4,11 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
5
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Content", {
|
|
6
6
|
root: {
|
|
7
|
-
padding:
|
|
8
|
-
flex: "none"
|
|
7
|
+
padding: uikitStyles.theme.spacing(0, "sm", "sm")
|
|
9
8
|
},
|
|
10
9
|
textContent: {
|
|
11
10
|
marginLeft: "42px",
|
|
12
11
|
paddingRight: "62px",
|
|
13
|
-
flex: 1,
|
|
14
12
|
overflowY: "auto"
|
|
15
13
|
}
|
|
16
14
|
});
|
|
@@ -23,28 +23,37 @@ const HvDialog = (props) => {
|
|
|
23
23
|
onClose,
|
|
24
24
|
firstFocusable,
|
|
25
25
|
buttonTitle = "Close",
|
|
26
|
-
|
|
26
|
+
fullHeight,
|
|
27
|
+
fullscreen: fullScreen = false,
|
|
28
|
+
// TODO: rename to `fullScreen` in v6
|
|
27
29
|
disableBackdropClick = false,
|
|
28
30
|
...others
|
|
29
31
|
} = uikitReactUtils.useDefaultProps("HvDialog", props);
|
|
30
|
-
const { classes,
|
|
32
|
+
const { classes, cx } = Dialog_styles.useClasses(classesProp);
|
|
31
33
|
const { rootId } = uikitReactUtils.useTheme();
|
|
32
34
|
const measuredRef = React.useCallback(() => {
|
|
33
35
|
if (!firstFocusable) return;
|
|
34
36
|
const element = document.getElementById(firstFocusable);
|
|
35
37
|
element?.focus();
|
|
36
38
|
}, [firstFocusable]);
|
|
37
|
-
const contextValue = React.useMemo(() => ({
|
|
39
|
+
const contextValue = React.useMemo(() => ({ fullScreen }), [fullScreen]);
|
|
38
40
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
39
41
|
MuiDialog__default.default,
|
|
40
42
|
{
|
|
41
43
|
container: document$1.getElementById(rootId),
|
|
42
|
-
className
|
|
43
|
-
classes: {
|
|
44
|
+
className,
|
|
45
|
+
classes: {
|
|
46
|
+
root: classes.root,
|
|
47
|
+
paper: cx(classes.paper, classes[variant], {
|
|
48
|
+
[classes.fullHeight]: fullHeight,
|
|
49
|
+
[classes.statusBar]: !!variant,
|
|
50
|
+
[classes.fullscreen]: fullScreen
|
|
51
|
+
})
|
|
52
|
+
},
|
|
44
53
|
id,
|
|
45
54
|
ref: measuredRef,
|
|
46
55
|
open,
|
|
47
|
-
fullScreen
|
|
56
|
+
fullScreen,
|
|
48
57
|
onClose: (event, reason) => {
|
|
49
58
|
if (disableBackdropClick) return;
|
|
50
59
|
onClose?.(event, reason);
|
|
@@ -56,18 +65,6 @@ const HvDialog = (props) => {
|
|
|
56
65
|
}
|
|
57
66
|
}
|
|
58
67
|
},
|
|
59
|
-
PaperProps: {
|
|
60
|
-
classes: {
|
|
61
|
-
root: cx(
|
|
62
|
-
css({ position: "absolute" }),
|
|
63
|
-
classes.paper,
|
|
64
|
-
variant && cx(classes.statusBar, classes[variant]),
|
|
65
|
-
{
|
|
66
|
-
[classes.fullscreen]: fullscreen
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
68
|
...others,
|
|
72
69
|
children: [
|
|
73
70
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -8,10 +8,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog",
|
|
|
8
8
|
paper: {
|
|
9
9
|
color: uikitStyles.theme.colors.secondary,
|
|
10
10
|
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
11
|
-
boxShadow:
|
|
11
|
+
boxShadow: uikitStyles.theme.colors.shadow,
|
|
12
|
+
borderColor: uikitStyles.theme.colors.atmo4,
|
|
12
13
|
borderRadius: uikitStyles.theme.radii.round
|
|
13
14
|
},
|
|
14
15
|
fullscreen: {},
|
|
16
|
+
fullHeight: {
|
|
17
|
+
height: "100%"
|
|
18
|
+
},
|
|
15
19
|
closeButton: {
|
|
16
20
|
padding: 0,
|
|
17
21
|
minWidth: "auto",
|
|
@@ -24,17 +28,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog",
|
|
|
24
28
|
statusBar: {
|
|
25
29
|
borderTopLeftRadius: 0,
|
|
26
30
|
borderTopRightRadius: 0,
|
|
27
|
-
borderTopWidth: 4
|
|
28
|
-
borderTopStyle: "solid"
|
|
31
|
+
borderTopWidth: 4
|
|
29
32
|
},
|
|
30
33
|
success: {
|
|
31
|
-
|
|
34
|
+
borderColor: uikitStyles.theme.colors.positive
|
|
32
35
|
},
|
|
33
36
|
error: {
|
|
34
|
-
|
|
37
|
+
borderColor: uikitStyles.theme.colors.negative
|
|
35
38
|
},
|
|
36
39
|
warning: {
|
|
37
|
-
|
|
40
|
+
borderColor: uikitStyles.theme.colors.warning
|
|
38
41
|
}
|
|
39
42
|
});
|
|
40
43
|
exports.staticClasses = staticClasses;
|
|
@@ -6,6 +6,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
6
6
|
const iconVariant = require("../../utils/iconVariant.cjs");
|
|
7
7
|
const context = require("../context.cjs");
|
|
8
8
|
const Title_styles = require("./Title.styles.cjs");
|
|
9
|
+
const Typography = require("../../Typography/Typography.cjs");
|
|
9
10
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
10
11
|
const MuiDialogTitle__default = /* @__PURE__ */ _interopDefault(MuiDialogTitle);
|
|
11
12
|
const HvDialogTitle = (props) => {
|
|
@@ -15,38 +16,32 @@ const HvDialogTitle = (props) => {
|
|
|
15
16
|
children,
|
|
16
17
|
variant = "default",
|
|
17
18
|
showIcon = true,
|
|
18
|
-
customIcon
|
|
19
|
+
customIcon,
|
|
19
20
|
...others
|
|
20
21
|
} = uikitReactUtils.useDefaultProps("HvDialogTitle", props);
|
|
21
|
-
const { classes,
|
|
22
|
-
const {
|
|
23
|
-
const isString = typeof children === "string";
|
|
22
|
+
const { classes, cx } = Title_styles.useClasses(classesProp);
|
|
23
|
+
const { fullScreen } = context.useDialogContext();
|
|
24
24
|
const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
|
|
25
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
26
|
-
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
26
|
+
Typography.HvTypography,
|
|
27
27
|
{
|
|
28
|
+
component: MuiDialogTitle__default.default,
|
|
29
|
+
variant: "title4",
|
|
28
30
|
className: cx(
|
|
29
|
-
!fullscreen && css({ flex: 1 }),
|
|
30
31
|
classes.root,
|
|
32
|
+
classes.messageContainer,
|
|
31
33
|
{
|
|
32
|
-
[classes.fullscreen]:
|
|
34
|
+
[classes.fullscreen]: fullScreen,
|
|
35
|
+
[classes.textWithIcon]: icon,
|
|
36
|
+
[classes.titleText]: typeof children === "string"
|
|
33
37
|
},
|
|
34
38
|
className
|
|
35
39
|
),
|
|
36
40
|
...others,
|
|
37
|
-
children:
|
|
41
|
+
children: [
|
|
38
42
|
icon,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
{
|
|
42
|
-
className: cx({
|
|
43
|
-
[classes.textWithIcon]: !!icon,
|
|
44
|
-
[classes.titleText]: isString
|
|
45
|
-
}),
|
|
46
|
-
children
|
|
47
|
-
}
|
|
48
|
-
)
|
|
49
|
-
] })
|
|
43
|
+
children
|
|
44
|
+
]
|
|
50
45
|
}
|
|
51
46
|
);
|
|
52
47
|
};
|
|
@@ -4,24 +4,21 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
5
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Title", {
|
|
6
6
|
root: {
|
|
7
|
-
fontFamily: uikitStyles.theme.fontFamily.body,
|
|
8
|
-
// override MUI font
|
|
9
7
|
padding: uikitStyles.theme.space.sm,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
messageContainer: {
|
|
8
|
+
paddingRight: 32 + 16,
|
|
9
|
+
// close icon padding
|
|
10
|
+
backgroundColor: "inherit",
|
|
14
11
|
display: "flex",
|
|
15
|
-
alignItems: "center"
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
gap: uikitStyles.theme.space.xs
|
|
16
14
|
},
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
15
|
+
fullscreen: {},
|
|
16
|
+
/** @deprecated use `classes.root` instead */
|
|
17
|
+
messageContainer: {},
|
|
18
|
+
// TODO: consider deprecating
|
|
19
|
+
textWithIcon: {},
|
|
20
|
+
/** @deprecated use `classes.root` instead */
|
|
21
|
+
titleText: {}
|
|
25
22
|
});
|
|
26
23
|
exports.staticClasses = staticClasses;
|
|
27
24
|
exports.useClasses = useClasses;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
-
const DialogContext = React.createContext({
|
|
4
|
+
const DialogContext = React.createContext({ fullScreen: false });
|
|
5
5
|
const useDialogContext = () => React.useContext(DialogContext);
|
|
6
6
|
exports.DialogContext = DialogContext;
|
|
7
7
|
exports.useDialogContext = useDialogContext;
|
|
@@ -6,6 +6,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvPanel", {
|
|
|
6
6
|
root: {
|
|
7
7
|
position: "relative",
|
|
8
8
|
padding: uikitStyles.theme.space.sm,
|
|
9
|
+
borderColor: uikitStyles.theme.colors.atmo4,
|
|
9
10
|
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
10
11
|
overflow: "auto",
|
|
11
12
|
borderRadius: "inherit"
|
|
@@ -54,7 +54,7 @@ const HvSection = React.forwardRef(
|
|
|
54
54
|
"aria-label": isOpen ? "Collapse" : "Expand",
|
|
55
55
|
...buttonProps,
|
|
56
56
|
...expandButtonProps,
|
|
57
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.
|
|
57
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: isOpen })
|
|
58
58
|
}
|
|
59
59
|
),
|
|
60
60
|
title,
|
|
@@ -15,6 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
|
|
|
15
15
|
header: {
|
|
16
16
|
display: "flex",
|
|
17
17
|
alignItems: "center",
|
|
18
|
+
borderColor: "inherit",
|
|
18
19
|
position: "relative",
|
|
19
20
|
minHeight: uikitStyles.theme.sizes.sm,
|
|
20
21
|
padding: uikitStyles.theme.space.sm
|
|
@@ -37,6 +38,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
|
|
|
37
38
|
raisedHeader: {
|
|
38
39
|
"& $header": {
|
|
39
40
|
zIndex: 1,
|
|
41
|
+
borderBottomWidth: 1,
|
|
40
42
|
boxShadow: uikitStyles.theme.colors.shadow
|
|
41
43
|
},
|
|
42
44
|
"& $content": {
|
|
@@ -19,7 +19,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
|
|
|
19
19
|
header: {
|
|
20
20
|
// Only apply the border to divide the header and content when both are displayed
|
|
21
21
|
"+ div": {
|
|
22
|
-
borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
|
|
23
22
|
borderTopLeftRadius: 0,
|
|
24
23
|
borderTopRightRadius: 0
|
|
25
24
|
}
|
|
@@ -3,13 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTabs", {
|
|
5
5
|
root: {
|
|
6
|
-
minHeight: 0
|
|
7
|
-
overflow: "visible"
|
|
6
|
+
minHeight: 0
|
|
8
7
|
},
|
|
9
8
|
indicator: {},
|
|
10
|
-
scroller: {
|
|
11
|
-
overflow: "visible !important"
|
|
12
|
-
},
|
|
9
|
+
scroller: {},
|
|
13
10
|
flexContainer: {
|
|
14
11
|
marginLeft: "3px"
|
|
15
12
|
},
|
|
@@ -13,14 +13,14 @@ const HvDialogActions = (props) => {
|
|
|
13
13
|
...others
|
|
14
14
|
} = useDefaultProps("HvDialogActions", props);
|
|
15
15
|
const context = useDialogContext();
|
|
16
|
-
const
|
|
16
|
+
const fullScreen = fullScreenProp ?? context.fullScreen;
|
|
17
17
|
const { classes, cx } = useClasses(classesProp);
|
|
18
18
|
return /* @__PURE__ */ jsx(
|
|
19
19
|
MuiDialogActions,
|
|
20
20
|
{
|
|
21
21
|
className,
|
|
22
22
|
classes: {
|
|
23
|
-
root: cx(classes.root, { [classes.fullscreen]:
|
|
23
|
+
root: cx(classes.root, { [classes.fullscreen]: fullScreen }),
|
|
24
24
|
spacing: classes.spacing
|
|
25
25
|
},
|
|
26
26
|
...others,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../src/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\"> {\n /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n fullscreen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n const {\n classes: classesProp,\n className,\n children,\n fullscreen: fullScreenProp,\n ...others\n } = useDefaultProps(\"HvDialogActions\", props);\n const context = useDialogContext();\n const
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../src/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\"> {\n /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n fullscreen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n const {\n classes: classesProp,\n className,\n children,\n fullscreen: fullScreenProp,\n ...others\n } = useDefaultProps(\"HvDialogActions\", props);\n const context = useDialogContext();\n const fullScreen = fullScreenProp ?? context.fullScreen;\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiDialogActions\n className={className}\n classes={{\n root: cx(classes.root, { [classes.fullscreen]: fullScreen }),\n spacing: classes.spacing,\n }}\n {...others}\n >\n {children}\n </MuiDialogActions>\n );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,UAAU,iBAAiB;AAC3B,QAAA,aAAa,kBAAkB,QAAQ;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,YAAY;AAAA,QAC3D,SAAS,QAAQ;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
|
@@ -2,12 +2,12 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { staticClasses, useClasses } = createClasses("HvDialog-Action", {
|
|
4
4
|
root: {
|
|
5
|
-
margin:
|
|
5
|
+
margin: 0,
|
|
6
6
|
padding: theme.space.sm,
|
|
7
|
+
backgroundColor: "inherit",
|
|
7
8
|
borderTop: `3px solid ${theme.colors.atmo2}`,
|
|
8
9
|
height: 65,
|
|
9
|
-
maxHeight: 65
|
|
10
|
-
flex: 1
|
|
10
|
+
maxHeight: 65
|
|
11
11
|
},
|
|
12
12
|
fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
|
|
13
13
|
spacing: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n root: {\n margin:
|
|
1
|
+
{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n root: {\n margin: 0,\n padding: theme.space.sm,\n backgroundColor: \"inherit\",\n borderTop: `3px solid ${theme.colors.atmo2}`,\n height: 65,\n maxHeight: 65,\n },\n fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n spacing: {\n \"& > :not(:first-of-type)\": {\n marginLeft: theme.space.xs,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB;AAAA,IACjB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,YAAY,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,MAAM,EAAE;AAAA,EACnE,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}
|
|
@@ -2,13 +2,11 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
|
|
4
4
|
root: {
|
|
5
|
-
padding:
|
|
6
|
-
flex: "none"
|
|
5
|
+
padding: theme.spacing(0, "sm", "sm")
|
|
7
6
|
},
|
|
8
7
|
textContent: {
|
|
9
8
|
marginLeft: "42px",
|
|
10
9
|
paddingRight: "62px",
|
|
11
|
-
flex: 1,
|
|
12
10
|
overflowY: "auto"
|
|
13
11
|
}
|
|
14
12
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.styles.js","sources":["../../../../src/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n root: {\n padding:
|
|
1
|
+
{"version":3,"file":"Content.styles.js","sources":["../../../../src/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n root: {\n padding: theme.spacing(0, \"sm\", \"sm\"),\n },\n textContent: {\n marginLeft: \"42px\",\n paddingRight: \"62px\",\n overflowY: \"auto\",\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS,MAAM,QAAQ,GAAG,MAAM,IAAI;AAAA,EACtC;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EAAA;AAEf,CAAC;"}
|
|
@@ -20,28 +20,37 @@ const HvDialog = (props) => {
|
|
|
20
20
|
onClose,
|
|
21
21
|
firstFocusable,
|
|
22
22
|
buttonTitle = "Close",
|
|
23
|
-
|
|
23
|
+
fullHeight,
|
|
24
|
+
fullscreen: fullScreen = false,
|
|
25
|
+
// TODO: rename to `fullScreen` in v6
|
|
24
26
|
disableBackdropClick = false,
|
|
25
27
|
...others
|
|
26
28
|
} = useDefaultProps("HvDialog", props);
|
|
27
|
-
const { classes,
|
|
29
|
+
const { classes, cx } = useClasses(classesProp);
|
|
28
30
|
const { rootId } = useTheme();
|
|
29
31
|
const measuredRef = useCallback(() => {
|
|
30
32
|
if (!firstFocusable) return;
|
|
31
33
|
const element = document.getElementById(firstFocusable);
|
|
32
34
|
element?.focus();
|
|
33
35
|
}, [firstFocusable]);
|
|
34
|
-
const contextValue = useMemo(() => ({
|
|
36
|
+
const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);
|
|
35
37
|
return /* @__PURE__ */ jsxs(
|
|
36
38
|
MuiDialog,
|
|
37
39
|
{
|
|
38
40
|
container: getElementById(rootId),
|
|
39
|
-
className
|
|
40
|
-
classes: {
|
|
41
|
+
className,
|
|
42
|
+
classes: {
|
|
43
|
+
root: classes.root,
|
|
44
|
+
paper: cx(classes.paper, classes[variant], {
|
|
45
|
+
[classes.fullHeight]: fullHeight,
|
|
46
|
+
[classes.statusBar]: !!variant,
|
|
47
|
+
[classes.fullscreen]: fullScreen
|
|
48
|
+
})
|
|
49
|
+
},
|
|
41
50
|
id,
|
|
42
51
|
ref: measuredRef,
|
|
43
52
|
open,
|
|
44
|
-
fullScreen
|
|
53
|
+
fullScreen,
|
|
45
54
|
onClose: (event, reason) => {
|
|
46
55
|
if (disableBackdropClick) return;
|
|
47
56
|
onClose?.(event, reason);
|
|
@@ -53,18 +62,6 @@ const HvDialog = (props) => {
|
|
|
53
62
|
}
|
|
54
63
|
}
|
|
55
64
|
},
|
|
56
|
-
PaperProps: {
|
|
57
|
-
classes: {
|
|
58
|
-
root: cx(
|
|
59
|
-
css({ position: "absolute" }),
|
|
60
|
-
classes.paper,
|
|
61
|
-
variant && cx(classes.statusBar, classes[variant]),
|
|
62
|
-
{
|
|
63
|
-
[classes.fullscreen]: fullscreen
|
|
64
|
-
}
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
65
|
...others,
|
|
69
66
|
children: [
|
|
70
67
|
/* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n /** Current state of the Dialog. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. */\n onClose?: (\n event: React.MouseEvent<HTMLButtonElement> | {},\n reason?: \"escapeKeyDown\" | \"backdropClick\",\n ) => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /**\n * Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n variant?: \"success\" | \"error\" | \"warning\";\n /** @ignore */\n ref?: MuiDialogProps[\"ref\"];\n /** @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n /** Current state of the Dialog. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. */\n onClose?: (\n event: React.MouseEvent<HTMLButtonElement> | {},\n reason?: \"escapeKeyDown\" | \"backdropClick\",\n ) => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /** If true, the dialog stretches vertically, limited by the margins. @default false */\n fullHeight?: boolean;\n /**\n * Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n variant?: \"success\" | \"error\" | \"warning\";\n /** @ignore */\n ref?: MuiDialogProps[\"ref\"];\n /** @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullHeight,\n fullscreen: fullScreen = false, // TODO: rename to `fullScreen` in v6\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const { rootId } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);\n\n return (\n <MuiDialog\n container={getElementById(rootId)}\n className={className}\n classes={{\n root: classes.root,\n paper: cx(classes.paper, classes[variant!], {\n [classes.fullHeight]: fullHeight,\n [classes.statusBar]: !!variant,\n [classes.fullscreen]: fullScreen,\n }),\n }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullScreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: classes.background,\n },\n },\n }}\n {...others}\n >\n <HvIconButton<\"button\">\n title={buttonTitle}\n id={setId(id, \"close\")}\n className={classes.closeButton}\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close />\n </HvIconButton>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,YAAY,aAAa;AAAA;AAAA,IACzB,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,GAAG,QAAQ,OAAO,QAAQ,OAAQ,GAAG;AAAA,UAC1C,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,UAAU,GAAG;AAAA,QACvB,CAAA;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -6,10 +6,14 @@ const { staticClasses, useClasses } = createClasses("HvDialog", {
|
|
|
6
6
|
paper: {
|
|
7
7
|
color: theme.colors.secondary,
|
|
8
8
|
backgroundColor: theme.colors.atmo1,
|
|
9
|
-
boxShadow:
|
|
9
|
+
boxShadow: theme.colors.shadow,
|
|
10
|
+
borderColor: theme.colors.atmo4,
|
|
10
11
|
borderRadius: theme.radii.round
|
|
11
12
|
},
|
|
12
13
|
fullscreen: {},
|
|
14
|
+
fullHeight: {
|
|
15
|
+
height: "100%"
|
|
16
|
+
},
|
|
13
17
|
closeButton: {
|
|
14
18
|
padding: 0,
|
|
15
19
|
minWidth: "auto",
|
|
@@ -22,17 +26,16 @@ const { staticClasses, useClasses } = createClasses("HvDialog", {
|
|
|
22
26
|
statusBar: {
|
|
23
27
|
borderTopLeftRadius: 0,
|
|
24
28
|
borderTopRightRadius: 0,
|
|
25
|
-
borderTopWidth: 4
|
|
26
|
-
borderTopStyle: "solid"
|
|
29
|
+
borderTopWidth: 4
|
|
27
30
|
},
|
|
28
31
|
success: {
|
|
29
|
-
|
|
32
|
+
borderColor: theme.colors.positive
|
|
30
33
|
},
|
|
31
34
|
error: {
|
|
32
|
-
|
|
35
|
+
borderColor: theme.colors.negative
|
|
33
36
|
},
|
|
34
37
|
warning: {
|
|
35
|
-
|
|
38
|
+
borderColor: theme.colors.warning
|
|
36
39
|
}
|
|
37
40
|
});
|
|
38
41
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","sources":["../../../src/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n root: {},\n background: { background: theme.alpha(\"atmo4\", 0.8) },\n paper: {\n color: theme.colors.secondary,\n backgroundColor: theme.colors.atmo1,\n boxShadow:
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","sources":["../../../src/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n root: {},\n background: { background: theme.alpha(\"atmo4\", 0.8) },\n paper: {\n color: theme.colors.secondary,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n borderColor: theme.colors.atmo4,\n borderRadius: theme.radii.round,\n },\n fullscreen: {},\n fullHeight: {\n height: \"100%\",\n },\n closeButton: {\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n },\n statusBar: {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTopWidth: 4,\n },\n success: {\n borderColor: theme.colors.positive,\n },\n error: {\n borderColor: theme.colors.negative,\n },\n warning: {\n borderColor: theme.colors.warning,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,YAAY,EAAE,YAAY,MAAM,MAAM,SAAS,GAAG,EAAE;AAAA,EACpD,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,YAAY,CAAC;AAAA,EACb,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,IACL,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAAA;AAE9B,CAAC;"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs } from "react/jsx-runtime";
|
|
2
2
|
import MuiDialogTitle from "@mui/material/DialogTitle";
|
|
3
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
4
4
|
import { iconVariant } from "../../utils/iconVariant.js";
|
|
5
5
|
import { useDialogContext } from "../context.js";
|
|
6
6
|
import { useClasses } from "./Title.styles.js";
|
|
7
7
|
import { staticClasses } from "./Title.styles.js";
|
|
8
|
+
import { HvTypography } from "../../Typography/Typography.js";
|
|
8
9
|
const HvDialogTitle = (props) => {
|
|
9
10
|
const {
|
|
10
11
|
classes: classesProp,
|
|
@@ -12,38 +13,32 @@ const HvDialogTitle = (props) => {
|
|
|
12
13
|
children,
|
|
13
14
|
variant = "default",
|
|
14
15
|
showIcon = true,
|
|
15
|
-
customIcon
|
|
16
|
+
customIcon,
|
|
16
17
|
...others
|
|
17
18
|
} = useDefaultProps("HvDialogTitle", props);
|
|
18
|
-
const { classes,
|
|
19
|
-
const {
|
|
20
|
-
const isString = typeof children === "string";
|
|
19
|
+
const { classes, cx } = useClasses(classesProp);
|
|
20
|
+
const { fullScreen } = useDialogContext();
|
|
21
21
|
const icon = customIcon || showIcon && iconVariant(variant);
|
|
22
|
-
return /* @__PURE__ */
|
|
23
|
-
|
|
22
|
+
return /* @__PURE__ */ jsxs(
|
|
23
|
+
HvTypography,
|
|
24
24
|
{
|
|
25
|
+
component: MuiDialogTitle,
|
|
26
|
+
variant: "title4",
|
|
25
27
|
className: cx(
|
|
26
|
-
!fullscreen && css({ flex: 1 }),
|
|
27
28
|
classes.root,
|
|
29
|
+
classes.messageContainer,
|
|
28
30
|
{
|
|
29
|
-
[classes.fullscreen]:
|
|
31
|
+
[classes.fullscreen]: fullScreen,
|
|
32
|
+
[classes.textWithIcon]: icon,
|
|
33
|
+
[classes.titleText]: typeof children === "string"
|
|
30
34
|
},
|
|
31
35
|
className
|
|
32
36
|
),
|
|
33
37
|
...others,
|
|
34
|
-
children:
|
|
38
|
+
children: [
|
|
35
39
|
icon,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
{
|
|
39
|
-
className: cx({
|
|
40
|
-
[classes.textWithIcon]: !!icon,
|
|
41
|
-
[classes.titleText]: isString
|
|
42
|
-
}),
|
|
43
|
-
children
|
|
44
|
-
}
|
|
45
|
-
)
|
|
46
|
-
] })
|
|
40
|
+
children
|
|
41
|
+
]
|
|
47
42
|
}
|
|
48
43
|
);
|
|
49
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.js","sources":["../../../../src/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n /** Variant of the dialog title. */\n variant?: HvDialogTitleVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n const {\n classes: classesProp,\n className,\n children,\n variant = \"default\",\n showIcon = true,\n customIcon
|
|
1
|
+
{"version":3,"file":"Title.js","sources":["../../../../src/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n /** Variant of the dialog title. */\n variant?: HvDialogTitleVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n const {\n classes: classesProp,\n className,\n children,\n variant = \"default\",\n showIcon = true,\n customIcon,\n ...others\n } = useDefaultProps(\"HvDialogTitle\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const { fullScreen } = useDialogContext();\n\n const icon = customIcon || (showIcon && iconVariant(variant));\n\n return (\n <HvTypography\n component={MuiDialogTitle}\n variant=\"title4\"\n className={cx(\n classes.root,\n classes.messageContainer,\n {\n [classes.fullscreen]: fullScreen,\n [classes.textWithIcon]: icon,\n [classes.titleText]: typeof children === \"string\",\n },\n className,\n )}\n {...others}\n >\n {icon}\n {children}\n </HvTypography>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAoCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,WAAW,IAAI,iBAAiB;AAExC,QAAM,OAAO,cAAe,YAAY,YAAY,OAAO;AAGzD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAQ;AAAA,MACR,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,SAAS,GAAG,OAAO,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
|
@@ -2,24 +2,21 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { staticClasses, useClasses } = createClasses("HvDialog-Title", {
|
|
4
4
|
root: {
|
|
5
|
-
fontFamily: theme.fontFamily.body,
|
|
6
|
-
// override MUI font
|
|
7
5
|
padding: theme.space.sm,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
messageContainer: {
|
|
6
|
+
paddingRight: 32 + 16,
|
|
7
|
+
// close icon padding
|
|
8
|
+
backgroundColor: "inherit",
|
|
12
9
|
display: "flex",
|
|
13
|
-
alignItems: "center"
|
|
10
|
+
alignItems: "center",
|
|
11
|
+
gap: theme.space.xs
|
|
14
12
|
},
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
13
|
+
fullscreen: {},
|
|
14
|
+
/** @deprecated use `classes.root` instead */
|
|
15
|
+
messageContainer: {},
|
|
16
|
+
// TODO: consider deprecating
|
|
17
|
+
textWithIcon: {},
|
|
18
|
+
/** @deprecated use `classes.root` instead */
|
|
19
|
+
titleText: {}
|
|
23
20
|
});
|
|
24
21
|
export {
|
|
25
22
|
staticClasses,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.styles.js","sources":["../../../../src/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n root: {\n
|
|
1
|
+
{"version":3,"file":"Title.styles.js","sources":["../../../../src/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n root: {\n padding: theme.space.sm,\n paddingRight: 32 + 16, // close icon padding\n backgroundColor: \"inherit\",\n display: \"flex\",\n alignItems: \"center\",\n gap: theme.space.xs,\n },\n fullscreen: {},\n /** @deprecated use `classes.root` instead */\n messageContainer: {},\n // TODO: consider deprecating\n textWithIcon: {},\n /** @deprecated use `classes.root` instead */\n titleText: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS,MAAM,MAAM;AAAA,IACrB,cAAc,KAAK;AAAA;AAAA,IACnB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA;AAAA,EAEb,kBAAkB,CAAC;AAAA;AAAA,EAEnB,cAAc,CAAC;AAAA;AAAA,EAEf,WAAW,CAAA;AACb,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../../src/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../../src/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullScreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":[],"mappings":";AAEO,MAAM,gBAAgB,cAAc,EAAE,YAAY,MAAO,CAAA;AAEnD,MAAA,mBAAmB,MAAM,WAAW,aAAa;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.styles.js","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n root: {\n position: \"relative\",\n padding: theme.space.sm,\n backgroundColor: theme.colors.atmo1,\n overflow: \"auto\",\n borderRadius: \"inherit\",\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,cAAc;AAAA,EAAA;AAElB,CAAC;"}
|
|
1
|
+
{"version":3,"file":"Panel.styles.js","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n root: {\n position: \"relative\",\n padding: theme.space.sm,\n borderColor: theme.colors.atmo4,\n backgroundColor: theme.colors.atmo1,\n overflow: \"auto\",\n borderRadius: \"inherit\",\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,cAAc;AAAA,EAAA;AAElB,CAAC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { DropDownXS } from "@hitachivantara/uikit-react-icons";
|
|
4
4
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
5
5
|
import { useExpandable } from "../hooks/useExpandable.js";
|
|
6
6
|
import { useClasses } from "./Section.styles.js";
|
|
@@ -53,7 +53,7 @@ const HvSection = forwardRef(
|
|
|
53
53
|
"aria-label": isOpen ? "Collapse" : "Expand",
|
|
54
54
|
...buttonProps,
|
|
55
55
|
...expandButtonProps,
|
|
56
|
-
children: /* @__PURE__ */ jsx(
|
|
56
|
+
children: /* @__PURE__ */ jsx(DropDownXS, { rotate: isOpen })
|
|
57
57
|
}
|
|
58
58
|
),
|
|
59
59
|
title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n extends Omit<HvBaseProps<HTMLDivElement>, \"title\" | \"onToggle\"> {\n /** The title of the section */\n title?: React.ReactNode;\n /** Whether or not the section is expandable. */\n expandable?: boolean;\n /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /** Section actions */\n actions?: React.ReactNode;\n /** Section onExpand callback */\n onToggle?: (\n event: React.MouseEvent<HTMLButtonElement>,\n open: boolean,\n ) => void;\n /** Props to be passed to the expand button */\n expandButtonProps?: HvButtonProps;\n /** Determines whether or not the header has a shadow on the bottom border. */\n raisedHeader?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state component. */\n classes?: HvSectionClasses;\n /** Content container ref. */\n contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n function HvSection(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n title,\n expandable,\n expanded,\n defaultExpanded = true,\n actions,\n onToggle,\n expandButtonProps,\n raisedHeader,\n contentRef,\n children,\n ...others\n } = useDefaultProps(\"HvSection\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n id,\n expanded,\n defaultExpanded,\n });\n\n const hasHeader = title || actions || expandable;\n\n return (\n <div\n ref={ref}\n id={id}\n className={cx(classes.root, className, {\n [classes.raisedHeader]: raisedHeader && isOpen,\n })}\n {...others}\n >\n {hasHeader && (\n <div className={classes.header}>\n {expandable && (\n <HvButton\n icon\n onClick={(event) => {\n toggleOpen();\n onToggle?.(event, !isOpen);\n }}\n aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n {...buttonProps}\n {...expandButtonProps}\n >\n <DropDownXS rotate={isOpen} />\n </HvButton>\n )}\n {title}\n <div className={classes.actions}>{actions}</div>\n </div>\n )}\n <div\n ref={contentRef}\n hidden={!isOpen}\n className={cx(classes.content, {\n [classes.hidden]: expandable && !isOpen,\n [classes.spaceTop]: !hasHeader,\n [classes.hasHeader]: hasHeader,\n })}\n {...(expandable && regionProps)}\n >\n {children}\n </div>\n </div>\n );\n },\n);\n"],"names":["HvSection"],"mappings":";;;;;;;;AA8CO,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AACtC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,YAAY,SAAS,WAAW;AAGpC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,QAAA,CACzC;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACE,qBAAA,OAAA,EAAI,WAAW,QAAQ,QACrB,UAAA;AAAA,YACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACP,6BAAA;AACA,6BAAA,OAAO,CAAC,MAAM;AAAA,gBAC3B;AAAA,gBACA,cAAY,SAAS,aAAa;AAAA,gBACjC,GAAG;AAAA,gBACH,GAAG;AAAA,gBAEJ,UAAA,oBAAC,YAAW,EAAA,QAAQ,OAAQ,CAAA;AAAA,cAAA;AAAA,YAC9B;AAAA,YAED;AAAA,YACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,QAAA,CAAA;AAAA,UAAA,GAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,cAAc,CAAC;AAAA,gBACjC,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,gBACrB,CAAC,QAAQ,SAAS,GAAG;AAAA,cAAA,CACtB;AAAA,cACA,GAAI,cAAc;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
@@ -13,6 +13,7 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
|
|
|
13
13
|
header: {
|
|
14
14
|
display: "flex",
|
|
15
15
|
alignItems: "center",
|
|
16
|
+
borderColor: "inherit",
|
|
16
17
|
position: "relative",
|
|
17
18
|
minHeight: theme.sizes.sm,
|
|
18
19
|
padding: theme.space.sm
|
|
@@ -35,6 +36,7 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
|
|
|
35
36
|
raisedHeader: {
|
|
36
37
|
"& $header": {
|
|
37
38
|
zIndex: 1,
|
|
39
|
+
borderBottomWidth: 1,
|
|
38
40
|
boxShadow: theme.colors.shadow
|
|
39
41
|
},
|
|
40
42
|
"& $content": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.styles.js","sources":["../../../src/Section/Section.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSection\", {\n root: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n borderRadius: theme.radii.round,\n border: `1px solid ${theme.colors.atmo4}`,\n },\n hidden: { height: 0, display: \"none\" },\n header: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n minHeight: theme.sizes.sm,\n padding: theme.space.sm,\n },\n content: {\n padding: theme.space.sm,\n borderRadius: \"inherit\",\n borderColor: \"inherit\",\n },\n hasHeader: {\n paddingTop: 0,\n },\n /** @deprecated use `hasHeader` instead */\n spaceTop: {},\n actions: {\n display: \"flex\",\n gap: theme.space.xs,\n marginLeft: \"auto\",\n },\n raisedHeader: {\n \"& $header\": {\n zIndex: 1,\n boxShadow: theme.colors.shadow,\n },\n \"& $content\": {\n paddingTop: theme.space.sm,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,MACX,QAAQ;AAAA,MACR,WAAW,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,cAAc;AAAA,MACZ,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}
|
|
1
|
+
{"version":3,"file":"Section.styles.js","sources":["../../../src/Section/Section.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSection\", {\n root: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n borderRadius: theme.radii.round,\n border: `1px solid ${theme.colors.atmo4}`,\n },\n hidden: { height: 0, display: \"none\" },\n header: {\n display: \"flex\",\n alignItems: \"center\",\n borderColor: \"inherit\",\n position: \"relative\",\n minHeight: theme.sizes.sm,\n padding: theme.space.sm,\n },\n content: {\n padding: theme.space.sm,\n borderRadius: \"inherit\",\n borderColor: \"inherit\",\n },\n hasHeader: {\n paddingTop: 0,\n },\n /** @deprecated use `hasHeader` instead */\n spaceTop: {},\n actions: {\n display: \"flex\",\n gap: theme.space.xs,\n marginLeft: \"auto\",\n },\n raisedHeader: {\n \"& $header\": {\n zIndex: 1,\n borderBottomWidth: 1,\n boxShadow: theme.colors.shadow,\n },\n \"& $content\": {\n paddingTop: theme.space.sm,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,aAAa;AAAA,MACX,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,WAAW,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,cAAc;AAAA,MACZ,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}
|
|
@@ -17,7 +17,6 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
|
|
|
17
17
|
header: {
|
|
18
18
|
// Only apply the border to divide the header and content when both are displayed
|
|
19
19
|
"+ div": {
|
|
20
|
-
borderTop: `1px solid ${theme.colors.atmo3}`,
|
|
21
20
|
borderTopLeftRadius: 0,
|
|
22
21
|
borderTopRightRadius: 0
|
|
23
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSection.styles.js","sources":["../../../src/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../BulkActions\";\nimport { paginationClasses } from \"../Pagination\";\nimport { tableCellClasses } from \"../Table/TableCell\";\nimport { tableContainerClasses } from \"../Table/TableContainer\";\nimport { tableHeaderClasses } from \"../Table/TableHeader\";\nimport { tableRowClasses } from \"../Table/TableRow\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n root: {},\n header: {\n // Only apply the border to divide the header and content when both are displayed\n \"+ div\": {\n
|
|
1
|
+
{"version":3,"file":"TableSection.styles.js","sources":["../../../src/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../BulkActions\";\nimport { paginationClasses } from \"../Pagination\";\nimport { tableCellClasses } from \"../Table/TableCell\";\nimport { tableContainerClasses } from \"../Table/TableContainer\";\nimport { tableHeaderClasses } from \"../Table/TableHeader\";\nimport { tableRowClasses } from \"../Table/TableRow\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n root: {},\n header: {\n // Only apply the border to divide the header and content when both are displayed\n \"+ div\": {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n },\n },\n actions: {},\n content: {\n marginTop: 0,\n padding: 0,\n\n // Apply border radius to the first child if there's not an header\n \"&:first-of-type\": {\n \"& > :first-of-type\": {\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n },\n },\n\n \"& > :last-child\": {\n borderBottomLeftRadius: \"inherit\",\n borderBottomRightRadius: \"inherit\",\n },\n\n [`& .${tableContainerClasses.root}`]: {\n paddingBottom: 0,\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n },\n\n [`& .${tableHeaderClasses.head}`]: {\n backgroundColor: theme.colors.atmo2,\n borderBottomColor: theme.colors.atmo3,\n [`&.${tableHeaderClasses.variantCheckbox}`]: {\n borderRight: \"none\",\n },\n [`&.${tableHeaderClasses.variantActions}`]: {\n borderLeft: \"none\",\n },\n },\n\n // Remove border for the last table row\n [`& .${tableRowClasses.root}`]: {\n \"&:last-child\": {\n [`& .${tableCellClasses.root}`]: { borderBottom: \"none\" },\n },\n },\n\n [`& .${tableCellClasses.root}`]: {\n borderBottomColor: theme.colors.atmo3,\n },\n\n [`& .${tableCellClasses.variantCheckbox}`]: {\n borderRight: \"none\",\n },\n\n [`& .${tableCellClasses.variantActions}`]: {\n borderLeft: \"none\",\n },\n\n [`& .${bulkActionsClasses.root}`]: {\n marginBottom: 0,\n border: \"none\",\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n padding: theme.spacing(\"xs\", \"sm\"),\n },\n\n [`& .${paginationClasses.root}`]: {\n margin: 0,\n backgroundColor: theme.colors.atmo2,\n padding: theme.space.xs,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottomLeftRadius: \"inherit\",\n borderBottomRightRadius: \"inherit\",\n },\n\n [`& .${paginationClasses.pageSizeOptions}`]: {\n left: theme.space.sm,\n },\n [`& .${paginationClasses.pageSizeHeader}`]: {\n border: \"none\",\n \"&:hover\": {\n border: \"none\",\n },\n },\n },\n hidden: {},\n raisedHeader: {\n \"& $content\": {\n paddingTop: 0,\n },\n },\n hasHeader: {},\n /** @deprecated use `hasHeader` instead */\n spaceTop: {},\n});\n"],"names":["tableContainerClasses","tableHeaderClasses","tableRowClasses","tableCellClasses","bulkActionsClasses","paginationClasses"],"mappings":";;;;;;;;;;;;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA;AAAA,IAEN,SAAS;AAAA,MACP,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IAAA;AAAA,EAE1B;AAAA,EACA,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA;AAAA,IAGT,mBAAmB;AAAA,MACjB,sBAAsB;AAAA,QACpB,qBAAqB;AAAA,QACrB,sBAAsB;AAAA,MAAA;AAAA,IAE1B;AAAA,IAEA,mBAAmB;AAAA,MACjB,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,IAEA,CAAC,MAAMA,gBAAsB,IAAI,EAAE,GAAG;AAAA,MACpC,eAAe;AAAA,MACf,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IACxB;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB,MAAM,OAAO;AAAA,MAChC,CAAC,KAAKA,gBAAmB,eAAe,EAAE,GAAG;AAAA,QAC3C,aAAa;AAAA,MACf;AAAA,MACA,CAAC,KAAKA,gBAAmB,cAAc,EAAE,GAAG;AAAA,QAC1C,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA;AAAA,IAGA,CAAC,MAAMC,gBAAgB,IAAI,EAAE,GAAG;AAAA,MAC9B,gBAAgB;AAAA,QACd,CAAC,MAAMC,gBAAiB,IAAI,EAAE,GAAG,EAAE,cAAc,OAAO;AAAA,MAAA;AAAA,IAE5D;AAAA,IAEA,CAAC,MAAMA,gBAAiB,IAAI,EAAE,GAAG;AAAA,MAC/B,mBAAmB,MAAM,OAAO;AAAA,IAClC;AAAA,IAEA,CAAC,MAAMA,gBAAiB,eAAe,EAAE,GAAG;AAAA,MAC1C,aAAa;AAAA,IACf;AAAA,IAEA,CAAC,MAAMA,gBAAiB,cAAc,EAAE,GAAG;AAAA,MACzC,YAAY;AAAA,IACd;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC7C,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACnC;AAAA,IAEA,CAAC,MAAMC,gBAAkB,IAAI,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,IAEA,CAAC,MAAMA,gBAAkB,eAAe,EAAE,GAAG;AAAA,MAC3C,MAAM,MAAM,MAAM;AAAA,IACpB;AAAA,IACA,CAAC,MAAMA,gBAAkB,cAAc,EAAE,GAAG;AAAA,MAC1C,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,cAAc;AAAA,IACZ,cAAc;AAAA,MACZ,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,WAAW,CAAC;AAAA;AAAA,EAEZ,UAAU,CAAA;AACZ,CAAC;"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
const { staticClasses, useClasses } = createClasses("HvTabs", {
|
|
3
3
|
root: {
|
|
4
|
-
minHeight: 0
|
|
5
|
-
overflow: "visible"
|
|
4
|
+
minHeight: 0
|
|
6
5
|
},
|
|
7
6
|
indicator: {},
|
|
8
|
-
scroller: {
|
|
9
|
-
overflow: "visible !important"
|
|
10
|
-
},
|
|
7
|
+
scroller: {},
|
|
11
8
|
flexContainer: {
|
|
12
9
|
marginLeft: "3px"
|
|
13
10
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.js","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n root: {\n minHeight: 0,\n
|
|
1
|
+
{"version":3,"file":"Tabs.styles.js","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n root: {\n minHeight: 0,\n },\n indicator: {},\n scroller: {},\n flexContainer: {\n marginLeft: \"3px\",\n },\n floating: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -795,6 +795,7 @@ export declare const dialogClasses: {
|
|
|
795
795
|
background: string;
|
|
796
796
|
paper: string;
|
|
797
797
|
fullscreen: string;
|
|
798
|
+
fullHeight: string;
|
|
798
799
|
closeButton: string;
|
|
799
800
|
statusBar: string;
|
|
800
801
|
success: string;
|
|
@@ -2899,6 +2900,8 @@ export declare interface HvDialogProps extends Omit<DialogProps, "fullScreen" |
|
|
|
2899
2900
|
maxWidth?: DialogProps["maxWidth"];
|
|
2900
2901
|
/** @inheritdoc */
|
|
2901
2902
|
fullWidth?: DialogProps["fullWidth"];
|
|
2903
|
+
/** If true, the dialog stretches vertically, limited by the margins. @default false */
|
|
2904
|
+
fullHeight?: boolean;
|
|
2902
2905
|
/**
|
|
2903
2906
|
* Element id that should be focus when the Dialog opens.
|
|
2904
2907
|
* Auto-focusing elements can cause usability issues, so this should be avoided.
|
|
@@ -9762,12 +9765,13 @@ declare const useClasses_64: (classesProp?: Partial<Record<"root" | "spacing" |
|
|
|
9762
9765
|
readonly cx: (...args: any) => string;
|
|
9763
9766
|
};
|
|
9764
9767
|
|
|
9765
|
-
declare const useClasses_65: (classesProp?: Partial<Record<"warning" | "background" | "root" | "paper" | "success" | "error" | "fullscreen" | "closeButton" | "statusBar", string>>, addStatic?: boolean) => {
|
|
9768
|
+
declare const useClasses_65: (classesProp?: Partial<Record<"warning" | "background" | "root" | "paper" | "success" | "error" | "fullscreen" | "closeButton" | "fullHeight" | "statusBar", string>>, addStatic?: boolean) => {
|
|
9766
9769
|
readonly classes: {
|
|
9767
9770
|
root: string;
|
|
9768
9771
|
background: string;
|
|
9769
9772
|
paper: string;
|
|
9770
9773
|
fullscreen: string;
|
|
9774
|
+
fullHeight: string;
|
|
9771
9775
|
closeButton: string;
|
|
9772
9776
|
statusBar: string;
|
|
9773
9777
|
success: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.85.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "1ca641bd4077a9cc300706f725d55efc24f6244c",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"types": "./dist/types/index.d.ts",
|