@hitachivantara/uikit-react-lab 3.41.7 → 3.41.8

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/NotificationPanel/Notification/Notification.js +9 -4
  3. package/dist/NotificationPanel/Notification/Notification.js.map +1 -1
  4. package/dist/NotificationPanel/Notification/styles.js +5 -2
  5. package/dist/NotificationPanel/Notification/styles.js.map +1 -1
  6. package/dist/legacy/NotificationPanel/Notification/Notification.js +9 -4
  7. package/dist/legacy/NotificationPanel/Notification/Notification.js.map +1 -1
  8. package/dist/legacy/NotificationPanel/Notification/styles.js +5 -2
  9. package/dist/legacy/NotificationPanel/Notification/styles.js.map +1 -1
  10. package/dist/modern/NotificationPanel/Notification/Notification.js +9 -4
  11. package/dist/modern/NotificationPanel/Notification/Notification.js.map +1 -1
  12. package/dist/modern/NotificationPanel/Notification/styles.js +5 -2
  13. package/dist/modern/NotificationPanel/Notification/styles.js.map +1 -1
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.41.8](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.7...@hitachivantara/uikit-react-lab@3.41.8) (2022-04-18)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **NotificationPanel:** toggles pointer cursor according to available onClick param. HVUIKIT-2740 ([9f7f1c2](https://github.com/lumada-design/hv-uikit-react/commit/9f7f1c264126fc29e961d4a21fab93e401a3d4ea))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [3.41.7](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.6...@hitachivantara/uikit-react-lab@3.41.7) (2022-04-15)
7
18
 
8
19
  **Note:** Version bump only for package @hitachivantara/uikit-react-lab
package/dist/NotificationPanel/Notification/Notification.js CHANGED
@@ -75,16 +75,16 @@ var Notification = function Notification(_ref) {
75
75
  }, title)), title);
76
76
  return /*#__PURE__*/_react.default.createElement("div", {
77
77
  onClick: function onClick(event) {
78
- return _onClick(event, notificationId);
78
+ return _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, notificationId);
79
79
  },
80
80
  onKeyPress: function onKeyPress(event) {
81
- return _onKeyPress(event, notificationId);
81
+ return _onKeyPress === null || _onKeyPress === void 0 ? void 0 : _onKeyPress(event, notificationId);
82
82
  },
83
83
  className: (0, _clsx.default)(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
84
84
  role: "button",
85
85
  tabIndex: 0
86
86
  }, /*#__PURE__*/_react.default.createElement("div", {
87
- className: (0, _clsx.default)(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
87
+ className: (0, _clsx.default)(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!_onClick && classes.clickable)
88
88
  }, /*#__PURE__*/_react.default.createElement("div", {
89
89
  className: classes.iconContainer
90
90
  }, icon), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(NotificationWithTooltip, null), /*#__PURE__*/_react.default.createElement("div", {
@@ -161,7 +161,12 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
161
161
  /**
162
162
  * Styles applied to the notification message actions dropdown.
163
163
  */
164
- notificationActionWrapper: _propTypes.default.string
164
+ notificationActionWrapper: _propTypes.default.string,
165
+
166
+ /**
167
+ * Styles applied to the notification when clickable
168
+ */
169
+ clickable: _propTypes.default.string
165
170
  }).isRequired,
166
171
 
167
172
  /**
package/dist/NotificationPanel/Notification/Notification.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/NotificationPanel/Notification/Notification.js"],"names":["dayjs","extend","relativeTime","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","PropTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","styles","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick(event, notificationId)}\n onKeyPress={(event) => onKeyPress(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
1
+ {"version":3,"sources":["../../../src/NotificationPanel/Notification/Notification.js"],"names":["dayjs","extend","relativeTime","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","clickable","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","PropTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","styles","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick?.(event, notificationId)}\n onKeyPress={(event) => onKeyPress?.(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n [classes.clickable]: !!onClick,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n /**\n * Styles applied to the notification when clickable\n */\n clickable: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
package/dist/NotificationPanel/Notification/styles.js CHANGED
@@ -72,7 +72,6 @@ var styles = function styles(theme) {
72
72
  color: theme.hv.palette.accent.acce1,
73
73
  padding: "17px",
74
74
  paddingRight: 0,
75
- cursor: "pointer",
76
75
  "&:focus": {
77
76
  backgroundColor: theme.hv.palette.atmosphere.atmo3,
78
77
  outline: "5px solid ".concat(theme.hv.palette.atmosphere.atmo3),
@@ -86,7 +85,10 @@ var styles = function styles(theme) {
86
85
  "& $notificationActionWrapper": {
87
86
  display: "block"
88
87
  }
89
- })
88
+ }),
89
+ "&$clickable": {
90
+ cursor: "pointer"
91
+ }
90
92
  },
91
93
  iconContainer: {
92
94
  width: "32px",
@@ -121,6 +123,7 @@ var styles = function styles(theme) {
121
123
  },
122
124
  hide: {},
123
125
  read: {},
126
+ clickable: {},
124
127
  notificationWrapperDropdown: {
125
128
  outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
126
129
  backgroundColor: theme.hv.palette.atmosphere.atmo3,
package/dist/NotificationPanel/Notification/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n cursor: \"pointer\",\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"file":"styles.js"}
1
+ {"version":3,"sources":["../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","clickable","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n clickable: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"file":"styles.js"}
package/dist/legacy/NotificationPanel/Notification/Notification.js CHANGED
@@ -58,16 +58,16 @@ var Notification = function Notification(_ref) {
58
58
  }, title)), title);
59
59
  return /*#__PURE__*/React.createElement("div", {
60
60
  onClick: function onClick(event) {
61
- return _onClick(event, notificationId);
61
+ return _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, notificationId);
62
62
  },
63
63
  onKeyPress: function onKeyPress(event) {
64
- return _onKeyPress(event, notificationId);
64
+ return _onKeyPress === null || _onKeyPress === void 0 ? void 0 : _onKeyPress(event, notificationId);
65
65
  },
66
66
  className: clsx(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
67
67
  role: "button",
68
68
  tabIndex: 0
69
69
  }, /*#__PURE__*/React.createElement("div", {
70
- className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
70
+ className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!_onClick && classes.clickable)
71
71
  }, /*#__PURE__*/React.createElement("div", {
72
72
  className: classes.iconContainer
73
73
  }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NotificationWithTooltip, null), /*#__PURE__*/React.createElement("div", {
@@ -144,7 +144,12 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
144
144
  /**
145
145
  * Styles applied to the notification message actions dropdown.
146
146
  */
147
- notificationActionWrapper: PropTypes.string
147
+ notificationActionWrapper: PropTypes.string,
148
+
149
+ /**
150
+ * Styles applied to the notification when clickable
151
+ */
152
+ clickable: PropTypes.string
148
153
  }).isRequired,
149
154
 
150
155
  /**
package/dist/legacy/NotificationPanel/Notification/Notification.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick(event, notificationId)}\n onKeyPress={(event) => onKeyPress(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
1
+ {"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","clickable","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick?.(event, notificationId)}\n onKeyPress={(event) => onKeyPress?.(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n [classes.clickable]: !!onClick,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n /**\n * Styles applied to the notification when clickable\n */\n clickable: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
package/dist/legacy/NotificationPanel/Notification/styles.js CHANGED
@@ -56,7 +56,6 @@ var styles = function styles(theme) {
56
56
  color: theme.hv.palette.accent.acce1,
57
57
  padding: "17px",
58
58
  paddingRight: 0,
59
- cursor: "pointer",
60
59
  "&:focus": {
61
60
  backgroundColor: theme.hv.palette.atmosphere.atmo3,
62
61
  outline: "5px solid ".concat(theme.hv.palette.atmosphere.atmo3),
@@ -70,7 +69,10 @@ var styles = function styles(theme) {
70
69
  "& $notificationActionWrapper": {
71
70
  display: "block"
72
71
  }
73
- })
72
+ }),
73
+ "&$clickable": {
74
+ cursor: "pointer"
75
+ }
74
76
  },
75
77
  iconContainer: {
76
78
  width: "32px",
@@ -105,6 +107,7 @@ var styles = function styles(theme) {
105
107
  },
106
108
  hide: {},
107
109
  read: {},
110
+ clickable: {},
108
111
  notificationWrapperDropdown: {
109
112
  outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
110
113
  backgroundColor: theme.hv.palette.atmosphere.atmo3,
package/dist/legacy/NotificationPanel/Notification/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n cursor: \"pointer\",\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"file":"styles.js"}
1
+ {"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","clickable","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n clickable: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"file":"styles.js"}
package/dist/modern/NotificationPanel/Notification/Notification.js CHANGED
@@ -53,13 +53,13 @@ const Notification = ({
53
53
  variant: isRead ? "normalText" : "highlightText"
54
54
  }, title)), title);
55
55
  return /*#__PURE__*/React.createElement("div", {
56
- onClick: event => onClick(event, notificationId),
57
- onKeyPress: event => onKeyPress(event, notificationId),
56
+ onClick: event => onClick === null || onClick === void 0 ? void 0 : onClick(event, notificationId),
57
+ onKeyPress: event => onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event, notificationId),
58
58
  className: clsx(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
59
59
  role: "button",
60
60
  tabIndex: 0
61
61
  }, /*#__PURE__*/React.createElement("div", {
62
- className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
62
+ className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!onClick && classes.clickable)
63
63
  }, /*#__PURE__*/React.createElement("div", {
64
64
  className: classes.iconContainer
65
65
  }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NotificationWithTooltip, null), /*#__PURE__*/React.createElement("div", {
@@ -136,7 +136,12 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
136
136
  /**
137
137
  * Styles applied to the notification message actions dropdown.
138
138
  */
139
- notificationActionWrapper: PropTypes.string
139
+ notificationActionWrapper: PropTypes.string,
140
+
141
+ /**
142
+ * Styles applied to the notification when clickable
143
+ */
144
+ clickable: PropTypes.string
140
145
  }).isRequired,
141
146
 
142
147
  /**
package/dist/modern/NotificationPanel/Notification/Notification.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick(event, notificationId)}\n onKeyPress={(event) => onKeyPress(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
1
+ {"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","clickable","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick?.(event, notificationId)}\n onKeyPress={(event) => onKeyPress?.(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n [classes.clickable]: !!onClick,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n /**\n * Styles applied to the notification when clickable\n */\n clickable: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
package/dist/modern/NotificationPanel/Notification/styles.js CHANGED
@@ -48,7 +48,6 @@ const styles = theme => ({
48
48
  color: theme.hv.palette.accent.acce1,
49
49
  padding: "17px",
50
50
  paddingRight: 0,
51
- cursor: "pointer",
52
51
  "&:focus": {
53
52
  backgroundColor: theme.hv.palette.atmosphere.atmo3,
54
53
  outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,
@@ -62,7 +61,10 @@ const styles = theme => ({
62
61
  "& $notificationActionWrapper": {
63
62
  display: "block"
64
63
  }
65
- })
64
+ }),
65
+ "&$clickable": {
66
+ cursor: "pointer"
67
+ }
66
68
  },
67
69
  iconContainer: {
68
70
  width: "32px",
@@ -97,6 +99,7 @@ const styles = theme => ({
97
99
  },
98
100
  hide: {},
99
101
  read: {},
102
+ clickable: {},
100
103
  notificationWrapperDropdown: {
101
104
  outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,
102
105
  backgroundColor: theme.hv.palette.atmosphere.atmo3,
package/dist/modern/NotificationPanel/Notification/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":";;;;;;AAAA,MAAMA,aAAa,GAAG;AACpBC,EAAAA,YAAY,EAAE,SADM;AAEpBC,EAAAA,YAAY,EAAE,OAFM;AAGpBC,EAAAA,YAAY,EAAE,KAHM;AAIpBC,EAAAA,aAAa,EAAE,MAJK;AAKpBC,EAAAA,SAAS,EAAE;AALS,CAAtB;;AAQA,MAAMC,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,MADL;AAEJC,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAFzC;AAGJC,IAAAA,MAAM,EAAE,iBAHJ;AAIJ,eAAW;AACTC,MAAAA,OAAO,EAAG,aAAYT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAAM,EAD/C;AAETP,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAFpC;AAGT,sCAAgC;AAC9BR,QAAAA,OAAO,EAAE;AADqB;AAHvB,KAJP;AAWJ,cAAU;AACRC,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BK,KADrC;AAERF,MAAAA,OAAO,EAAG,aAAYT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BK,KAAM,EAFhD;AAGR,iBAAW;AACTR,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KADpC;AAETD,QAAAA,OAAO,EAAG,aAAYT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAAM,EAF/C;AAIT,6CACKjB,aADL;AAJS;AAHH,KAXN;AAwBJ,uDACKA,aADL;AAEEU,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAF/C;AAGE,kCACKjB,aADL,CAHF;AAOE,sCAAgC;AAC9BS,QAAAA,OAAO,EAAE;AADqB;AAPlC;AAxBI,GADmB;AAqCzBU,EAAAA,mBAAmB,EAAE;AACnBV,IAAAA,OAAO,EAAE,MADU;AAEnBW,IAAAA,SAAS,EAAE,MAFQ;AAGnBC,IAAAA,WAAW,EAAEd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiBC,EAHX;AAInBC,IAAAA,KAAK,EAAEjB,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBa,MAAjB,CAAwBC,KAJZ;AAKnBC,IAAAA,OAAO,EAAE,MALU;AAMnBC,IAAAA,YAAY,EAAE,CANK;AAOnBC,IAAAA,MAAM,EAAE,SAPW;AASnB,eAAW;AACTnB,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KADpC;AAETD,MAAAA,OAAO,EAAG,aAAYT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAAM,EAF/C;AAGTZ,MAAAA,SAAS,EAAE,MAHF;AAIT,sCAAgC;AAC9BI,QAAAA,OAAO,EAAE;AADqB;AAJvB,KATQ;AAkBnB,uDACKT,aADL;AAEEU,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAF/C;AAGE,sCAAgC;AAC9BR,QAAAA,OAAO,EAAE;AADqB;AAHlC;AAlBmB,GArCI;AAgEzBqB,EAAAA,aAAa,EAAE;AACbC,IAAAA,KAAK,EAAE,MADM;AAEbC,IAAAA,QAAQ,EAAE,MAFG;AAGbX,IAAAA,WAAW,EAAG,GAAEd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiBW,EAAG;AAHvB,GAhEU;AAsEzBC,EAAAA,gBAAgB,EAAE;AAChBH,IAAAA,KAAK,EAAE,OADS;AAEhBI,IAAAA,QAAQ,EAAE,OAFM;AAGhB1B,IAAAA,OAAO,EAAE,aAHO;AAIhB2B,IAAAA,SAAS,EAAE,CAJK;AAKhBC,IAAAA,SAAS,EAAE,UALK;AAMhBC,IAAAA,QAAQ,EAAE,QANM;AAOhBC,IAAAA,SAAS,EAAE;AAPK,GAtEO;AAgFzBC,EAAAA,KAAK,kCACAjC,KAAK,CAACI,EAAN,CAAS8B,UAAT,CAAoBC,aADpB;AAEHC,IAAAA,YAAY,EAAE;AAFX,IAhFoB;AAoFzBC,EAAAA,aAAa,kCACRrC,KAAK,CAACI,EAAN,CAAS8B,UAAT,CAAoBI,OADZ;AAEXpC,IAAAA,OAAO,EAAE,MAFE;AAGXqC,IAAAA,UAAU,EAAE;AAHD,IApFY;AAyFzBC,EAAAA,MAAM,EAAE;AACNhB,IAAAA,KAAK,EAAE,KADD;AAENiB,IAAAA,MAAM,EAAE,KAFF;AAGNC,IAAAA,YAAY,EAAE,KAHR;AAIN5B,IAAAA,WAAW,EAAE,KAJP;AAKNX,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBa,MAAjB,CAAwBC,KALnC;AAON,cAAU;AACRjB,MAAAA,OAAO,EAAE;AADD;AAPJ,GAzFiB;AAoGzByC,EAAAA,IAAI,EAAE,EApGmB;AAqGzBC,EAAAA,IAAI,EAAE,EArGmB;AAsGzBC,EAAAA,2BAA2B,EAAE;AAC3BpC,IAAAA,OAAO,EAAG,aAAYT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAAM,EAD7B;AAE3BP,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAFlB;AAG3B,oCAAgC;AAC9BR,MAAAA,OAAO,EAAE;AADqB,KAHL;AAM3B,cAAU;AACRC,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KADrC;AAERD,MAAAA,OAAO,EAAG,aAAYT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAAM;AAFhD;AANiB,GAtGJ;AAkHzBoC,EAAAA,wBAAwB,EAAE;AACxB3C,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI;AADrB,GAlHD;AAsHzBqC,EAAAA,yBAAyB,EAAE;AACzB,eAAW;AACTC,MAAAA,SAAS,EAAE;AADF;AADc;AAtHF,CAAZ,CAAf;;AA6HA,eAAejD,MAAf","sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n cursor: \"pointer\",\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"file":"styles.js"}
1
+ {"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","clickable","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n clickable: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"file":"styles.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-lab",
3
- "version": "3.41.7",
3
+ "version": "3.41.8",
4
4
  "description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
5
5
  "homepage": "https://github.com/lumada-design/hv-uikit-react",
6
6
  "license": "Apache-2.0",
@@ -83,5 +83,5 @@
83
83
  "publishConfig": {
84
84
  "access": "public"
85
85
  },
86
- "gitHead": "83c85021d6842f5fc4299069cc94b6c0263274e8"
86
+ "gitHead": "b56cd62ca44fba35522ef9146d4f876dbd4c8edd"
87
87
  }