@hitachivantara/uikit-react-lab 3.38.0

package/dist/legacy/NotificationPanel/NotificationPanel.js

@@ -0,0 +1,374 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var _excluded = ["id", "className", "classes", "open", "footer", "notifications", "hasNewNotifications", "emptyStatePanelTitle", "emptyStatePanelMessage", "emptyStatePanelIcon", "labels", "newNotificationsButtonAction", "locale"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.map.js";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import { deprecatedPropType, withStyles } from "@material-ui/core";
+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";
+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
+ */
+
+export 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
+ */
+
+var importAndLoadLocale = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(locale) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return import("dayjs/locale/".concat(locale, ".js")).then(function () {
+              dayjs.locale(locale);
+            }).catch( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              var genericLocale;
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      genericLocale = getGenericLocale(locale);
+                      _context.next = 3;
+                      return import("dayjs/locale/".concat(genericLocale, ".js")).then(function () {
+                        return dayjs.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 = _objectWithoutProperties(_ref3, _excluded);
+
+  var localeFromProvider = useLocale();
+  var locale = localeProp || localeFromProvider;
+
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      highlighted = _useState2[0],
+      setHighlighted = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isExpanded = _useState4[0],
+      setIsExpanded = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isLocaleLoaded = _useState6[0],
+      setIsLocaleLoaded = _useState6[1];
+
+  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 = useLabels(DEFAULT_LABELS, labelsProp);
+
+  var generateNotificationsActions = function generateNotificationsActions(notificationId, _onToggle, actions) {
+    var expand = notificationId === highlighted;
+
+    var dList = _toConsumableArray(actions.values);
+
+    return /*#__PURE__*/React.createElement(HvDropDownMenu, _extends({
+      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.createElement(Notification, {
+        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.createElement(HvPanel, _extends({
+    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));
+};
+
+HvNotificationPanel.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied to the root element.
+   */
+  className: PropTypes.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: deprecatedPropType(PropTypes.bool),
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * styles object applied to the root
+     */
+    root: PropTypes.string,
+
+    /**
+     * styles object applied to the root when closed
+     */
+    closed: PropTypes.string,
+
+    /**
+     * styles object applied to the root when open
+     */
+    open: PropTypes.string,
+
+    /**
+     * styles object applied to the panel
+     */
+    panel: PropTypes.string,
+
+    /**
+     * styles object applied to the action bar
+     */
+    actionBar: PropTypes.string,
+
+    /**
+     * styles object applied to the root of the action bar
+     */
+    actionBarRoot: PropTypes.string,
+
+    /**
+     * styles object applied to the new notification indicator
+     */
+    notificationsIndicator: PropTypes.string,
+
+    /**
+     * styles object applied to the empty state panel
+     */
+    emptyState: PropTypes.string
+  }).isRequired,
+
+  /**
+   * The properties of the notifications to be rendered in the Panel.
+   */
+  notifications: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    isRead: PropTypes.bool.isRequired,
+    date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    icon: PropTypes.element,
+    onClick: PropTypes.func,
+    onKeyPress: PropTypes.func,
+    onToggle: PropTypes.func,
+    actions: PropTypes.shape({
+      label: PropTypes.bool,
+      action: PropTypes.string,
+      callback: PropTypes.func,
+      dropDownMenuProps: PropTypes.instanceOf(Object)
+    })
+  })),
+
+  /**
+   * Whether to render the new notifications indicator
+   */
+  hasNewNotifications: PropTypes.bool,
+
+  /**
+   * Action buttons to render in footer
+   */
+  footer: PropTypes.node,
+
+  /**
+   * Title of the EmptyStatePanel
+   */
+  emptyStatePanelTitle: PropTypes.string,
+
+  /**
+   * Message of the EmptyStatePanel
+   */
+  emptyStatePanelMessage: PropTypes.string,
+
+  /**
+   * Empty Panel custom Icon
+   */
+  emptyStatePanelIcon: PropTypes.node,
+
+  /**
+   * Labels to apply to the Panel
+   */
+  labels: PropTypes.shape({
+    /**
+     * Labels to apply to the groups separating newer and older notifications
+     */
+    notificationGroupHeader: {
+      olderNotifications: PropTypes.string,
+      newNotifications: PropTypes.string
+    },
+
+    /**
+     * Labels to apply to the element of the New Notifications Indicator
+     */
+    notificationIndicator: {
+      label: PropTypes.string,
+      buttonLabel: PropTypes.string
+    }
+  }),
+
+  /**
+   * Function to be supplied to the notification update button
+   */
+  newNotificationsButtonAction: PropTypes.func,
+
+  /**
+   * The locale to be used on the notification date, if undefined it will use the one from the HvProvider
+   */
+  locale: PropTypes.string
+};
+export default withStyles(styles, {
+  name: "HvNotificationPanel"
+})(HvNotificationPanel);
+//# sourceMappingURL=NotificationPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/NotificationPanel.js"],"names":["React","useState","useEffect","PropTypes","clsx","dayjs","deprecatedPropType","withStyles","HvPanel","HvActionBar","HvDropDownMenu","setId","useLabels","useLocale","styles","Notification","EmptyStatePanel","NotificationsIndicator","DEFAULT_LABELS","notificationGroupHeader","newNotifications","olderNotifications","notificationIndicator","label","buttonLabel","getGenericLocale","locale","includes","substr","indexOf","importAndLoadLocale","then","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","string","bool","shape","notificationsIndicator","isRequired","arrayOf","oneOfType","number","object","element","func","action","instanceOf","Object","node","name"],"mappings":"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","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/legacy/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/legacy/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["classes", "className", "labels", "onClick"];
+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 styles from "./styles";
+
+var NotificationsIndicator = function NotificationsIndicator(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      labels = _ref.labels,
+      onClick = _ref.onClick,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    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));
+};
+
+NotificationsIndicator.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the root of the element.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the NotificationsIndicator container.
+     */
+    notificationsIndicator: PropTypes.string,
+
+    /**
+     * Styles applied to the notification focus
+     */
+    newNotificationsFocus: PropTypes.string,
+
+    /**
+     * Override to text color for usage over semantic background in wicked
+     */
+    semanticColoring: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Labels to apply to component
+   */
+  labels: PropTypes.shape({
+    /**
+     * Notification indicator label
+     */
+    label: PropTypes.string,
+
+    /**
+     * Label to apply to the button label
+     */
+    buttonLabel: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Function passed to the notification panel button
+   */
+  onClick: PropTypes.func
+};
+export default withStyles(styles, {
+  name: "HvNotificationsIndicator"
+})(NotificationsIndicator);
+//# sourceMappingURL=NotificationsIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationPanel/NotificationsIndicator/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"],"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,IAAMC,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,EAAEV,IAAI,CAACO,SAAD,EAAYD,OAAO,CAACK,IAApB,EAA0BL,OAAO,CAACM,sBAAlC;AAApB,KAAmFF,MAAnF,gBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAE;AAAEG,MAAAA,UAAU,EAAEP,OAAO,CAACQ;AAAtB;AAAvB,KAAkEN,MAAM,CAACO,KAAzE,CADF,eAEE,oBAAC,QAAD;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,EAAEP,SAAS,CAACqB,KAAV,CAAgB;AACvB;AACJ;AACA;AACIT,IAAAA,IAAI,EAAEZ,SAAS,CAACsB,MAJO;;AAKvB;AACJ;AACA;AACIT,IAAAA,sBAAsB,EAAEb,SAAS,CAACsB,MARX;;AAUvB;AACJ;AACA;AACIL,IAAAA,qBAAqB,EAAEjB,SAAS,CAACsB,MAbV;;AAcvB;AACJ;AACA;AACIP,IAAAA,gBAAgB,EAAEf,SAAS,CAACsB;AAjBL,GAAhB,EAkBNC,UAtB8B;;AAwBjC;AACF;AACA;AACEf,EAAAA,SAAS,EAAER,SAAS,CAACsB,MA3BY;;AA4BjC;AACF;AACA;AACEb,EAAAA,MAAM,EAAET,SAAS,CAACqB,KAAV,CAAgB;AACtB;AACJ;AACA;AACIL,IAAAA,KAAK,EAAEhB,SAAS,CAACsB,MAJK;;AAKtB;AACJ;AACA;AACIH,IAAAA,WAAW,EAAEnB,SAAS,CAACsB;AARD,GAAhB,EASLC,UAxC8B;;AAyCjC;AACF;AACA;AACEb,EAAAA,OAAO,EAAEV,SAAS,CAACwB;AA5Cc,CAAnC;AA+CA,eAAepB,UAAU,CAACC,MAAD,EAAS;AAAEoB,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyDnB,sBAAzD,CAAf","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/legacy/NotificationPanel/NotificationsIndicator/index.js

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

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

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

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

@@ -0,0 +1,23 @@
+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
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/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;;AAoBA,eAAetB,MAAf","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/legacy/NotificationPanel/index.d.ts

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

package/dist/legacy/NotificationPanel/index.js

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

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

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

package/dist/legacy/NotificationPanel/styles.js

@@ -0,0 +1,41 @@
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      padding: 0,
+      width: 320,
+      overflow: "hidden"
+    },
+    closed: {
+      display: "none"
+    },
+    open: {
+      position: "absolute",
+      right: 0,
+      boxShadow: theme.hv.shadows[1]
+    },
+    actionBar: {
+      marginTop: "auto"
+    },
+    panel: {
+      flexGrow: 1,
+      overflow: "auto",
+      padding: 0,
+      width: "100%",
+      "&.focus-visible": {
+        outline: "none"
+      }
+    },
+    actionBarRoot: {
+      backgroundColor: theme.hv.palette.atmosphere.atmo1,
+      justifyContent: "space-between"
+    },
+    emptyState: {
+      height: "500px"
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/styles.js"],"names":["styles","theme","root","display","flexDirection","padding","width","overflow","closed","open","position","right","boxShadow","hv","shadows","actionBar","marginTop","panel","flexGrow","outline","actionBarRoot","backgroundColor","palette","atmosphere","atmo1","justifyContent","emptyState","height"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,MADL;AAEJC,MAAAA,aAAa,EAAE,QAFX;AAGJC,MAAAA,OAAO,EAAE,CAHL;AAIJC,MAAAA,KAAK,EAAE,GAJH;AAKJC,MAAAA,QAAQ,EAAE;AALN,KADmB;AAQzBC,IAAAA,MAAM,EAAE;AAAEL,MAAAA,OAAO,EAAE;AAAX,KARiB;AASzBM,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,UADN;AAEJC,MAAAA,KAAK,EAAE,CAFH;AAGJC,MAAAA,SAAS,EAAEX,KAAK,CAACY,EAAN,CAASC,OAAT,CAAiB,CAAjB;AAHP,KATmB;AAczBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,SAAS,EAAE;AADF,KAdc;AAiBzBC,IAAAA,KAAK,EAAE;AACLC,MAAAA,QAAQ,EAAE,CADL;AAELX,MAAAA,QAAQ,EAAE,MAFL;AAGLF,MAAAA,OAAO,EAAE,CAHJ;AAILC,MAAAA,KAAK,EAAE,MAJF;AAKL,yBAAmB;AACjBa,QAAAA,OAAO,EAAE;AADQ;AALd,KAjBkB;AA2BzBC,IAAAA,aAAa,EAAE;AACbC,MAAAA,eAAe,EAAEpB,KAAK,CAACY,EAAN,CAASS,OAAT,CAAiBC,UAAjB,CAA4BC,KADhC;AAEbC,MAAAA,cAAc,EAAE;AAFH,KA3BU;AAgCzBC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE;AADE;AAhCa,GAAZ;AAAA,CAAf;;AAqCA,eAAe3B,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: 0,\n    width: 320,\n    overflow: \"hidden\",\n  },\n  closed: { display: \"none\" },\n  open: {\n    position: \"absolute\",\n    right: 0,\n    boxShadow: theme.hv.shadows[1],\n  },\n  actionBar: {\n    marginTop: \"auto\",\n  },\n  panel: {\n    flexGrow: 1,\n    overflow: \"auto\",\n    padding: 0,\n    width: \"100%\",\n    \"&.focus-visible\": {\n      outline: \"none\",\n    },\n  },\n\n  actionBarRoot: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    justifyContent: \"space-between\",\n  },\n\n  emptyState: {\n    height: \"500px\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}