@hitachivantara/uikit-react-core 5.29.0 → 5.30.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/components/Dialog/Actions/Actions.cjs +4 -1
- package/dist/cjs/components/Dialog/Actions/Actions.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +12 -20
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Title/Title.cjs +5 -8
- package/dist/cjs/components/Dialog/Title/Title.cjs.map +1 -1
- package/dist/cjs/components/Dialog/context.cjs +10 -0
- package/dist/cjs/components/Dialog/context.cjs.map +1 -0
- package/dist/esm/components/Dialog/Actions/Actions.js +4 -1
- package/dist/esm/components/Dialog/Actions/Actions.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +14 -20
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Title/Title.js +5 -8
- package/dist/esm/components/Dialog/Title/Title.js.map +1 -1
- package/dist/esm/components/Dialog/context.js +10 -0
- package/dist/esm/components/Dialog/context.js.map +1 -0
- package/dist/types/index.d.ts +4 -4
- package/package.json +2 -2
|
@@ -4,6 +4,7 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
4
4
|
const MuiDialogActions = require("@mui/material/DialogActions");
|
|
5
5
|
const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
|
|
6
6
|
const Actions_styles = require("./Actions.styles.cjs");
|
|
7
|
+
const context = require("../context.cjs");
|
|
7
8
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
8
9
|
const MuiDialogActions__default = /* @__PURE__ */ _interopDefault(MuiDialogActions);
|
|
9
10
|
const HvDialogActions = (props) => {
|
|
@@ -11,9 +12,11 @@ const HvDialogActions = (props) => {
|
|
|
11
12
|
classes: classesProp,
|
|
12
13
|
className,
|
|
13
14
|
children,
|
|
14
|
-
fullscreen
|
|
15
|
+
fullscreen: fullScreenProp,
|
|
15
16
|
...others
|
|
16
17
|
} = useDefaultProps.useDefaultProps("HvDialogActions", props);
|
|
18
|
+
const context$1 = context.useDialogContext();
|
|
19
|
+
const fullscreen = fullScreenProp ?? context$1.fullscreen;
|
|
17
20
|
const {
|
|
18
21
|
classes,
|
|
19
22
|
cx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 HvBaseProps {\n /** Set the dialog to fullscreen mode. */\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
|
|
1
|
+
{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\">,\n HvBaseProps {\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":["HvDialogActions","props","classes","classesProp","className","children","fullscreen","fullScreenProp","others","useDefaultProps","context","useDialogContext","cx","useClasses","jsx","MuiDialogActions","root","spacing"],"mappings":";;;;;;;;;AAwBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAYC;AAAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBR,KAAK;AAC5C,QAAMS,YAAUC,QAAAA;AACVL,QAAAA,aAAaC,kBAAkBG,UAAQJ;AAEvC,QAAA;AAAA,IAAEJ;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,eAAAA,WAAWV,WAAW;AAG5C,SAAAW,+BAACC,0BAAAA,SACC,EAAA,WACA,SAAS;AAAA,IACPC,MAAMJ,GAAGV,QAAQc,MAAM;AAAA,MAAE,CAACd,QAAQI,UAAU,GAAGA;AAAAA,IAAAA,CAAY;AAAA,IAC3DW,SAASf,QAAQe;AAAAA,EAAAA,GAEfT,GAAAA,QAEHH,SACH,CAAA;AAEJ;;;"}
|
|
@@ -4,19 +4,17 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
|
|
6
6
|
const MuiDialog = require("@mui/material/Dialog");
|
|
7
|
-
const MuiBackdrop = require("@mui/material/Backdrop");
|
|
8
7
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
9
8
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
10
9
|
const setId = require("../../utils/setId.cjs");
|
|
11
|
-
const withTooltip = require("../../hocs/withTooltip.cjs");
|
|
12
10
|
const useTheme = require("../../hooks/useTheme.cjs");
|
|
13
11
|
const hexToRgbA = require("../../utils/hexToRgbA.cjs");
|
|
14
12
|
const Dialog_styles = require("./Dialog.styles.cjs");
|
|
13
|
+
const context = require("./context.cjs");
|
|
14
|
+
const Tooltip = require("../Tooltip/Tooltip.cjs");
|
|
15
15
|
const Button = require("../Button/Button.cjs");
|
|
16
16
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
17
|
-
const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
18
17
|
const MuiDialog__default = /* @__PURE__ */ _interopDefault(MuiDialog);
|
|
19
|
-
const MuiBackdrop__default = /* @__PURE__ */ _interopDefault(MuiBackdrop);
|
|
20
18
|
const HvDialog = (props) => {
|
|
21
19
|
const {
|
|
22
20
|
variant,
|
|
@@ -37,27 +35,19 @@ const HvDialog = (props) => {
|
|
|
37
35
|
css,
|
|
38
36
|
cx
|
|
39
37
|
} = Dialog_styles.useClasses(classesProp);
|
|
40
|
-
delete others.fullScreen;
|
|
41
38
|
const {
|
|
42
39
|
rootId,
|
|
43
40
|
colors
|
|
44
41
|
} = useTheme.useTheme();
|
|
45
|
-
const wrappedClose = React.useCallback((event, bypassValidation = false, reason) => {
|
|
46
|
-
if (bypassValidation || !disableBackdropClick) {
|
|
47
|
-
onClose == null ? void 0 : onClose(event, reason);
|
|
48
|
-
}
|
|
49
|
-
}, [onClose, disableBackdropClick]);
|
|
50
42
|
const measuredRef = React.useCallback(() => {
|
|
51
43
|
if (!firstFocusable)
|
|
52
44
|
return;
|
|
53
45
|
const element = document.getElementById(firstFocusable);
|
|
54
46
|
element == null ? void 0 : element.focus();
|
|
55
47
|
}, [firstFocusable]);
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
backdrop: (backdropProps) => /* @__PURE__ */ jsxRuntime.jsx(MuiBackdrop__default.default, { open, onClick: wrappedClose, ...backdropProps })
|
|
60
|
-
}), [open, wrappedClose]);
|
|
48
|
+
const contextValue = React.useMemo(() => ({
|
|
49
|
+
fullscreen
|
|
50
|
+
}), [fullscreen]);
|
|
61
51
|
return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, { container: typeof window !== "undefined" ? (
|
|
62
52
|
// TODO: review
|
|
63
53
|
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
|
|
@@ -66,7 +56,11 @@ const HvDialog = (props) => {
|
|
|
66
56
|
container: css({
|
|
67
57
|
position: "relative"
|
|
68
58
|
})
|
|
69
|
-
}, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) =>
|
|
59
|
+
}, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => {
|
|
60
|
+
if (disableBackdropClick)
|
|
61
|
+
return;
|
|
62
|
+
onClose == null ? void 0 : onClose(event, reason);
|
|
63
|
+
}, slotProps: {
|
|
70
64
|
backdrop: {
|
|
71
65
|
classes: {
|
|
72
66
|
root: cx(css({
|
|
@@ -83,10 +77,8 @@ const HvDialog = (props) => {
|
|
|
83
77
|
})
|
|
84
78
|
}
|
|
85
79
|
}, "aria-modal": true, ...others, children: [
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) =>
|
|
87
|
-
|
|
88
|
-
fullscreen
|
|
89
|
-
})) : children
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => onClose == null ? void 0 : onClose(event, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" }) }) }),
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsx(context.DialogContext.Provider, { value: contextValue, children })
|
|
90
82
|
] });
|
|
91
83
|
};
|
|
92
84
|
exports.dialogClasses = Dialog_styles.staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Current state of the Dialog. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. */\n onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => 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,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId, colors } = 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={\n typeof window !== \"undefined\"\n ? // TODO: review\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n document.getElementById(rootId || \"\") || document.body\n : undefined\n }\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\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: cx(\n css({\n background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n }),\n classes.background\n ),\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n }\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <HvTooltip placement=\"top\" title={buttonTitle}>\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close role=\"none\" />\n </HvButton>\n </HvTooltip>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","jsxs","MuiDialog","window","body","undefined","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","jsx","HvTooltip","HvButton","setId","closeButton","Close","DialogContext"],"mappings":";;;;;;;;;;;;;;;;;AAwDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS,SAAA;AAE9BC,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,uCAASG;AAAAA,EAAM,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,MAAAA,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACGkB,2BAAA,KAAAC,mBAAA,SAAA,EACC,WACE,OAAOC,WAAW;AAAA;AAAA;AAAA,IAGdP,SAASC,eAAeP,UAAU,EAAE,KAAKM,SAASQ;AAAAA,MAClDC,QAEN,WAAWjB,GAAGd,QAAQgC,MAAM9B,SAAS,GACrC,SAAS;AAAA,IAAE+B,WAAWpB,IAAI;AAAA,MAAEqB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKf,aACL,MACA,YAAYV,YACZ,SAAS,CAAC0B,OAAOC,WAAW;AAGtB1B,QAAAA;AAAsB;AAE1BJ,uCAAU6B,OAAOC;AAAAA,KAEnB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRrC,SAAS;AAAA,QACPgC,MAAMlB,GACJD,IAAI;AAAA,UACFyB,YAAYC,UAAUtB,WAAAA,iCAAQuB,UAASC,YAAAA,MAAMxB,OAAOuB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDxC,QAAQsC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVtC,SAAS;AAAA,MACPgC,MAAMlB,GACJD,IAAI;AAAA,QAAEqB,UAAU;AAAA,MAAA,CAAY,GAC5BlC,QAAQ0C,OACR3C,WAAWe,GAAGd,QAAQ2C,WAAW3C,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAAiC,2BAAA,IAACC,QAAU,WAAA,EAAA,WAAU,OAAM,OAAOrC,aAChC,UAAAoC,2BAAA,IAACE,OACC,UAAA,EAAA,IAAIC,MAAM5C,MAAAA,IAAI,OAAO,GACrB,WAAWH,QAAQgD,aACnB,SAAQ,kBACR,SAAUb,CAAU7B,UAAAA,mCAAU6B,OAAOJ,SAErC,UAAAa,2BAAAA,IAACK,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,mCACCC,QAAc,cAAA,UAAd,EAAuB,OAAOzB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
|
|
@@ -5,6 +5,7 @@ const MuiDialogTitle = require("@mui/material/DialogTitle");
|
|
|
5
5
|
const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
|
|
6
6
|
const iconVariant = require("../../../utils/iconVariant.cjs");
|
|
7
7
|
const Title_styles = require("./Title.styles.cjs");
|
|
8
|
+
const context = require("../context.cjs");
|
|
8
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);
|
|
@@ -23,11 +24,10 @@ const HvDialogTitle = (props) => {
|
|
|
23
24
|
css,
|
|
24
25
|
cx
|
|
25
26
|
} = Title_styles.useClasses(classesProp);
|
|
26
|
-
const isString = typeof children === "string";
|
|
27
27
|
const {
|
|
28
28
|
fullscreen
|
|
29
|
-
} =
|
|
30
|
-
|
|
29
|
+
} = context.useDialogContext();
|
|
30
|
+
const isString = typeof children === "string";
|
|
31
31
|
const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
|
|
32
32
|
return /* @__PURE__ */ jsxRuntime.jsx(MuiDialogTitle__default.default, { className: cx(!fullscreen && css({
|
|
33
33
|
flex: 1
|
|
@@ -35,12 +35,9 @@ const HvDialogTitle = (props) => {
|
|
|
35
35
|
[classes.fullscreen]: fullscreen
|
|
36
36
|
}, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
|
|
37
37
|
icon,
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({
|
|
39
39
|
[classes.textWithIcon]: !!icon
|
|
40
|
-
}), children:
|
|
41
|
-
!isString && children,
|
|
42
|
-
isString && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children })
|
|
43
|
-
] })
|
|
40
|
+
}), children: !isString ? children : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children }) })
|
|
44
41
|
] }) });
|
|
45
42
|
};
|
|
46
43
|
exports.dialogTitleClasses = Title_styles.staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport {
|
|
1
|
+
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\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 = null,\n ...others\n } = useDefaultProps(\"HvDialogTitle\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { fullscreen } = useDialogContext();\n\n const isString = typeof children === \"string\";\n\n const icon = customIcon || (showIcon && iconVariant(variant));\n\n return (\n <MuiDialogTitle\n className={cx(\n !fullscreen && css({ flex: 1 }),\n classes.root,\n {\n [classes.fullscreen]: fullscreen,\n },\n className\n )}\n {...others}\n >\n <div className={classes.messageContainer}>\n {icon}\n <div className={cx({ [classes.textWithIcon]: !!icon })}>\n {!isString ? (\n children\n ) : (\n <HvTypography variant=\"title4\" className={classes.titleText}>\n {children}\n </HvTypography>\n )}\n </div>\n </div>\n </MuiDialogTitle>\n );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","fullscreen","useDialogContext","isString","icon","iconVariant","MuiDialogTitle","flex","root","jsxs","messageContainer","jsx","textWithIcon","HvTypography","titleText"],"mappings":";;;;;;;;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,MAAeC,QAAiB,iBAAA;AAElCC,QAAAA,WAAW,OAAOX,aAAa;AAErC,QAAMY,OAAOT,cAAeD,YAAYW,YAAAA,YAAYZ,OAAO;AAE3D,wCACGa,wBAAAA,SACC,EAAA,WAAWP,GACT,CAACE,cAAcH,IAAI;AAAA,IAAES,MAAM;AAAA,EAAA,CAAG,GAC9BlB,QAAQmB,MACR;AAAA,IACE,CAACnB,QAAQY,UAAU,GAAGA;AAAAA,EACxB,GACAV,SACF,GACA,GAAIK,QAEJ,UAACa,2BAAAA,KAAA,OAAA,EAAI,WAAWpB,QAAQqB,kBACrBN,UAAAA;AAAAA,IAAAA;AAAAA,IACDO,2BAAAA,IAAC,OAAI,EAAA,WAAWZ,GAAG;AAAA,MAAE,CAACV,QAAQuB,YAAY,GAAG,CAAC,CAACR;AAAAA,IAAAA,CAAM,GAClD,UAACD,CAAAA,WACAX,WAEAmB,2BAAAA,IAACE,WAAAA,cAAa,EAAA,SAAQ,UAAS,WAAWxB,QAAQyB,WAC/CtB,UACH,EAEJ,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const DialogContext = React.createContext({
|
|
5
|
+
fullscreen: false
|
|
6
|
+
});
|
|
7
|
+
const useDialogContext = () => React.useContext(DialogContext);
|
|
8
|
+
exports.DialogContext = DialogContext;
|
|
9
|
+
exports.useDialogContext = useDialogContext;
|
|
10
|
+
//# sourceMappingURL=context.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.cjs","sources":["../../../../src/components/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":["DialogContext","createContext","fullscreen","useDialogContext","useContext"],"mappings":";;;AAEO,MAAMA,gBAAgBC,MAAAA,cAAc;AAAA,EAAEC,YAAY;AAAM,CAAC;AAEnDC,MAAAA,mBAAmBA,MAAMC,MAAAA,WAAWJ,aAAa;;;"}
|
|
@@ -3,14 +3,17 @@ import MuiDialogActions from "@mui/material/DialogActions";
|
|
|
3
3
|
import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
|
|
4
4
|
import { useClasses } from "./Actions.styles.js";
|
|
5
5
|
import { staticClasses } from "./Actions.styles.js";
|
|
6
|
+
import { useDialogContext } from "../context.js";
|
|
6
7
|
const HvDialogActions = (props) => {
|
|
7
8
|
const {
|
|
8
9
|
classes: classesProp,
|
|
9
10
|
className,
|
|
10
11
|
children,
|
|
11
|
-
fullscreen
|
|
12
|
+
fullscreen: fullScreenProp,
|
|
12
13
|
...others
|
|
13
14
|
} = useDefaultProps("HvDialogActions", props);
|
|
15
|
+
const context = useDialogContext();
|
|
16
|
+
const fullscreen = fullScreenProp ?? context.fullscreen;
|
|
14
17
|
const {
|
|
15
18
|
classes,
|
|
16
19
|
cx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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 HvBaseProps {\n /** Set the dialog to fullscreen mode. */\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
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\">,\n HvBaseProps {\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":["HvDialogActions","props","classes","classesProp","className","children","fullscreen","fullScreenProp","others","useDefaultProps","context","useDialogContext","cx","useClasses","root","spacing"],"mappings":";;;;;;AAwBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAYC;AAAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAC5C,QAAMS,UAAUC;AACVL,QAAAA,aAAaC,kBAAkBG,QAAQJ;AAEvC,QAAA;AAAA,IAAEJ;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAG5C,SAAA,oBAAC,kBACC,EAAA,WACA,SAAS;AAAA,IACPW,MAAMF,GAAGV,QAAQY,MAAM;AAAA,MAAE,CAACZ,QAAQI,UAAU,GAAGA;AAAAA,IAAAA,CAAY;AAAA,IAC3DS,SAASb,QAAQa;AAAAA,EAAAA,GAEfP,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo } from "react";
|
|
3
3
|
import { useDefaultProps } from "../../hooks/useDefaultProps.js";
|
|
4
4
|
import MuiDialog from "@mui/material/Dialog";
|
|
5
|
-
import MuiBackdrop from "@mui/material/Backdrop";
|
|
6
5
|
import { Close } from "@hitachivantara/uikit-react-icons";
|
|
7
6
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
8
7
|
import { setId } from "../../utils/setId.js";
|
|
9
|
-
import { withTooltip } from "../../hocs/withTooltip.js";
|
|
10
8
|
import { useTheme } from "../../hooks/useTheme.js";
|
|
11
9
|
import { hexToRgbA } from "../../utils/hexToRgbA.js";
|
|
12
10
|
import { useClasses } from "./Dialog.styles.js";
|
|
13
11
|
import { staticClasses } from "./Dialog.styles.js";
|
|
12
|
+
import { DialogContext } from "./context.js";
|
|
13
|
+
import { HvTooltip } from "../Tooltip/Tooltip.js";
|
|
14
14
|
import { HvButton } from "../Button/Button.js";
|
|
15
15
|
const HvDialog = (props) => {
|
|
16
16
|
const {
|
|
@@ -32,27 +32,19 @@ const HvDialog = (props) => {
|
|
|
32
32
|
css,
|
|
33
33
|
cx
|
|
34
34
|
} = useClasses(classesProp);
|
|
35
|
-
delete others.fullScreen;
|
|
36
35
|
const {
|
|
37
36
|
rootId,
|
|
38
37
|
colors
|
|
39
38
|
} = useTheme();
|
|
40
|
-
const wrappedClose = useCallback((event, bypassValidation = false, reason) => {
|
|
41
|
-
if (bypassValidation || !disableBackdropClick) {
|
|
42
|
-
onClose == null ? void 0 : onClose(event, reason);
|
|
43
|
-
}
|
|
44
|
-
}, [onClose, disableBackdropClick]);
|
|
45
39
|
const measuredRef = useCallback(() => {
|
|
46
40
|
if (!firstFocusable)
|
|
47
41
|
return;
|
|
48
42
|
const element = document.getElementById(firstFocusable);
|
|
49
43
|
element == null ? void 0 : element.focus();
|
|
50
44
|
}, [firstFocusable]);
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
backdrop: (backdropProps) => /* @__PURE__ */ jsx(MuiBackdrop, { open, onClick: wrappedClose, ...backdropProps })
|
|
55
|
-
}), [open, wrappedClose]);
|
|
45
|
+
const contextValue = useMemo(() => ({
|
|
46
|
+
fullscreen
|
|
47
|
+
}), [fullscreen]);
|
|
56
48
|
return /* @__PURE__ */ jsxs(MuiDialog, { container: typeof window !== "undefined" ? (
|
|
57
49
|
// TODO: review
|
|
58
50
|
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
|
|
@@ -61,7 +53,11 @@ const HvDialog = (props) => {
|
|
|
61
53
|
container: css({
|
|
62
54
|
position: "relative"
|
|
63
55
|
})
|
|
64
|
-
}, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) =>
|
|
56
|
+
}, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => {
|
|
57
|
+
if (disableBackdropClick)
|
|
58
|
+
return;
|
|
59
|
+
onClose == null ? void 0 : onClose(event, reason);
|
|
60
|
+
}, slotProps: {
|
|
65
61
|
backdrop: {
|
|
66
62
|
classes: {
|
|
67
63
|
root: cx(css({
|
|
@@ -78,10 +74,8 @@ const HvDialog = (props) => {
|
|
|
78
74
|
})
|
|
79
75
|
}
|
|
80
76
|
}, "aria-modal": true, ...others, children: [
|
|
81
|
-
/* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) =>
|
|
82
|
-
|
|
83
|
-
fullscreen
|
|
84
|
-
})) : children
|
|
77
|
+
/* @__PURE__ */ jsx(HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => onClose == null ? void 0 : onClose(event, void 0), children: /* @__PURE__ */ jsx(Close, { role: "none" }) }) }),
|
|
78
|
+
/* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children })
|
|
85
79
|
] });
|
|
86
80
|
};
|
|
87
81
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Current state of the Dialog. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. */\n onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => 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,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId, colors } = 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={\n typeof window !== \"undefined\"\n ? // TODO: review\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n document.getElementById(rootId || \"\") || document.body\n : undefined\n }\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\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: cx(\n css({\n background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n }),\n classes.background\n ),\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n }\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <HvTooltip placement=\"top\" title={buttonTitle}>\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close role=\"none\" />\n </HvButton>\n </HvTooltip>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","window","body","undefined","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton"],"mappings":";;;;;;;;;;;;;;AAwDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS;AAE9BC,QAAAA,cAAcC,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,uCAASG;AAAAA,EAAM,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACG,qBAAA,WAAA,EACC,WACE,OAAOkB,WAAW;AAAA;AAAA;AAAA,IAGdL,SAASC,eAAeP,UAAU,EAAE,KAAKM,SAASM;AAAAA,MAClDC,QAEN,WAAWf,GAAGd,QAAQ8B,MAAM5B,SAAS,GACrC,SAAS;AAAA,IAAE6B,WAAWlB,IAAI;AAAA,MAAEmB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKb,aACL,MACA,YAAYV,YACZ,SAAS,CAACwB,OAAOC,WAAW;AAGtBxB,QAAAA;AAAsB;AAE1BJ,uCAAU2B,OAAOC;AAAAA,KAEnB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRnC,SAAS;AAAA,QACP8B,MAAMhB,GACJD,IAAI;AAAA,UACFuB,YAAYC,WAAUpB,iCAAQqB,UAASC,MAAMtB,OAAOqB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDtC,QAAQoC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVpC,SAAS;AAAA,MACP8B,MAAMhB,GACJD,IAAI;AAAA,QAAEmB,UAAU;AAAA,MAAA,CAAY,GAC5BhC,QAAQwC,OACRzC,WAAWe,GAAGd,QAAQyC,WAAWzC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAOH,aAChC,UAAA,oBAAC,UACC,EAAA,IAAIkC,MAAMvC,IAAI,OAAO,GACrB,WAAWH,QAAQ2C,aACnB,SAAQ,kBACR,SAAUV,CAAU3B,UAAAA,mCAAU2B,OAAOJ,SAErC,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,wBACC,cAAc,UAAd,EAAuB,OAAOJ,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -4,6 +4,7 @@ import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
|
|
|
4
4
|
import { iconVariant } from "../../../utils/iconVariant.js";
|
|
5
5
|
import { useClasses } from "./Title.styles.js";
|
|
6
6
|
import { staticClasses } from "./Title.styles.js";
|
|
7
|
+
import { useDialogContext } from "../context.js";
|
|
7
8
|
import { HvTypography } from "../../Typography/Typography.js";
|
|
8
9
|
const HvDialogTitle = (props) => {
|
|
9
10
|
const {
|
|
@@ -20,11 +21,10 @@ const HvDialogTitle = (props) => {
|
|
|
20
21
|
css,
|
|
21
22
|
cx
|
|
22
23
|
} = useClasses(classesProp);
|
|
23
|
-
const isString = typeof children === "string";
|
|
24
24
|
const {
|
|
25
25
|
fullscreen
|
|
26
|
-
} =
|
|
27
|
-
|
|
26
|
+
} = useDialogContext();
|
|
27
|
+
const isString = typeof children === "string";
|
|
28
28
|
const icon = customIcon || showIcon && iconVariant(variant);
|
|
29
29
|
return /* @__PURE__ */ jsx(MuiDialogTitle, { className: cx(!fullscreen && css({
|
|
30
30
|
flex: 1
|
|
@@ -32,12 +32,9 @@ const HvDialogTitle = (props) => {
|
|
|
32
32
|
[classes.fullscreen]: fullscreen
|
|
33
33
|
}, className), ...others, children: /* @__PURE__ */ jsxs("div", { className: classes.messageContainer, children: [
|
|
34
34
|
icon,
|
|
35
|
-
/* @__PURE__ */
|
|
35
|
+
/* @__PURE__ */ jsx("div", { className: cx({
|
|
36
36
|
[classes.textWithIcon]: !!icon
|
|
37
|
-
}), children:
|
|
38
|
-
!isString && children,
|
|
39
|
-
isString && /* @__PURE__ */ jsx(HvTypography, { variant: "title4", className: classes.titleText, children })
|
|
40
|
-
] })
|
|
37
|
+
}), children: !isString ? children : /* @__PURE__ */ jsx(HvTypography, { variant: "title4", className: classes.titleText, children }) })
|
|
41
38
|
] }) });
|
|
42
39
|
};
|
|
43
40
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport {
|
|
1
|
+
{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\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 = null,\n ...others\n } = useDefaultProps(\"HvDialogTitle\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { fullscreen } = useDialogContext();\n\n const isString = typeof children === \"string\";\n\n const icon = customIcon || (showIcon && iconVariant(variant));\n\n return (\n <MuiDialogTitle\n className={cx(\n !fullscreen && css({ flex: 1 }),\n classes.root,\n {\n [classes.fullscreen]: fullscreen,\n },\n className\n )}\n {...others}\n >\n <div className={classes.messageContainer}>\n {icon}\n <div className={cx({ [classes.textWithIcon]: !!icon })}>\n {!isString ? (\n children\n ) : (\n <HvTypography variant=\"title4\" className={classes.titleText}>\n {children}\n </HvTypography>\n )}\n </div>\n </div>\n </MuiDialogTitle>\n );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","fullscreen","useDialogContext","isString","icon","iconVariant","flex","root","messageContainer","textWithIcon","titleText"],"mappings":";;;;;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,MAAeC,iBAAiB;AAElCC,QAAAA,WAAW,OAAOX,aAAa;AAErC,QAAMY,OAAOT,cAAeD,YAAYW,YAAYZ,OAAO;AAE3D,6BACG,gBACC,EAAA,WAAWM,GACT,CAACE,cAAcH,IAAI;AAAA,IAAEQ,MAAM;AAAA,EAAA,CAAG,GAC9BjB,QAAQkB,MACR;AAAA,IACE,CAAClB,QAAQY,UAAU,GAAGA;AAAAA,EACxB,GACAV,SACF,GACA,GAAIK,QAEJ,UAAC,qBAAA,OAAA,EAAI,WAAWP,QAAQmB,kBACrBJ,UAAAA;AAAAA,IAAAA;AAAAA,IACD,oBAAC,OAAI,EAAA,WAAWL,GAAG;AAAA,MAAE,CAACV,QAAQoB,YAAY,GAAG,CAAC,CAACL;AAAAA,IAAAA,CAAM,GAClD,UAACD,CAAAA,WACAX,WAEA,oBAAC,cAAa,EAAA,SAAQ,UAAS,WAAWH,QAAQqB,WAC/ClB,UACH,EAEJ,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
const DialogContext = createContext({
|
|
3
|
+
fullscreen: false
|
|
4
|
+
});
|
|
5
|
+
const useDialogContext = () => useContext(DialogContext);
|
|
6
|
+
export {
|
|
7
|
+
DialogContext,
|
|
8
|
+
useDialogContext
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../../../src/components/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":["DialogContext","createContext","fullscreen","useDialogContext","useContext"],"mappings":";AAEO,MAAMA,gBAAgBC,cAAc;AAAA,EAAEC,YAAY;AAAM,CAAC;AAEnDC,MAAAA,mBAAmBA,MAAMC,WAAWJ,aAAa;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -2721,7 +2721,7 @@ export declare type HvDialogActionClasses = ExtractNames<typeof useClasses_27>;
|
|
|
2721
2721
|
export declare const HvDialogActions: (props: HvDialogActionsProps) => JSX_2.Element;
|
|
2722
2722
|
|
|
2723
2723
|
export declare interface HvDialogActionsProps extends Omit<DialogActionsProps, "classes">, HvBaseProps {
|
|
2724
|
-
/** Set the dialog to fullscreen mode. */
|
|
2724
|
+
/** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */
|
|
2725
2725
|
fullscreen?: boolean;
|
|
2726
2726
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
2727
2727
|
classes?: HvDialogActionClasses;
|
|
@@ -2743,8 +2743,8 @@ export declare interface HvDialogContentProps extends Omit<DialogContentProps, "
|
|
|
2743
2743
|
export declare interface HvDialogProps extends Omit<DialogProps, "fullScreen" | "classes" | "open">, HvBaseProps {
|
|
2744
2744
|
/** Current state of the Dialog. */
|
|
2745
2745
|
open?: boolean;
|
|
2746
|
-
/**
|
|
2747
|
-
onClose?: (event:
|
|
2746
|
+
/** Callback fired when the component requests to be closed. */
|
|
2747
|
+
onClose?: (event: any, reason?: "escapeKeyDown" | "backdropClick") => void;
|
|
2748
2748
|
/** @inheritdoc */
|
|
2749
2749
|
maxWidth?: DialogProps["maxWidth"];
|
|
2750
2750
|
/** @inheritdoc */
|
|
@@ -2775,7 +2775,7 @@ export declare const HvDialogTitle: (props: HvDialogTitleProps) => JSX_2.Element
|
|
|
2775
2775
|
|
|
2776
2776
|
export declare type HvDialogTitleClasses = ExtractNames<typeof useClasses_25>;
|
|
2777
2777
|
|
|
2778
|
-
export declare interface HvDialogTitleProps extends Omit<DialogTitleProps, "variant" | "classes"
|
|
2778
|
+
export declare interface HvDialogTitleProps extends Omit<DialogTitleProps, "variant" | "classes"> {
|
|
2779
2779
|
/** Variant of the dialog title. */
|
|
2780
2780
|
variant?: HvDialogTitleVariant;
|
|
2781
2781
|
/** Controls if the associated icon to the variant should be shown. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.30.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "5aea431bfac59583ef2aa50bb946ba9d7be6a6ba",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|