@hitachivantara/uikit-react-lab 3.38.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    margin: \"3px 3px 6px 3px\",\n    \"&:hover\": {\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo2,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n      \"&:hover\": {\n        backgroundColor: theme.hv.palette.atmosphere.atmo3,\n        outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n        \"&.focus-visible\": {\n          ...outlineStyles,\n        },\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"&$read\": {\n        ...outlineStyles,\n      },\n\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n  notificationWrapper: {\n    display: \"flex\",\n    minHeight: \"72px\",\n    marginRight: theme.hv.spacing.xs,\n    color: theme.hv.palette.accent.acce1,\n    padding: \"17px\",\n    paddingRight: 0,\n    cursor: \"pointer\",\n\n    \"&:focus\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      boxShadow: \"none\",\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n\n  iconContainer: {\n    width: \"32px\",\n    minWidth: \"32px\",\n    marginRight: `${theme.hv.spacing.sm}px`,\n  },\n\n  messageContainer: {\n    width: \"196px\",\n    maxWidth: \"196px\",\n    display: \"-webkit-box\",\n    lineClamp: 2,\n    boxOrient: \"vertical\",\n    overflow: \"hidden\",\n  },\n\n  title: {\n    ...theme.hv.typography.highlightText,\n    marginBottom: \"5px\",\n  },\n  timeContainer: {\n    ...theme.hv.typography.vizText,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  bullet: {\n    width: \"8px\",\n    height: \"8px\",\n    borderRadius: \"50%\",\n    marginRight: \"4px\",\n    backgroundColor: theme.hv.palette.accent.acce1,\n\n    \"&$hide\": {\n      display: \"none\",\n    },\n  },\n  hide: {},\n  read: {},\n  notificationWrapperDropdown: {\n    outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    \"& $notificationActionWrapper\": {\n      display: \"block\",\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    },\n  },\n\n  notificationDropdownOpen: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n\n  notificationActionWrapper: {\n    \"& > div\": {\n      marginTop: 17,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

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

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

package/dist/modern/NotificationPanel/NotificationPanel.js

@@ -0,0 +1,309 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "className", "classes", "open", "footer", "notifications", "hasNewNotifications", "emptyStatePanelTitle", "emptyStatePanelMessage", "emptyStatePanelIcon", "labels", "newNotificationsButtonAction", "locale"];
+import "core-js/modules/web.dom-collections.iterator.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";
+const 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 const getGenericLocale = locale => 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
+ */
+
+const importAndLoadLocale = async locale => {
+  await import(`dayjs/locale/${locale}.js`).then(() => {
+    dayjs.locale(locale);
+  }).catch(async () => {
+    const genericLocale = getGenericLocale(locale);
+    await import(`dayjs/locale/${genericLocale}.js`).then(() => dayjs.locale(genericLocale)) // eslint-disable-next-line no-console
+    .catch(() => console.warn(`Unable to load locale: ${locale}. Falling back to the default`));
+  });
+};
+/**
+ * Notification Panel displays all of read and unread notifications. Still in development
+ */
+
+
+const HvNotificationPanel = _ref => {
+  let {
+    id,
+    className,
+    classes,
+    open,
+    footer,
+    notifications,
+    hasNewNotifications = false,
+    emptyStatePanelTitle = "No notifications",
+    emptyStatePanelMessage = "You currently have no notifications.",
+    emptyStatePanelIcon,
+    labels: labelsProp,
+    newNotificationsButtonAction,
+    locale: localeProp
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const localeFromProvider = useLocale();
+  const locale = localeProp || localeFromProvider;
+  const [highlighted, setHighlighted] = useState(undefined);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isLocaleLoaded, setIsLocaleLoaded] = useState(false);
+  useEffect(() => {
+    // We're using this mount logic to avoid potential memory leak problems.
+    let isMounted = true;
+
+    if (!isLocaleLoaded) {
+      importAndLoadLocale(locale).then(() => {
+        if (isMounted) {
+          setIsLocaleLoaded(true);
+        }
+      });
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  });
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+
+  const generateNotificationsActions = (notificationId, onToggle, actions) => {
+    const expand = notificationId === highlighted;
+    const dList = [...actions.values];
+    return /*#__PURE__*/React.createElement(HvDropDownMenu, _extends({
+      expanded: expand,
+      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: (event, s) => {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, s);
+
+        if (s) {
+          setHighlighted(notificationId);
+        } else {
+          setHighlighted(undefined);
+        }
+
+        setIsExpanded(!isExpanded);
+      }
+    }, actions.dropDownMenuProps));
+  };
+
+  const notificationElementGenerator = notificationsToRender => {
+    return notificationsToRender.map(notification => {
+      const 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
+      });
+    });
+  };
+
+  const hasNotifications = notifications.length > 0;
+
+  const renderNotifications = notificationsToRender => 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/modern/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","labels","labelsProp","newNotificationsButtonAction","localeProp","others","localeFromProvider","highlighted","setHighlighted","undefined","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/modern/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;