@hitachivantara/uikit-react-lab 3.38.0

package/dist/legacy/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;;AAoBA,eAAeX,MAAf","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/legacy/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/legacy/NotificationPanel/Notification/Notification.js

@@ -0,0 +1,203 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { HvTypography, withTooltip } from "@hitachivantara/uikit-react-core";
+import { withStyles } from "@material-ui/core";
+import styles from "./styles";
+dayjs.extend(relativeTime);
+
+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 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 dayjs(date).fromNow();
+    }
+
+    var d = dayjs(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.createElement("div", {
+    className: classes.messageContainer
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: isRead ? "normalText" : "highlightText"
+  }, title)), title);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(event) {
+      return _onClick(event, notificationId);
+    },
+    onKeyPress: function onKeyPress(event) {
+      return _onKeyPress(event, notificationId);
+    },
+    className: clsx(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NotificationWithTooltip, null), /*#__PURE__*/React.createElement("div", {
+    className: classes.timeContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.bullet, isRead && classes.hide)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.time
+  }, getTime())))), /*#__PURE__*/React.createElement("div", {
+    className: classes.notificationActionWrapper
+  }, rightContainer));
+};
+
+Notification.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root of the accordion.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the notification wrapper.
+     */
+    notificationWrapper: PropTypes.string,
+
+    /**
+     * Styles applied to the notification wrapper when the actions dropdown is open.
+     */
+    notificationWrapperDropdown: PropTypes.string,
+
+    /**
+     * Styles applied to the notification icon container.
+     */
+    iconContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the notification message container.
+     */
+    messageContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the notification time container.
+     */
+    timeContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the notification bullet.
+     */
+    bullet: PropTypes.string,
+
+    /**
+     * Styles applied to the content when it is hidden.
+     */
+    hide: PropTypes.string,
+
+    /**
+     * Styles applied to the notification time indicator.
+     */
+    time: PropTypes.string,
+
+    /**
+     * Styles applied to the notification is read.
+     */
+    read: PropTypes.string,
+
+    /**
+     * Styles applied when the notification dropdown is open.
+     */
+    notificationDropdownOpen: PropTypes.string,
+
+    /**
+     * Styles applied to the notification message actions dropdown.
+     */
+    notificationActionWrapper: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Notification id
+   */
+  notificationId: PropTypes.string,
+
+  /**
+   * Title of the notification
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * 'true' if the notification has been read or 'false' if it has not been read
+   */
+  isRead: PropTypes.bool.isRequired,
+
+  /**
+   * date the notification was created
+   */
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+
+  /**
+   * renderable icon that denotes the status of the notification
+   */
+  icon: PropTypes.element,
+
+  /**
+   * Click action applied to the notification
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * On Key Press action applied to the notification
+   */
+  onKeyPress: PropTypes.func,
+
+  /**
+   * Actions to be executed by the notification, available in the dropdown menu
+   */
+  rightContainer: PropTypes.node,
+
+  /**
+   * Denotes index of clicked notification
+   */
+  isHighlighted: PropTypes.bool
+};
+export default withStyles(styles, {
+  name: "HvNotificationPanelNotification"
+})(Notification);
+//# sourceMappingURL=Notification.js.map

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

@@ -0,0 +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":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,OAAOC,YAAP,MAAyB,2BAAzB;AACA,SAASC,YAAT,EAAuBC,WAAvB,QAA0C,kCAA1C;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEAL,KAAK,CAACM,MAAN,CAAaL,YAAb;;AAEA,IAAMM,WAAW,GAAG,SAAdA,WAAc,CAACC,GAAD;AAAA,SAASA,GAAG,CAACC,MAAJ,CAAWC,YAAX,IAA2BF,GAAG,CAACC,MAAJ,CAAWE,YAA/C;AAAA,CAApB;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,SAAD,EAAYC,KAAZ,EAAsB;AAC3C,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,WAAMF,SAAN;AAAA,GAA1B,CAD2C,CAE3C;;;AACA,SAAOV,WAAW,CAACY,iBAAD,EAAoBD,KAApB,EAA2B,KAA3B,EAAkCP,WAAlC,EAA+C;AAAES,IAAAA,KAAK,EAAE;AAAT,GAA/C,CAAlB;AACD,CAJD;;AAMA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAYf;AAAA,MAXJC,OAWI,QAXJA,OAWI;AAAA,MAVJC,SAUI,QAVJA,SAUI;AAAA,MATJC,cASI,QATJA,cASI;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,IAKI,QALJA,IAKI;AAAA,MAJJC,QAII,QAJJA,OAII;AAAA,MAHJC,WAGI,QAHJA,UAGI;AAAA,MAFJC,cAEI,QAFJA,cAEI;AAAA,MADJC,aACI,QADJA,aACI;;AACJ,MAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AACpB,QAAI,CAACP,MAAL,EAAa;AACX,aAAOtB,KAAK,CAACwB,IAAD,CAAL,CAAYM,OAAZ,EAAP;AACD;;AAED,QAAMC,CAAC,GAAG/B,KAAK,CAACwB,IAAD,CAAf;AACA,QAAIQ,MAAM,GAAG,qBAAb;;AAEA,QAAID,CAAC,CAACE,MAAF,CAASC,IAAI,CAACC,GAAL,EAAT,EAAqB,MAArB,CAAJ,EAAkC;AAChCH,MAAAA,MAAM,GAAG,aAAT;AACD;;AAED,WAAOD,CAAC,CAACC,MAAF,CAASA,MAAT,CAAP;AACD,GAbD;;AAeA,MAAMI,uBAAuB,GAAGxB,cAAc,eAC5C;AAAK,IAAA,SAAS,EAAEM,OAAO,CAACmB;AAAxB,kBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAEf,MAAM,GAAG,YAAH,GAAkB;AAA/C,KAAiED,KAAjE,CADF,CAD4C,EAI5CA,KAJ4C,CAA9C;AAOA,sBACE;AACE,IAAA,OAAO,EAAE,iBAACiB,KAAD;AAAA,aAAWb,QAAO,CAACa,KAAD,EAAQlB,cAAR,CAAlB;AAAA,KADX;AAEE,IAAA,UAAU,EAAE,oBAACkB,KAAD;AAAA,aAAWZ,WAAU,CAACY,KAAD,EAAQlB,cAAR,CAArB;AAAA,KAFd;AAGE,IAAA,SAAS,EAAErB,IAAI,CAACoB,SAAD,EAAYD,OAAO,CAACqB,IAApB,EAC0BX,aAD1B,IACZV,OAAO,CAACsB,2BADI,EAEGlB,MAFH,IAEZJ,OAAO,CAACuB,IAFI,CAHjB;AAOE,IAAA,IAAI,EAAC,QAPP;AAQE,IAAA,QAAQ,EAAE;AARZ,kBAUE;AACE,IAAA,SAAS,EAAE1C,IAAI,CAACmB,OAAO,CAACwB,mBAAT,EACuBd,aADvB,IACZV,OAAO,CAACyB,wBADI;AADjB,kBAKE;AAAK,IAAA,SAAS,EAAEzB,OAAO,CAAC0B;AAAxB,KAAwCrB,IAAxC,CALF,eAME,8CACE,oBAAC,uBAAD,OADF,eAEE;AAAK,IAAA,SAAS,EAAEL,OAAO,CAAC2B;AAAxB,kBACE;AACE,IAAA,SAAS,EAAE9C,IAAI,CAACmB,OAAO,CAAC4B,MAAT,EACGxB,MADH,IACZJ,OAAO,CAAC6B,IADI;AADjB,IADF,eAME;AAAK,IAAA,SAAS,EAAE7B,OAAO,CAAC8B;AAAxB,KAA+BnB,OAAO,EAAtC,CANF,CAFF,CANF,CAVF,eA4BE;AAAK,IAAA,SAAS,EAAEX,OAAO,CAAC+B;AAAxB,KAAoDtB,cAApD,CA5BF,CADF;AAgCD,CAnED;;AAqEAV,YAAY,CAACiC,SAAb,GAAyB;AACvB;AACF;AACA;AACEhC,EAAAA,OAAO,EAAEpB,SAAS,CAACqD,KAAV,CAAgB;AACvB;AACJ;AACA;AACIZ,IAAAA,IAAI,EAAEzC,SAAS,CAACsD,MAJO;;AAKvB;AACJ;AACA;AACIV,IAAAA,mBAAmB,EAAE5C,SAAS,CAACsD,MARR;;AAUvB;AACJ;AACA;AACIZ,IAAAA,2BAA2B,EAAE1C,SAAS,CAACsD,MAbhB;;AAevB;AACJ;AACA;AACIR,IAAAA,aAAa,EAAE9C,SAAS,CAACsD,MAlBF;;AAoBvB;AACJ;AACA;AACIf,IAAAA,gBAAgB,EAAEvC,SAAS,CAACsD,MAvBL;;AAyBvB;AACJ;AACA;AACIP,IAAAA,aAAa,EAAE/C,SAAS,CAACsD,MA5BF;;AA8BvB;AACJ;AACA;AACIN,IAAAA,MAAM,EAAEhD,SAAS,CAACsD,MAjCK;;AAmCvB;AACJ;AACA;AACIL,IAAAA,IAAI,EAAEjD,SAAS,CAACsD,MAtCO;;AAwCvB;AACJ;AACA;AACIJ,IAAAA,IAAI,EAAElD,SAAS,CAACsD,MA3CO;;AA4CvB;AACJ;AACA;AACIX,IAAAA,IAAI,EAAE3C,SAAS,CAACsD,MA/CO;;AAgDvB;AACJ;AACA;AACIT,IAAAA,wBAAwB,EAAE7C,SAAS,CAACsD,MAnDb;;AAqDvB;AACJ;AACA;AACIH,IAAAA,yBAAyB,EAAEnD,SAAS,CAACsD;AAxDd,GAAhB,EAyDNC,UA7DoB;;AA+DvB;AACF;AACA;AACElC,EAAAA,SAAS,EAAErB,SAAS,CAACsD,MAlEE;;AAmEvB;AACF;AACA;AACEhC,EAAAA,cAAc,EAAEtB,SAAS,CAACsD,MAtEH;;AAuEvB;AACF;AACA;AACE/B,EAAAA,KAAK,EAAEvB,SAAS,CAACsD,MAAV,CAAiBC,UA1ED;;AA2EvB;AACF;AACA;AACE/B,EAAAA,MAAM,EAAExB,SAAS,CAACwD,IAAV,CAAeD,UA9EA;;AA+EvB;AACF;AACA;AACE7B,EAAAA,IAAI,EAAE1B,SAAS,CAACyD,SAAV,CAAoB,CAACzD,SAAS,CAACsD,MAAX,EAAmBtD,SAAS,CAAC0D,MAA7B,EAAqC1D,SAAS,CAAC2D,MAA/C,CAApB,EAA4EJ,UAlF3D;;AAmFvB;AACF;AACA;AACE9B,EAAAA,IAAI,EAAEzB,SAAS,CAAC4D,OAtFO;;AAuFvB;AACF;AACA;AACEjC,EAAAA,OAAO,EAAE3B,SAAS,CAAC6D,IA1FI;;AA2FvB;AACF;AACA;AACEjC,EAAAA,UAAU,EAAE5B,SAAS,CAAC6D,IA9FC;;AA+FvB;AACF;AACA;AACEhC,EAAAA,cAAc,EAAE7B,SAAS,CAAC8D,IAlGH;;AAmGvB;AACF;AACA;AACEhC,EAAAA,aAAa,EAAE9B,SAAS,CAACwD;AAtGF,CAAzB;AAyGA,eAAelD,UAAU,CAACC,MAAD,EAAS;AAAEwD,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAgE5C,YAAhE,CAAf","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/legacy/NotificationPanel/Notification/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default } from "./Notification";
+//# sourceMappingURL=index.js.map

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

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

package/dist/legacy/NotificationPanel/Notification/styles.js

@@ -0,0 +1,130 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var outlineStyles = {
+  outlineColor: "#52A8EC",
+  outlineStyle: "solid",
+  outlineWidth: "0px",
+  outlineOffset: "-1px",
+  boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+};
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: "flex",
+      backgroundColor: theme.hv.palette.atmosphere.atmo1,
+      margin: "3px 3px 6px 3px",
+      "&:hover": {
+        outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      },
+      "&$read": {
+        backgroundColor: theme.hv.palette.atmosphere.atmo2,
+        outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo2),
+        "&:hover": {
+          backgroundColor: theme.hv.palette.atmosphere.atmo3,
+          outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+          "&.focus-visible": _objectSpread({}, outlineStyles)
+        }
+      },
+      "&.focus-visible": _objectSpread(_objectSpread({}, outlineStyles), {}, {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        "&$read": _objectSpread({}, outlineStyles),
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      })
+    },
+    notificationWrapper: {
+      display: "flex",
+      minHeight: "72px",
+      marginRight: theme.hv.spacing.xs,
+      color: theme.hv.palette.accent.acce1,
+      padding: "17px",
+      paddingRight: 0,
+      cursor: "pointer",
+      "&:focus": {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        outline: "5px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+        boxShadow: "none",
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      },
+      "&.focus-visible": _objectSpread(_objectSpread({}, outlineStyles), {}, {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      })
+    },
+    iconContainer: {
+      width: "32px",
+      minWidth: "32px",
+      marginRight: "".concat(theme.hv.spacing.sm, "px")
+    },
+    messageContainer: {
+      width: "196px",
+      maxWidth: "196px",
+      display: "-webkit-box",
+      lineClamp: 2,
+      boxOrient: "vertical",
+      overflow: "hidden"
+    },
+    title: _objectSpread(_objectSpread({}, theme.hv.typography.highlightText), {}, {
+      marginBottom: "5px"
+    }),
+    timeContainer: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
+      display: "flex",
+      alignItems: "center"
+    }),
+    bullet: {
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%",
+      marginRight: "4px",
+      backgroundColor: theme.hv.palette.accent.acce1,
+      "&$hide": {
+        display: "none"
+      }
+    },
+    hide: {},
+    read: {},
+    notificationWrapperDropdown: {
+      outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+      backgroundColor: theme.hv.palette.atmosphere.atmo3,
+      "& $notificationActionWrapper": {
+        display: "block"
+      },
+      "&$read": {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3)
+      }
+    },
+    notificationDropdownOpen: {
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    },
+    notificationActionWrapper: {
+      "& > div": {
+        marginTop: 17
+      }
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":";;;;;;;;;;;;;AAAA,IAAMA,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,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,MADL;AAEJC,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAFzC;AAGJC,MAAAA,MAAM,EAAE,iBAHJ;AAIJ,iBAAW;AACTC,QAAAA,OAAO,sBAAeT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAA3C,CADE;AAETP,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAFpC;AAGT,wCAAgC;AAC9BR,UAAAA,OAAO,EAAE;AADqB;AAHvB,OAJP;AAWJ,gBAAU;AACRC,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BK,KADrC;AAERF,QAAAA,OAAO,sBAAeT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BK,KAA3C,CAFC;AAGR,mBAAW;AACTR,UAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KADpC;AAETD,UAAAA,OAAO,sBAAeT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAA3C,CAFE;AAIT,+CACKjB,aADL;AAJS;AAHH,OAXN;AAwBJ,yDACKA,aADL;AAEEU,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAF/C;AAGE,oCACKjB,aADL,CAHF;AAOE,wCAAgC;AAC9BS,UAAAA,OAAO,EAAE;AADqB;AAPlC;AAxBI,KADmB;AAqCzBU,IAAAA,mBAAmB,EAAE;AACnBV,MAAAA,OAAO,EAAE,MADU;AAEnBW,MAAAA,SAAS,EAAE,MAFQ;AAGnBC,MAAAA,WAAW,EAAEd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiBC,EAHX;AAInBC,MAAAA,KAAK,EAAEjB,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBa,MAAjB,CAAwBC,KAJZ;AAKnBC,MAAAA,OAAO,EAAE,MALU;AAMnBC,MAAAA,YAAY,EAAE,CANK;AAOnBC,MAAAA,MAAM,EAAE,SAPW;AASnB,iBAAW;AACTnB,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KADpC;AAETD,QAAAA,OAAO,sBAAeT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAA3C,CAFE;AAGTZ,QAAAA,SAAS,EAAE,MAHF;AAIT,wCAAgC;AAC9BI,UAAAA,OAAO,EAAE;AADqB;AAJvB,OATQ;AAkBnB,yDACKT,aADL;AAEEU,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAF/C;AAGE,wCAAgC;AAC9BR,UAAAA,OAAO,EAAE;AADqB;AAHlC;AAlBmB,KArCI;AAgEzBqB,IAAAA,aAAa,EAAE;AACbC,MAAAA,KAAK,EAAE,MADM;AAEbC,MAAAA,QAAQ,EAAE,MAFG;AAGbX,MAAAA,WAAW,YAAKd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiBW,EAAtB;AAHE,KAhEU;AAsEzBC,IAAAA,gBAAgB,EAAE;AAChBH,MAAAA,KAAK,EAAE,OADS;AAEhBI,MAAAA,QAAQ,EAAE,OAFM;AAGhB1B,MAAAA,OAAO,EAAE,aAHO;AAIhB2B,MAAAA,SAAS,EAAE,CAJK;AAKhBC,MAAAA,SAAS,EAAE,UALK;AAMhBC,MAAAA,QAAQ,EAAE;AANM,KAtEO;AA+EzBC,IAAAA,KAAK,kCACAhC,KAAK,CAACI,EAAN,CAAS6B,UAAT,CAAoBC,aADpB;AAEHC,MAAAA,YAAY,EAAE;AAFX,MA/EoB;AAmFzBC,IAAAA,aAAa,kCACRpC,KAAK,CAACI,EAAN,CAAS6B,UAAT,CAAoBI,OADZ;AAEXnC,MAAAA,OAAO,EAAE,MAFE;AAGXoC,MAAAA,UAAU,EAAE;AAHD,MAnFY;AAwFzBC,IAAAA,MAAM,EAAE;AACNf,MAAAA,KAAK,EAAE,KADD;AAENgB,MAAAA,MAAM,EAAE,KAFF;AAGNC,MAAAA,YAAY,EAAE,KAHR;AAIN3B,MAAAA,WAAW,EAAE,KAJP;AAKNX,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBa,MAAjB,CAAwBC,KALnC;AAON,gBAAU;AACRjB,QAAAA,OAAO,EAAE;AADD;AAPJ,KAxFiB;AAmGzBwC,IAAAA,IAAI,EAAE,EAnGmB;AAoGzBC,IAAAA,IAAI,EAAE,EApGmB;AAqGzBC,IAAAA,2BAA2B,EAAE;AAC3BnC,MAAAA,OAAO,sBAAeT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAA3C,CADoB;AAE3BP,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAFlB;AAG3B,sCAAgC;AAC9BR,QAAAA,OAAO,EAAE;AADqB,OAHL;AAM3B,gBAAU;AACRC,QAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KADrC;AAERD,QAAAA,OAAO,sBAAeT,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI,KAA3C;AAFC;AANiB,KArGJ;AAiHzBmC,IAAAA,wBAAwB,EAAE;AACxB1C,MAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BI;AADrB,KAjHD;AAqHzBoC,IAAAA,yBAAyB,EAAE;AACzB,iBAAW;AACTC,QAAAA,SAAS,EAAE;AADF;AADc;AArHF,GAAZ;AAAA,CAAf;;AA4HA,eAAehD,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  },\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"}

package/dist/legacy/NotificationPanel/NotificationPanel.d.ts

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvDropDownMenuProps } from "@hitachivantara/uikit-react-core";
+
+export interface Actions {
+  values: string;
+  dropDownMenuProps: HvDropDownMenuProps;
+}
+
+export interface Labels {
+  notificationGroupHeader: {
+    newNotifications: string;
+    olderNotifications: string;
+  };
+  notificationIndicator: {
+    label: string;
+    buttonLabel: string;
+  };
+}
+
+interface Header {
+  /**
+   * The title of the header
+   */
+  headerTitle: string;
+  /**
+   * The icon that denoted close functionality
+   */
+  headerCloseImg: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+}
+
+interface Value {
+  label: string;
+  action: string;
+  callback?: (notificationId: string) => void;
+}
+
+interface actions {
+  values: Value[];
+  dropDownMenuProps?: HvDropDownMenuProps;
+}
+
+interface notification {
+  id: string;
+  title: string;
+  isRead?: boolean;
+  date: string | number | Record<string, unknown>;
+  icon?: React.ReactNode;
+  onClick?: (event: Event, notificationId: string) => void;
+  onKeyPress?: (event: Event, notificationId: string) => void;
+  onToggleOpen?: (open: boolean) => void;
+  actions?: actions;
+}
+
+export type HvNotificationPanelClassKey =
+  | "root"
+  | "closed"
+  | "open"
+  | "panel"
+  | "actionBar"
+  | "actionBarRoot"
+  | "notificationsIndicator";
+
+export interface HvNotificationPanelProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvNotificationPanelClassKey> {
+  /**
+   * 'true' if panel is open or 'false' if the panel is not open
+   *
+   * @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.
+   */
+  open?: boolean;
+
+  /**
+   * Array of notification object to be rendered inside the panel
+   */
+  notifications: notification[];
+  /**
+   * Indicates that new notifications have arrived
+   */
+  hasNewNotifications?: boolean;
+
+  /**
+   * renderable footer element
+   */
+  footer?: React.ReactNode;
+
+  /**
+   * Title of the EmptyStatePanel
+   */
+  emptyStatePanelTitle?: string;
+
+  /**
+   * Message of the EmptyStatePanel
+   */
+  emptyStatePanelMessage?: string;
+
+  /**
+   * Empty Panel custom Icon
+   */
+  emptyStatePanelIcon?: React.ReactNode;
+
+  /**
+   * Labels to apply to the Panel
+   */
+  labels?: Labels[];
+
+  /**
+   * Function to be supplied to the notification update button
+   */
+  newNotificationsButtonAction?: (event: Event) => void;
+  /**
+   * The locale to be used on the notification date, if undefined it will use the one from the HvProvider
+   */
+  locale?: string;
+}
+
+export default function HvNotificationPanel(props: HvNotificationPanelProps): JSX.Element | null;