@hitachivantara/uikit-react-core 5.29.0 → 5.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs +35 -42
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/components/Calendar/Calendar.styles.cjs +1 -1
- package/dist/cjs/components/Calendar/Calendar.styles.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.cjs +2 -3
- package/dist/cjs/components/DatePicker/DatePicker.cjs.map +1 -1
- 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/cjs/components/EmptyState/EmptyState.cjs +1 -1
- package/dist/cjs/components/EmptyState/EmptyState.cjs.map +1 -1
- package/dist/cjs/utils/useSavedState.cjs.map +1 -1
- package/dist/esm/components/BaseDropdown/BaseDropdown.js +35 -42
- package/dist/esm/components/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.styles.js +1 -1
- package/dist/esm/components/Calendar/Calendar.styles.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePicker.js +2 -3
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -1
- 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/esm/components/EmptyState/EmptyState.js +1 -1
- package/dist/esm/components/EmptyState/EmptyState.js.map +1 -1
- package/dist/esm/utils/useSavedState.js.map +1 -1
- package/dist/types/index.d.ts +9 -9
- package/package.json +2 -2
|
@@ -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;"}
|
|
@@ -25,7 +25,7 @@ const HvEmptyState = (props) => {
|
|
|
25
25
|
const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
|
|
26
26
|
const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
|
|
27
27
|
const messageOnly = !!(message && !(title || action));
|
|
28
|
-
const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { variant, className: style, children: node });
|
|
28
|
+
const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant, className: style, children: node });
|
|
29
29
|
return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs("div", { className: cx(classes.container, onlyXs && css({
|
|
30
30
|
flexDirection: "column",
|
|
31
31
|
alignItems: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n extends HvBaseProps<HTMLDivElement, \"title\"> {\n /** Icon to be presented. */\n icon: React.ReactNode;\n /** The title to be shown. */\n title?:
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n extends HvBaseProps<HTMLDivElement, \"title\"> {\n /** Icon to be presented. */\n icon: React.ReactNode;\n /** The title to be shown. */\n title?: React.ReactNode;\n /** The message to be shown. */\n message?: React.ReactNode;\n /** The action message to be shown. */\n action?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state component. */\n classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n const {\n action,\n icon,\n title,\n message,\n classes: classesProp,\n className,\n ...others\n } = useDefaultProps(\"HvEmptyState\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n const messageOnly = !!(message && !(title || action));\n\n const renderNode = (\n variant?: HvTypographyProps[\"variant\"],\n node?: React.ReactNode,\n style?: string\n ) =>\n node && (\n <HvTypography component=\"div\" variant={variant} className={style}>\n {node}\n </HvTypography>\n );\n\n return (\n <div className={cx(classes.root, className)} {...others}>\n <div\n className={cx(\n classes.container,\n onlyXs &&\n css({\n flexDirection: \"column\",\n alignItems: \"center\",\n textAlign: \"center\",\n }),\n {\n [classes.containerMessageOnly]: messageOnly,\n },\n onlyXs && messageOnly && css({ flexDirection: \"row\" })\n )}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div\n className={cx(\n classes.textContainer,\n upSm && css({ marginLeft: theme.space.xs })\n )}\n >\n {renderNode(\"title4\", title, classes.titleContainer)}\n {renderNode(\"body\", message, classes.messageContainer)}\n {renderNode(\"body\", action, classes.actionContainer)}\n </div>\n </div>\n </div>\n );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","iconContainer","textContainer","marginLeft","theme","space","xs","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;AAmCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWN,WAAW;AAEnD,QAAMO,WAAWC;AAEjB,QAAMC,SAASC,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEjB,WAAW,EAAED,SAASF;AAE7C,QAAMqB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,QACG,oBAAA,cAAA,EAAa,WAAU,OAAM,SAAkB,WAAWC,OACxDD,UACH,KAAA,CAAA;AAGJ,6BACG,OAAI,EAAA,WAAWd,GAAGL,QAAQqB,MAAMnB,SAAS,GAAG,GAAIC,QAC/C,+BAAC,OACC,EAAA,WAAWE,GACTL,QAAQsB,WACRZ,UACEJ,IAAI;AAAA,IACFiB,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,WAAW;AAAA,EAAA,CACZ,GACH;AAAA,IACE,CAACzB,QAAQ0B,oBAAoB,GAAGV;AAAAA,EAAAA,GAElCN,UAAUM,eAAeV,IAAI;AAAA,IAAEiB,eAAe;AAAA,EAAA,CAAO,CACvD,GAEA,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAWvB,QAAQ2B,eAAgB9B,UAAK,MAAA;AAAA,yBAC5C,OACC,EAAA,WAAWQ,GACTL,QAAQ4B,eACRd,QAAQR,IAAI;AAAA,MAAEuB,YAAYC,MAAMC,MAAMC;AAAAA,IAAAA,CAAI,CAC5C,GAECf,UAAAA;AAAAA,MAAW,WAAA,UAAUnB,OAAOE,QAAQiC,cAAc;AAAA,MAClDhB,WAAW,QAAQlB,SAASC,QAAQkC,gBAAgB;AAAA,MACpDjB,WAAW,QAAQrB,QAAQI,QAAQmC,eAAe;AAAA,IAAA,GACrD;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSavedState.js","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(
|
|
1
|
+
{"version":3,"file":"useSavedState.js","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: T) {\n const [initialState] = useState<T>(defaultState);\n\n const [state, setState] = useState<T | undefined>(initialState);\n const [submittedState, setSubmittedState] = useState<T | undefined>(\n initialState\n );\n\n const changeState = useCallback((value?: T, save = false) => {\n setState(value);\n if (save) setSubmittedState(value);\n }, []);\n\n const rollback = () => {\n setState(submittedState);\n };\n\n return [state, changeState, rollback, submittedState, initialState] as const;\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";AAEO,SAASA,cAAiBC,cAAiB;AAChD,QAAM,CAACC,YAAY,IAAIC,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,SAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,SAC1CD,YACF;AAEA,QAAMM,cAAcC,YAAY,CAACC,OAAWC,OAAO,UAAU;AAC3DN,aAASK,KAAK;AACVC,QAAAA;AAAMJ,wBAAkBG,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAME,WAAWA,MAAM;AACrBP,aAASC,cAAc;AAAA,EAAA;AAGzB,SAAO,CAACF,OAAOI,aAAaI,UAAUN,gBAAgBJ,YAAY;AACpE;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1468,7 +1468,7 @@ export declare interface HvBaseDropdownProps extends HvBaseProps<HTMLDivElement,
|
|
|
1468
1468
|
/**
|
|
1469
1469
|
* Header placeholder.
|
|
1470
1470
|
*/
|
|
1471
|
-
placeholder?:
|
|
1471
|
+
placeholder?: React_2.ReactNode;
|
|
1472
1472
|
/**
|
|
1473
1473
|
* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.
|
|
1474
1474
|
*/
|
|
@@ -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. */
|
|
@@ -3258,11 +3258,11 @@ export declare interface HvEmptyStateProps extends HvBaseProps<HTMLDivElement, "
|
|
|
3258
3258
|
/** Icon to be presented. */
|
|
3259
3259
|
icon: React_2.ReactNode;
|
|
3260
3260
|
/** The title to be shown. */
|
|
3261
|
-
title?:
|
|
3261
|
+
title?: React_2.ReactNode;
|
|
3262
3262
|
/** The message to be shown. */
|
|
3263
|
-
message?:
|
|
3263
|
+
message?: React_2.ReactNode;
|
|
3264
3264
|
/** The action message to be shown. */
|
|
3265
|
-
action?:
|
|
3265
|
+
action?: React_2.ReactNode;
|
|
3266
3266
|
/** A Jss Object used to override or extend the styles applied to the empty state component. */
|
|
3267
3267
|
classes?: HvEmptyStateClasses;
|
|
3268
3268
|
}
|
|
@@ -10188,7 +10188,7 @@ export declare type UseRowSelectionProps = (<D extends object = Record<string, u
|
|
|
10188
10188
|
pluginName: string;
|
|
10189
10189
|
};
|
|
10190
10190
|
|
|
10191
|
-
export declare function useSavedState<T>(defaultState: T): [T | undefined, (
|
|
10191
|
+
export declare function useSavedState<T>(defaultState: T): readonly [T | undefined, (value?: T, save?: boolean) => void, () => void, T | undefined, T];
|
|
10192
10192
|
|
|
10193
10193
|
export declare const useScrollTo: (selectedIndexProp?: number, scrollElementId?: string | undefined, href?: boolean, offset?: number, options?: HvScrollToVerticalOption[], onChange?: ((event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void) | undefined, direction?: "column" | "row") => [number, (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, id: string, index: number, wrappedOnChange?: ((index: number) => void) | undefined) => void];
|
|
10194
10194
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.30.1",
|
|
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": "8b5664fad80cff7282a5a83b5e5b446687896637",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|