@hitachivantara/uikit-react-lab 3.38.0

package/dist/modern/NavigationAnchors/NavigationAnchors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavigationAnchors/NavigationAnchors.js"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","PropTypes","clsx","deprecatedPropType","withStyles","HvListContainer","HvListItem","styles","navigationOption","RETRY_MAX","getScrollTop","c","window","scrollY","pageYOffset","document","documentElement","scrollTop","body","verticalScrollOffset","t","getBoundingClientRect","top","getComputedStyle","position","offsetTop","scrollElement","element","container","offset","elemTop","scrollTo","behavior","isScrolledToTheBottom","containerScrollTop","scrollHeight","innerHeight","offsetHeight","findFirstVisibleElement","options","boundsTop","i","length","ele","getElementById","value","NavigationAnchors","selectedIndex","selectedIndexProp","scrollElementId","href","onClick","className","classes","floating","other","setSelectedIndex","scrollEle","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","current","checkScroll","requestAnimationFrame","firstVisibleElementIndex","newSelectedIndex","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","retry","setInterval","clearInterval","handleListItemClick","event","id","index","history","pushState","navOptions","map","label","root","NavOpt","selected","listItemSelected","gutters","listItemGutters","key","propTypes","string","shape","isRequired","arrayOf","number","bool","func","name"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType, withStyles } from \"@material-ui/core\";\nimport { HvListContainer, HvListItem } from \"@hitachivantara/uikit-react-core\";\nimport styles from \"./styles\";\nimport navigationOption from \"./NavigationOption\";\n\nconst RETRY_MAX = 5;\n\nconst getScrollTop = (c = window) => {\n  if (c === window) {\n    return (\n      window.scrollY ||\n      window.pageYOffset ||\n      (document.documentElement && document.documentElement.scrollTop) ||\n      document.body.scrollTop\n    );\n  }\n\n  return c.scrollTop;\n};\n\nconst verticalScrollOffset = (t, c = window) => {\n  if (c === window) {\n    return (t?.getBoundingClientRect?.().top || 0) + (window.scrollY || window.pageYOffset);\n  }\n  if (getComputedStyle(c).position !== \"static\") {\n    return t.offsetTop;\n  }\n\n  return t.offsetTop - c.offsetTop;\n};\n\nconst scrollElement = (element, container, offset = 0) => {\n  const elemTop = verticalScrollOffset(element, container);\n  container.scrollTo({\n    top: elemTop - offset,\n    behavior: \"smooth\",\n  });\n};\n\nconst isScrolledToTheBottom = (container) => {\n  const containerScrollTop = getScrollTop(container);\n\n  if (container === window) {\n    // accounting for cases where html/body are set to height:100%\n    const scrollHeight =\n      (document.documentElement && document.documentElement.scrollHeight) ||\n      document.body.scrollHeight;\n\n    return containerScrollTop + window.innerHeight >= scrollHeight;\n  }\n\n  return containerScrollTop + container.offsetHeight >= container.scrollHeight;\n};\n\n// find the last nav item that whose top scrolled out of the container's visible area\nconst findFirstVisibleElement = (container, options, offset) => {\n  const boundsTop = verticalScrollOffset(container);\n\n  let i = 0;\n  // find index of first element whose top is still visible inside the container\n  for (; i < options.length; i += 1) {\n    const ele = document.getElementById(options[i].value);\n\n    if (ele) {\n      const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n      if (elemTop > boundsTop) {\n        break;\n      }\n    }\n  }\n\n  // return the previous index, the element that last scrolled past the top\n  return i - 1;\n};\n\n/**\n * A navigation component to help in changing views, still in development\n */\nconst NavigationAnchors = ({\n  selectedIndex: selectedIndexProp = 0,\n  scrollElementId,\n  href = true,\n  onClick,\n  className,\n  classes,\n  options,\n  floating,\n  offset = 0,\n  ...other\n}) => {\n  const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);\n\n  const scrollEle = useRef();\n  const requestedAnimationFrame = useRef(0);\n\n  const lastContainerScrollTop = useRef();\n\n  // ref to use a often-changing value in useCallback, has recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  // get and store the container's dom element\n  useEffect(() => {\n    scrollEle.current = (scrollElementId && document.getElementById(scrollElementId)) || window;\n    lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(() => {\n    if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {\n      requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n        requestedAnimationFrame.current = 0;\n\n        const firstVisibleElementIndex = findFirstVisibleElement(\n          scrollEle.current,\n          options,\n          offset\n        );\n\n        let newSelectedIndex = firstVisibleElementIndex;\n\n        // select the first element when all elements are bellow the container's top\n        if (firstVisibleElementIndex < 0) {\n          newSelectedIndex = 0;\n        }\n\n        // if the user has reached the bottom of the container, select the first nav item still visible\n        // (usually this selects the last nav item, when it can't reach the top the container)\n        // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n        if (newSelectedIndex < options.length - 1 && isScrolledToTheBottom(scrollEle.current)) {\n          newSelectedIndex += 1;\n        }\n\n        const containerScrollTop = getScrollTop(scrollEle.current);\n        const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;\n        lastContainerScrollTop.current = containerScrollTop;\n\n        // only update the selected item if the scroll direction is moving away from it\n        if (isScrollingDown) {\n          if (newSelectedIndex < selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n        } else if (newSelectedIndex > selectedIndexRef.current) {\n          newSelectedIndex = selectedIndexRef.current;\n        }\n\n        setSelectedIndex(newSelectedIndex);\n      });\n    }\n  }, [offset, options]);\n\n  // registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // waits for the elements to be rendered and scrolls to the one referenced\n  // in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval;\n\n    if (href) {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // we really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleListItemClick = (event, id, index) => {\n    const option = options.find((o) => o.value === id);\n\n    if (option) {\n      const ele = document.getElementById(id);\n      if (ele) {\n        scrollElement(ele, scrollEle.current, option.offset || offset);\n      }\n\n      if (!href && onClick) {\n        onClick(event, index, option);\n      } else if (href) {\n        window.history.pushState({}, \"\", `#${options[index].value}`);\n      }\n\n      setSelectedIndex(index);\n\n      // Safari scrolls immediately (no smooth scroll support),\n      // so this ref value must be updated asap\n      selectedIndexRef.current = index;\n    }\n  };\n\n  const navOptions = useMemo(() => {\n    return options.map((option) => {\n      return navigationOption(option.label);\n    });\n  }, [options]);\n\n  return (\n    <HvListContainer interactive className={clsx(className, classes.root)} {...other}>\n      {options.map((option, index) => {\n        const NavOpt = navOptions[index];\n\n        return (\n          <HvListItem\n            classes={{\n              selected: classes.listItemSelected,\n              gutters: classes.listItemGutters,\n            }}\n            key={option.key || option.label}\n            onClick={(event) => handleListItemClick(event, option.value, index)}\n            selected={selectedIndex === index}\n          >\n            <NavOpt />\n          </HvListItem>\n        );\n      })}\n    </HvListContainer>\n  );\n};\n\nNavigationAnchors.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    listItemGutters: PropTypes.string,\n    listItemSelected: PropTypes.string,\n  }).isRequired,\n  /**\n   * An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied\n   */\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.string,\n      value: PropTypes.string.isRequired,\n      label: PropTypes.string.isRequired,\n      offset: PropTypes.number,\n    })\n  ).isRequired,\n  /**\n   * True if the href location link should be applied. It will create an a element around every list item\n   */\n  href: PropTypes.bool,\n  /**\n   * A callback called on click of every list item, if the href is false\n   */\n  onClick: PropTypes.func,\n  /**\n   * Whether the anchors are always in a fixed position\n   *\n   * @deprecated Currently does nothing. Style the component instead.\n   */\n  floating: deprecatedPropType(PropTypes.bool),\n  /**\n   * Currently selected index passed from the parent.\n   */\n  selectedIndex: PropTypes.number,\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId: PropTypes.string,\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvNavigationAnchors\" })(NavigationAnchors);\n"],"file":"NavigationAnchors.js"}

package/dist/modern/NavigationAnchors/NavigationOption.js

@@ -0,0 +1,21 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import { withTooltip } from "@hitachivantara/uikit-react-core";
+
+const hideTooltip = evt => {
+  const isOverFlow = evt.target.children.length > 1 ? Array.of(...evt.target.children).some(child => child.scrollWidth > child.clientWidth) : evt.target.scrollWidth > evt.target.clientWidth;
+  return !isOverFlow;
+};
+
+const wrapperTooltip = (Component, label) => {
+  const ComponentFunction = () => Component;
+
+  return withTooltip(ComponentFunction, label, "top", hideTooltip);
+};
+
+const NavigationOption = label => {
+  const NavOpt = wrapperTooltip(label, label);
+  return NavOpt;
+};
+
+export default NavigationOption;
+//# sourceMappingURL=NavigationOption.js.map

package/dist/modern/NavigationAnchors/NavigationOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavigationAnchors/NavigationOption.js"],"names":["withTooltip","hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","Component","label","ComponentFunction","NavigationOption","NavOpt"],"mappings":";AAAA,SAASA,WAAT,QAA4B,kCAA5B;;AAEA,MAAMC,WAAW,GAAIC,GAAD,IAAS;AAC3B,QAAMC,UAAU,GACdD,GAAG,CAACE,MAAJ,CAAWC,QAAX,CAAoBC,MAApB,GAA6B,CAA7B,GACIC,KAAK,CAACC,EAAN,CAAS,GAAGN,GAAG,CAACE,MAAJ,CAAWC,QAAvB,EAAiCI,IAAjC,CAAuCC,KAAD,IAAWA,KAAK,CAACC,WAAN,GAAoBD,KAAK,CAACE,WAA3E,CADJ,GAEIV,GAAG,CAACE,MAAJ,CAAWO,WAAX,GAAyBT,GAAG,CAACE,MAAJ,CAAWQ,WAH1C;AAIA,SAAO,CAACT,UAAR;AACD,CAND;;AAQA,MAAMU,cAAc,GAAG,CAACC,SAAD,EAAYC,KAAZ,KAAsB;AAC3C,QAAMC,iBAAiB,GAAG,MAAMF,SAAhC;;AACA,SAAOd,WAAW,CAACgB,iBAAD,EAAoBD,KAApB,EAA2B,KAA3B,EAAkCd,WAAlC,CAAlB;AACD,CAHD;;AAKA,MAAMgB,gBAAgB,GAAIF,KAAD,IAAW;AAClC,QAAMG,MAAM,GAAGL,cAAc,CAACE,KAAD,EAAQA,KAAR,CAA7B;AACA,SAAOG,MAAP;AACD,CAHD;;AAKA,eAAeD,gBAAf","sourcesContent":["import { withTooltip } from \"@hitachivantara/uikit-react-core\";\n\nconst hideTooltip = (evt) => {\n  const isOverFlow =\n    evt.target.children.length > 1\n      ? Array.of(...evt.target.children).some((child) => child.scrollWidth > child.clientWidth)\n      : evt.target.scrollWidth > evt.target.clientWidth;\n  return !isOverFlow;\n};\n\nconst wrapperTooltip = (Component, label) => {\n  const ComponentFunction = () => Component;\n  return withTooltip(ComponentFunction, label, \"top\", hideTooltip);\n};\n\nconst NavigationOption = (label) => {\n  const NavOpt = wrapperTooltip(label, label);\n  return NavOpt;\n};\n\nexport default NavigationOption;\n"],"file":"NavigationOption.js"}

package/dist/modern/NavigationAnchors/index.d.ts

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

package/dist/modern/NavigationAnchors/index.js

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

package/dist/modern/NavigationAnchors/index.js.map

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

package/dist/modern/NavigationAnchors/styles.js

@@ -0,0 +1,16 @@
+const styles = theme => ({
+  root: {
+    width: 200
+  },
+  listItemGutters: {
+    padding: `0 ${theme.hv.spacing.sm}px`
+  },
+  listItemSelected: {
+    fontWeight: theme.hv.typography.highlightText.fontWeight,
+    borderLeft: `2px solid ${theme.hv.palette.accent.acce1}`,
+    paddingLeft: theme.hv.spacing.sm - 2
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/NavigationAnchors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavigationAnchors/styles.js"],"names":["styles","theme","root","width","listItemGutters","padding","hv","spacing","sm","listItemSelected","fontWeight","typography","highlightText","borderLeft","palette","accent","acce1","paddingLeft"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE;AADH,GADmB;AAKzBC,EAAAA,eAAe,EAAE;AACfC,IAAAA,OAAO,EAAG,KAAIJ,KAAK,CAACK,EAAN,CAASC,OAAT,CAAiBC,EAAG;AADnB,GALQ;AAQzBC,EAAAA,gBAAgB,EAAE;AAChBC,IAAAA,UAAU,EAAET,KAAK,CAACK,EAAN,CAASK,UAAT,CAAoBC,aAApB,CAAkCF,UAD9B;AAEhBG,IAAAA,UAAU,EAAG,aAAYZ,KAAK,CAACK,EAAN,CAASQ,OAAT,CAAiBC,MAAjB,CAAwBC,KAAM,EAFvC;AAGhBC,IAAAA,WAAW,EAAEhB,KAAK,CAACK,EAAN,CAASC,OAAT,CAAiBC,EAAjB,GAAsB;AAHnB;AARO,CAAZ,CAAf;;AAeA,eAAeR,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    width: 200,\n  },\n\n  listItemGutters: {\n    padding: `0 ${theme.hv.spacing.sm}px`,\n  },\n  listItemSelected: {\n    fontWeight: theme.hv.typography.highlightText.fontWeight,\n    borderLeft: `2px solid ${theme.hv.palette.accent.acce1}`,\n    paddingLeft: theme.hv.spacing.sm - 2,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvEmptyStatePanelClassKey =
+  | "emptyStateRoot"
+  | "emptyStateContainer"
+  | "emptyStateIconContainer"
+  | "emptyStateTitleContainer";
+
+export interface HvEmptyStatePanelProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvEmptyStatePanelClassKey> {
+  /**
+   * Title to display in the Empty Panel
+   */
+  title: string;
+  /**
+   * Empty State message to display
+   */
+  message: string;
+
+  /**
+   * Empty State icon
+   */
+  icon?: React.ReactNode;
+}
+
+export default function HvEmptyStatePanel(props: HvEmptyStatePanelProps): JSX.Element | null;

package/dist/modern/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js

@@ -0,0 +1,85 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HvEmptyState } from "@hitachivantara/uikit-react-core";
+import { Alert } from "@hitachivantara/uikit-react-icons";
+import { withStyles } from "@material-ui/core";
+import styles from "./styles";
+
+const EmptyStatePanel = ({
+  id,
+  classes,
+  className,
+  title,
+  message,
+  icon
+}) => {
+  return /*#__PURE__*/React.createElement(HvEmptyState, {
+    id: id,
+    title: title,
+    message: message,
+    icon: icon || /*#__PURE__*/React.createElement(Alert, null),
+    className: className,
+    classes: {
+      root: classes.emptyStateRoot,
+      container: classes.emptyStateContainer,
+      iconContainer: classes.emptyStateIconContainer,
+      titleContainer: classes.emptyStateTitleContainer
+    }
+  });
+};
+
+EmptyStatePanel.propTypes = {
+  /**
+   * Id of the EmptyStatePanel
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root of the panel.
+     */
+    emptyStateRoot: PropTypes.string,
+
+    /**
+     * Styles applied to the EmptyStatePanel container.
+     */
+    emptyStateContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the empty state container icon.
+     */
+    emptyStateIconContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the EmptyStatePanel title.
+     */
+    emptyStateTitleContainer: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Title of the EmptyStatePanel
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * Message of the EmptyStatePanel
+   */
+  message: PropTypes.string.isRequired,
+
+  /**
+   * Empty Panel Icon
+   */
+  icon: PropTypes.element
+};
+export default withStyles(styles, {
+  name: "HvEmptyStatePanel"
+})(EmptyStatePanel);
+//# sourceMappingURL=EmptyStatePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js"],"names":["React","PropTypes","HvEmptyState","Alert","withStyles","styles","EmptyStatePanel","id","classes","className","title","message","icon","root","emptyStateRoot","container","emptyStateContainer","iconContainer","emptyStateIconContainer","titleContainer","emptyStateTitleContainer","propTypes","string","isRequired","shape","element","name"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,YAAT,QAA6B,kCAA7B;AACA,SAASC,KAAT,QAAsB,mCAAtB;AAEA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,eAAe,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,OAAN;AAAeC,EAAAA,SAAf;AAA0BC,EAAAA,KAA1B;AAAiCC,EAAAA,OAAjC;AAA0CC,EAAAA;AAA1C,CAAD,KAAsD;AAC5E,sBACE,oBAAC,YAAD;AACE,IAAA,EAAE,EAAEL,EADN;AAEE,IAAA,KAAK,EAAEG,KAFT;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEC,IAAI,iBAAI,oBAAC,KAAD,OAJhB;AAKE,IAAA,SAAS,EAAEH,SALb;AAME,IAAA,OAAO,EAAE;AACPI,MAAAA,IAAI,EAAEL,OAAO,CAACM,cADP;AAEPC,MAAAA,SAAS,EAAEP,OAAO,CAACQ,mBAFZ;AAGPC,MAAAA,aAAa,EAAET,OAAO,CAACU,uBAHhB;AAIPC,MAAAA,cAAc,EAAEX,OAAO,CAACY;AAJjB;AANX,IADF;AAeD,CAhBD;;AAkBAd,eAAe,CAACe,SAAhB,GAA4B;AAC1B;AACF;AACA;AACEd,EAAAA,EAAE,EAAEN,SAAS,CAACqB,MAAV,CAAiBC,UAJK;;AAK1B;AACF;AACA;AACEf,EAAAA,OAAO,EAAEP,SAAS,CAACuB,KAAV,CAAgB;AACvB;AACJ;AACA;AACIV,IAAAA,cAAc,EAAEb,SAAS,CAACqB,MAJH;;AAKvB;AACJ;AACA;AACIN,IAAAA,mBAAmB,EAAEf,SAAS,CAACqB,MARR;;AAUvB;AACJ;AACA;AACIJ,IAAAA,uBAAuB,EAAEjB,SAAS,CAACqB,MAbZ;;AAevB;AACJ;AACA;AACIF,IAAAA,wBAAwB,EAAEnB,SAAS,CAACqB;AAlBb,GAAhB,EAmBNC,UA3BuB;;AA6B1B;AACF;AACA;AACEd,EAAAA,SAAS,EAAER,SAAS,CAACqB,MAhCK;;AAiC1B;AACF;AACA;AACEZ,EAAAA,KAAK,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UApCE;;AAqC1B;AACF;AACA;AACEZ,EAAAA,OAAO,EAAEV,SAAS,CAACqB,MAAV,CAAiBC,UAxCA;;AAyC1B;AACF;AACA;AACEX,EAAAA,IAAI,EAAEX,SAAS,CAACwB;AA5CU,CAA5B;AA8CA,eAAerB,UAAU,CAACC,MAAD,EAAS;AAAEqB,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAkDpB,eAAlD,CAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { HvEmptyState } from \"@hitachivantara/uikit-react-core\";\nimport { Alert } from \"@hitachivantara/uikit-react-icons\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst EmptyStatePanel = ({ id, classes, className, title, message, icon }) => {\n  return (\n    <HvEmptyState\n      id={id}\n      title={title}\n      message={message}\n      icon={icon || <Alert />}\n      className={className}\n      classes={{\n        root: classes.emptyStateRoot,\n        container: classes.emptyStateContainer,\n        iconContainer: classes.emptyStateIconContainer,\n        titleContainer: classes.emptyStateTitleContainer,\n      }}\n    />\n  );\n};\n\nEmptyStatePanel.propTypes = {\n  /**\n   * Id of the EmptyStatePanel\n   */\n  id: PropTypes.string.isRequired,\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root of the panel.\n     */\n    emptyStateRoot: PropTypes.string,\n    /**\n     * Styles applied to the EmptyStatePanel container.\n     */\n    emptyStateContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the empty state container icon.\n     */\n    emptyStateIconContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the EmptyStatePanel title.\n     */\n    emptyStateTitleContainer: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Title of the EmptyStatePanel\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Message of the EmptyStatePanel\n   */\n  message: PropTypes.string.isRequired,\n  /**\n   * Empty Panel Icon\n   */\n  icon: PropTypes.element,\n};\nexport default withStyles(styles, { name: \"HvEmptyStatePanel\" })(EmptyStatePanel);\n"],"file":"EmptyStatePanel.js"}

package/dist/modern/NotificationPanel/EmptyStatePanel/index.js

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

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

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

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

@@ -0,0 +1,20 @@
+const styles = theme => ({
+  emptyStateRoot: {
+    alignItems: "center",
+    padding: `${theme.hv.spacing.sm}px 0`
+  },
+  emptyStateContainer: {
+    display: "block"
+  },
+  emptyStateIconContainer: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  emptyStateTitleContainer: {
+    display: "flex",
+    justifyContent: "center"
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationPanel/EmptyStatePanel/styles.js"],"names":["styles","theme","emptyStateRoot","alignItems","padding","hv","spacing","sm","emptyStateContainer","display","emptyStateIconContainer","justifyContent","emptyStateTitleContainer"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,cAAc,EAAE;AACdC,IAAAA,UAAU,EAAE,QADE;AAEdC,IAAAA,OAAO,EAAG,GAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,EAAG;AAFlB,GADS;AAKzBC,EAAAA,mBAAmB,EAAE;AACnBC,IAAAA,OAAO,EAAE;AADU,GALI;AASzBC,EAAAA,uBAAuB,EAAE;AACvBD,IAAAA,OAAO,EAAE,MADc;AAEvBE,IAAAA,cAAc,EAAE;AAFO,GATA;AAczBC,EAAAA,wBAAwB,EAAE;AACxBH,IAAAA,OAAO,EAAE,MADe;AAExBE,IAAAA,cAAc,EAAE;AAFQ;AAdD,CAAZ,CAAf;;AAoBA,eAAeX,MAAf","sourcesContent":["const styles = (theme) => ({\n  emptyStateRoot: {\n    alignItems: \"center\",\n    padding: `${theme.hv.spacing.sm}px 0`,\n  },\n  emptyStateContainer: {\n    display: \"block\",\n  },\n\n  emptyStateIconContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  emptyStateTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvNotificationClassKey =
+  | "root"
+  | "notificationWrapper"
+  | "notificationWrapperDropdown"
+  | "iconContainer"
+  | "messageContainer"
+  | "timeContainer"
+  | "bullet"
+  | "hide"
+  | "time"
+  | "notificationActionWrapper"
+  | "read"
+  | "notificationDropdownOpen";
+
+export interface HvNotificationProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvNotificationClassKey> {
+  /**
+   * Notification id
+   */
+  notificationId: string;
+  /**
+   * Title of the notification
+   */
+  title: string;
+  /**
+   * 'true' if the notification has been read or 'false' if it has not been read
+   */
+  isRead: boolean;
+  /**
+   * date the notification was created
+   */
+  date: string | number | object;
+  /**
+   * renderable icon that denotes the status of the notification
+   */
+  icon?: React.ReactNode;
+  /**
+   * Actions to be executed by the notification, available in the dropdown menu
+   */
+  rightContainer?: React.ReactNode;
+  /**
+   * Denotes index of clicked notification
+   */
+  isHighlighted: boolean;
+}
+
+export default function HvNotification(props: HvNotificationProps): JSX.Element | null;

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

@@ -0,0 +1,195 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { HvTypography, withTooltip } from "@hitachivantara/uikit-react-core";
+import { withStyles } from "@material-ui/core";
+import styles from "./styles";
+dayjs.extend(relativeTime);
+
+const hideTooltip = evt => evt.target.scrollHeight <= evt.target.clientHeight;
+
+const wrapperTooltip = (Component, label) => {
+  const ComponentFunction = () => Component; // override thr withTooltip styles as we want to use the styles of the component
+
+
+  return withTooltip(ComponentFunction, label, "top", hideTooltip, {
+    style: {}
+  });
+};
+
+const Notification = ({
+  classes,
+  className,
+  notificationId,
+  title,
+  isRead,
+  icon,
+  date,
+  onClick,
+  onKeyPress,
+  rightContainer,
+  isHighlighted
+}) => {
+  const getTime = () => {
+    if (!isRead) {
+      return dayjs(date).fromNow();
+    }
+
+    const d = dayjs(date);
+    let format = "D MMMM YYYY, h:mm A";
+
+    if (d.isSame(Date.now(), "week")) {
+      format = "ddd, h:mm A";
+    }
+
+    return d.format(format);
+  };
+
+  const NotificationWithTooltip = wrapperTooltip( /*#__PURE__*/React.createElement("div", {
+    className: classes.messageContainer
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: isRead ? "normalText" : "highlightText"
+  }, title)), title);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: event => onClick(event, notificationId),
+    onKeyPress: event => onKeyPress(event, notificationId),
+    className: clsx(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NotificationWithTooltip, null), /*#__PURE__*/React.createElement("div", {
+    className: classes.timeContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.bullet, isRead && classes.hide)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.time
+  }, getTime())))), /*#__PURE__*/React.createElement("div", {
+    className: classes.notificationActionWrapper
+  }, rightContainer));
+};
+
+Notification.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root of the accordion.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the notification wrapper.
+     */
+    notificationWrapper: PropTypes.string,
+
+    /**
+     * Styles applied to the notification wrapper when the actions dropdown is open.
+     */
+    notificationWrapperDropdown: PropTypes.string,
+
+    /**
+     * Styles applied to the notification icon container.
+     */
+    iconContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the notification message container.
+     */
+    messageContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the notification time container.
+     */
+    timeContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the notification bullet.
+     */
+    bullet: PropTypes.string,
+
+    /**
+     * Styles applied to the content when it is hidden.
+     */
+    hide: PropTypes.string,
+
+    /**
+     * Styles applied to the notification time indicator.
+     */
+    time: PropTypes.string,
+
+    /**
+     * Styles applied to the notification is read.
+     */
+    read: PropTypes.string,
+
+    /**
+     * Styles applied when the notification dropdown is open.
+     */
+    notificationDropdownOpen: PropTypes.string,
+
+    /**
+     * Styles applied to the notification message actions dropdown.
+     */
+    notificationActionWrapper: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied to the accordion.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Notification id
+   */
+  notificationId: PropTypes.string,
+
+  /**
+   * Title of the notification
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * 'true' if the notification has been read or 'false' if it has not been read
+   */
+  isRead: PropTypes.bool.isRequired,
+
+  /**
+   * date the notification was created
+   */
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+
+  /**
+   * renderable icon that denotes the status of the notification
+   */
+  icon: PropTypes.element,
+
+  /**
+   * Click action applied to the notification
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * On Key Press action applied to the notification
+   */
+  onKeyPress: PropTypes.func,
+
+  /**
+   * Actions to be executed by the notification, available in the dropdown menu
+   */
+  rightContainer: PropTypes.node,
+
+  /**
+   * Denotes index of clicked notification
+   */
+  isHighlighted: PropTypes.bool
+};
+export default withStyles(styles, {
+  name: "HvNotificationPanelNotification"
+})(Notification);
+//# sourceMappingURL=Notification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n  const ComponentFunction = () => Component;\n  // override thr withTooltip styles as we want to use the styles of the component\n  return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n  classes,\n  className,\n  notificationId,\n  title,\n  isRead,\n  icon,\n  date,\n  onClick,\n  onKeyPress,\n  rightContainer,\n  isHighlighted,\n}) => {\n  const getTime = () => {\n    if (!isRead) {\n      return dayjs(date).fromNow();\n    }\n\n    const d = dayjs(date);\n    let format = \"D MMMM YYYY, h:mm A\";\n\n    if (d.isSame(Date.now(), \"week\")) {\n      format = \"ddd, h:mm A\";\n    }\n\n    return d.format(format);\n  };\n\n  const NotificationWithTooltip = wrapperTooltip(\n    <div className={classes.messageContainer}>\n      <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n    </div>,\n    title\n  );\n\n  return (\n    <div\n      onClick={(event) => onClick(event, notificationId)}\n      onKeyPress={(event) => onKeyPress(event, notificationId)}\n      className={clsx(className, classes.root, {\n        [classes.notificationWrapperDropdown]: isHighlighted,\n        [classes.read]: isRead,\n      })}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div\n        className={clsx(classes.notificationWrapper, {\n          [classes.notificationDropdownOpen]: isHighlighted,\n        })}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div>\n          <NotificationWithTooltip />\n          <div className={classes.timeContainer}>\n            <div\n              className={clsx(classes.bullet, {\n                [classes.hide]: isRead,\n              })}\n            />\n            <div className={classes.time}>{getTime()}</div>\n          </div>\n        </div>\n      </div>\n      <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n    </div>\n  );\n};\n\nNotification.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root of the accordion.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the notification wrapper.\n     */\n    notificationWrapper: PropTypes.string,\n\n    /**\n     * Styles applied to the notification wrapper when the actions dropdown is open.\n     */\n    notificationWrapperDropdown: PropTypes.string,\n\n    /**\n     * Styles applied to the notification icon container.\n     */\n    iconContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification message container.\n     */\n    messageContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification time container.\n     */\n    timeContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification bullet.\n     */\n    bullet: PropTypes.string,\n\n    /**\n     * Styles applied to the content when it is hidden.\n     */\n    hide: PropTypes.string,\n\n    /**\n     * Styles applied to the notification time indicator.\n     */\n    time: PropTypes.string,\n    /**\n     * Styles applied to the notification is read.\n     */\n    read: PropTypes.string,\n    /**\n     * Styles applied when the notification dropdown is open.\n     */\n    notificationDropdownOpen: PropTypes.string,\n\n    /**\n     * Styles applied to the notification message actions dropdown.\n     */\n    notificationActionWrapper: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Notification id\n   */\n  notificationId: PropTypes.string,\n  /**\n   * Title of the notification\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * 'true' if the notification has been read or 'false' if it has not been read\n   */\n  isRead: PropTypes.bool.isRequired,\n  /**\n   * date the notification was created\n   */\n  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n  /**\n   * renderable icon that denotes the status of the notification\n   */\n  icon: PropTypes.element,\n  /**\n   * Click action applied to the notification\n   */\n  onClick: PropTypes.func,\n  /**\n   * On Key Press action applied to the notification\n   */\n  onKeyPress: PropTypes.func,\n  /**\n   * Actions to be executed by the notification, available in the dropdown menu\n   */\n  rightContainer: PropTypes.node,\n  /**\n   * Denotes index of clicked notification\n   */\n  isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}

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

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

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

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

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

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