@hitachivantara/uikit-react-lab 3.38.0

package/dist/NotificationPanel/NotificationPanel.js

@@ -0,0 +1,426 @@
+"use strict";
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGenericLocale = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _Notification = _interopRequireDefault(require("./Notification"));
+
+var _EmptyStatePanel = _interopRequireDefault(require("./EmptyStatePanel"));
+
+var _NotificationsIndicator = _interopRequireDefault(require("./NotificationsIndicator"));
+
+var _excluded = ["id", "className", "classes", "open", "footer", "notifications", "hasNewNotifications", "emptyStatePanelTitle", "emptyStatePanelMessage", "emptyStatePanelIcon", "labels", "newNotificationsButtonAction", "locale"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DEFAULT_LABELS = {
+  notificationGroupHeader: {
+    newNotifications: "New",
+    olderNotifications: "Earlier"
+  },
+  notificationIndicator: {
+    label: "You have new notifications",
+    buttonLabel: "Update"
+  }
+};
+/**
+ * Obtains a simplified locale, if possible, e.g: "en-US" returns "en".
+ *
+ * @param {string} locale - The locale to be used
+ * @returns The more generic locale if found
+ */
+
+var getGenericLocale = function getGenericLocale(locale) {
+  return locale.includes("-") && locale.substr(0, locale.indexOf("-"));
+};
+/**
+ * Imports and load the received locale in order to be used by dayjs. If the provided locale or a generic one
+ * obtained is not possible to load, then dayjs will fallback to its default.
+ *
+ * @param {string} locale - The locale to be used
+ */
+
+
+exports.getGenericLocale = getGenericLocale;
+
+var importAndLoadLocale = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(locale) {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return Promise.resolve("dayjs/locale/".concat(locale, ".js")).then(function (s) {
+              return _interopRequireWildcard(require(s));
+            }).then(function () {
+              _dayjs.default.locale(locale);
+            }).catch( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+              var genericLocale;
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      genericLocale = getGenericLocale(locale);
+                      _context.next = 3;
+                      return Promise.resolve("dayjs/locale/".concat(genericLocale, ".js")).then(function (s) {
+                        return _interopRequireWildcard(require(s));
+                      }).then(function () {
+                        return _dayjs.default.locale(genericLocale);
+                      }) // eslint-disable-next-line no-console
+                      .catch(function () {
+                        return console.warn("Unable to load locale: ".concat(locale, ". Falling back to the default"));
+                      });
+
+                    case 3:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            })));
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function importAndLoadLocale(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+/**
+ * Notification Panel displays all of read and unread notifications. Still in development
+ */
+
+
+var HvNotificationPanel = function HvNotificationPanel(_ref3) {
+  var id = _ref3.id,
+      className = _ref3.className,
+      classes = _ref3.classes,
+      open = _ref3.open,
+      footer = _ref3.footer,
+      notifications = _ref3.notifications,
+      _ref3$hasNewNotificat = _ref3.hasNewNotifications,
+      hasNewNotifications = _ref3$hasNewNotificat === void 0 ? false : _ref3$hasNewNotificat,
+      _ref3$emptyStatePanel = _ref3.emptyStatePanelTitle,
+      emptyStatePanelTitle = _ref3$emptyStatePanel === void 0 ? "No notifications" : _ref3$emptyStatePanel,
+      _ref3$emptyStatePanel2 = _ref3.emptyStatePanelMessage,
+      emptyStatePanelMessage = _ref3$emptyStatePanel2 === void 0 ? "You currently have no notifications." : _ref3$emptyStatePanel2,
+      emptyStatePanelIcon = _ref3.emptyStatePanelIcon,
+      labelsProp = _ref3.labels,
+      newNotificationsButtonAction = _ref3.newNotificationsButtonAction,
+      localeProp = _ref3.locale,
+      others = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var localeFromProvider = (0, _uikitReactCore.useLocale)();
+  var locale = localeProp || localeFromProvider;
+
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      highlighted = _useState2[0],
+      setHighlighted = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isExpanded = _useState4[0],
+      setIsExpanded = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isLocaleLoaded = _useState6[0],
+      setIsLocaleLoaded = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    // We're using this mount logic to avoid potential memory leak problems.
+    var isMounted = true;
+
+    if (!isLocaleLoaded) {
+      importAndLoadLocale(locale).then(function () {
+        if (isMounted) {
+          setIsLocaleLoaded(true);
+        }
+      });
+    }
+
+    return function () {
+      isMounted = false;
+    };
+  });
+  var labels = (0, _uikitReactCore.useLabels)(DEFAULT_LABELS, labelsProp);
+
+  var generateNotificationsActions = function generateNotificationsActions(notificationId, _onToggle, actions) {
+    var expand = notificationId === highlighted;
+    var dList = (0, _toConsumableArray2.default)(actions.values);
+    return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvDropDownMenu, (0, _extends2.default)({
+      expanded: expand,
+      onClick: function onClick(e, item) {
+        var _item$callback;
+
+        setHighlighted(undefined);
+        item === null || item === void 0 ? void 0 : (_item$callback = item.callback) === null || _item$callback === void 0 ? void 0 : _item$callback.call(item, notificationId);
+      },
+      dataList: dList,
+      onToggle: function onToggle(event, s) {
+        _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(event, s);
+
+        if (s) {
+          setHighlighted(notificationId);
+        } else {
+          setHighlighted(undefined);
+        }
+
+        setIsExpanded(!isExpanded);
+      }
+    }, actions.dropDownMenuProps));
+  };
+
+  var notificationElementGenerator = function notificationElementGenerator(notificationsToRender) {
+    return notificationsToRender.map(function (notification) {
+      var notificationIsHighlighted = highlighted === notification.id;
+      return /*#__PURE__*/_react.default.createElement(_Notification.default, {
+        key: notification.id,
+        notificationId: notification.id,
+        title: notification.title,
+        isRead: notification.isRead,
+        icon: notification.icon,
+        date: notification.date,
+        onClick: notification.onClick,
+        onKeyPress: notification.onKeyPress,
+        rightContainer: generateNotificationsActions(notification.id, notification.onToggle, notification.actions),
+        isHighlighted: notificationIsHighlighted,
+        locale: locale
+      });
+    });
+  };
+
+  var hasNotifications = notifications.length > 0;
+
+  var renderNotifications = function renderNotifications(notificationsToRender) {
+    return notificationElementGenerator(notificationsToRender);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvPanel, (0, _extends2.default)({
+    id: id,
+    className: (0, _clsx.default)(className, classes.root, open === false && classes.closed, open && classes.open)
+  }, others), hasNewNotifications && /*#__PURE__*/_react.default.createElement(_NotificationsIndicator.default, {
+    labels: labels.notificationIndicator,
+    onClick: newNotificationsButtonAction
+  }), hasNotifications ? /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.panel
+  }, notifications.length > 0 && renderNotifications(notifications)) : /*#__PURE__*/_react.default.createElement(_EmptyStatePanel.default, {
+    id: (0, _uikitReactCore.setId)(id, "empty-state"),
+    title: emptyStatePanelTitle,
+    message: emptyStatePanelMessage,
+    icon: emptyStatePanelIcon,
+    className: classes.emptyState
+  }), footer && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvActionBar, {
+    id: (0, _uikitReactCore.setId)(id, "action-bar"),
+    classes: {
+      root: classes.actionBarRoot
+    },
+    className: classes.actionBar
+  }, footer));
+};
+
+HvNotificationPanel.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Class names to be applied to the root element.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * '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: (0, _core.deprecatedPropType)(_propTypes.default.bool),
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * styles object applied to the root
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * styles object applied to the root when closed
+     */
+    closed: _propTypes.default.string,
+
+    /**
+     * styles object applied to the root when open
+     */
+    open: _propTypes.default.string,
+
+    /**
+     * styles object applied to the panel
+     */
+    panel: _propTypes.default.string,
+
+    /**
+     * styles object applied to the action bar
+     */
+    actionBar: _propTypes.default.string,
+
+    /**
+     * styles object applied to the root of the action bar
+     */
+    actionBarRoot: _propTypes.default.string,
+
+    /**
+     * styles object applied to the new notification indicator
+     */
+    notificationsIndicator: _propTypes.default.string,
+
+    /**
+     * styles object applied to the empty state panel
+     */
+    emptyState: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * The properties of the notifications to be rendered in the Panel.
+   */
+  notifications: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    isRead: _propTypes.default.bool.isRequired,
+    date: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    icon: _propTypes.default.element,
+    onClick: _propTypes.default.func,
+    onKeyPress: _propTypes.default.func,
+    onToggle: _propTypes.default.func,
+    actions: _propTypes.default.shape({
+      label: _propTypes.default.bool,
+      action: _propTypes.default.string,
+      callback: _propTypes.default.func,
+      dropDownMenuProps: _propTypes.default.instanceOf(Object)
+    })
+  })),
+
+  /**
+   * Whether to render the new notifications indicator
+   */
+  hasNewNotifications: _propTypes.default.bool,
+
+  /**
+   * Action buttons to render in footer
+   */
+  footer: _propTypes.default.node,
+
+  /**
+   * Title of the EmptyStatePanel
+   */
+  emptyStatePanelTitle: _propTypes.default.string,
+
+  /**
+   * Message of the EmptyStatePanel
+   */
+  emptyStatePanelMessage: _propTypes.default.string,
+
+  /**
+   * Empty Panel custom Icon
+   */
+  emptyStatePanelIcon: _propTypes.default.node,
+
+  /**
+   * Labels to apply to the Panel
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * Labels to apply to the groups separating newer and older notifications
+     */
+    notificationGroupHeader: {
+      olderNotifications: _propTypes.default.string,
+      newNotifications: _propTypes.default.string
+    },
+
+    /**
+     * Labels to apply to the element of the New Notifications Indicator
+     */
+    notificationIndicator: {
+      label: _propTypes.default.string,
+      buttonLabel: _propTypes.default.string
+    }
+  }),
+
+  /**
+   * Function to be supplied to the notification update button
+   */
+  newNotificationsButtonAction: _propTypes.default.func,
+
+  /**
+   * The locale to be used on the notification date, if undefined it will use the one from the HvProvider
+   */
+  locale: _propTypes.default.string
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvNotificationPanel"
+})(HvNotificationPanel);
+
+exports.default = _default;
+//# sourceMappingURL=NotificationPanel.js.map

package/dist/NotificationPanel/NotificationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NotificationPanel/NotificationPanel.js"],"names":["DEFAULT_LABELS","notificationGroupHeader","newNotifications","olderNotifications","notificationIndicator","label","buttonLabel","getGenericLocale","locale","includes","substr","indexOf","importAndLoadLocale","then","dayjs","catch","genericLocale","console","warn","HvNotificationPanel","id","className","classes","open","footer","notifications","hasNewNotifications","emptyStatePanelTitle","emptyStatePanelMessage","emptyStatePanelIcon","labelsProp","labels","newNotificationsButtonAction","localeProp","others","localeFromProvider","undefined","highlighted","setHighlighted","isExpanded","setIsExpanded","isLocaleLoaded","setIsLocaleLoaded","isMounted","generateNotificationsActions","notificationId","onToggle","actions","expand","dList","values","e","item","callback","event","s","dropDownMenuProps","notificationElementGenerator","notificationsToRender","map","notification","notificationIsHighlighted","title","isRead","icon","date","onClick","onKeyPress","hasNotifications","length","renderNotifications","root","closed","panel","emptyState","actionBarRoot","actionBar","propTypes","PropTypes","string","bool","shape","notificationsIndicator","isRequired","arrayOf","oneOfType","number","object","element","func","action","instanceOf","Object","node","styles","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AASA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,cAAc,GAAG;AACrBC,EAAAA,uBAAuB,EAAE;AACvBC,IAAAA,gBAAgB,EAAE,KADK;AAEvBC,IAAAA,kBAAkB,EAAE;AAFG,GADJ;AAKrBC,EAAAA,qBAAqB,EAAE;AACrBC,IAAAA,KAAK,EAAE,4BADc;AAErBC,IAAAA,WAAW,EAAE;AAFQ;AALF,CAAvB;AAWA;AACA;AACA;AACA;AACA;AACA;;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,MAAD;AAAA,SAC9BA,MAAM,CAACC,QAAP,CAAgB,GAAhB,KAAwBD,MAAM,CAACE,MAAP,CAAc,CAAd,EAAiBF,MAAM,CAACG,OAAP,CAAe,GAAf,CAAjB,CADM;AAAA,CAAzB;AAGP;AACA;AACA;AACA;AACA;AACA;;;;;AACA,IAAMC,mBAAmB;AAAA,qFAAG,kBAAOJ,MAAP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBACpB,uCAAuBA,MAAvB;AAAA;AAAA,eACHK,IADG,CACE,YAAM;AACVC,6BAAMN,MAAN,CAAaA,MAAb;AACD,aAHG,EAIHO,KAJG,uFAIG;AAAA;AAAA;AAAA;AAAA;AAAA;AACCC,sBAAAA,aADD,GACiBT,gBAAgB,CAACC,MAAD,CADjC;AAAA;AAAA,6BAEC,uCAAuBQ,aAAvB;AAAA;AAAA,yBACHH,IADG,CACE;AAAA,+BAAMC,eAAMN,MAAN,CAAaQ,aAAb,CAAN;AAAA,uBADF,EAEJ;AAFI,uBAGHD,KAHG,CAGG;AAAA,+BAAME,OAAO,CAACC,IAAR,kCAAuCV,MAAvC,mCAAN;AAAA,uBAHH,CAFD;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAJH,GADoB;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAH;;AAAA,kBAAnBI,mBAAmB;AAAA;AAAA;AAAA,GAAzB;AAcA;AACA;AACA;;;AACA,IAAMO,mBAAmB,GAAG,SAAtBA,mBAAsB,QAetB;AAAA,MAdJC,EAcI,SAdJA,EAcI;AAAA,MAbJC,SAaI,SAbJA,SAaI;AAAA,MAZJC,OAYI,SAZJA,OAYI;AAAA,MAXJC,IAWI,SAXJA,IAWI;AAAA,MAVJC,MAUI,SAVJA,MAUI;AAAA,MATJC,aASI,SATJA,aASI;AAAA,oCARJC,mBAQI;AAAA,MARJA,mBAQI,sCARkB,KAQlB;AAAA,oCAPJC,oBAOI;AAAA,MAPJA,oBAOI,sCAPmB,kBAOnB;AAAA,qCANJC,sBAMI;AAAA,MANJA,sBAMI,uCANqB,sCAMrB;AAAA,MALJC,mBAKI,SALJA,mBAKI;AAAA,MAJIC,UAIJ,SAJJC,MAII;AAAA,MAHJC,4BAGI,SAHJA,4BAGI;AAAA,MAFIC,UAEJ,SAFJzB,MAEI;AAAA,MADD0B,MACC;AACJ,MAAMC,kBAAkB,GAAG,gCAA3B;AAEA,MAAM3B,MAAM,GAAGyB,UAAU,IAAIE,kBAA7B;;AAEA,kBAAsC,qBAASC,SAAT,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,mBAAoC,qBAAS,KAAT,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,mBAA4C,qBAAS,KAAT,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,wBAAU,YAAM;AACd;AACA,QAAIC,SAAS,GAAG,IAAhB;;AAEA,QAAI,CAACF,cAAL,EAAqB;AACnB7B,MAAAA,mBAAmB,CAACJ,MAAD,CAAnB,CAA4BK,IAA5B,CAAiC,YAAM;AACrC,YAAI8B,SAAJ,EAAe;AACbD,UAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AACF,OAJD;AAKD;;AACD,WAAO,YAAM;AACXC,MAAAA,SAAS,GAAG,KAAZ;AACD,KAFD;AAGD,GAdD;AAgBA,MAAMZ,MAAM,GAAG,+BAAU/B,cAAV,EAA0B8B,UAA1B,CAAf;;AAEA,MAAMc,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACC,cAAD,EAAiBC,SAAjB,EAA2BC,OAA3B,EAAuC;AAC1E,QAAMC,MAAM,GAAGH,cAAc,KAAKR,WAAlC;AACA,QAAMY,KAAK,oCAAOF,OAAO,CAACG,MAAf,CAAX;AACA,wBACE,6BAAC,8BAAD;AACE,MAAA,QAAQ,EAAEF,MADZ;AAEE,MAAA,OAAO,EAAE,iBAACG,CAAD,EAAIC,IAAJ,EAAa;AAAA;;AACpBd,QAAAA,cAAc,CAACF,SAAD,CAAd;AACAgB,QAAAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,8BAAAA,IAAI,CAAEC,QAAN,uEAAAD,IAAI,EAAaP,cAAb,CAAJ;AACD,OALH;AAME,MAAA,QAAQ,EAAEI,KANZ;AAOE,MAAA,QAAQ,EAAE,kBAACK,KAAD,EAAQC,CAAR,EAAc;AACtBT,QAAAA,SAAQ,SAAR,IAAAA,SAAQ,WAAR,YAAAA,SAAQ,CAAGQ,KAAH,EAAUC,CAAV,CAAR;;AACA,YAAIA,CAAJ,EAAO;AACLjB,UAAAA,cAAc,CAACO,cAAD,CAAd;AACD,SAFD,MAEO;AACLP,UAAAA,cAAc,CAACF,SAAD,CAAd;AACD;;AACDI,QAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACD;AAfH,OAgBMQ,OAAO,CAACS,iBAhBd,EADF;AAoBD,GAvBD;;AAyBA,MAAMC,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACC,qBAAD,EAA2B;AAC9D,WAAOA,qBAAqB,CAACC,GAAtB,CAA0B,UAACC,YAAD,EAAkB;AACjD,UAAMC,yBAAyB,GAAGxB,WAAW,KAAKuB,YAAY,CAACxC,EAA/D;AACA,0BACE,6BAAC,qBAAD;AACE,QAAA,GAAG,EAAEwC,YAAY,CAACxC,EADpB;AAEE,QAAA,cAAc,EAAEwC,YAAY,CAACxC,EAF/B;AAGE,QAAA,KAAK,EAAEwC,YAAY,CAACE,KAHtB;AAIE,QAAA,MAAM,EAAEF,YAAY,CAACG,MAJvB;AAKE,QAAA,IAAI,EAAEH,YAAY,CAACI,IALrB;AAME,QAAA,IAAI,EAAEJ,YAAY,CAACK,IANrB;AAOE,QAAA,OAAO,EAAEL,YAAY,CAACM,OAPxB;AAQE,QAAA,UAAU,EAAEN,YAAY,CAACO,UAR3B;AASE,QAAA,cAAc,EAAEvB,4BAA4B,CAC1CgB,YAAY,CAACxC,EAD6B,EAE1CwC,YAAY,CAACd,QAF6B,EAG1Cc,YAAY,CAACb,OAH6B,CAT9C;AAcE,QAAA,aAAa,EAAEc,yBAdjB;AAeE,QAAA,MAAM,EAAErD;AAfV,QADF;AAmBD,KArBM,CAAP;AAsBD,GAvBD;;AAyBA,MAAM4D,gBAAgB,GAAG3C,aAAa,CAAC4C,MAAd,GAAuB,CAAhD;;AAEA,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACZ,qBAAD;AAAA,WAC1BD,4BAA4B,CAACC,qBAAD,CADF;AAAA,GAA5B;;AAGA,sBACE,6BAAC,uBAAD;AACE,IAAA,EAAE,EAAEtC,EADN;AAEE,IAAA,SAAS,EAAE,mBAAKC,SAAL,EAAgBC,OAAO,CAACiD,IAAxB,EACShD,IAAI,KAAK,KADlB,IACRD,OAAO,CAACkD,MADA,EAEOjD,IAFP,IAERD,OAAO,CAACC,IAFA;AAFb,KAMMW,MANN,GAQGR,mBAAmB,iBAClB,6BAAC,+BAAD;AACE,IAAA,MAAM,EAAEK,MAAM,CAAC3B,qBADjB;AAEE,IAAA,OAAO,EAAE4B;AAFX,IATJ,EAcGoC,gBAAgB,gBACf;AAAK,IAAA,SAAS,EAAE9C,OAAO,CAACmD;AAAxB,KACGhD,aAAa,CAAC4C,MAAd,GAAuB,CAAvB,IAA4BC,mBAAmB,CAAC7C,aAAD,CADlD,CADe,gBAKf,6BAAC,wBAAD;AACE,IAAA,EAAE,EAAE,2BAAML,EAAN,EAAU,aAAV,CADN;AAEE,IAAA,KAAK,EAAEO,oBAFT;AAGE,IAAA,OAAO,EAAEC,sBAHX;AAIE,IAAA,IAAI,EAAEC,mBAJR;AAKE,IAAA,SAAS,EAAEP,OAAO,CAACoD;AALrB,IAnBJ,EA2BGlD,MAAM,iBACL,6BAAC,2BAAD;AACE,IAAA,EAAE,EAAE,2BAAMJ,EAAN,EAAU,YAAV,CADN;AAEE,IAAA,OAAO,EAAE;AACPmD,MAAAA,IAAI,EAAEjD,OAAO,CAACqD;AADP,KAFX;AAKE,IAAA,SAAS,EAAErD,OAAO,CAACsD;AALrB,KAOGpD,MAPH,CA5BJ,CADF;AAyCD,CA1ID;;AA4IAL,mBAAmB,CAAC0D,SAApB,GAAgC;AAC9B;AACF;AACA;AACEzD,EAAAA,EAAE,EAAE0D,mBAAUC,MAJgB;;AAK9B;AACF;AACA;AACE1D,EAAAA,SAAS,EAAEyD,mBAAUC,MARS;;AAS9B;AACF;AACA;AACA;AACA;AACExD,EAAAA,IAAI,EAAE,8BAAmBuD,mBAAUE,IAA7B,CAdwB;;AAe9B;AACF;AACA;AACE1D,EAAAA,OAAO,EAAEwD,mBAAUG,KAAV,CAAgB;AACvB;AACJ;AACA;AACIV,IAAAA,IAAI,EAAEO,mBAAUC,MAJO;;AAKvB;AACJ;AACA;AACIP,IAAAA,MAAM,EAAEM,mBAAUC,MARK;;AASvB;AACJ;AACA;AACIxD,IAAAA,IAAI,EAAEuD,mBAAUC,MAZO;;AAavB;AACJ;AACA;AACIN,IAAAA,KAAK,EAAEK,mBAAUC,MAhBM;;AAiBvB;AACJ;AACA;AACIH,IAAAA,SAAS,EAAEE,mBAAUC,MApBE;;AAqBvB;AACJ;AACA;AACIJ,IAAAA,aAAa,EAAEG,mBAAUC,MAxBF;;AAyBvB;AACJ;AACA;AACIG,IAAAA,sBAAsB,EAAEJ,mBAAUC,MA5BX;;AA6BvB;AACJ;AACA;AACIL,IAAAA,UAAU,EAAEI,mBAAUC;AAhCC,GAAhB,EAiCNI,UAnD2B;;AAoD9B;AACF;AACA;AACE1D,EAAAA,aAAa,EAAEqD,mBAAUM,OAAV,CACbN,mBAAUG,KAAV,CAAgB;AACd7D,IAAAA,EAAE,EAAE0D,mBAAUC,MAAV,CAAiBI,UADP;AAEdrB,IAAAA,KAAK,EAAEgB,mBAAUC,MAAV,CAAiBI,UAFV;AAGdpB,IAAAA,MAAM,EAAEe,mBAAUE,IAAV,CAAeG,UAHT;AAIdlB,IAAAA,IAAI,EAAEa,mBAAUO,SAAV,CAAoB,CAACP,mBAAUC,MAAX,EAAmBD,mBAAUQ,MAA7B,EAAqCR,mBAAUS,MAA/C,CAApB,EAA4EJ,UAJpE;AAKdnB,IAAAA,IAAI,EAAEc,mBAAUU,OALF;AAMdtB,IAAAA,OAAO,EAAEY,mBAAUW,IANL;AAOdtB,IAAAA,UAAU,EAAEW,mBAAUW,IAPR;AAQd3C,IAAAA,QAAQ,EAAEgC,mBAAUW,IARN;AASd1C,IAAAA,OAAO,EAAE+B,mBAAUG,KAAV,CAAgB;AACvB5E,MAAAA,KAAK,EAAEyE,mBAAUE,IADM;AAEvBU,MAAAA,MAAM,EAAEZ,mBAAUC,MAFK;AAGvB1B,MAAAA,QAAQ,EAAEyB,mBAAUW,IAHG;AAIvBjC,MAAAA,iBAAiB,EAAEsB,mBAAUa,UAAV,CAAqBC,MAArB;AAJI,KAAhB;AATK,GAAhB,CADa,CAvDe;;AAyE9B;AACF;AACA;AACElE,EAAAA,mBAAmB,EAAEoD,mBAAUE,IA5ED;;AA6E9B;AACF;AACA;AACExD,EAAAA,MAAM,EAAEsD,mBAAUe,IAhFY;;AAiF9B;AACF;AACA;AACElE,EAAAA,oBAAoB,EAAEmD,mBAAUC,MApFF;;AAqF9B;AACF;AACA;AACEnD,EAAAA,sBAAsB,EAAEkD,mBAAUC,MAxFJ;;AAyF9B;AACF;AACA;AACElD,EAAAA,mBAAmB,EAAEiD,mBAAUe,IA5FD;;AA6F9B;AACF;AACA;AACE9D,EAAAA,MAAM,EAAE+C,mBAAUG,KAAV,CAAgB;AACtB;AACJ;AACA;AACIhF,IAAAA,uBAAuB,EAAE;AACvBE,MAAAA,kBAAkB,EAAE2E,mBAAUC,MADP;AAEvB7E,MAAAA,gBAAgB,EAAE4E,mBAAUC;AAFL,KAJH;;AAQtB;AACJ;AACA;AACI3E,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,KAAK,EAAEyE,mBAAUC,MADI;AAErBzE,MAAAA,WAAW,EAAEwE,mBAAUC;AAFF;AAXD,GAAhB,CAhGsB;;AAgH9B;AACF;AACA;AACE/C,EAAAA,4BAA4B,EAAE8C,mBAAUW,IAnHV;;AAoH9B;AACF;AACA;AACEjF,EAAAA,MAAM,EAAEsE,mBAAUC;AAvHY,CAAhC;;eA0He,sBAAWe,eAAX,EAAmB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAoD5E,mBAApD,C","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\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 * Obtains a simplified locale, if possible, e.g: \"en-US\" returns \"en\".\n *\n * @param {string} locale - The locale to be used\n * @returns The more generic locale if found\n */\nexport const getGenericLocale = (locale) =>\n  locale.includes(\"-\") && locale.substr(0, locale.indexOf(\"-\"));\n\n/**\n * Imports and load the received locale in order to be used by dayjs. If the provided locale or a generic one\n * obtained is not possible to load, then dayjs will fallback to its default.\n *\n * @param {string} locale - The locale to be used\n */\nconst importAndLoadLocale = async (locale) => {\n  await import(`dayjs/locale/${locale}.js`)\n    .then(() => {\n      dayjs.locale(locale);\n    })\n    .catch(async () => {\n      const genericLocale = getGenericLocale(locale);\n      await import(`dayjs/locale/${genericLocale}.js`)\n        .then(() => dayjs.locale(genericLocale))\n        // eslint-disable-next-line no-console\n        .catch(() => console.warn(`Unable to load locale: ${locale}. Falling back to the default`));\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  const [isLocaleLoaded, setIsLocaleLoaded] = useState(false);\n\n  useEffect(() => {\n    // We're using this mount logic to avoid potential memory leak problems.\n    let isMounted = true;\n\n    if (!isLocaleLoaded) {\n      importAndLoadLocale(locale).then(() => {\n        if (isMounted) {\n          setIsLocaleLoaded(true);\n        }\n      });\n    }\n    return () => {\n      isMounted = false;\n    };\n  });\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={(e, item) => {\n          setHighlighted(undefined);\n          item?.callback?.(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"],"file":"NotificationPanel.js"}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface Labels {
+  label: string;
+  buttonLabel: string;
+}
+
+export type HvNotificationsIndicatorClassKey =
+  | "root"
+  | "notificationsIndicator"
+  | "newNotificationsFocus"
+  | "semanticColoring";
+
+export interface HvNotificationsIndicatorProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvNotificationsIndicatorClassKey> {
+  /**
+   * Title to apply to indicator
+   */
+  labels: Labels[];
+}
+
+export default function HvNotificationsIndicator(
+  props: HvNotificationsIndicatorProps
+): JSX.Element | null;

package/dist/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _core = require("@material-ui/core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["classes", "className", "labels", "onClick"];
+
+var NotificationsIndicator = function NotificationsIndicator(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      labels = _ref.labels,
+      onClick = _ref.onClick,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root, classes.notificationsIndicator)
+  }, others), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
+    classes: {
+      normalText: classes.semanticColoring
+    }
+  }, labels.label), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
+    category: "semantic",
+    className: classes.newNotificationsFocus,
+    classes: {
+      focusVisible: classes.newNotificationsFocus
+    },
+    onClick: onClick
+  }, labels.buttonLabel));
+};
+
+NotificationsIndicator.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the root of the element.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the NotificationsIndicator container.
+     */
+    notificationsIndicator: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification focus
+     */
+    newNotificationsFocus: _propTypes.default.string,
+
+    /**
+     * Override to text color for usage over semantic background in wicked
+     */
+    semanticColoring: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Labels to apply to component
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * Notification indicator label
+     */
+    label: _propTypes.default.string,
+
+    /**
+     * Label to apply to the button label
+     */
+    buttonLabel: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Function passed to the notification panel button
+   */
+  onClick: _propTypes.default.func
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvNotificationsIndicator"
+})(NotificationsIndicator);
+
+exports.default = _default;
+//# sourceMappingURL=NotificationsIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js"],"names":["NotificationsIndicator","classes","className","labels","onClick","others","root","notificationsIndicator","normalText","semanticColoring","label","newNotificationsFocus","focusVisible","buttonLabel","propTypes","PropTypes","shape","string","isRequired","func","styles","name"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAAwD;AAAA,MAArDC,OAAqD,QAArDA,OAAqD;AAAA,MAA5CC,SAA4C,QAA5CA,SAA4C;AAAA,MAAjCC,MAAiC,QAAjCA,MAAiC;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AAAA,MAAbC,MAAa;AACrF,sBACE;AAAK,IAAA,SAAS,EAAE,mBAAKH,SAAL,EAAgBD,OAAO,CAACK,IAAxB,EAA8BL,OAAO,CAACM,sBAAtC;AAAhB,KAAmFF,MAAnF,gBACE,6BAAC,4BAAD;AAAc,IAAA,OAAO,EAAE;AAAEG,MAAAA,UAAU,EAAEP,OAAO,CAACQ;AAAtB;AAAvB,KAAkEN,MAAM,CAACO,KAAzE,CADF,eAEE,6BAAC,wBAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,SAAS,EAAET,OAAO,CAACU,qBAFrB;AAGE,IAAA,OAAO,EAAE;AACPC,MAAAA,YAAY,EAAEX,OAAO,CAACU;AADf,KAHX;AAME,IAAA,OAAO,EAAEP;AANX,KAQGD,MAAM,CAACU,WARV,CAFF,CADF;AAeD,CAhBD;;AAkBAb,sBAAsB,CAACc,SAAvB,GAAmC;AACjC;AACF;AACA;AACEb,EAAAA,OAAO,EAAEc,mBAAUC,KAAV,CAAgB;AACvB;AACJ;AACA;AACIV,IAAAA,IAAI,EAAES,mBAAUE,MAJO;;AAKvB;AACJ;AACA;AACIV,IAAAA,sBAAsB,EAAEQ,mBAAUE,MARX;;AAUvB;AACJ;AACA;AACIN,IAAAA,qBAAqB,EAAEI,mBAAUE,MAbV;;AAcvB;AACJ;AACA;AACIR,IAAAA,gBAAgB,EAAEM,mBAAUE;AAjBL,GAAhB,EAkBNC,UAtB8B;;AAwBjC;AACF;AACA;AACEhB,EAAAA,SAAS,EAAEa,mBAAUE,MA3BY;;AA4BjC;AACF;AACA;AACEd,EAAAA,MAAM,EAAEY,mBAAUC,KAAV,CAAgB;AACtB;AACJ;AACA;AACIN,IAAAA,KAAK,EAAEK,mBAAUE,MAJK;;AAKtB;AACJ;AACA;AACIJ,IAAAA,WAAW,EAAEE,mBAAUE;AARD,GAAhB,EASLC,UAxC8B;;AAyCjC;AACF;AACA;AACEd,EAAAA,OAAO,EAAEW,mBAAUI;AA5Cc,CAAnC;;eA+Ce,sBAAWC,eAAX,EAAmB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAyDrB,sBAAzD,C","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"],"file":"NotificationsIndicator.js"}

package/dist/NotificationPanel/NotificationsIndicator/index.js

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

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

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

package/dist/NotificationPanel/NotificationsIndicator/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles(theme) {
+  return {
+    root: {},
+    notificationsIndicator: {
+      height: 32,
+      backgroundColor: theme.hv.palette.semantic.sema7,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "0 0 0 ".concat(theme.hv.spacing.sm, "px"),
+      "& button": {
+        margin: "0 0 0 ".concat(theme.hv.spacing.xs, "px"),
+        borderRadius: 0
+      }
+    },
+    semanticColoring: {
+      color: theme.hv.palette.base.base2
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/NotificationsIndicator/styles.js"],"names":["styles","theme","root","notificationsIndicator","height","backgroundColor","hv","palette","semantic","sema7","display","justifyContent","alignItems","padding","spacing","sm","margin","xs","borderRadius","semanticColoring","color","base","base2"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE,EADmB;AAEzBC,IAAAA,sBAAsB,EAAE;AACtBC,MAAAA,MAAM,EAAE,EADc;AAEtBC,MAAAA,eAAe,EAAEJ,KAAK,CAACK,EAAN,CAASC,OAAT,CAAiBC,QAAjB,CAA0BC,KAFrB;AAGtBC,MAAAA,OAAO,EAAE,MAHa;AAItBC,MAAAA,cAAc,EAAE,eAJM;AAKtBC,MAAAA,UAAU,EAAE,QALU;AAMtBC,MAAAA,OAAO,kBAAWZ,KAAK,CAACK,EAAN,CAASQ,OAAT,CAAiBC,EAA5B,OANe;AAOtB,kBAAY;AACVC,QAAAA,MAAM,kBAAWf,KAAK,CAACK,EAAN,CAASQ,OAAT,CAAiBG,EAA5B,OADI;AAEVC,QAAAA,YAAY,EAAE;AAFJ;AAPU,KAFC;AAezBC,IAAAA,gBAAgB,EAAE;AAChBC,MAAAA,KAAK,EAAEnB,KAAK,CAACK,EAAN,CAASC,OAAT,CAAiBc,IAAjB,CAAsBC;AADb;AAfO,GAAZ;AAAA,CAAf;;eAoBetB,M","sourcesContent":["const styles = (theme) => ({\n  root: {},\n  notificationsIndicator: {\n    height: 32,\n    backgroundColor: theme.hv.palette.semantic.sema7,\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    padding: `0 0 0 ${theme.hv.spacing.sm}px`,\n    \"& button\": {\n      margin: `0 0 0 ${theme.hv.spacing.xs}px`,\n      borderRadius: 0,\n    },\n  },\n\n  semanticColoring: {\n    color: theme.hv.palette.base.base2,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/NotificationPanel/index.d.ts

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