@hitachivantara/uikit-react-lab 3.55.0 → 4.0.1-next.2

package/dist/modern/NotificationPanel/Notification/Notification.js

@@ -4,8 +4,10 @@ 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 { withStyles } from "@mui/styles";
 import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 dayjs.extend(relativeTime);
 
 const hideTooltip = evt => evt.target.scrollHeight <= evt.target.clientHeight;
@@ -47,30 +49,40 @@ const Notification = ({
     return d.format(format);
   };
 
-  const NotificationWithTooltip = wrapperTooltip( /*#__PURE__*/React.createElement("div", {
-    className: classes.messageContainer
-  }, /*#__PURE__*/React.createElement(HvTypography, {
-    variant: isRead ? "normalText" : "highlightText"
-  }, title)), title);
-  return /*#__PURE__*/React.createElement("div", {
+  const NotificationWithTooltip = wrapperTooltip( /*#__PURE__*/_jsx("div", {
+    className: classes.messageContainer,
+    children: /*#__PURE__*/_jsx(HvTypography, {
+      variant: isRead ? "normalText" : "highlightText",
+      children: title
+    })
+  }), title);
+  return /*#__PURE__*/_jsxs("div", {
     onClick: event => onClick === null || onClick === void 0 ? void 0 : onClick(event, notificationId),
     onKeyPress: event => onKeyPress === null || onKeyPress === void 0 ? void 0 : 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, !!onClick && classes.clickable)
-  }, /*#__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));
+    tabIndex: 0,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!onClick && classes.clickable),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classes.iconContainer,
+        children: icon
+      }), /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(NotificationWithTooltip, {}), /*#__PURE__*/_jsxs("div", {
+          className: classes.timeContainer,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: clsx(classes.bullet, isRead && classes.hide)
+          }), /*#__PURE__*/_jsx("div", {
+            className: classes.time,
+            children: getTime()
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: classes.notificationActionWrapper,
+      children: rightContainer
+    })]
+  });
 };
 
 process.env.NODE_ENV !== "production" ? Notification.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"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"],"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"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"],"mappings":"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"}
+{"version":3,"file":"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"],"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"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 \"@mui/styles\";\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"],"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,aAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;;AAEAL,KAAK,CAACM,MAAN,CAAaL,YAAb;;AAEA,MAAMM,WAAW,GAAIC,GAAD,IAASA,GAAG,CAACC,MAAJ,CAAWC,YAAX,IAA2BF,GAAG,CAACC,MAAJ,CAAWE,YAAnE;;AAEA,MAAMC,cAAc,GAAG,CAACC,SAAD,EAAYC,KAAZ,KAAsB;EAC3C,MAAMC,iBAAiB,GAAG,MAAMF,SAAhC,CAD2C,CAE3C;;;EACA,OAAOV,WAAW,CAACY,iBAAD,EAAoBD,KAApB,EAA2B,KAA3B,EAAkCP,WAAlC,EAA+C;IAAES,KAAK,EAAE;EAAT,CAA/C,CAAlB;AACD,CAJD;;AAMA,MAAMC,YAAY,GAAG,CAAC;EACpBC,OADoB;EAEpBC,SAFoB;EAGpBC,cAHoB;EAIpBC,KAJoB;EAKpBC,MALoB;EAMpBC,IANoB;EAOpBC,IAPoB;EAQpBC,OARoB;EASpBC,UAToB;EAUpBC,cAVoB;EAWpBC;AAXoB,CAAD,KAYf;EACJ,MAAMC,OAAO,GAAG,MAAM;IACpB,IAAI,CAACP,MAAL,EAAa;MACX,OAAOtB,KAAK,CAACwB,IAAD,CAAL,CAAYM,OAAZ,EAAP;IACD;;IAED,MAAMC,CAAC,GAAG/B,KAAK,CAACwB,IAAD,CAAf;IACA,IAAIQ,MAAM,GAAG,qBAAb;;IAEA,IAAID,CAAC,CAACE,MAAF,CAASC,IAAI,CAACC,GAAL,EAAT,EAAqB,MAArB,CAAJ,EAAkC;MAChCH,MAAM,GAAG,aAAT;IACD;;IAED,OAAOD,CAAC,CAACC,MAAF,CAASA,MAAT,CAAP;EACD,CAbD;;EAeA,MAAMI,uBAAuB,GAAGxB,cAAc,eAC5C;IAAK,SAAS,EAAEM,OAAO,CAACmB,gBAAxB;IAAA,uBACE,KAAC,YAAD;MAAc,OAAO,EAAEf,MAAM,GAAG,YAAH,GAAkB,eAA/C;MAAA,UAAiED;IAAjE;EADF,EAD4C,EAI5CA,KAJ4C,CAA9C;EAOA,oBACE;IACE,OAAO,EAAGiB,KAAD,IAAWb,OAAX,aAAWA,OAAX,uBAAWA,OAAO,CAAGa,KAAH,EAAUlB,cAAV,CAD7B;IAEE,UAAU,EAAGkB,KAAD,IAAWZ,UAAX,aAAWA,UAAX,uBAAWA,UAAU,CAAGY,KAAH,EAAUlB,cAAV,CAFnC;IAGE,SAAS,EAAErB,IAAI,CAACoB,SAAD,EAAYD,OAAO,CAACqB,IAApB,EAC0BX,aAD1B,IACZV,OAAO,CAACsB,2BADI,EAEGlB,MAFH,IAEZJ,OAAO,CAACuB,IAFI,CAHjB;IAOE,IAAI,EAAC,QAPP;IAQE,QAAQ,EAAE,CARZ;IAAA,wBAUE;MACE,SAAS,EAAE1C,IAAI,CAACmB,OAAO,CAACwB,mBAAT,EACuBd,aADvB,IACZV,OAAO,CAACyB,wBADI,EAEQ,CAAC,CAAClB,OAFV,IAEZP,OAAO,CAAC0B,SAFI,CADjB;MAAA,wBAME;QAAK,SAAS,EAAE1B,OAAO,CAAC2B,aAAxB;QAAA,UAAwCtB;MAAxC,EANF,eAOE;QAAA,wBACE,KAAC,uBAAD,KADF,eAEE;UAAK,SAAS,EAAEL,OAAO,CAAC4B,aAAxB;UAAA,wBACE;YACE,SAAS,EAAE/C,IAAI,CAACmB,OAAO,CAAC6B,MAAT,EACGzB,MADH,IACZJ,OAAO,CAAC8B,IADI;UADjB,EADF,eAME;YAAK,SAAS,EAAE9B,OAAO,CAAC+B,IAAxB;YAAA,UAA+BpB,OAAO;UAAtC,EANF;QAAA,EAFF;MAAA,EAPF;IAAA,EAVF,eA6BE;MAAK,SAAS,EAAEX,OAAO,CAACgC,yBAAxB;MAAA,UAAoDvB;IAApD,EA7BF;EAAA,EADF;AAiCD,CApED;;AAsEA,wCAAAV,YAAY,CAACkC,SAAb,GAAyB;EACvB;AACF;AACA;EACEjC,OAAO,EAAEpB,SAAS,CAACsD,KAAV,CAAgB;IACvB;AACJ;AACA;IACIb,IAAI,EAAEzC,SAAS,CAACuD,MAJO;;IAKvB;AACJ;AACA;IACIX,mBAAmB,EAAE5C,SAAS,CAACuD,MARR;;IAUvB;AACJ;AACA;IACIb,2BAA2B,EAAE1C,SAAS,CAACuD,MAbhB;;IAevB;AACJ;AACA;IACIR,aAAa,EAAE/C,SAAS,CAACuD,MAlBF;;IAoBvB;AACJ;AACA;IACIhB,gBAAgB,EAAEvC,SAAS,CAACuD,MAvBL;;IAyBvB;AACJ;AACA;IACIP,aAAa,EAAEhD,SAAS,CAACuD,MA5BF;;IA8BvB;AACJ;AACA;IACIN,MAAM,EAAEjD,SAAS,CAACuD,MAjCK;;IAmCvB;AACJ;AACA;IACIL,IAAI,EAAElD,SAAS,CAACuD,MAtCO;;IAwCvB;AACJ;AACA;IACIJ,IAAI,EAAEnD,SAAS,CAACuD,MA3CO;;IA4CvB;AACJ;AACA;IACIZ,IAAI,EAAE3C,SAAS,CAACuD,MA/CO;;IAgDvB;AACJ;AACA;IACIV,wBAAwB,EAAE7C,SAAS,CAACuD,MAnDb;;IAqDvB;AACJ;AACA;IACIH,yBAAyB,EAAEpD,SAAS,CAACuD,MAxDd;;IAyDvB;AACJ;AACA;IACIT,SAAS,EAAE9C,SAAS,CAACuD;EA5DE,CAAhB,EA6DNC,UAjEoB;;EAmEvB;AACF;AACA;EACEnC,SAAS,EAAErB,SAAS,CAACuD,MAtEE;;EAuEvB;AACF;AACA;EACEjC,cAAc,EAAEtB,SAAS,CAACuD,MA1EH;;EA2EvB;AACF;AACA;EACEhC,KAAK,EAAEvB,SAAS,CAACuD,MAAV,CAAiBC,UA9ED;;EA+EvB;AACF;AACA;EACEhC,MAAM,EAAExB,SAAS,CAACyD,IAAV,CAAeD,UAlFA;;EAmFvB;AACF;AACA;EACE9B,IAAI,EAAE1B,SAAS,CAAC0D,SAAV,CAAoB,CAAC1D,SAAS,CAACuD,MAAX,EAAmBvD,SAAS,CAAC2D,MAA7B,EAAqC3D,SAAS,CAAC4D,MAA/C,CAApB,EAA4EJ,UAtF3D;;EAuFvB;AACF;AACA;EACE/B,IAAI,EAAEzB,SAAS,CAAC6D,OA1FO;;EA2FvB;AACF;AACA;EACElC,OAAO,EAAE3B,SAAS,CAAC8D,IA9FI;;EA+FvB;AACF;AACA;EACElC,UAAU,EAAE5B,SAAS,CAAC8D,IAlGC;;EAmGvB;AACF;AACA;EACEjC,cAAc,EAAE7B,SAAS,CAAC+D,IAtGH;;EAuGvB;AACF;AACA;EACEjC,aAAa,EAAE9B,SAAS,CAACyD;AA1GF,CAAzB;AA6GA,eAAenD,UAAU,CAACC,MAAD,EAAS;EAAEyD,IAAI,EAAE;AAAR,CAAT,CAAV,CAAgE7C,YAAhE,CAAf"}

package/dist/modern/NotificationPanel/NotificationPanel.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvDropDownMenuProps } from "@hitachivantara/uikit-react-core";
 
 export interface Actions {

package/dist/modern/NotificationPanel/NotificationPanel.js

@@ -1,16 +1,24 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["id", "className", "classes", "open", "footer", "notifications", "hasNewNotifications", "emptyStatePanelTitle", "emptyStatePanelMessage", "emptyStatePanelIcon", "labels", "newNotificationsButtonAction", "locale"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { deprecatedPropType, withStyles } from "@material-ui/core";
+import { deprecatedPropType } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import { HvPanel, HvActionBar, HvDropDownMenu, setId, useLabels, useLocale } from "@hitachivantara/uikit-react-core";
 import styles from "./styles";
 import Notification from "./Notification";
 import EmptyStatePanel from "./EmptyStatePanel";
 import NotificationsIndicator from "./NotificationsIndicator";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_LABELS = {
   notificationGroupHeader: {
     newNotifications: "New",
@@ -52,7 +60,7 @@ const HvNotificationPanel = _ref => {
   const generateNotificationsActions = (notificationId, onToggle, actions) => {
     const expand = notificationId === highlighted;
     const dList = [...actions.values];
-    return /*#__PURE__*/React.createElement(HvDropDownMenu, _extends({
+    return /*#__PURE__*/_jsx(HvDropDownMenu, _objectSpread({
       expanded: expand,
       onClick: (event, item) => {
         var _item$callback;
@@ -78,8 +86,7 @@ const HvNotificationPanel = _ref => {
   const notificationElementGenerator = notificationsToRender => {
     return notificationsToRender.map(notification => {
       const notificationIsHighlighted = highlighted === notification.id;
-      return /*#__PURE__*/React.createElement(Notification, {
-        key: notification.id,
+      return /*#__PURE__*/_jsx(Notification, {
         notificationId: notification.id,
         title: notification.title,
         isRead: notification.isRead,
@@ -90,7 +97,7 @@ const HvNotificationPanel = _ref => {
         rightContainer: generateNotificationsActions(notification.id, notification.onToggle, notification.actions),
         isHighlighted: notificationIsHighlighted,
         locale: locale
-      });
+      }, notification.id);
     });
   };
 
@@ -98,27 +105,31 @@ const HvNotificationPanel = _ref => {
 
   const renderNotifications = notificationsToRender => notificationElementGenerator(notificationsToRender);
 
-  return /*#__PURE__*/React.createElement(HvPanel, _extends({
+  return /*#__PURE__*/_jsxs(HvPanel, _objectSpread(_objectSpread({
     id: id,
     className: clsx(className, classes.root, open === false && classes.closed, open && classes.open)
-  }, others), hasNewNotifications && /*#__PURE__*/React.createElement(NotificationsIndicator, {
-    labels: labels.notificationIndicator,
-    onClick: newNotificationsButtonAction
-  }), hasNotifications ? /*#__PURE__*/React.createElement("div", {
-    className: classes.panel
-  }, notifications.length > 0 && renderNotifications(notifications)) : /*#__PURE__*/React.createElement(EmptyStatePanel, {
-    id: setId(id, "empty-state"),
-    title: emptyStatePanelTitle,
-    message: emptyStatePanelMessage,
-    icon: emptyStatePanelIcon,
-    className: classes.emptyState
-  }), footer && /*#__PURE__*/React.createElement(HvActionBar, {
-    id: setId(id, "action-bar"),
-    classes: {
-      root: classes.actionBarRoot
-    },
-    className: classes.actionBar
-  }, footer));
+  }, others), {}, {
+    children: [hasNewNotifications && /*#__PURE__*/_jsx(NotificationsIndicator, {
+      labels: labels.notificationIndicator,
+      onClick: newNotificationsButtonAction
+    }), hasNotifications ? /*#__PURE__*/_jsx("div", {
+      className: classes.panel,
+      children: notifications.length > 0 && renderNotifications(notifications)
+    }) : /*#__PURE__*/_jsx(EmptyStatePanel, {
+      id: setId(id, "empty-state"),
+      title: emptyStatePanelTitle,
+      message: emptyStatePanelMessage,
+      icon: emptyStatePanelIcon,
+      className: classes.emptyState
+    }), footer && /*#__PURE__*/_jsx(HvActionBar, {
+      id: setId(id, "action-bar"),
+      classes: {
+        root: classes.actionBarRoot
+      },
+      className: classes.actionBar,
+      children: footer
+    })]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvNotificationPanel.propTypes = {

package/dist/modern/NotificationPanel/NotificationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.js","names":["React","useState","PropTypes","clsx","deprecatedPropType","withStyles","HvPanel","HvActionBar","HvDropDownMenu","setId","useLabels","useLocale","styles","Notification","EmptyStatePanel","NotificationsIndicator","DEFAULT_LABELS","notificationGroupHeader","newNotifications","olderNotifications","notificationIndicator","label","buttonLabel","HvNotificationPanel","id","className","classes","open","footer","notifications","hasNewNotifications","emptyStatePanelTitle","emptyStatePanelMessage","emptyStatePanelIcon","labels","labelsProp","newNotificationsButtonAction","locale","localeProp","others","localeFromProvider","highlighted","setHighlighted","undefined","isExpanded","setIsExpanded","generateNotificationsActions","notificationId","onToggle","actions","expand","dList","values","event","item","callback","s","dropDownMenuProps","notificationElementGenerator","notificationsToRender","map","notification","notificationIsHighlighted","title","isRead","icon","date","onClick","onKeyPress","hasNotifications","length","renderNotifications","root","closed","panel","emptyState","actionBarRoot","actionBar","propTypes","string","bool","shape","notificationsIndicator","isRequired","arrayOf","oneOfType","number","object","element","func","action","instanceOf","Object","node","name"],"sources":["../../../src/NotificationPanel/NotificationPanel.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType, withStyles } from \"@material-ui/core\";\nimport {\n  HvPanel,\n  HvActionBar,\n  HvDropDownMenu,\n  setId,\n  useLabels,\n  useLocale,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport styles from \"./styles\";\n\nimport Notification from \"./Notification\";\nimport EmptyStatePanel from \"./EmptyStatePanel\";\nimport NotificationsIndicator from \"./NotificationsIndicator\";\n\nconst DEFAULT_LABELS = {\n  notificationGroupHeader: {\n    newNotifications: \"New\",\n    olderNotifications: \"Earlier\",\n  },\n  notificationIndicator: {\n    label: \"You have new notifications\",\n    buttonLabel: \"Update\",\n  },\n};\n\n/**\n * Notification Panel displays all of read and unread notifications. Still in development\n */\nconst HvNotificationPanel = ({\n  id,\n  className,\n  classes,\n  open,\n  footer,\n  notifications,\n  hasNewNotifications = false,\n  emptyStatePanelTitle = \"No notifications\",\n  emptyStatePanelMessage = \"You currently have no notifications.\",\n  emptyStatePanelIcon,\n  labels: labelsProp,\n  newNotificationsButtonAction,\n  locale: localeProp,\n  ...others\n}) => {\n  const localeFromProvider = useLocale();\n\n  const locale = localeProp || localeFromProvider;\n\n  const [highlighted, setHighlighted] = useState(undefined);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const generateNotificationsActions = (notificationId, onToggle, actions) => {\n    const expand = notificationId === highlighted;\n    const dList = [...actions.values];\n    return (\n      <HvDropDownMenu\n        expanded={expand}\n        onClick={(event, item) => {\n          setHighlighted(undefined);\n          item?.callback?.(event, notificationId);\n        }}\n        dataList={dList}\n        onToggle={(event, s) => {\n          onToggle?.(event, s);\n          if (s) {\n            setHighlighted(notificationId);\n          } else {\n            setHighlighted(undefined);\n          }\n          setIsExpanded(!isExpanded);\n        }}\n        {...actions.dropDownMenuProps}\n      />\n    );\n  };\n\n  const notificationElementGenerator = (notificationsToRender) => {\n    return notificationsToRender.map((notification) => {\n      const notificationIsHighlighted = highlighted === notification.id;\n      return (\n        <Notification\n          key={notification.id}\n          notificationId={notification.id}\n          title={notification.title}\n          isRead={notification.isRead}\n          icon={notification.icon}\n          date={notification.date}\n          onClick={notification.onClick}\n          onKeyPress={notification.onKeyPress}\n          rightContainer={generateNotificationsActions(\n            notification.id,\n            notification.onToggle,\n            notification.actions\n          )}\n          isHighlighted={notificationIsHighlighted}\n          locale={locale}\n        />\n      );\n    });\n  };\n\n  const hasNotifications = notifications.length > 0;\n\n  const renderNotifications = (notificationsToRender) =>\n    notificationElementGenerator(notificationsToRender);\n\n  return (\n    <HvPanel\n      id={id}\n      className={clsx(className, classes.root, {\n        [classes.closed]: open === false,\n        [classes.open]: open,\n      })}\n      {...others}\n    >\n      {hasNewNotifications && (\n        <NotificationsIndicator\n          labels={labels.notificationIndicator}\n          onClick={newNotificationsButtonAction}\n        />\n      )}\n      {hasNotifications ? (\n        <div className={classes.panel}>\n          {notifications.length > 0 && renderNotifications(notifications)}\n        </div>\n      ) : (\n        <EmptyStatePanel\n          id={setId(id, \"empty-state\")}\n          title={emptyStatePanelTitle}\n          message={emptyStatePanelMessage}\n          icon={emptyStatePanelIcon}\n          className={classes.emptyState}\n        />\n      )}\n      {footer && (\n        <HvActionBar\n          id={setId(id, \"action-bar\")}\n          classes={{\n            root: classes.actionBarRoot,\n          }}\n          className={classes.actionBar}\n        >\n          {footer}\n        </HvActionBar>\n      )}\n    </HvPanel>\n  );\n};\n\nHvNotificationPanel.propTypes = {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied to the root element.\n   */\n  className: PropTypes.string,\n  /**\n   * 'true' if panel is open or 'false' if the panel is not open\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.\n   */\n  open: deprecatedPropType(PropTypes.bool),\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * styles object applied to the root\n     */\n    root: PropTypes.string,\n    /**\n     * styles object applied to the root when closed\n     */\n    closed: PropTypes.string,\n    /**\n     * styles object applied to the root when open\n     */\n    open: PropTypes.string,\n    /**\n     * styles object applied to the panel\n     */\n    panel: PropTypes.string,\n    /**\n     * styles object applied to the action bar\n     */\n    actionBar: PropTypes.string,\n    /**\n     * styles object applied to the root of the action bar\n     */\n    actionBarRoot: PropTypes.string,\n    /**\n     * styles object applied to the new notification indicator\n     */\n    notificationsIndicator: PropTypes.string,\n    /**\n     * styles object applied to the empty state panel\n     */\n    emptyState: PropTypes.string,\n  }).isRequired,\n  /**\n   * The properties of the notifications to be rendered in the Panel.\n   */\n  notifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      isRead: PropTypes.bool.isRequired,\n      date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n      icon: PropTypes.element,\n      onClick: PropTypes.func,\n      onKeyPress: PropTypes.func,\n      onToggle: PropTypes.func,\n      actions: PropTypes.shape({\n        label: PropTypes.bool,\n        action: PropTypes.string,\n        callback: PropTypes.func,\n        dropDownMenuProps: PropTypes.instanceOf(Object),\n      }),\n    })\n  ),\n  /**\n   * Whether to render the new notifications indicator\n   */\n  hasNewNotifications: PropTypes.bool,\n  /**\n   * Action buttons to render in footer\n   */\n  footer: PropTypes.node,\n  /**\n   * Title of the EmptyStatePanel\n   */\n  emptyStatePanelTitle: PropTypes.string,\n  /**\n   * Message of the EmptyStatePanel\n   */\n  emptyStatePanelMessage: PropTypes.string,\n  /**\n   * Empty Panel custom Icon\n   */\n  emptyStatePanelIcon: PropTypes.node,\n  /**\n   * Labels to apply to the Panel\n   */\n  labels: PropTypes.shape({\n    /**\n     * Labels to apply to the groups separating newer and older notifications\n     */\n    notificationGroupHeader: {\n      olderNotifications: PropTypes.string,\n      newNotifications: PropTypes.string,\n    },\n    /**\n     * Labels to apply to the element of the New Notifications Indicator\n     */\n    notificationIndicator: {\n      label: PropTypes.string,\n      buttonLabel: PropTypes.string,\n    },\n  }),\n  /**\n   * Function to be supplied to the notification update button\n   */\n  newNotificationsButtonAction: PropTypes.func,\n  /**\n   * The locale to be used on the notification date, if undefined it will use the one from the HvProvider\n   */\n  locale: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanel\" })(HvNotificationPanel);\n"],"mappings":"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"}
+{"version":3,"file":"NotificationPanel.js","names":["React","useState","PropTypes","clsx","deprecatedPropType","withStyles","HvPanel","HvActionBar","HvDropDownMenu","setId","useLabels","useLocale","styles","Notification","EmptyStatePanel","NotificationsIndicator","DEFAULT_LABELS","notificationGroupHeader","newNotifications","olderNotifications","notificationIndicator","label","buttonLabel","HvNotificationPanel","id","className","classes","open","footer","notifications","hasNewNotifications","emptyStatePanelTitle","emptyStatePanelMessage","emptyStatePanelIcon","labels","labelsProp","newNotificationsButtonAction","locale","localeProp","others","localeFromProvider","highlighted","setHighlighted","undefined","isExpanded","setIsExpanded","generateNotificationsActions","notificationId","onToggle","actions","expand","dList","values","event","item","callback","s","dropDownMenuProps","notificationElementGenerator","notificationsToRender","map","notification","notificationIsHighlighted","title","isRead","icon","date","onClick","onKeyPress","hasNotifications","length","renderNotifications","root","closed","panel","emptyState","actionBarRoot","actionBar","propTypes","string","bool","shape","notificationsIndicator","isRequired","arrayOf","oneOfType","number","object","element","func","action","instanceOf","Object","node","name"],"sources":["../../../src/NotificationPanel/NotificationPanel.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\n\nimport {\n  HvPanel,\n  HvActionBar,\n  HvDropDownMenu,\n  setId,\n  useLabels,\n  useLocale,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport styles from \"./styles\";\n\nimport Notification from \"./Notification\";\nimport EmptyStatePanel from \"./EmptyStatePanel\";\nimport NotificationsIndicator from \"./NotificationsIndicator\";\n\nconst DEFAULT_LABELS = {\n  notificationGroupHeader: {\n    newNotifications: \"New\",\n    olderNotifications: \"Earlier\",\n  },\n  notificationIndicator: {\n    label: \"You have new notifications\",\n    buttonLabel: \"Update\",\n  },\n};\n\n/**\n * Notification Panel displays all of read and unread notifications. Still in development\n */\nconst HvNotificationPanel = ({\n  id,\n  className,\n  classes,\n  open,\n  footer,\n  notifications,\n  hasNewNotifications = false,\n  emptyStatePanelTitle = \"No notifications\",\n  emptyStatePanelMessage = \"You currently have no notifications.\",\n  emptyStatePanelIcon,\n  labels: labelsProp,\n  newNotificationsButtonAction,\n  locale: localeProp,\n  ...others\n}) => {\n  const localeFromProvider = useLocale();\n\n  const locale = localeProp || localeFromProvider;\n\n  const [highlighted, setHighlighted] = useState(undefined);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const generateNotificationsActions = (notificationId, onToggle, actions) => {\n    const expand = notificationId === highlighted;\n    const dList = [...actions.values];\n    return (\n      <HvDropDownMenu\n        expanded={expand}\n        onClick={(event, item) => {\n          setHighlighted(undefined);\n          item?.callback?.(event, notificationId);\n        }}\n        dataList={dList}\n        onToggle={(event, s) => {\n          onToggle?.(event, s);\n          if (s) {\n            setHighlighted(notificationId);\n          } else {\n            setHighlighted(undefined);\n          }\n          setIsExpanded(!isExpanded);\n        }}\n        {...actions.dropDownMenuProps}\n      />\n    );\n  };\n\n  const notificationElementGenerator = (notificationsToRender) => {\n    return notificationsToRender.map((notification) => {\n      const notificationIsHighlighted = highlighted === notification.id;\n      return (\n        <Notification\n          key={notification.id}\n          notificationId={notification.id}\n          title={notification.title}\n          isRead={notification.isRead}\n          icon={notification.icon}\n          date={notification.date}\n          onClick={notification.onClick}\n          onKeyPress={notification.onKeyPress}\n          rightContainer={generateNotificationsActions(\n            notification.id,\n            notification.onToggle,\n            notification.actions\n          )}\n          isHighlighted={notificationIsHighlighted}\n          locale={locale}\n        />\n      );\n    });\n  };\n\n  const hasNotifications = notifications.length > 0;\n\n  const renderNotifications = (notificationsToRender) =>\n    notificationElementGenerator(notificationsToRender);\n\n  return (\n    <HvPanel\n      id={id}\n      className={clsx(className, classes.root, {\n        [classes.closed]: open === false,\n        [classes.open]: open,\n      })}\n      {...others}\n    >\n      {hasNewNotifications && (\n        <NotificationsIndicator\n          labels={labels.notificationIndicator}\n          onClick={newNotificationsButtonAction}\n        />\n      )}\n      {hasNotifications ? (\n        <div className={classes.panel}>\n          {notifications.length > 0 && renderNotifications(notifications)}\n        </div>\n      ) : (\n        <EmptyStatePanel\n          id={setId(id, \"empty-state\")}\n          title={emptyStatePanelTitle}\n          message={emptyStatePanelMessage}\n          icon={emptyStatePanelIcon}\n          className={classes.emptyState}\n        />\n      )}\n      {footer && (\n        <HvActionBar\n          id={setId(id, \"action-bar\")}\n          classes={{\n            root: classes.actionBarRoot,\n          }}\n          className={classes.actionBar}\n        >\n          {footer}\n        </HvActionBar>\n      )}\n    </HvPanel>\n  );\n};\n\nHvNotificationPanel.propTypes = {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied to the root element.\n   */\n  className: PropTypes.string,\n  /**\n   * 'true' if panel is open or 'false' if the panel is not open\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.\n   */\n  open: deprecatedPropType(PropTypes.bool),\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * styles object applied to the root\n     */\n    root: PropTypes.string,\n    /**\n     * styles object applied to the root when closed\n     */\n    closed: PropTypes.string,\n    /**\n     * styles object applied to the root when open\n     */\n    open: PropTypes.string,\n    /**\n     * styles object applied to the panel\n     */\n    panel: PropTypes.string,\n    /**\n     * styles object applied to the action bar\n     */\n    actionBar: PropTypes.string,\n    /**\n     * styles object applied to the root of the action bar\n     */\n    actionBarRoot: PropTypes.string,\n    /**\n     * styles object applied to the new notification indicator\n     */\n    notificationsIndicator: PropTypes.string,\n    /**\n     * styles object applied to the empty state panel\n     */\n    emptyState: PropTypes.string,\n  }).isRequired,\n  /**\n   * The properties of the notifications to be rendered in the Panel.\n   */\n  notifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      isRead: PropTypes.bool.isRequired,\n      date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n      icon: PropTypes.element,\n      onClick: PropTypes.func,\n      onKeyPress: PropTypes.func,\n      onToggle: PropTypes.func,\n      actions: PropTypes.shape({\n        label: PropTypes.bool,\n        action: PropTypes.string,\n        callback: PropTypes.func,\n        dropDownMenuProps: PropTypes.instanceOf(Object),\n      }),\n    })\n  ),\n  /**\n   * Whether to render the new notifications indicator\n   */\n  hasNewNotifications: PropTypes.bool,\n  /**\n   * Action buttons to render in footer\n   */\n  footer: PropTypes.node,\n  /**\n   * Title of the EmptyStatePanel\n   */\n  emptyStatePanelTitle: PropTypes.string,\n  /**\n   * Message of the EmptyStatePanel\n   */\n  emptyStatePanelMessage: PropTypes.string,\n  /**\n   * Empty Panel custom Icon\n   */\n  emptyStatePanelIcon: PropTypes.node,\n  /**\n   * Labels to apply to the Panel\n   */\n  labels: PropTypes.shape({\n    /**\n     * Labels to apply to the groups separating newer and older notifications\n     */\n    notificationGroupHeader: {\n      olderNotifications: PropTypes.string,\n      newNotifications: PropTypes.string,\n    },\n    /**\n     * Labels to apply to the element of the New Notifications Indicator\n     */\n    notificationIndicator: {\n      label: PropTypes.string,\n      buttonLabel: PropTypes.string,\n    },\n  }),\n  /**\n   * Function to be supplied to the notification update button\n   */\n  newNotificationsButtonAction: PropTypes.func,\n  /**\n   * The locale to be used on the notification date, if undefined it will use the one from the HvProvider\n   */\n  locale: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanel\" })(HvNotificationPanel);\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,kBAAT,QAAmC,eAAnC;AACA,SAASC,UAAT,QAA2B,aAA3B;AAEA,SACEC,OADF,EAEEC,WAFF,EAGEC,cAHF,EAIEC,KAJF,EAKEC,SALF,EAMEC,SANF,QAOO,kCAPP;AASA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,sBAAP,MAAmC,0BAAnC;;;AAEA,MAAMC,cAAc,GAAG;EACrBC,uBAAuB,EAAE;IACvBC,gBAAgB,EAAE,KADK;IAEvBC,kBAAkB,EAAE;EAFG,CADJ;EAKrBC,qBAAqB,EAAE;IACrBC,KAAK,EAAE,4BADc;IAErBC,WAAW,EAAE;EAFQ;AALF,CAAvB;AAWA;AACA;AACA;;AACA,MAAMC,mBAAmB,GAAG,QAetB;EAAA,IAfuB;IAC3BC,EAD2B;IAE3BC,SAF2B;IAG3BC,OAH2B;IAI3BC,IAJ2B;IAK3BC,MAL2B;IAM3BC,aAN2B;IAO3BC,mBAAmB,GAAG,KAPK;IAQ3BC,oBAAoB,GAAG,kBARI;IAS3BC,sBAAsB,GAAG,sCATE;IAU3BC,mBAV2B;IAW3BC,MAAM,EAAEC,UAXmB;IAY3BC,4BAZ2B;IAa3BC,MAAM,EAAEC;EAbmB,CAevB;EAAA,IADDC,MACC;;EACJ,MAAMC,kBAAkB,GAAG7B,SAAS,EAApC;EAEA,MAAM0B,MAAM,GAAGC,UAAU,IAAIE,kBAA7B;EAEA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCzC,QAAQ,CAAC0C,SAAD,CAA9C;EACA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B5C,QAAQ,CAAC,KAAD,CAA5C;EAEA,MAAMiC,MAAM,GAAGxB,SAAS,CAACM,cAAD,EAAiBmB,UAAjB,CAAxB;;EAEA,MAAMW,4BAA4B,GAAG,CAACC,cAAD,EAAiBC,QAAjB,EAA2BC,OAA3B,KAAuC;IAC1E,MAAMC,MAAM,GAAGH,cAAc,KAAKN,WAAlC;IACA,MAAMU,KAAK,GAAG,CAAC,GAAGF,OAAO,CAACG,MAAZ,CAAd;IACA,oBACE,KAAC,cAAD;MACE,QAAQ,EAAEF,MADZ;MAEE,OAAO,EAAE,CAACG,KAAD,EAAQC,IAAR,KAAiB;QAAA;;QACxBZ,cAAc,CAACC,SAAD,CAAd;QACAW,IAAI,SAAJ,IAAAA,IAAI,WAAJ,8BAAAA,IAAI,CAAEC,QAAN,uEAAAD,IAAI,EAAaD,KAAb,EAAoBN,cAApB,CAAJ;MACD,CALH;MAME,QAAQ,EAAEI,KANZ;MAOE,QAAQ,EAAE,CAACE,KAAD,EAAQG,CAAR,KAAc;QACtBR,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGK,KAAH,EAAUG,CAAV,CAAR;;QACA,IAAIA,CAAJ,EAAO;UACLd,cAAc,CAACK,cAAD,CAAd;QACD,CAFD,MAEO;UACLL,cAAc,CAACC,SAAD,CAAd;QACD;;QACDE,aAAa,CAAC,CAACD,UAAF,CAAb;MACD;IAfH,GAgBMK,OAAO,CAACQ,iBAhBd,EADF;EAoBD,CAvBD;;EAyBA,MAAMC,4BAA4B,GAAIC,qBAAD,IAA2B;IAC9D,OAAOA,qBAAqB,CAACC,GAAtB,CAA2BC,YAAD,IAAkB;MACjD,MAAMC,yBAAyB,GAAGrB,WAAW,KAAKoB,YAAY,CAACrC,EAA/D;MACA,oBACE,KAAC,YAAD;QAEE,cAAc,EAAEqC,YAAY,CAACrC,EAF/B;QAGE,KAAK,EAAEqC,YAAY,CAACE,KAHtB;QAIE,MAAM,EAAEF,YAAY,CAACG,MAJvB;QAKE,IAAI,EAAEH,YAAY,CAACI,IALrB;QAME,IAAI,EAAEJ,YAAY,CAACK,IANrB;QAOE,OAAO,EAAEL,YAAY,CAACM,OAPxB;QAQE,UAAU,EAAEN,YAAY,CAACO,UAR3B;QASE,cAAc,EAAEtB,4BAA4B,CAC1Ce,YAAY,CAACrC,EAD6B,EAE1CqC,YAAY,CAACb,QAF6B,EAG1Ca,YAAY,CAACZ,OAH6B,CAT9C;QAcE,aAAa,EAAEa,yBAdjB;QAeE,MAAM,EAAEzB;MAfV,GACOwB,YAAY,CAACrC,EADpB,CADF;IAmBD,CArBM,CAAP;EAsBD,CAvBD;;EAyBA,MAAM6C,gBAAgB,GAAGxC,aAAa,CAACyC,MAAd,GAAuB,CAAhD;;EAEA,MAAMC,mBAAmB,GAAIZ,qBAAD,IAC1BD,4BAA4B,CAACC,qBAAD,CAD9B;;EAGA,oBACE,MAAC,OAAD;IACE,EAAE,EAAEnC,EADN;IAEE,SAAS,EAAErB,IAAI,CAACsB,SAAD,EAAYC,OAAO,CAAC8C,IAApB,EACK7C,IAAI,KAAK,KADd,IACZD,OAAO,CAAC+C,MADI,EAEG9C,IAFH,IAEZD,OAAO,CAACC,IAFI;EAFjB,GAMMY,MANN;IAAA,WAQGT,mBAAmB,iBAClB,KAAC,sBAAD;MACE,MAAM,EAAEI,MAAM,CAACd,qBADjB;MAEE,OAAO,EAAEgB;IAFX,EATJ,EAcGiC,gBAAgB,gBACf;MAAK,SAAS,EAAE3C,OAAO,CAACgD,KAAxB;MAAA,UACG7C,aAAa,CAACyC,MAAd,GAAuB,CAAvB,IAA4BC,mBAAmB,CAAC1C,aAAD;IADlD,EADe,gBAKf,KAAC,eAAD;MACE,EAAE,EAAEpB,KAAK,CAACe,EAAD,EAAK,aAAL,CADX;MAEE,KAAK,EAAEO,oBAFT;MAGE,OAAO,EAAEC,sBAHX;MAIE,IAAI,EAAEC,mBAJR;MAKE,SAAS,EAAEP,OAAO,CAACiD;IALrB,EAnBJ,EA2BG/C,MAAM,iBACL,KAAC,WAAD;MACE,EAAE,EAAEnB,KAAK,CAACe,EAAD,EAAK,YAAL,CADX;MAEE,OAAO,EAAE;QACPgD,IAAI,EAAE9C,OAAO,CAACkD;MADP,CAFX;MAKE,SAAS,EAAElD,OAAO,CAACmD,SALrB;MAAA,UAOGjD;IAPH,EA5BJ;EAAA,GADF;AAyCD,CAzHD;;AA2HA,wCAAAL,mBAAmB,CAACuD,SAApB,GAAgC;EAC9B;AACF;AACA;EACEtD,EAAE,EAAEtB,SAAS,CAAC6E,MAJgB;;EAK9B;AACF;AACA;EACEtD,SAAS,EAAEvB,SAAS,CAAC6E,MARS;;EAS9B;AACF;AACA;AACA;AACA;EACEpD,IAAI,EAAEvB,kBAAkB,CAACF,SAAS,CAAC8E,IAAX,CAdM;;EAe9B;AACF;AACA;EACEtD,OAAO,EAAExB,SAAS,CAAC+E,KAAV,CAAgB;IACvB;AACJ;AACA;IACIT,IAAI,EAAEtE,SAAS,CAAC6E,MAJO;;IAKvB;AACJ;AACA;IACIN,MAAM,EAAEvE,SAAS,CAAC6E,MARK;;IASvB;AACJ;AACA;IACIpD,IAAI,EAAEzB,SAAS,CAAC6E,MAZO;;IAavB;AACJ;AACA;IACIL,KAAK,EAAExE,SAAS,CAAC6E,MAhBM;;IAiBvB;AACJ;AACA;IACIF,SAAS,EAAE3E,SAAS,CAAC6E,MApBE;;IAqBvB;AACJ;AACA;IACIH,aAAa,EAAE1E,SAAS,CAAC6E,MAxBF;;IAyBvB;AACJ;AACA;IACIG,sBAAsB,EAAEhF,SAAS,CAAC6E,MA5BX;;IA6BvB;AACJ;AACA;IACIJ,UAAU,EAAEzE,SAAS,CAAC6E;EAhCC,CAAhB,EAiCNI,UAnD2B;;EAoD9B;AACF;AACA;EACEtD,aAAa,EAAE3B,SAAS,CAACkF,OAAV,CACblF,SAAS,CAAC+E,KAAV,CAAgB;IACdzD,EAAE,EAAEtB,SAAS,CAAC6E,MAAV,CAAiBI,UADP;IAEdpB,KAAK,EAAE7D,SAAS,CAAC6E,MAAV,CAAiBI,UAFV;IAGdnB,MAAM,EAAE9D,SAAS,CAAC8E,IAAV,CAAeG,UAHT;IAIdjB,IAAI,EAAEhE,SAAS,CAACmF,SAAV,CAAoB,CAACnF,SAAS,CAAC6E,MAAX,EAAmB7E,SAAS,CAACoF,MAA7B,EAAqCpF,SAAS,CAACqF,MAA/C,CAApB,EAA4EJ,UAJpE;IAKdlB,IAAI,EAAE/D,SAAS,CAACsF,OALF;IAMdrB,OAAO,EAAEjE,SAAS,CAACuF,IANL;IAOdrB,UAAU,EAAElE,SAAS,CAACuF,IAPR;IAQdzC,QAAQ,EAAE9C,SAAS,CAACuF,IARN;IASdxC,OAAO,EAAE/C,SAAS,CAAC+E,KAAV,CAAgB;MACvB5D,KAAK,EAAEnB,SAAS,CAAC8E,IADM;MAEvBU,MAAM,EAAExF,SAAS,CAAC6E,MAFK;MAGvBxB,QAAQ,EAAErD,SAAS,CAACuF,IAHG;MAIvBhC,iBAAiB,EAAEvD,SAAS,CAACyF,UAAV,CAAqBC,MAArB;IAJI,CAAhB;EATK,CAAhB,CADa,CAvDe;;EAyE9B;AACF;AACA;EACE9D,mBAAmB,EAAE5B,SAAS,CAAC8E,IA5ED;;EA6E9B;AACF;AACA;EACEpD,MAAM,EAAE1B,SAAS,CAAC2F,IAhFY;;EAiF9B;AACF;AACA;EACE9D,oBAAoB,EAAE7B,SAAS,CAAC6E,MApFF;;EAqF9B;AACF;AACA;EACE/C,sBAAsB,EAAE9B,SAAS,CAAC6E,MAxFJ;;EAyF9B;AACF;AACA;EACE9C,mBAAmB,EAAE/B,SAAS,CAAC2F,IA5FD;;EA6F9B;AACF;AACA;EACE3D,MAAM,EAAEhC,SAAS,CAAC+E,KAAV,CAAgB;IACtB;AACJ;AACA;IACIhE,uBAAuB,EAAE;MACvBE,kBAAkB,EAAEjB,SAAS,CAAC6E,MADP;MAEvB7D,gBAAgB,EAAEhB,SAAS,CAAC6E;IAFL,CAJH;;IAQtB;AACJ;AACA;IACI3D,qBAAqB,EAAE;MACrBC,KAAK,EAAEnB,SAAS,CAAC6E,MADI;MAErBzD,WAAW,EAAEpB,SAAS,CAAC6E;IAFF;EAXD,CAAhB,CAhGsB;;EAgH9B;AACF;AACA;EACE3C,4BAA4B,EAAElC,SAAS,CAACuF,IAnHV;;EAoH9B;AACF;AACA;EACEpD,MAAM,EAAEnC,SAAS,CAAC6E;AAvHY,CAAhC;AA0HA,eAAe1E,UAAU,CAACO,MAAD,EAAS;EAAEkF,IAAI,EAAE;AAAR,CAAT,CAAV,CAAoDvE,mBAApD,CAAf"}

package/dist/modern/NotificationPanel/NotificationsIndicator/NotificationsIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 export interface Labels {
   label: string;

package/dist/modern/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js

@@ -1,12 +1,19 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["classes", "className", "labels", "onClick"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const NotificationsIndicator = _ref => {
   let {
@@ -17,20 +24,24 @@ const NotificationsIndicator = _ref => {
   } = _ref,
       others = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: clsx(className, classes.root, classes.notificationsIndicator)
-  }, others), /*#__PURE__*/React.createElement(HvTypography, {
-    classes: {
-      normalText: classes.semanticColoring
-    }
-  }, labels.label), /*#__PURE__*/React.createElement(HvButton, {
-    category: "semantic",
-    className: classes.newNotificationsFocus,
-    classes: {
-      focusVisible: classes.newNotificationsFocus
-    },
-    onClick: onClick
-  }, labels.buttonLabel));
+  }, others), {}, {
+    children: [/*#__PURE__*/_jsx(HvTypography, {
+      classes: {
+        normalText: classes.semanticColoring
+      },
+      children: labels.label
+    }), /*#__PURE__*/_jsx(HvButton, {
+      category: "semantic",
+      className: classes.newNotificationsFocus,
+      classes: {
+        focusVisible: classes.newNotificationsFocus
+      },
+      onClick: onClick,
+      children: labels.buttonLabel
+    })]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? NotificationsIndicator.propTypes = {

package/dist/modern/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsIndicator.js","names":["React","PropTypes","clsx","HvButton","HvTypography","withStyles","styles","NotificationsIndicator","classes","className","labels","onClick","others","root","notificationsIndicator","normalText","semanticColoring","label","newNotificationsFocus","focusVisible","buttonLabel","propTypes","shape","string","isRequired","func","name"],"sources":["../../../../src/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { HvButton, HvTypography } from \"@hitachivantara/uikit-react-core\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst NotificationsIndicator = ({ classes, className, labels, onClick, ...others }) => {\n  return (\n    <div className={clsx(className, classes.root, classes.notificationsIndicator)} {...others}>\n      <HvTypography classes={{ normalText: classes.semanticColoring }}>{labels.label}</HvTypography>\n      <HvButton\n        category=\"semantic\"\n        className={classes.newNotificationsFocus}\n        classes={{\n          focusVisible: classes.newNotificationsFocus,\n        }}\n        onClick={onClick}\n      >\n        {labels.buttonLabel}\n      </HvButton>\n    </div>\n  );\n};\n\nNotificationsIndicator.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 root of the element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the NotificationsIndicator container.\n     */\n    notificationsIndicator: PropTypes.string,\n\n    /**\n     * Styles applied to the notification focus\n     */\n    newNotificationsFocus: PropTypes.string,\n    /**\n     * Override to text color for usage over semantic background in wicked\n     */\n    semanticColoring: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Labels to apply to component\n   */\n  labels: PropTypes.shape({\n    /**\n     * Notification indicator label\n     */\n    label: PropTypes.string,\n    /**\n     * Label to apply to the button label\n     */\n    buttonLabel: PropTypes.string,\n  }).isRequired,\n  /**\n   * Function passed to the notification panel button\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationsIndicator\" })(NotificationsIndicator);\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,QAAT,EAAmBC,YAAnB,QAAuC,kCAAvC;AAEA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,sBAAsB,GAAG,QAAwD;EAAA,IAAvD;IAAEC,OAAF;IAAWC,SAAX;IAAsBC,MAAtB;IAA8BC;EAA9B,CAAuD;EAAA,IAAbC,MAAa;;EACrF,oBACE;IAAK,SAAS,EAAEV,IAAI,CAACO,SAAD,EAAYD,OAAO,CAACK,IAApB,EAA0BL,OAAO,CAACM,sBAAlC;EAApB,GAAmFF,MAAnF,gBACE,oBAAC,YAAD;IAAc,OAAO,EAAE;MAAEG,UAAU,EAAEP,OAAO,CAACQ;IAAtB;EAAvB,GAAkEN,MAAM,CAACO,KAAzE,CADF,eAEE,oBAAC,QAAD;IACE,QAAQ,EAAC,UADX;IAEE,SAAS,EAAET,OAAO,CAACU,qBAFrB;IAGE,OAAO,EAAE;MACPC,YAAY,EAAEX,OAAO,CAACU;IADf,CAHX;IAME,OAAO,EAAEP;EANX,GAQGD,MAAM,CAACU,WARV,CAFF,CADF;AAeD,CAhBD;;AAkBA,wCAAAb,sBAAsB,CAACc,SAAvB,GAAmC;EACjC;AACF;AACA;EACEb,OAAO,EAAEP,SAAS,CAACqB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIT,IAAI,EAAEZ,SAAS,CAACsB,MAJO;;IAKvB;AACJ;AACA;IACIT,sBAAsB,EAAEb,SAAS,CAACsB,MARX;;IAUvB;AACJ;AACA;IACIL,qBAAqB,EAAEjB,SAAS,CAACsB,MAbV;;IAcvB;AACJ;AACA;IACIP,gBAAgB,EAAEf,SAAS,CAACsB;EAjBL,CAAhB,EAkBNC,UAtB8B;;EAwBjC;AACF;AACA;EACEf,SAAS,EAAER,SAAS,CAACsB,MA3BY;;EA4BjC;AACF;AACA;EACEb,MAAM,EAAET,SAAS,CAACqB,KAAV,CAAgB;IACtB;AACJ;AACA;IACIL,KAAK,EAAEhB,SAAS,CAACsB,MAJK;;IAKtB;AACJ;AACA;IACIH,WAAW,EAAEnB,SAAS,CAACsB;EARD,CAAhB,EASLC,UAxC8B;;EAyCjC;AACF;AACA;EACEb,OAAO,EAAEV,SAAS,CAACwB;AA5Cc,CAAnC;AA+CA,eAAepB,UAAU,CAACC,MAAD,EAAS;EAAEoB,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyDnB,sBAAzD,CAAf"}
+{"version":3,"file":"NotificationsIndicator.js","names":["React","PropTypes","clsx","HvButton","HvTypography","withStyles","styles","NotificationsIndicator","classes","className","labels","onClick","others","root","notificationsIndicator","normalText","semanticColoring","label","newNotificationsFocus","focusVisible","buttonLabel","propTypes","shape","string","isRequired","func","name"],"sources":["../../../../src/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { HvButton, HvTypography } from \"@hitachivantara/uikit-react-core\";\n\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\nconst NotificationsIndicator = ({ classes, className, labels, onClick, ...others }) => {\n  return (\n    <div className={clsx(className, classes.root, classes.notificationsIndicator)} {...others}>\n      <HvTypography classes={{ normalText: classes.semanticColoring }}>{labels.label}</HvTypography>\n      <HvButton\n        category=\"semantic\"\n        className={classes.newNotificationsFocus}\n        classes={{\n          focusVisible: classes.newNotificationsFocus,\n        }}\n        onClick={onClick}\n      >\n        {labels.buttonLabel}\n      </HvButton>\n    </div>\n  );\n};\n\nNotificationsIndicator.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 root of the element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the NotificationsIndicator container.\n     */\n    notificationsIndicator: PropTypes.string,\n\n    /**\n     * Styles applied to the notification focus\n     */\n    newNotificationsFocus: PropTypes.string,\n    /**\n     * Override to text color for usage over semantic background in wicked\n     */\n    semanticColoring: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Labels to apply to component\n   */\n  labels: PropTypes.shape({\n    /**\n     * Notification indicator label\n     */\n    label: PropTypes.string,\n    /**\n     * Label to apply to the button label\n     */\n    buttonLabel: PropTypes.string,\n  }).isRequired,\n  /**\n   * Function passed to the notification panel button\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationsIndicator\" })(NotificationsIndicator);\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,QAAT,EAAmBC,YAAnB,QAAuC,kCAAvC;AAEA,SAASC,UAAT,QAA2B,aAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;;;AAEA,MAAMC,sBAAsB,GAAG,QAAwD;EAAA,IAAvD;IAAEC,OAAF;IAAWC,SAAX;IAAsBC,MAAtB;IAA8BC;EAA9B,CAAuD;EAAA,IAAbC,MAAa;;EACrF,oBACE;IAAK,SAAS,EAAEV,IAAI,CAACO,SAAD,EAAYD,OAAO,CAACK,IAApB,EAA0BL,OAAO,CAACM,sBAAlC;EAApB,GAAmFF,MAAnF;IAAA,wBACE,KAAC,YAAD;MAAc,OAAO,EAAE;QAAEG,UAAU,EAAEP,OAAO,CAACQ;MAAtB,CAAvB;MAAA,UAAkEN,MAAM,CAACO;IAAzE,EADF,eAEE,KAAC,QAAD;MACE,QAAQ,EAAC,UADX;MAEE,SAAS,EAAET,OAAO,CAACU,qBAFrB;MAGE,OAAO,EAAE;QACPC,YAAY,EAAEX,OAAO,CAACU;MADf,CAHX;MAME,OAAO,EAAEP,OANX;MAAA,UAQGD,MAAM,CAACU;IARV,EAFF;EAAA,GADF;AAeD,CAhBD;;AAkBA,wCAAAb,sBAAsB,CAACc,SAAvB,GAAmC;EACjC;AACF;AACA;EACEb,OAAO,EAAEP,SAAS,CAACqB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIT,IAAI,EAAEZ,SAAS,CAACsB,MAJO;;IAKvB;AACJ;AACA;IACIT,sBAAsB,EAAEb,SAAS,CAACsB,MARX;;IAUvB;AACJ;AACA;IACIL,qBAAqB,EAAEjB,SAAS,CAACsB,MAbV;;IAcvB;AACJ;AACA;IACIP,gBAAgB,EAAEf,SAAS,CAACsB;EAjBL,CAAhB,EAkBNC,UAtB8B;;EAwBjC;AACF;AACA;EACEf,SAAS,EAAER,SAAS,CAACsB,MA3BY;;EA4BjC;AACF;AACA;EACEb,MAAM,EAAET,SAAS,CAACqB,KAAV,CAAgB;IACtB;AACJ;AACA;IACIL,KAAK,EAAEhB,SAAS,CAACsB,MAJK;;IAKtB;AACJ;AACA;IACIH,WAAW,EAAEnB,SAAS,CAACsB;EARD,CAAhB,EASLC,UAxC8B;;EAyCjC;AACF;AACA;EACEb,OAAO,EAAEV,SAAS,CAACwB;AA5Cc,CAAnC;AA+CA,eAAepB,UAAU,CAACC,MAAD,EAAS;EAAEoB,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyDnB,sBAAzD,CAAf"}

package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 import { HvStepNavigationProps } from "../StepNavigation";
 import { HvStepProps } from "./Step";

package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js

@@ -1,8 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from "react";
 import PropTypes from "prop-types";
-import { useTheme, withStyles } from "@material-ui/core";
+import { useTheme } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import HvStep from "./Step";
 import { getColor as getStateColor, stepSizes } from "./utils";
 import styles from "./styles";
@@ -10,6 +17,9 @@ import styles from "./styles";
  * Default Navigation
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const HvDefaultNavigation = _ref => {
   let {
     numSteps,
@@ -47,21 +57,23 @@ const HvDefaultNavigation = _ref => {
     variant: state === "Disabled" ? "disabledText" : "highlightText",
     titleWidth
   }));
-  return /*#__PURE__*/React.createElement("div", other, /*#__PURE__*/React.createElement(Steps, {
-    stepsWidth,
-    navWidth: width,
-    separatorValues: {
-      minWidth,
-      maxWidth,
-      getColor,
-      height: 3
-    },
-    stepValues: {
-      minSize,
-      maxSize,
-      StepComponent
-    }
-  }), titles);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, other), {}, {
+    children: [/*#__PURE__*/_jsx(Steps, {
+      stepsWidth,
+      navWidth: width,
+      separatorValues: {
+        minWidth,
+        maxWidth,
+        getColor,
+        height: 3
+      },
+      stepValues: {
+        minSize,
+        maxSize,
+        StepComponent
+      }
+    }), titles]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvDefaultNavigation.propTypes = {

package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.js","names":["React","PropTypes","useTheme","withStyles","HvStep","getColor","getStateColor","stepSizes","styles","HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","container","maxSize","avatar","minSize","StepComponent","stepsWidth","width","titleWidth","separatorWidth","state","maxWidth","Math","max","minWidth","Steps","titles","variant","navWidth","separatorValues","height","stepValues","propTypes","className","string","classes","shape","root","isRequired","number","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport HvStep from \"./Step\";\nimport { getColor as getStateColor, stepSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Default Navigation\n */\nconst HvDefaultNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  children,\n  ...other\n}) => {\n  const theme = useTheme();\n\n  // step values\n  const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n  const StepComponent = HvStep;\n  //\n\n  const stepsWidth = maxSize + minSize * (numSteps - 1);\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const getColor = (state) => getStateColor(state === \"Current\" ? \"Disabled\" : state, theme);\n  const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ state }) => ({\n    variant: state === \"Disabled\" ? \"disabledText\" : \"highlightText\",\n    titleWidth,\n  }));\n\n  return (\n    <div {...other}>\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: 3,\n          },\n          stepValues: {\n            minSize,\n            maxSize,\n            StepComponent,\n          },\n        }}\n      />\n      {titles}\n    </div>\n  );\n};\n\nHvDefaultNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Number of steps to show on the component.\n   */\n  numSteps: PropTypes.number.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n   */\n  getDynamicValues: PropTypes.func.isRequired,\n  /**\n   * Returns a JSX.element of the titles container.\n   */\n  getTitles: PropTypes.func.isRequired,\n  /**\n   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n   */\n  children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvDefaultNavigation\" })(HvDefaultNavigation);\n"],"mappings":"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"}
+{"version":3,"file":"DefaultNavigation.js","names":["React","PropTypes","useTheme","withStyles","HvStep","getColor","getStateColor","stepSizes","styles","HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","container","maxSize","avatar","minSize","StepComponent","stepsWidth","width","titleWidth","separatorWidth","state","maxWidth","Math","max","minWidth","Steps","titles","variant","navWidth","separatorValues","height","stepValues","propTypes","className","string","classes","shape","root","isRequired","number","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\n\nimport HvStep from \"./Step\";\nimport { getColor as getStateColor, stepSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Default Navigation\n */\nconst HvDefaultNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  children,\n  ...other\n}) => {\n  const theme = useTheme();\n\n  // step values\n  const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n  const StepComponent = HvStep;\n  //\n\n  const stepsWidth = maxSize + minSize * (numSteps - 1);\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const getColor = (state) => getStateColor(state === \"Current\" ? \"Disabled\" : state, theme);\n  const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ state }) => ({\n    variant: state === \"Disabled\" ? \"disabledText\" : \"highlightText\",\n    titleWidth,\n  }));\n\n  return (\n    <div {...other}>\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: 3,\n          },\n          stepValues: {\n            minSize,\n            maxSize,\n            StepComponent,\n          },\n        }}\n      />\n      {titles}\n    </div>\n  );\n};\n\nHvDefaultNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Number of steps to show on the component.\n   */\n  numSteps: PropTypes.number.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n   */\n  getDynamicValues: PropTypes.func.isRequired,\n  /**\n   * Returns a JSX.element of the titles container.\n   */\n  getTitles: PropTypes.func.isRequired,\n  /**\n   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n   */\n  children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvDefaultNavigation\" })(HvDefaultNavigation);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvButtonProps } from "@hitachivantara/uikit-react-core";
 
 export type HvStepClassKey = "root";

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js

@@ -1,8 +1,7 @@
-import "core-js/modules/es.array.includes.js";
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
 import { HvAvatar, HvButton } from "@hitachivantara/uikit-react-core";
 import { getColor } from "../utils";
@@ -11,6 +10,8 @@ import styles from "./styles";
  * Step element of "Default" Step Navigation root component
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+
 const HvStep = ({
   className,
   classes,
@@ -49,27 +50,30 @@ const HvStep = ({
     Failed: Level3Bad,
     Completed: Level0Good
   }[state];
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root, state !== "Current" && classes["not-current"])
-  }, /*#__PURE__*/React.createElement(HvButton, {
-    className: clsx(classes.ghost, state === "Current" && classes.ghostDisabled),
-    "aria-label": `step-${title}`,
-    icon: true,
-    overrideIconColors: false,
-    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(HvAvatar, {
-    className: clsx(classes.avatar, classes[size]),
-    backgroundColor: backgroundColor,
-    status: status,
-    size: size
-  }, IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-    color: color,
-    semantic: semantic,
-    width: svgSize,
-    height: svgSize,
-    iconSize: iconSize
-  }) : number)));
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx(className, classes.root, state !== "Current" && classes["not-current"]),
+    children: /*#__PURE__*/_jsx(HvButton, {
+      className: clsx(classes.ghost, state === "Current" && classes.ghostDisabled),
+      "aria-label": `step-${title}`,
+      icon: true,
+      overrideIconColors: false,
+      disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
+      onClick: onClick,
+      children: /*#__PURE__*/_jsx(HvAvatar, {
+        className: clsx(classes.avatar, classes[size]),
+        backgroundColor: backgroundColor,
+        status: status,
+        size: size,
+        children: IconComponent ? /*#__PURE__*/_jsx(IconComponent, {
+          color: color,
+          semantic: semantic,
+          width: svgSize,
+          height: svgSize,
+          iconSize: iconSize
+        }) : number
+      })
+    })
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvStep.propTypes = {