@hitachivantara/uikit-react-core 5.18.3 → 5.18.4
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/Snackbar/Snackbar.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.cjs +12 -8
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.cjs.map +1 -1
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs +10 -1
- package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs.map +1 -1
- package/dist/esm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.js +12 -8
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.js.map +1 -1
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.js +10 -1
- package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.js.map +1 -1
- package/dist/types/index.d.ts +2 -2
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import Slide from \"@mui/material/Slide\";\nimport {\n SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\nimport { Snackbar as MuiSnackbar } from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport capitalize from \"lodash/capitalize\";\nimport { SyntheticEvent } from \"react\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { HvActionGeneric } from \"@core/components\";\nimport {\n HvSnackbarContentProps,\n HvSnackbarContent,\n} from \"./SnackbarContentWrapper\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvSnackbarVariant = \"default\" | \"success\" | \"warning\" | \"error\";\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" | \"classes\">,\n Omit<HvBaseProps, \"children\"> {\n /** If true, Snackbar is open. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n onClose?:\n | ((\n event: Event | SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason\n ) => void)\n | undefined;\n /** The message to display. */\n label?: React.ReactNode;\n /** The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\",\"center\",\"right. It defines where the snackbar will end his animation */\n anchorOrigin?: SnackbarOrigin;\n /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n autoHideDuration?: number;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n /** Custom offset from top/bottom of the page, in px. */\n offset?: number;\n /** Others applied to the content of the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?:
|
|
1
|
+
{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import Slide from \"@mui/material/Slide\";\nimport {\n SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\nimport { Snackbar as MuiSnackbar } from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport capitalize from \"lodash/capitalize\";\nimport { SyntheticEvent } from \"react\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { HvActionGeneric } from \"@core/components\";\nimport {\n HvSnackbarContentProps,\n HvSnackbarContent,\n} from \"./SnackbarContentWrapper\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvSnackbarVariant = \"default\" | \"success\" | \"warning\" | \"error\";\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" | \"classes\">,\n Omit<HvBaseProps, \"children\"> {\n /** If true, Snackbar is open. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n onClose?:\n | ((\n event: Event | SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason\n ) => void)\n | undefined;\n /** The message to display. */\n label?: React.ReactNode;\n /** The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\",\"center\",\"right. It defines where the snackbar will end his animation */\n anchorOrigin?: SnackbarOrigin;\n /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n autoHideDuration?: number;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n /** Custom offset from top/bottom of the page, in px. */\n offset?: number;\n /** Others applied to the content of the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarClasses;\n}\n\nconst transLeft = (props) => <Slide {...props} direction=\"left\" />;\nconst transRight = (props) => <Slide {...props} direction=\"right\" />;\nconst transUp = (props) => <Slide {...props} direction=\"up\" />;\nconst transDown = (props) => <Slide {...props} direction=\"down\" />;\n\nconst snackBarDirComponent = (direction) => {\n switch (direction) {\n case \"right\":\n return transRight;\n case \"up\":\n return transUp;\n case \"down\":\n return transDown;\n case \"left\":\n default:\n return transLeft;\n }\n};\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components.\n * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = ({\n classes: classesProp = {},\n className,\n id,\n open = false,\n onClose,\n label = \"\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n autoHideDuration = 5000,\n variant = \"default\",\n showIcon = false,\n customIcon = null,\n action = null,\n actionCallback,\n transitionDuration = 300,\n transitionDirection = \"left\",\n offset = 60,\n snackbarContentProps,\n ...others\n}: HvSnackbarProps) => {\n const { classes } = useClasses(classesProp);\n\n const anchorOriginOffset = {\n anchorOriginTop: {\n top: `${offset}px`,\n },\n anchorOriginBottom: {\n bottom: `${offset}px`,\n },\n };\n\n return (\n <MuiSnackbar\n style={\n anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n }\n classes={classes}\n className={className}\n id={id}\n anchorOrigin={anchorOrigin}\n open={open}\n onClose={onClose}\n autoHideDuration={autoHideDuration}\n transitionDuration={transitionDuration}\n TransitionComponent={snackBarDirComponent(transitionDirection)}\n {...others}\n >\n <HvSnackbarContent\n id={setId(id, \"content\")}\n label={label}\n variant={variant}\n customIcon={customIcon}\n showIcon={showIcon}\n action={action}\n actionCallback={actionCallback}\n {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n};\n"],"names":["transLeft","props","_jsx","Slide","direction","transRight","transUp","transDown","snackBarDirComponent","HvSnackbar","classes","classesProp","className","id","open","onClose","label","anchorOrigin","vertical","horizontal","autoHideDuration","variant","showIcon","customIcon","action","actionCallback","transitionDuration","transitionDirection","offset","snackbarContentProps","others","useClasses","anchorOriginOffset","anchorOriginTop","top","anchorOriginBottom","bottom","MuiSnackbar","style","capitalize","TransitionComponent","children","HvSnackbarContent","setId"],"mappings":";;;;;;;;;;;;AAoEA,MAAMA,YAAaC,CAAUC,UAAAA,2BAAAA,IAACC,wBAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAM,CAAE;AACjE,MAAMC,aAAcJ,CAAUC,UAAAA,2BAAAA,IAACC,wBAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAO,CAAE;AACnE,MAAME,UAAWL,CAAUC,UAAAA,2BAAAA,IAACC,wBAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAI,CAAE;AAC7D,MAAMG,YAAaN,CAAUC,UAAAA,2BAAAA,IAACC,wBAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAM,CAAE;AAEjE,MAAMI,uBAAwBJ,CAAc,cAAA;AAC1C,UAAQA,WAAS;AAAA,IACf,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AAAA,IACL;AACSP,aAAAA;AAAAA,EACX;AACF;AAUO,MAAMS,aAAaA,CAAC;AAAA,EACzBC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC,QAAQ;AAAA,EACRC,eAAe;AAAA,IAAEC,UAAU;AAAA,IAAOC,YAAY;AAAA,EAAQ;AAAA,EACtDC,mBAAmB;AAAA,EACnBC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC;AAAAA,EACAC,qBAAqB;AAAA,EACrBC,sBAAsB;AAAA,EACtBC,SAAS;AAAA,EACTC;AAAAA,EACA,GAAGC;AACY,MAAM;AACf,QAAA;AAAA,IAAEpB;AAAAA,EAAAA,IAAYqB,gBAAAA,WAAWpB,WAAW;AAE1C,QAAMqB,qBAAqB;AAAA,IACzBC,iBAAiB;AAAA,MACfC,KAAM,GAAEN;AAAAA,IACV;AAAA,IACAO,oBAAoB;AAAA,MAClBC,QAAS,GAAER;AAAAA,IACb;AAAA,EAAA;AAGF,wCACGS,SAAAA,UAAW;AAAA,IACVC,OACEN,mBAAoB,eAAcO,oBAAWtB,QAAAA,aAAaC,QAAQ,GAAG;AAAA,IAEvER;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAH;AAAAA,IACAC;AAAAA,IACAK;AAAAA,IACAM;AAAAA,IACAc,qBAAqBhC,qBAAqBmB,mBAAmB;AAAA,IAAE,GAC3DG;AAAAA,IAAMW,yCAETC,0CAAiB;AAAA,MAChB7B,IAAI8B,MAAAA,MAAM9B,IAAI,SAAS;AAAA,MACvBG;AAAAA,MACAK;AAAAA,MACAE;AAAAA,MACAD;AAAAA,MACAE;AAAAA,MACAC;AAAAA,MAA+B,GAC3BI;AAAAA,IAAAA,CACL;AAAA,EAAA,CACU;AAEjB;;;"}
|
|
@@ -5,6 +5,7 @@ const SnackbarContent = require("@mui/material/SnackbarContent");
|
|
|
5
5
|
const SnackbarContentWrapper_styles = require("./SnackbarContentWrapper.styles.cjs");
|
|
6
6
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
7
7
|
const iconVariant = require("../../../utils/iconVariant.cjs");
|
|
8
|
+
const useTheme = require("../../../hooks/useTheme.cjs");
|
|
8
9
|
const setId = require("../../../utils/setId.cjs");
|
|
9
10
|
const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
|
|
10
11
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
@@ -14,7 +15,7 @@ const HvSnackbarContent = React.forwardRef(({
|
|
|
14
15
|
id,
|
|
15
16
|
classes: classesProp = {},
|
|
16
17
|
label,
|
|
17
|
-
variant,
|
|
18
|
+
variant = "default",
|
|
18
19
|
showIcon,
|
|
19
20
|
customIcon,
|
|
20
21
|
action,
|
|
@@ -27,29 +28,32 @@ const HvSnackbarContent = React.forwardRef(({
|
|
|
27
28
|
classes,
|
|
28
29
|
cx
|
|
29
30
|
} = SnackbarContentWrapper_styles.useClasses(classesProp);
|
|
31
|
+
const {
|
|
32
|
+
activeTheme
|
|
33
|
+
} = useTheme.useTheme();
|
|
30
34
|
return /* @__PURE__ */ jsxRuntime.jsx(SnackbarContent__default.default, {
|
|
31
35
|
ref,
|
|
32
36
|
id,
|
|
33
37
|
classes: {
|
|
34
|
-
root: classes
|
|
35
|
-
message: classes
|
|
38
|
+
root: classes.root,
|
|
39
|
+
message: classes.message
|
|
36
40
|
},
|
|
37
41
|
className: cx(className, classes == null ? void 0 : classes[variant]),
|
|
38
42
|
message: /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
39
43
|
id: setId.setId(id, "message"),
|
|
40
|
-
className: classes
|
|
44
|
+
className: classes.messageSpan,
|
|
41
45
|
children: [icon && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
42
|
-
className: classes
|
|
46
|
+
className: classes.iconVariant,
|
|
43
47
|
children: icon
|
|
44
48
|
}), /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
45
|
-
className: classes
|
|
49
|
+
className: classes.messageText,
|
|
46
50
|
children: label
|
|
47
51
|
}), action && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
48
52
|
id: setId.setId(id, "action"),
|
|
49
|
-
className: classes
|
|
53
|
+
className: classes.action,
|
|
50
54
|
children: /* @__PURE__ */ jsxRuntime.jsx(ActionsGeneric.HvActionsGeneric, {
|
|
51
55
|
id,
|
|
52
|
-
category:
|
|
56
|
+
category: activeTheme == null ? void 0 : activeTheme.snackbar.actionButtonVariant,
|
|
53
57
|
actions: innerAction,
|
|
54
58
|
actionsCallback: actionCallback
|
|
55
59
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContentWrapper.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { ExtractNames, iconVariant, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport {
|
|
1
|
+
{"version":3,"file":"SnackbarContentWrapper.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { ExtractNames, iconVariant, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n HvActionsGeneric,\n HvActionGeneric,\n HvButtonVariant,\n} from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { HvSnackbarVariant } from \"../Snackbar\";\nimport { staticClasses, useClasses } from \"./SnackbarContentWrapper.styles\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\">,\n HvBaseProps {\n /** The message to display. */\n label?: React.ReactNode;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\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 /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: Partial<HvSnackbarContentClasses>;\n}\n\nexport const HvSnackbarContent = forwardRef<\n HTMLDivElement,\n HvSnackbarContentProps\n>(\n (\n {\n className,\n id,\n classes: classesProp = {},\n label,\n variant = \"default\",\n showIcon,\n customIcon,\n action,\n actionCallback,\n ...others\n },\n ref\n ) => {\n const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n const innerAction: any = isValidElement(action) ? action : [action];\n\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n return (\n <SnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: classes.root,\n message: classes.message,\n }}\n className={cx(className, classes?.[variant])}\n message={\n <div id={setId(id, \"message\")} className={classes.messageSpan}>\n {icon && <div className={classes.iconVariant}>{icon}</div>}\n <div className={classes.messageText}>{label}</div>\n {action && (\n <div id={setId(id, \"action\")} className={classes.action}>\n <HvActionsGeneric\n id={id}\n category={\n activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n }\n actions={innerAction}\n actionsCallback={actionCallback}\n />\n </div>\n )}\n </div>\n }\n {...others}\n />\n );\n }\n);\n"],"names":["HvSnackbarContent","forwardRef","className","id","classes","classesProp","label","variant","showIcon","customIcon","action","actionCallback","others","ref","icon","iconVariant","innerAction","isValidElement","cx","useClasses","activeTheme","useTheme","SnackbarContent","root","message","setId","messageSpan","children","_jsx","messageText","HvActionsGeneric","category","snackbar","actionButtonVariant","actions","actionsCallback"],"mappings":";;;;;;;;;;;;AA0CaA,MAAAA,oBAAoBC,iBAI/B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OAAOL,cAAeD,YAAYO,YAAAA,QAAYR,SAAS,WAAW;AACxE,QAAMS,cAAmBC,MAAAA,eAAeP,MAAM,IAAIA,SAAS,CAACA,MAAM;AAE5D,QAAA;AAAA,IAAEN;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,8BAAAA,WAAWd,WAAW;AACxC,QAAA;AAAA,IAAEe;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,wCACGC,yBAAAA,SAAe;AAAA,IACdT;AAAAA,IACAV;AAAAA,IACAC,SAAS;AAAA,MACPmB,MAAMnB,QAAQmB;AAAAA,MACdC,SAASpB,QAAQoB;AAAAA,IACnB;AAAA,IACAtB,WAAWgB,GAAGhB,WAAWE,mCAAUG,QAAQ;AAAA,IAC3CiB,yCACE,OAAA;AAAA,MAAKrB,IAAIsB,MAAAA,MAAMtB,IAAI,SAAS;AAAA,MAAGD,WAAWE,QAAQsB;AAAAA,MAAYC,UAAA,CAC3Db,QAAQc,2BAAAA,IAAA,OAAA;AAAA,QAAK1B,WAAWE,QAAQW;AAAAA,QAAYY,UAAEb;AAAAA,MAAAA,CAAU,GACzDc,2BAAAA,IAAA,OAAA;AAAA,QAAK1B,WAAWE,QAAQyB;AAAAA,QAAYF,UAAErB;AAAAA,MAAAA,CAAW,GAChDI,UACCkB,2BAAAA,IAAA,OAAA;AAAA,QAAKzB,IAAIsB,MAAAA,MAAMtB,IAAI,QAAQ;AAAA,QAAGD,WAAWE,QAAQM;AAAAA,QAAOiB,yCACrDG,iCAAgB;AAAA,UACf3B;AAAAA,UACA4B,UACEX,2CAAaY,SAASC;AAAAA,UAExBC,SAASlB;AAAAA,UACTmB,iBAAiBxB;AAAAA,QAAAA,CAClB;AAAA,MAAA,CACE,CACN;AAAA,IAAA,CACE;AAAA,IACN,GACGC;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}
|
package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const actionsGenericClasses = require("../../ActionsGeneric/actionsGenericClasses.cjs");
|
|
4
5
|
const classes = require("../../../utils/classes.cjs");
|
|
5
6
|
const {
|
|
6
7
|
useClasses,
|
|
@@ -43,7 +44,15 @@ const {
|
|
|
43
44
|
wordBreak: "break-word"
|
|
44
45
|
},
|
|
45
46
|
action: {
|
|
46
|
-
textAlign: "right"
|
|
47
|
+
textAlign: "right",
|
|
48
|
+
marginLeft: uikitStyles.theme.snackbar.actionMarginLeft,
|
|
49
|
+
[`& .${actionsGenericClasses.default.button}`]: {
|
|
50
|
+
borderColor: uikitStyles.theme.colors.base_dark,
|
|
51
|
+
color: uikitStyles.theme.colors.base_dark,
|
|
52
|
+
"&:hover": {
|
|
53
|
+
borderColor: uikitStyles.theme.colors.base_dark
|
|
54
|
+
}
|
|
55
|
+
}
|
|
47
56
|
},
|
|
48
57
|
iconVariant: {}
|
|
49
58
|
});
|
package/dist/cjs/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContentWrapper.styles.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n ...(theme.typography.body as CSSProperties),\n padding: `0 ${theme.space.xs}`,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n },\n action: {\n textAlign: \"right\",\n },\n iconVariant: {},\n }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","typography","body","color","base_dark","fontFamily","wordBreak","action","textAlign","iconVariant"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SnackbarContentWrapper.styles.cjs","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils\";\nimport { actionsGenericClasses } from \"@core/components\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n ...(theme.typography.body as CSSProperties),\n padding: `0 ${theme.space.xs}`,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n },\n action: {\n textAlign: \"right\",\n marginLeft: theme.snackbar.actionMarginLeft,\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","typography","body","color","base_dark","fontFamily","wordBreak","action","textAlign","marginLeft","snackbar","actionMarginLeft","actionsGenericClasses","button","borderColor","iconVariant"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS;AAAA,IACPC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLH,iBAAiBL,YAAAA,MAAMM,OAAOG;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPL,iBAAiBL,YAAAA,MAAMM,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBL,YAAAA,MAAMM,OAAOO;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPf,SAAS;AAAA,IACTH,OAAO;AAAA,EACT;AAAA,EACAmB,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZpB,WAAW;AAAA,EACb;AAAA,EACAqB,aAAa;AAAA,IACX,GAAIlB,YAAAA,MAAMmB,WAAWC;AAAAA,IACrBrB,SAAU,KAAIC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BmB,OAAOrB,YAAAA,MAAMM,OAAOgB;AAAAA,IACpBC,YAAYvB,YAAAA,MAAMuB,WAAWH;AAAAA,IAC7BtB,WAAW;AAAA,IACX0B,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,WAAW;AAAA,IACXC,YAAY3B,YAAAA,MAAM4B,SAASC;AAAAA,IAC3B,CAAE,MAAKC,8BAAsBC,QAAQ,GAAG;AAAA,MACtCC,aAAahC,YAAAA,MAAMM,OAAOgB;AAAAA,MAC1BD,OAAOrB,YAAAA,MAAMM,OAAOgB;AAAAA,MACpB,WAAW;AAAA,QACTU,aAAahC,YAAAA,MAAMM,OAAOgB;AAAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACAW,aAAa,CAAC;AAChB,CACF;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import Slide from \"@mui/material/Slide\";\nimport {\n SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\nimport { Snackbar as MuiSnackbar } from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport capitalize from \"lodash/capitalize\";\nimport { SyntheticEvent } from \"react\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { HvActionGeneric } from \"@core/components\";\nimport {\n HvSnackbarContentProps,\n HvSnackbarContent,\n} from \"./SnackbarContentWrapper\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvSnackbarVariant = \"default\" | \"success\" | \"warning\" | \"error\";\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" | \"classes\">,\n Omit<HvBaseProps, \"children\"> {\n /** If true, Snackbar is open. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n onClose?:\n | ((\n event: Event | SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason\n ) => void)\n | undefined;\n /** The message to display. */\n label?: React.ReactNode;\n /** The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\",\"center\",\"right. It defines where the snackbar will end his animation */\n anchorOrigin?: SnackbarOrigin;\n /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n autoHideDuration?: number;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n /** Custom offset from top/bottom of the page, in px. */\n offset?: number;\n /** Others applied to the content of the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?:
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import Slide from \"@mui/material/Slide\";\nimport {\n SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\nimport { Snackbar as MuiSnackbar } from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport capitalize from \"lodash/capitalize\";\nimport { SyntheticEvent } from \"react\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { HvActionGeneric } from \"@core/components\";\nimport {\n HvSnackbarContentProps,\n HvSnackbarContent,\n} from \"./SnackbarContentWrapper\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvSnackbarVariant = \"default\" | \"success\" | \"warning\" | \"error\";\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" | \"classes\">,\n Omit<HvBaseProps, \"children\"> {\n /** If true, Snackbar is open. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n onClose?:\n | ((\n event: Event | SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason\n ) => void)\n | undefined;\n /** The message to display. */\n label?: React.ReactNode;\n /** The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\",\"center\",\"right. It defines where the snackbar will end his animation */\n anchorOrigin?: SnackbarOrigin;\n /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n autoHideDuration?: number;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n /** Custom offset from top/bottom of the page, in px. */\n offset?: number;\n /** Others applied to the content of the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarClasses;\n}\n\nconst transLeft = (props) => <Slide {...props} direction=\"left\" />;\nconst transRight = (props) => <Slide {...props} direction=\"right\" />;\nconst transUp = (props) => <Slide {...props} direction=\"up\" />;\nconst transDown = (props) => <Slide {...props} direction=\"down\" />;\n\nconst snackBarDirComponent = (direction) => {\n switch (direction) {\n case \"right\":\n return transRight;\n case \"up\":\n return transUp;\n case \"down\":\n return transDown;\n case \"left\":\n default:\n return transLeft;\n }\n};\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components.\n * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = ({\n classes: classesProp = {},\n className,\n id,\n open = false,\n onClose,\n label = \"\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n autoHideDuration = 5000,\n variant = \"default\",\n showIcon = false,\n customIcon = null,\n action = null,\n actionCallback,\n transitionDuration = 300,\n transitionDirection = \"left\",\n offset = 60,\n snackbarContentProps,\n ...others\n}: HvSnackbarProps) => {\n const { classes } = useClasses(classesProp);\n\n const anchorOriginOffset = {\n anchorOriginTop: {\n top: `${offset}px`,\n },\n anchorOriginBottom: {\n bottom: `${offset}px`,\n },\n };\n\n return (\n <MuiSnackbar\n style={\n anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n }\n classes={classes}\n className={className}\n id={id}\n anchorOrigin={anchorOrigin}\n open={open}\n onClose={onClose}\n autoHideDuration={autoHideDuration}\n transitionDuration={transitionDuration}\n TransitionComponent={snackBarDirComponent(transitionDirection)}\n {...others}\n >\n <HvSnackbarContent\n id={setId(id, \"content\")}\n label={label}\n variant={variant}\n customIcon={customIcon}\n showIcon={showIcon}\n action={action}\n actionCallback={actionCallback}\n {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n};\n"],"names":["transLeft","props","_jsx","Slide","direction","transRight","transUp","transDown","snackBarDirComponent","HvSnackbar","classes","classesProp","className","id","open","onClose","label","anchorOrigin","vertical","horizontal","autoHideDuration","variant","showIcon","customIcon","action","actionCallback","transitionDuration","transitionDirection","offset","snackbarContentProps","others","useClasses","anchorOriginOffset","anchorOriginTop","top","anchorOriginBottom","bottom","MuiSnackbar","style","capitalize","TransitionComponent","children","HvSnackbarContent","setId"],"mappings":";;;;;;;;AAoEA,MAAMA,YAAaC,CAAUC,UAAAA,oBAACC,OAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAM,CAAE;AACjE,MAAMC,aAAcJ,CAAUC,UAAAA,oBAACC,OAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAO,CAAE;AACnE,MAAME,UAAWL,CAAUC,UAAAA,oBAACC,OAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAI,CAAE;AAC7D,MAAMG,YAAaN,CAAUC,UAAAA,oBAACC,OAAK;AAAA,EAAA,GAAKF;AAAAA,EAAOG,WAAU;AAAM,CAAE;AAEjE,MAAMI,uBAAwBJ,CAAc,cAAA;AAC1C,UAAQA,WAAS;AAAA,IACf,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AACIC,aAAAA;AAAAA,IACT,KAAK;AAAA,IACL;AACSP,aAAAA;AAAAA,EACX;AACF;AAUO,MAAMS,aAAaA,CAAC;AAAA,EACzBC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC,QAAQ;AAAA,EACRC,eAAe;AAAA,IAAEC,UAAU;AAAA,IAAOC,YAAY;AAAA,EAAQ;AAAA,EACtDC,mBAAmB;AAAA,EACnBC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC;AAAAA,EACAC,qBAAqB;AAAA,EACrBC,sBAAsB;AAAA,EACtBC,SAAS;AAAA,EACTC;AAAAA,EACA,GAAGC;AACY,MAAM;AACf,QAAA;AAAA,IAAEpB;AAAAA,EAAAA,IAAYqB,WAAWpB,WAAW;AAE1C,QAAMqB,qBAAqB;AAAA,IACzBC,iBAAiB;AAAA,MACfC,KAAM,GAAEN;AAAAA,IACV;AAAA,IACAO,oBAAoB;AAAA,MAClBC,QAAS,GAAER;AAAAA,IACb;AAAA,EAAA;AAGF,6BACGS,UAAW;AAAA,IACVC,OACEN,mBAAoB,eAAcO,WAAWtB,aAAaC,QAAQ,GAAG;AAAA,IAEvER;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAH;AAAAA,IACAC;AAAAA,IACAK;AAAAA,IACAM;AAAAA,IACAc,qBAAqBhC,qBAAqBmB,mBAAmB;AAAA,IAAE,GAC3DG;AAAAA,IAAMW,8BAETC,mBAAiB;AAAA,MAChB7B,IAAI8B,MAAM9B,IAAI,SAAS;AAAA,MACvBG;AAAAA,MACAK;AAAAA,MACAE;AAAAA,MACAD;AAAAA,MACAE;AAAAA,MACAC;AAAAA,MAA+B,GAC3BI;AAAAA,IAAAA,CACL;AAAA,EAAA,CACU;AAEjB;"}
|
|
@@ -4,6 +4,7 @@ import { useClasses } from "./SnackbarContentWrapper.styles.js";
|
|
|
4
4
|
import { staticClasses } from "./SnackbarContentWrapper.styles.js";
|
|
5
5
|
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
6
6
|
import iconVariant from "../../../utils/iconVariant.js";
|
|
7
|
+
import { useTheme } from "../../../hooks/useTheme.js";
|
|
7
8
|
import { setId } from "../../../utils/setId.js";
|
|
8
9
|
import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
|
|
9
10
|
const HvSnackbarContent = forwardRef(({
|
|
@@ -11,7 +12,7 @@ const HvSnackbarContent = forwardRef(({
|
|
|
11
12
|
id,
|
|
12
13
|
classes: classesProp = {},
|
|
13
14
|
label,
|
|
14
|
-
variant,
|
|
15
|
+
variant = "default",
|
|
15
16
|
showIcon,
|
|
16
17
|
customIcon,
|
|
17
18
|
action,
|
|
@@ -24,29 +25,32 @@ const HvSnackbarContent = forwardRef(({
|
|
|
24
25
|
classes,
|
|
25
26
|
cx
|
|
26
27
|
} = useClasses(classesProp);
|
|
28
|
+
const {
|
|
29
|
+
activeTheme
|
|
30
|
+
} = useTheme();
|
|
27
31
|
return /* @__PURE__ */ jsx(SnackbarContent, {
|
|
28
32
|
ref,
|
|
29
33
|
id,
|
|
30
34
|
classes: {
|
|
31
|
-
root: classes
|
|
32
|
-
message: classes
|
|
35
|
+
root: classes.root,
|
|
36
|
+
message: classes.message
|
|
33
37
|
},
|
|
34
38
|
className: cx(className, classes == null ? void 0 : classes[variant]),
|
|
35
39
|
message: /* @__PURE__ */ jsxs("div", {
|
|
36
40
|
id: setId(id, "message"),
|
|
37
|
-
className: classes
|
|
41
|
+
className: classes.messageSpan,
|
|
38
42
|
children: [icon && /* @__PURE__ */ jsx("div", {
|
|
39
|
-
className: classes
|
|
43
|
+
className: classes.iconVariant,
|
|
40
44
|
children: icon
|
|
41
45
|
}), /* @__PURE__ */ jsx("div", {
|
|
42
|
-
className: classes
|
|
46
|
+
className: classes.messageText,
|
|
43
47
|
children: label
|
|
44
48
|
}), action && /* @__PURE__ */ jsx("div", {
|
|
45
49
|
id: setId(id, "action"),
|
|
46
|
-
className: classes
|
|
50
|
+
className: classes.action,
|
|
47
51
|
children: /* @__PURE__ */ jsx(HvActionsGeneric, {
|
|
48
52
|
id,
|
|
49
|
-
category:
|
|
53
|
+
category: activeTheme == null ? void 0 : activeTheme.snackbar.actionButtonVariant,
|
|
50
54
|
actions: innerAction,
|
|
51
55
|
actionsCallback: actionCallback
|
|
52
56
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContentWrapper.js","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { ExtractNames, iconVariant, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport {
|
|
1
|
+
{"version":3,"file":"SnackbarContentWrapper.js","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { ExtractNames, iconVariant, setId } from \"@core/utils\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n HvActionsGeneric,\n HvActionGeneric,\n HvButtonVariant,\n} from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { HvSnackbarVariant } from \"../Snackbar\";\nimport { staticClasses, useClasses } from \"./SnackbarContentWrapper.styles\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\">,\n HvBaseProps {\n /** The message to display. */\n label?: React.ReactNode;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\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 /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /** The callback function ran when an action is triggered, receiving `action` as param */\n actionCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: Partial<HvSnackbarContentClasses>;\n}\n\nexport const HvSnackbarContent = forwardRef<\n HTMLDivElement,\n HvSnackbarContentProps\n>(\n (\n {\n className,\n id,\n classes: classesProp = {},\n label,\n variant = \"default\",\n showIcon,\n customIcon,\n action,\n actionCallback,\n ...others\n },\n ref\n ) => {\n const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n const innerAction: any = isValidElement(action) ? action : [action];\n\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n return (\n <SnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: classes.root,\n message: classes.message,\n }}\n className={cx(className, classes?.[variant])}\n message={\n <div id={setId(id, \"message\")} className={classes.messageSpan}>\n {icon && <div className={classes.iconVariant}>{icon}</div>}\n <div className={classes.messageText}>{label}</div>\n {action && (\n <div id={setId(id, \"action\")} className={classes.action}>\n <HvActionsGeneric\n id={id}\n category={\n activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n }\n actions={innerAction}\n actionsCallback={actionCallback}\n />\n </div>\n )}\n </div>\n }\n {...others}\n />\n );\n }\n);\n"],"names":["HvSnackbarContent","forwardRef","className","id","classes","classesProp","label","variant","showIcon","customIcon","action","actionCallback","others","ref","icon","iconVariant","innerAction","isValidElement","cx","useClasses","activeTheme","useTheme","SnackbarContent","root","message","setId","messageSpan","children","_jsx","messageText","HvActionsGeneric","category","snackbar","actionButtonVariant","actions","actionsCallback"],"mappings":";;;;;;;;;AA0CaA,MAAAA,oBAAoBC,WAI/B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OAAOL,cAAeD,YAAYO,YAAYR,SAAS,WAAW;AACxE,QAAMS,cAAmBC,eAAeP,MAAM,IAAIA,SAAS,CAACA,MAAM;AAE5D,QAAA;AAAA,IAAEN;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AACxC,QAAA;AAAA,IAAEe;AAAAA,MAAgBC,SAAS;AAEjC,6BACGC,iBAAe;AAAA,IACdT;AAAAA,IACAV;AAAAA,IACAC,SAAS;AAAA,MACPmB,MAAMnB,QAAQmB;AAAAA,MACdC,SAASpB,QAAQoB;AAAAA,IACnB;AAAA,IACAtB,WAAWgB,GAAGhB,WAAWE,mCAAUG,QAAQ;AAAA,IAC3CiB,8BACE,OAAA;AAAA,MAAKrB,IAAIsB,MAAMtB,IAAI,SAAS;AAAA,MAAGD,WAAWE,QAAQsB;AAAAA,MAAYC,UAAA,CAC3Db,QAAQc,oBAAA,OAAA;AAAA,QAAK1B,WAAWE,QAAQW;AAAAA,QAAYY,UAAEb;AAAAA,MAAAA,CAAU,GACzDc,oBAAA,OAAA;AAAA,QAAK1B,WAAWE,QAAQyB;AAAAA,QAAYF,UAAErB;AAAAA,MAAAA,CAAW,GAChDI,UACCkB,oBAAA,OAAA;AAAA,QAAKzB,IAAIsB,MAAMtB,IAAI,QAAQ;AAAA,QAAGD,WAAWE,QAAQM;AAAAA,QAAOiB,8BACrDG,kBAAgB;AAAA,UACf3B;AAAAA,UACA4B,UACEX,2CAAaY,SAASC;AAAAA,UAExBC,SAASlB;AAAAA,UACTmB,iBAAiBxB;AAAAA,QAAAA,CAClB;AAAA,MAAA,CACE,CACN;AAAA,IAAA,CACE;AAAA,IACN,GACGC;AAAAA,EAAAA,CACL;AAEL,CACF;"}
|
package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
import actionsGenericClasses from "../../ActionsGeneric/actionsGenericClasses.js";
|
|
2
3
|
import { createClasses } from "../../../utils/classes.js";
|
|
3
4
|
const {
|
|
4
5
|
useClasses,
|
|
@@ -41,7 +42,15 @@ const {
|
|
|
41
42
|
wordBreak: "break-word"
|
|
42
43
|
},
|
|
43
44
|
action: {
|
|
44
|
-
textAlign: "right"
|
|
45
|
+
textAlign: "right",
|
|
46
|
+
marginLeft: theme.snackbar.actionMarginLeft,
|
|
47
|
+
[`& .${actionsGenericClasses.button}`]: {
|
|
48
|
+
borderColor: theme.colors.base_dark,
|
|
49
|
+
color: theme.colors.base_dark,
|
|
50
|
+
"&:hover": {
|
|
51
|
+
borderColor: theme.colors.base_dark
|
|
52
|
+
}
|
|
53
|
+
}
|
|
45
54
|
},
|
|
46
55
|
iconVariant: {}
|
|
47
56
|
});
|
package/dist/esm/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContentWrapper.styles.js","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n ...(theme.typography.body as CSSProperties),\n padding: `0 ${theme.space.xs}`,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n },\n action: {\n textAlign: \"right\",\n },\n iconVariant: {},\n }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","typography","body","color","base_dark","fontFamily","wordBreak","action","textAlign","iconVariant"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SnackbarContentWrapper.styles.js","sources":["../../../../../src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils\";\nimport { actionsGenericClasses } from \"@core/components\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n ...(theme.typography.body as CSSProperties),\n padding: `0 ${theme.space.xs}`,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n },\n action: {\n textAlign: \"right\",\n marginLeft: theme.snackbar.actionMarginLeft,\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","typography","body","color","base_dark","fontFamily","wordBreak","action","textAlign","marginLeft","snackbar","actionMarginLeft","actionsGenericClasses","button","borderColor","iconVariant"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS;AAAA,IACPC,iBAAiBL,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLH,iBAAiBL,MAAMM,OAAOG;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPL,iBAAiBL,MAAMM,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBL,MAAMM,OAAOO;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPf,SAAS;AAAA,IACTH,OAAO;AAAA,EACT;AAAA,EACAmB,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZpB,WAAW;AAAA,EACb;AAAA,EACAqB,aAAa;AAAA,IACX,GAAIlB,MAAMmB,WAAWC;AAAAA,IACrBrB,SAAU,KAAIC,MAAMC,MAAMC;AAAAA,IAC1BmB,OAAOrB,MAAMM,OAAOgB;AAAAA,IACpBC,YAAYvB,MAAMuB,WAAWH;AAAAA,IAC7BtB,WAAW;AAAA,IACX0B,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,WAAW;AAAA,IACXC,YAAY3B,MAAM4B,SAASC;AAAAA,IAC3B,CAAE,MAAKC,sBAAsBC,QAAQ,GAAG;AAAA,MACtCC,aAAahC,MAAMM,OAAOgB;AAAAA,MAC1BD,OAAOrB,MAAMM,OAAOgB;AAAAA,MACpB,WAAW;AAAA,QACTU,aAAahC,MAAMM,OAAOgB;AAAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACAW,aAAa,CAAC;AAChB,CACF;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -5800,7 +5800,7 @@ export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProp
|
|
|
5800
5800
|
/** The message to display. */
|
|
5801
5801
|
label?: React.ReactNode;
|
|
5802
5802
|
/** Variant of the snackbar. */
|
|
5803
|
-
variant
|
|
5803
|
+
variant?: HvSnackbarVariant;
|
|
5804
5804
|
/** Controls if the associated icon to the variant should be shown. */
|
|
5805
5805
|
showIcon?: boolean;
|
|
5806
5806
|
/** Custom icon to replace the variant default. */
|
|
@@ -5843,7 +5843,7 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
|
|
|
5843
5843
|
/** Others applied to the content of the snackbar. */
|
|
5844
5844
|
snackbarContentProps?: HvSnackbarContentProps;
|
|
5845
5845
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
5846
|
-
classes?:
|
|
5846
|
+
classes?: HvSnackbarClasses;
|
|
5847
5847
|
}
|
|
5848
5848
|
|
|
5849
5849
|
export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, classes: classesProp, className, ...others }: HvSnackbarProviderProps) => JSX_2.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.18.
|
|
3
|
+
"version": "5.18.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"@emotion/css": "^11.11.0",
|
|
34
34
|
"@emotion/serialize": "^1.1.2",
|
|
35
35
|
"@emotion/utils": "^1.2.1",
|
|
36
|
-
"@hitachivantara/uikit-react-icons": "^5.2.
|
|
37
|
-
"@hitachivantara/uikit-react-shared": "^5.0.
|
|
38
|
-
"@hitachivantara/uikit-styles": "^5.8.
|
|
36
|
+
"@hitachivantara/uikit-react-icons": "^5.2.4",
|
|
37
|
+
"@hitachivantara/uikit-react-shared": "^5.0.19",
|
|
38
|
+
"@hitachivantara/uikit-styles": "^5.8.5",
|
|
39
39
|
"@internationalized/date": "^3.2.0",
|
|
40
40
|
"@mui/base": "^5.0.0-beta.4",
|
|
41
41
|
"@popperjs/core": "^2.11.8",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "3f7e6e704bb4a2fd82dd30fb7bbc64e929c10ba3",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|