@hitachivantara/uikit-react-lab 3.38.0

package/dist/NavigationAnchors/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _NavigationAnchors.default;
+  }
+});
+
+var _NavigationAnchors = _interopRequireDefault(require("./NavigationAnchors"));
+//# sourceMappingURL=index.js.map

package/dist/NavigationAnchors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NavigationAnchors/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./NavigationAnchors\";\n"],"file":"index.js"}

package/dist/NavigationAnchors/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      width: 200
+    },
+    listItemGutters: {
+      padding: "0 ".concat(theme.hv.spacing.sm, "px")
+    },
+    listItemSelected: {
+      fontWeight: theme.hv.typography.highlightText.fontWeight,
+      borderLeft: "2px solid ".concat(theme.hv.palette.accent.acce1),
+      paddingLeft: theme.hv.spacing.sm - 2
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/NavigationAnchors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NavigationAnchors/styles.js"],"names":["styles","theme","root","width","listItemGutters","padding","hv","spacing","sm","listItemSelected","fontWeight","typography","highlightText","borderLeft","palette","accent","acce1","paddingLeft"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,KAAK,EAAE;AADH,KADmB;AAKzBC,IAAAA,eAAe,EAAE;AACfC,MAAAA,OAAO,cAAOJ,KAAK,CAACK,EAAN,CAASC,OAAT,CAAiBC,EAAxB;AADQ,KALQ;AAQzBC,IAAAA,gBAAgB,EAAE;AAChBC,MAAAA,UAAU,EAAET,KAAK,CAACK,EAAN,CAASK,UAAT,CAAoBC,aAApB,CAAkCF,UAD9B;AAEhBG,MAAAA,UAAU,sBAAeZ,KAAK,CAACK,EAAN,CAASQ,OAAT,CAAiBC,MAAjB,CAAwBC,KAAvC,CAFM;AAGhBC,MAAAA,WAAW,EAAEhB,KAAK,CAACK,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB;AAHnB;AARO,GAAZ;AAAA,CAAf;;eAeeR,M","sourcesContent":["const styles = (theme) => ({\n  root: {\n    width: 200,\n  },\n\n  listItemGutters: {\n    padding: `0 ${theme.hv.spacing.sm}px`,\n  },\n  listItemSelected: {\n    fontWeight: theme.hv.typography.highlightText.fontWeight,\n    borderLeft: `2px solid ${theme.hv.palette.accent.acce1}`,\n    paddingLeft: theme.hv.spacing.sm - 2,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/NotificationPanel/EmptyStatePanel/EmptyStatePanel.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvEmptyStatePanelClassKey =
+  | "emptyStateRoot"
+  | "emptyStateContainer"
+  | "emptyStateIconContainer"
+  | "emptyStateTitleContainer";
+
+export interface HvEmptyStatePanelProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvEmptyStatePanelClassKey> {
+  /**
+   * Title to display in the Empty Panel
+   */
+  title: string;
+  /**
+   * Empty State message to display
+   */
+  message: string;
+
+  /**
+   * Empty State icon
+   */
+  icon?: React.ReactNode;
+}
+
+export default function HvEmptyStatePanel(props: HvEmptyStatePanelProps): JSX.Element | null;

package/dist/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _core = require("@material-ui/core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var EmptyStatePanel = function EmptyStatePanel(_ref) {
+  var id = _ref.id,
+      classes = _ref.classes,
+      className = _ref.className,
+      title = _ref.title,
+      message = _ref.message,
+      icon = _ref.icon;
+  return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvEmptyState, {
+    id: id,
+    title: title,
+    message: message,
+    icon: icon || /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Alert, null),
+    className: className,
+    classes: {
+      root: classes.emptyStateRoot,
+      container: classes.emptyStateContainer,
+      iconContainer: classes.emptyStateIconContainer,
+      titleContainer: classes.emptyStateTitleContainer
+    }
+  });
+};
+
+EmptyStatePanel.propTypes = {
+  /**
+   * Id of the EmptyStatePanel
+   */
+  id: _propTypes.default.string.isRequired,
+
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root of the panel.
+     */
+    emptyStateRoot: _propTypes.default.string,
+
+    /**
+     * Styles applied to the EmptyStatePanel container.
+     */
+    emptyStateContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the empty state container icon.
+     */
+    emptyStateIconContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the EmptyStatePanel title.
+     */
+    emptyStateTitleContainer: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Title of the EmptyStatePanel
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * Message of the EmptyStatePanel
+   */
+  message: _propTypes.default.string.isRequired,
+
+  /**
+   * Empty Panel Icon
+   */
+  icon: _propTypes.default.element
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvEmptyStatePanel"
+})(EmptyStatePanel);
+
+exports.default = _default;
+//# sourceMappingURL=EmptyStatePanel.js.map

package/dist/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js"],"names":["EmptyStatePanel","id","classes","className","title","message","icon","root","emptyStateRoot","container","emptyStateContainer","iconContainer","emptyStateIconContainer","titleContainer","emptyStateTitleContainer","propTypes","PropTypes","string","isRequired","shape","element","styles","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAAsD;AAAA,MAAnDC,EAAmD,QAAnDA,EAAmD;AAAA,MAA/CC,OAA+C,QAA/CA,OAA+C;AAAA,MAAtCC,SAAsC,QAAtCA,SAAsC;AAAA,MAA3BC,KAA2B,QAA3BA,KAA2B;AAAA,MAApBC,OAAoB,QAApBA,OAAoB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AAC5E,sBACE,6BAAC,4BAAD;AACE,IAAA,EAAE,EAAEL,EADN;AAEE,IAAA,KAAK,EAAEG,KAFT;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEC,IAAI,iBAAI,6BAAC,sBAAD,OAJhB;AAKE,IAAA,SAAS,EAAEH,SALb;AAME,IAAA,OAAO,EAAE;AACPI,MAAAA,IAAI,EAAEL,OAAO,CAACM,cADP;AAEPC,MAAAA,SAAS,EAAEP,OAAO,CAACQ,mBAFZ;AAGPC,MAAAA,aAAa,EAAET,OAAO,CAACU,uBAHhB;AAIPC,MAAAA,cAAc,EAAEX,OAAO,CAACY;AAJjB;AANX,IADF;AAeD,CAhBD;;AAkBAd,eAAe,CAACe,SAAhB,GAA4B;AAC1B;AACF;AACA;AACEd,EAAAA,EAAE,EAAEe,mBAAUC,MAAV,CAAiBC,UAJK;;AAK1B;AACF;AACA;AACEhB,EAAAA,OAAO,EAAEc,mBAAUG,KAAV,CAAgB;AACvB;AACJ;AACA;AACIX,IAAAA,cAAc,EAAEQ,mBAAUC,MAJH;;AAKvB;AACJ;AACA;AACIP,IAAAA,mBAAmB,EAAEM,mBAAUC,MARR;;AAUvB;AACJ;AACA;AACIL,IAAAA,uBAAuB,EAAEI,mBAAUC,MAbZ;;AAevB;AACJ;AACA;AACIH,IAAAA,wBAAwB,EAAEE,mBAAUC;AAlBb,GAAhB,EAmBNC,UA3BuB;;AA6B1B;AACF;AACA;AACEf,EAAAA,SAAS,EAAEa,mBAAUC,MAhCK;;AAiC1B;AACF;AACA;AACEb,EAAAA,KAAK,EAAEY,mBAAUC,MAAV,CAAiBC,UApCE;;AAqC1B;AACF;AACA;AACEb,EAAAA,OAAO,EAAEW,mBAAUC,MAAV,CAAiBC,UAxCA;;AAyC1B;AACF;AACA;AACEZ,EAAAA,IAAI,EAAEU,mBAAUI;AA5CU,CAA5B;;eA8Ce,sBAAWC,eAAX,EAAmB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAkDtB,eAAlD,C","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { HvEmptyState } from \"@hitachivantara/uikit-react-core\";\nimport { Alert } from \"@hitachivantara/uikit-react-icons\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst EmptyStatePanel = ({ id, classes, className, title, message, icon }) => {\n  return (\n    <HvEmptyState\n      id={id}\n      title={title}\n      message={message}\n      icon={icon || <Alert />}\n      className={className}\n      classes={{\n        root: classes.emptyStateRoot,\n        container: classes.emptyStateContainer,\n        iconContainer: classes.emptyStateIconContainer,\n        titleContainer: classes.emptyStateTitleContainer,\n      }}\n    />\n  );\n};\n\nEmptyStatePanel.propTypes = {\n  /**\n   * Id of the EmptyStatePanel\n   */\n  id: PropTypes.string.isRequired,\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 panel.\n     */\n    emptyStateRoot: PropTypes.string,\n    /**\n     * Styles applied to the EmptyStatePanel container.\n     */\n    emptyStateContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the empty state container icon.\n     */\n    emptyStateIconContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the EmptyStatePanel title.\n     */\n    emptyStateTitleContainer: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Title of the EmptyStatePanel\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Message of the EmptyStatePanel\n   */\n  message: PropTypes.string.isRequired,\n  /**\n   * Empty Panel Icon\n   */\n  icon: PropTypes.element,\n};\nexport default withStyles(styles, { name: \"HvEmptyStatePanel\" })(EmptyStatePanel);\n"],"file":"EmptyStatePanel.js"}

package/dist/NotificationPanel/EmptyStatePanel/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _EmptyStatePanel.default;
+  }
+});
+
+var _EmptyStatePanel = _interopRequireDefault(require("./EmptyStatePanel"));
+//# sourceMappingURL=index.js.map

package/dist/NotificationPanel/EmptyStatePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/EmptyStatePanel/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./EmptyStatePanel\";\n"],"file":"index.js"}

package/dist/NotificationPanel/EmptyStatePanel/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles(theme) {
+  return {
+    emptyStateRoot: {
+      alignItems: "center",
+      padding: "".concat(theme.hv.spacing.sm, "px 0")
+    },
+    emptyStateContainer: {
+      display: "block"
+    },
+    emptyStateIconContainer: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    emptyStateTitleContainer: {
+      display: "flex",
+      justifyContent: "center"
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/NotificationPanel/EmptyStatePanel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/EmptyStatePanel/styles.js"],"names":["styles","theme","emptyStateRoot","alignItems","padding","hv","spacing","sm","emptyStateContainer","display","emptyStateIconContainer","justifyContent","emptyStateTitleContainer"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,cAAc,EAAE;AACdC,MAAAA,UAAU,EAAE,QADE;AAEdC,MAAAA,OAAO,YAAKH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,EAAtB;AAFO,KADS;AAKzBC,IAAAA,mBAAmB,EAAE;AACnBC,MAAAA,OAAO,EAAE;AADU,KALI;AASzBC,IAAAA,uBAAuB,EAAE;AACvBD,MAAAA,OAAO,EAAE,MADc;AAEvBE,MAAAA,cAAc,EAAE;AAFO,KATA;AAczBC,IAAAA,wBAAwB,EAAE;AACxBH,MAAAA,OAAO,EAAE,MADe;AAExBE,MAAAA,cAAc,EAAE;AAFQ;AAdD,GAAZ;AAAA,CAAf;;eAoBeX,M","sourcesContent":["const styles = (theme) => ({\n  emptyStateRoot: {\n    alignItems: \"center\",\n    padding: `${theme.hv.spacing.sm}px 0`,\n  },\n  emptyStateContainer: {\n    display: \"block\",\n  },\n\n  emptyStateIconContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  emptyStateTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/NotificationPanel/Notification/Notification.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvNotificationClassKey =
+  | "root"
+  | "notificationWrapper"
+  | "notificationWrapperDropdown"
+  | "iconContainer"
+  | "messageContainer"
+  | "timeContainer"
+  | "bullet"
+  | "hide"
+  | "time"
+  | "notificationActionWrapper"
+  | "read"
+  | "notificationDropdownOpen";
+
+export interface HvNotificationProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvNotificationClassKey> {
+  /**
+   * Notification id
+   */
+  notificationId: string;
+  /**
+   * Title of the notification
+   */
+  title: string;
+  /**
+   * 'true' if the notification has been read or 'false' if it has not been read
+   */
+  isRead: boolean;
+  /**
+   * date the notification was created
+   */
+  date: string | number | object;
+  /**
+   * renderable icon that denotes the status of the notification
+   */
+  icon?: React.ReactNode;
+  /**
+   * Actions to be executed by the notification, available in the dropdown menu
+   */
+  rightContainer?: React.ReactNode;
+  /**
+   * Denotes index of clicked notification
+   */
+  isHighlighted: boolean;
+}
+
+export default function HvNotification(props: HvNotificationProps): JSX.Element | null;

package/dist/NotificationPanel/Notification/Notification.js

@@ -0,0 +1,223 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _core = require("@material-ui/core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+_dayjs.default.extend(_relativeTime.default);
+
+var hideTooltip = function hideTooltip(evt) {
+  return evt.target.scrollHeight <= evt.target.clientHeight;
+};
+
+var wrapperTooltip = function wrapperTooltip(Component, label) {
+  var ComponentFunction = function ComponentFunction() {
+    return Component;
+  }; // override thr withTooltip styles as we want to use the styles of the component
+
+
+  return (0, _uikitReactCore.withTooltip)(ComponentFunction, label, "top", hideTooltip, {
+    style: {}
+  });
+};
+
+var Notification = function Notification(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      notificationId = _ref.notificationId,
+      title = _ref.title,
+      isRead = _ref.isRead,
+      icon = _ref.icon,
+      date = _ref.date,
+      _onClick = _ref.onClick,
+      _onKeyPress = _ref.onKeyPress,
+      rightContainer = _ref.rightContainer,
+      isHighlighted = _ref.isHighlighted;
+
+  var getTime = function getTime() {
+    if (!isRead) {
+      return (0, _dayjs.default)(date).fromNow();
+    }
+
+    var d = (0, _dayjs.default)(date);
+    var format = "D MMMM YYYY, h:mm A";
+
+    if (d.isSame(Date.now(), "week")) {
+      format = "ddd, h:mm A";
+    }
+
+    return d.format(format);
+  };
+
+  var NotificationWithTooltip = wrapperTooltip( /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.messageContainer
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
+    variant: isRead ? "normalText" : "highlightText"
+  }, title)), title);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: function onClick(event) {
+      return _onClick(event, notificationId);
+    },
+    onKeyPress: function onKeyPress(event) {
+      return _onKeyPress(event, notificationId);
+    },
+    className: (0, _clsx.default)(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(NotificationWithTooltip, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.timeContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(classes.bullet, isRead && classes.hide)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.time
+  }, getTime())))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.notificationActionWrapper
+  }, rightContainer));
+};
+
+Notification.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root of the accordion.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification wrapper.
+     */
+    notificationWrapper: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification wrapper when the actions dropdown is open.
+     */
+    notificationWrapperDropdown: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification icon container.
+     */
+    iconContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification message container.
+     */
+    messageContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification time container.
+     */
+    timeContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification bullet.
+     */
+    bullet: _propTypes.default.string,
+
+    /**
+     * Styles applied to the content when it is hidden.
+     */
+    hide: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification time indicator.
+     */
+    time: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification is read.
+     */
+    read: _propTypes.default.string,
+
+    /**
+     * Styles applied when the notification dropdown is open.
+     */
+    notificationDropdownOpen: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification message actions dropdown.
+     */
+    notificationActionWrapper: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Notification id
+   */
+  notificationId: _propTypes.default.string,
+
+  /**
+   * Title of the notification
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * 'true' if the notification has been read or 'false' if it has not been read
+   */
+  isRead: _propTypes.default.bool.isRequired,
+
+  /**
+   * date the notification was created
+   */
+  date: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+
+  /**
+   * renderable icon that denotes the status of the notification
+   */
+  icon: _propTypes.default.element,
+
+  /**
+   * Click action applied to the notification
+   */
+  onClick: _propTypes.default.func,
+
+  /**
+   * On Key Press action applied to the notification
+   */
+  onKeyPress: _propTypes.default.func,
+
+  /**
+   * Actions to be executed by the notification, available in the dropdown menu
+   */
+  rightContainer: _propTypes.default.node,
+
+  /**
+   * Denotes index of clicked notification
+   */
+  isHighlighted: _propTypes.default.bool
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvNotificationPanelNotification"
+})(Notification);
+
+exports.default = _default;
+//# sourceMappingURL=Notification.js.map

package/dist/NotificationPanel/Notification/Notification.js.map

@@ -0,0 +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"}

package/dist/NotificationPanel/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Notification";
+export * from "./Notification";

package/dist/NotificationPanel/Notification/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Notification.default;
+  }
+});
+
+var _Notification = _interopRequireDefault(require("./Notification"));
+//# sourceMappingURL=index.js.map

package/dist/NotificationPanel/Notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/Notification/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./Notification\";\n"],"file":"index.js"}