@hitachivantara/uikit-react-lab 3.52.2 → 4.0.1-next.0

package/dist/modern/InlineEditor/InlineEditor.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["className", "classes", "value", "defaultValue", "showIcon", "component", "variant", "placeholder", "onBlur", "onChange", "onKeyDown", "buttonProps", "typographyProps"];
@@ -11,7 +10,7 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles, useTheme } from "@material-ui/core";
+import { withStyles, useTheme } from "@mui/styles";
 import { HvButton, HvInput, HvTypography, isKeypress, KeyboardCodes, useControlled } from "@hitachivantara/uikit-react-core";
 import { Edit } from "@hitachivantara/uikit-react-icons";
 import styles from "./styles";
@@ -20,6 +19,9 @@ import styles from "./styles";
  * between viewing and editing, making it an efficient method of updating a record.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const HvInlineEditor = props => {
   const {
     className,
@@ -83,37 +85,42 @@ const HvInlineEditor = props => {
     onChange === null || onChange === void 0 ? void 0 : onChange(event, val);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, classes.root)
-  }, editMode ? /*#__PURE__*/React.createElement(InputComponent, _extends({
-    inputRef: inputRef,
-    classes: {
-      root: classes.inputRoot,
-      input: classes.input,
-      inputBorderContainer: classes.inputBorderContainer
-    },
-    inputProps: {
-      style: _objectSpread(_objectSpread({}, typographyStyles), {}, {
-        height: InputComponent === HvInput ? lineHeight : undefined
-      })
-    },
-    value: value,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown
-  }, others)) : /*#__PURE__*/React.createElement(HvButton, _extends({
-    category: "ghost",
-    overrideIconColors: false,
-    className: clsx(classes.button, parseInt(lineHeight, 10) >= 28 && classes.largeText),
-    onClick: handleClick
-  }, buttonProps), /*#__PURE__*/React.createElement(HvTypography, _extends({
-    variant: variant,
-    className: clsx(classes.text, !value && classes.textEmpty)
-  }, typographyProps), value || placeholder), /*#__PURE__*/React.createElement(Edit, {
-    color: "atmo5",
-    role: "presentation",
-    className: clsx(classes.icon, showIcon && classes.iconVisible)
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx(className, classes.root),
+    children: editMode ? /*#__PURE__*/_jsx(InputComponent, _objectSpread({
+      inputRef: inputRef,
+      classes: {
+        root: classes.inputRoot,
+        input: classes.input,
+        inputBorderContainer: classes.inputBorderContainer
+      },
+      inputProps: {
+        style: _objectSpread(_objectSpread({}, typographyStyles), {}, {
+          height: InputComponent === HvInput ? lineHeight : undefined
+        })
+      },
+      value: value,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown
+    }, others)) : /*#__PURE__*/_jsxs(HvButton, _objectSpread(_objectSpread({
+      category: "ghost",
+      overrideIconColors: false,
+      className: clsx(classes.button, parseInt(lineHeight, 10) >= 28 && classes.largeText),
+      onClick: handleClick
+    }, buttonProps), {}, {
+      children: [/*#__PURE__*/_jsx(HvTypography, _objectSpread(_objectSpread({
+        variant: variant,
+        className: clsx(classes.text, !value && classes.textEmpty)
+      }, typographyProps), {}, {
+        children: value || placeholder
+      })), /*#__PURE__*/_jsx(Edit, {
+        color: "atmo5",
+        role: "presentation",
+        className: clsx(classes.icon, showIcon && classes.iconVisible)
+      })]
+    }))
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvInlineEditor.propTypes = {

package/dist/modern/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","names":["React","useLayoutEffect","useRef","useState","PropTypes","clsx","withStyles","useTheme","HvButton","HvInput","HvTypography","isKeypress","KeyboardCodes","useControlled","Edit","styles","HvInlineEditor","props","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","editMode","setEditMode","cachedValue","setCachedValue","inputRef","theme","typographyStyles","hv","typography","lineHeight","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","Esc","handleChange","val","root","inputRoot","inputBorderContainer","style","height","undefined","button","parseInt","largeText","text","textEmpty","icon","iconVisible","propTypes","string","shape","isRequired","bool","elementType","func","instanceOf","Object","name"],"sources":["../../../src/InlineEditor/InlineEditor.js"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, useTheme } from \"@material-ui/core\";\nimport {\n  HvButton,\n  HvInput,\n  HvTypography,\n  isKeypress,\n  KeyboardCodes,\n  useControlled,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nconst HvInlineEditor = (props) => {\n  const {\n    className,\n    classes,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"normalText\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    ...others\n  } = props;\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef();\n  const theme = useTheme();\n\n  const typographyStyles = theme.hv.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, KeyboardCodes.Esc)) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleChange = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={clsx(className, classes.root)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          category=\"ghost\"\n          overrideIconColors={false}\n          className={clsx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            className={clsx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n          <Edit\n            color=\"atmo5\"\n            role=\"presentation\"\n            className={clsx(classes.icon, {\n              [classes.iconVisible]: showIcon,\n            })}\n          />\n        </HvButton>\n      )}\n    </div>\n  );\n};\n\nHvInlineEditor.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    input: PropTypes.string,\n    inputRoot: PropTypes.string,\n    inputBorderContainer: PropTypes.string,\n    text: PropTypes.string,\n    textEmpty: PropTypes.string,\n    button: PropTypes.string,\n    icon: PropTypes.string,\n    iconVisible: PropTypes.string,\n    largeText: PropTypes.string,\n  }).isRequired,\n  /**\n   * The value of the input element, for controlled usage.\n   */\n  value: PropTypes.string,\n  /**\n   * The default value of the input element, for uncontrolled usage.\n   */\n  defaultValue: PropTypes.string,\n  /**\n   * Whether the Edit icon should always be visible\n   */\n  showIcon: PropTypes.bool,\n  /**\n   * Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`)\n   */\n  component: PropTypes.elementType,\n  /**\n   * Variant of the HvTypography to display\n   */\n  variant: PropTypes.string,\n  /**\n   * The placeholder value of the HvTypography.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * Called when the input is blurred.\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Called when the input value is changed.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Called when a key is pressed on the input.\n   */\n  onKeyDown: PropTypes.func,\n  /**\n   * Props passed to the HvButton component\n   */\n  buttonProps: PropTypes.instanceOf(Object),\n  /**\n   * Props passed to the HvTypography text component\n   */\n  typographyProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvInlineEditor\" })(HvInlineEditor);\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,eAAhB,EAAiCC,MAAjC,EAAyCC,QAAzC,QAAyD,OAAzD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AAEA,SAASC,UAAT,EAAqBC,QAArB,QAAqC,mBAArC;AACA,SACEC,QADF,EAEEC,OAFF,EAGEC,YAHF,EAIEC,UAJF,EAKEC,aALF,EAMEC,aANF,QAOO,kCAPP;AAQA,SAASC,IAAT,QAAqB,mCAArB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;;AACA,MAAMC,cAAc,GAAIC,KAAD,IAAW;EAChC,MAAM;IACJC,SADI;IAEJC,OAFI;IAGJC,KAAK,EAAEC,SAHH;IAIJC,YAJI;IAKJC,QALI;IAMJC,SAAS,EAAEC,cAAc,GAAGhB,OANxB;IAOJiB,OAAO,GAAG,YAPN;IAQJC,WAAW,GAAG,YARV;IASJC,MATI;IAUJC,QAVI;IAWJC,SAXI;IAYJC,WAZI;IAaJC;EAbI,IAeFf,KAfJ;EAAA,MAcKgB,MAdL,4BAeIhB,KAfJ;;EAgBA,MAAM,CAACG,KAAD,EAAQc,QAAR,IAAoBrB,aAAa,CAACQ,SAAD,EAAYC,YAAZ,CAAvC;EACA,MAAM,CAACa,QAAD,EAAWC,WAAX,IAA0BjC,QAAQ,CAAC,KAAD,CAAxC;EACA,MAAM,CAACkC,WAAD,EAAcC,cAAd,IAAgCnC,QAAQ,CAACiB,KAAD,CAA9C;EACA,MAAMmB,QAAQ,GAAGrC,MAAM,EAAvB;EACA,MAAMsC,KAAK,GAAGjC,QAAQ,EAAtB;EAEA,MAAMkC,gBAAgB,GAAGD,KAAK,CAACE,EAAN,CAASC,UAAT,CAAoBjB,OAApB,KAAgC,EAAzD;EACA,MAAM;IAAEkB;EAAF,IAAiBH,gBAAvB;EAEAxC,eAAe,CAAC,MAAM;IACpB,MAAM4C,KAAK,GAAGN,QAAQ,CAACO,OAAvB;;IACA,IAAIX,QAAQ,IAAIU,KAAhB,EAAuB;MACrBA,KAAK,CAACE,KAAN;MACAF,KAAK,CAACG,MAAN;IACD;EACF,CANc,EAMZ,CAACb,QAAD,CANY,CAAf;;EAQA,MAAMc,WAAW,GAAG,MAAM;IACxBb,WAAW,CAAC,IAAD,CAAX;IACAE,cAAc,CAAClB,KAAD,CAAd;EACD,CAHD;;EAKA,MAAM8B,UAAU,GAAIC,KAAD,IAAW;IAC5Bf,WAAW,CAAC,KAAD,CAAX;IAEA,MAAMgB,QAAQ,GAAGhC,KAAK,IAAIiB,WAA1B,CAH4B,CAGW;;IACvCH,QAAQ,CAACkB,QAAD,CAAR;IACAxB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAGuB,KAAH,EAAUC,QAAV,CAAN;EACD,CAND;;EAQA,MAAMC,aAAa,GAAIF,KAAD,IAAW;IAC/B,IAAIxC,UAAU,CAACwC,KAAD,EAAQvC,aAAa,CAAC0C,GAAtB,CAAd,EAA0C;MACxClB,WAAW,CAAC,KAAD,CAAX;MACAF,QAAQ,CAACG,WAAD,CAAR;IACD;;IACDP,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAGqB,KAAH,CAAT;EACD,CAND;;EAQA,MAAMI,YAAY,GAAG,CAACJ,KAAD,EAAQK,GAAR,KAAgB;IACnCtB,QAAQ,CAACsB,GAAD,CAAR;IACA3B,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGsB,KAAH,EAAUK,GAAV,CAAR;EACD,CAHD;;EAKA,oBACE;IAAK,SAAS,EAAEnD,IAAI,CAACa,SAAD,EAAYC,OAAO,CAACsC,IAApB;EAApB,GACGtB,QAAQ,gBACP,oBAAC,cAAD;IACE,QAAQ,EAAEI,QADZ;IAEE,OAAO,EAAE;MACPkB,IAAI,EAAEtC,OAAO,CAACuC,SADP;MAEPb,KAAK,EAAE1B,OAAO,CAAC0B,KAFR;MAGPc,oBAAoB,EAAExC,OAAO,CAACwC;IAHvB,CAFX;IAOE,UAAU,EAAE;MACVC,KAAK,kCACAnB,gBADA;QAEHoB,MAAM,EAAEpC,cAAc,KAAKhB,OAAnB,GAA6BmC,UAA7B,GAA0CkB;MAF/C;IADK,CAPd;IAaE,KAAK,EAAE1C,KAbT;IAcE,MAAM,EAAE8B,UAdV;IAeE,QAAQ,EAAEK,YAfZ;IAgBE,SAAS,EAAEF;EAhBb,GAiBMpB,MAjBN,EADO,gBAqBP,oBAAC,QAAD;IACE,QAAQ,EAAC,OADX;IAEE,kBAAkB,EAAE,KAFtB;IAGE,SAAS,EAAE5B,IAAI,CAACc,OAAO,CAAC4C,MAAT,EACQC,QAAQ,CAACpB,UAAD,EAAa,EAAb,CAAR,IAA4B,EADpC,IACZzB,OAAO,CAAC8C,SADI,CAHjB;IAME,OAAO,EAAEhB;EANX,GAOMlB,WAPN,gBASE,oBAAC,YAAD;IACE,OAAO,EAAEL,OADX;IAEE,SAAS,EAAErB,IAAI,CAACc,OAAO,CAAC+C,IAAT,EAAsC,CAAC9C,KAAvC,IAAkBD,OAAO,CAACgD,SAA1B;EAFjB,GAGMnC,eAHN,GAKGZ,KAAK,IAAIO,WALZ,CATF,eAgBE,oBAAC,IAAD;IACE,KAAK,EAAC,OADR;IAEE,IAAI,EAAC,cAFP;IAGE,SAAS,EAAEtB,IAAI,CAACc,OAAO,CAACiD,IAAT,EACU7C,QADV,IACZJ,OAAO,CAACkD,WADI;EAHjB,EAhBF,CAtBJ,CADF;AAkDD,CA9GD;;AAgHA,wCAAArD,cAAc,CAACsD,SAAf,GAA2B;EACzB;AACF;AACA;EACEpD,SAAS,EAAEd,SAAS,CAACmE,MAJI;;EAKzB;AACF;AACA;EACEpD,OAAO,EAAEf,SAAS,CAACoE,KAAV,CAAgB;IACvBf,IAAI,EAAErD,SAAS,CAACmE,MADO;IAEvB1B,KAAK,EAAEzC,SAAS,CAACmE,MAFM;IAGvBb,SAAS,EAAEtD,SAAS,CAACmE,MAHE;IAIvBZ,oBAAoB,EAAEvD,SAAS,CAACmE,MAJT;IAKvBL,IAAI,EAAE9D,SAAS,CAACmE,MALO;IAMvBJ,SAAS,EAAE/D,SAAS,CAACmE,MANE;IAOvBR,MAAM,EAAE3D,SAAS,CAACmE,MAPK;IAQvBH,IAAI,EAAEhE,SAAS,CAACmE,MARO;IASvBF,WAAW,EAAEjE,SAAS,CAACmE,MATA;IAUvBN,SAAS,EAAE7D,SAAS,CAACmE;EAVE,CAAhB,EAWNE,UAnBsB;;EAoBzB;AACF;AACA;EACErD,KAAK,EAAEhB,SAAS,CAACmE,MAvBQ;;EAwBzB;AACF;AACA;EACEjD,YAAY,EAAElB,SAAS,CAACmE,MA3BC;;EA4BzB;AACF;AACA;EACEhD,QAAQ,EAAEnB,SAAS,CAACsE,IA/BK;;EAgCzB;AACF;AACA;EACElD,SAAS,EAAEpB,SAAS,CAACuE,WAnCI;;EAoCzB;AACF;AACA;EACEjD,OAAO,EAAEtB,SAAS,CAACmE,MAvCM;;EAwCzB;AACF;AACA;EACE5C,WAAW,EAAEvB,SAAS,CAACmE,MA3CE;;EA4CzB;AACF;AACA;EACE3C,MAAM,EAAExB,SAAS,CAACwE,IA/CO;;EAgDzB;AACF;AACA;EACE/C,QAAQ,EAAEzB,SAAS,CAACwE,IAnDK;;EAoDzB;AACF;AACA;EACE9C,SAAS,EAAE1B,SAAS,CAACwE,IAvDI;;EAwDzB;AACF;AACA;EACE7C,WAAW,EAAE3B,SAAS,CAACyE,UAAV,CAAqBC,MAArB,CA3DY;;EA4DzB;AACF;AACA;EACE9C,eAAe,EAAE5B,SAAS,CAACyE,UAAV,CAAqBC,MAArB;AA/DQ,CAA3B;AAkEA,eAAexE,UAAU,CAACS,MAAD,EAAS;EAAEgE,IAAI,EAAE;AAAR,CAAT,CAAV,CAA+C/D,cAA/C,CAAf"}
+{"version":3,"file":"InlineEditor.js","names":["React","useLayoutEffect","useRef","useState","PropTypes","clsx","withStyles","useTheme","HvButton","HvInput","HvTypography","isKeypress","KeyboardCodes","useControlled","Edit","styles","HvInlineEditor","props","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","editMode","setEditMode","cachedValue","setCachedValue","inputRef","theme","typographyStyles","hv","typography","lineHeight","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","Esc","handleChange","val","root","inputRoot","inputBorderContainer","style","height","undefined","button","parseInt","largeText","text","textEmpty","icon","iconVisible","propTypes","string","shape","isRequired","bool","elementType","func","instanceOf","Object","name"],"sources":["../../../src/InlineEditor/InlineEditor.js"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport {\n  HvButton,\n  HvInput,\n  HvTypography,\n  isKeypress,\n  KeyboardCodes,\n  useControlled,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nconst HvInlineEditor = (props) => {\n  const {\n    className,\n    classes,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"normalText\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    ...others\n  } = props;\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef();\n  const theme = useTheme();\n\n  const typographyStyles = theme.hv.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, KeyboardCodes.Esc)) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event);\n  };\n\n  const handleChange = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={clsx(className, classes.root)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          category=\"ghost\"\n          overrideIconColors={false}\n          className={clsx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            className={clsx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n          <Edit\n            color=\"atmo5\"\n            role=\"presentation\"\n            className={clsx(classes.icon, {\n              [classes.iconVisible]: showIcon,\n            })}\n          />\n        </HvButton>\n      )}\n    </div>\n  );\n};\n\nHvInlineEditor.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    input: PropTypes.string,\n    inputRoot: PropTypes.string,\n    inputBorderContainer: PropTypes.string,\n    text: PropTypes.string,\n    textEmpty: PropTypes.string,\n    button: PropTypes.string,\n    icon: PropTypes.string,\n    iconVisible: PropTypes.string,\n    largeText: PropTypes.string,\n  }).isRequired,\n  /**\n   * The value of the input element, for controlled usage.\n   */\n  value: PropTypes.string,\n  /**\n   * The default value of the input element, for uncontrolled usage.\n   */\n  defaultValue: PropTypes.string,\n  /**\n   * Whether the Edit icon should always be visible\n   */\n  showIcon: PropTypes.bool,\n  /**\n   * Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`)\n   */\n  component: PropTypes.elementType,\n  /**\n   * Variant of the HvTypography to display\n   */\n  variant: PropTypes.string,\n  /**\n   * The placeholder value of the HvTypography.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * Called when the input is blurred.\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Called when the input value is changed.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Called when a key is pressed on the input.\n   */\n  onKeyDown: PropTypes.func,\n  /**\n   * Props passed to the HvButton component\n   */\n  buttonProps: PropTypes.instanceOf(Object),\n  /**\n   * Props passed to the HvTypography text component\n   */\n  typographyProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvInlineEditor\" })(HvInlineEditor);\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvListContainerProps } from "@hitachivantara/uikit-react-core";
 
 interface Option {

package/dist/modern/NavigationAnchors/NavigationAnchors.js

@@ -1,14 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["selectedIndex", "scrollElementId", "href", "onClick", "className", "classes", "options", "floating", "offset"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { deprecatedPropType, withStyles } from "@material-ui/core";
+import { deprecatedPropType } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import { HvListContainer, HvListItem } from "@hitachivantara/uikit-react-core";
 import styles from "./styles";
 import navigationOption from "./NavigationOption";
+import { jsx as _jsx } from "react/jsx-runtime";
 const RETRY_MAX = 5;
 
 const getScrollTop = (c = window) => {
@@ -223,20 +230,22 @@ const NavigationAnchors = _ref => {
       return navigationOption(option.label);
     });
   }, [options]);
-  return /*#__PURE__*/React.createElement(HvListContainer, _extends({
+  return /*#__PURE__*/_jsx(HvListContainer, _objectSpread(_objectSpread({
     interactive: true,
     className: clsx(className, classes.root)
-  }, other), options.map((option, index) => {
-    const NavOpt = navOptions[index];
-    return /*#__PURE__*/React.createElement(HvListItem, {
-      classes: {
-        selected: classes.listItemSelected,
-        gutters: classes.listItemGutters
-      },
-      key: option.key || option.label,
-      onClick: event => handleListItemClick(event, option.value, index),
-      selected: selectedIndex === index
-    }, /*#__PURE__*/React.createElement(NavOpt, null));
+  }, other), {}, {
+    children: options.map((option, index) => {
+      const NavOpt = navOptions[index];
+      return /*#__PURE__*/_jsx(HvListItem, {
+        classes: {
+          selected: classes.listItemSelected,
+          gutters: classes.listItemGutters
+        },
+        onClick: event => handleListItemClick(event, option.value, index),
+        selected: selectedIndex === index,
+        children: /*#__PURE__*/_jsx(NavOpt, {})
+      }, option.key || option.label);
+    })
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"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"],"sources":["../../../src/NavigationAnchors/NavigationAnchors.js"],"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"],"mappings":"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"}
+{"version":3,"file":"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"],"sources":["../../../src/NavigationAnchors/NavigationAnchors.js"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\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"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 export type HvEmptyStatePanelClassKey =
   | "emptyStateRoot"

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

@@ -4,8 +4,9 @@ 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 { withStyles } from "@mui/styles";
 import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const EmptyStatePanel = ({
   id,
@@ -15,11 +16,11 @@ const EmptyStatePanel = ({
   message,
   icon
 }) => {
-  return /*#__PURE__*/React.createElement(HvEmptyState, {
+  return /*#__PURE__*/_jsx(HvEmptyState, {
     id: id,
     title: title,
     message: message,
-    icon: icon || _Alert || (_Alert = /*#__PURE__*/React.createElement(Alert, null)),
+    icon: icon || _Alert || (_Alert = /*#__PURE__*/_jsx(Alert, {})),
     className: className,
     classes: {
       root: classes.emptyStateRoot,

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

@@ -1 +1 @@
-{"version":3,"file":"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"],"sources":["../../../../src/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js"],"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"],"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;EAAEC,EAAF;EAAMC,OAAN;EAAeC,SAAf;EAA0BC,KAA1B;EAAiCC,OAAjC;EAA0CC;AAA1C,CAAD,KAAsD;EAC5E,oBACE,oBAAC,YAAD;IACE,EAAE,EAAEL,EADN;IAEE,KAAK,EAAEG,KAFT;IAGE,OAAO,EAAEC,OAHX;IAIE,IAAI,EAAEC,IAAI,qCAAI,oBAAC,KAAD,OAAJ,CAJZ;IAKE,SAAS,EAAEH,SALb;IAME,OAAO,EAAE;MACPI,IAAI,EAAEL,OAAO,CAACM,cADP;MAEPC,SAAS,EAAEP,OAAO,CAACQ,mBAFZ;MAGPC,aAAa,EAAET,OAAO,CAACU,uBAHhB;MAIPC,cAAc,EAAEX,OAAO,CAACY;IAJjB;EANX,EADF;AAeD,CAhBD;;AAkBA,wCAAAd,eAAe,CAACe,SAAhB,GAA4B;EAC1B;AACF;AACA;EACEd,EAAE,EAAEN,SAAS,CAACqB,MAAV,CAAiBC,UAJK;;EAK1B;AACF;AACA;EACEf,OAAO,EAAEP,SAAS,CAACuB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIV,cAAc,EAAEb,SAAS,CAACqB,MAJH;;IAKvB;AACJ;AACA;IACIN,mBAAmB,EAAEf,SAAS,CAACqB,MARR;;IAUvB;AACJ;AACA;IACIJ,uBAAuB,EAAEjB,SAAS,CAACqB,MAbZ;;IAevB;AACJ;AACA;IACIF,wBAAwB,EAAEnB,SAAS,CAACqB;EAlBb,CAAhB,EAmBNC,UA3BuB;;EA6B1B;AACF;AACA;EACEd,SAAS,EAAER,SAAS,CAACqB,MAhCK;;EAiC1B;AACF;AACA;EACEZ,KAAK,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UApCE;;EAqC1B;AACF;AACA;EACEZ,OAAO,EAAEV,SAAS,CAACqB,MAAV,CAAiBC,UAxCA;;EAyC1B;AACF;AACA;EACEX,IAAI,EAAEX,SAAS,CAACwB;AA5CU,CAA5B;AA8CA,eAAerB,UAAU,CAACC,MAAD,EAAS;EAAEqB,IAAI,EAAE;AAAR,CAAT,CAAV,CAAkDpB,eAAlD,CAAf"}
+{"version":3,"file":"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"],"sources":["../../../../src/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js"],"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 \"@mui/styles\";\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"],"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,aAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;;AAEA,MAAMC,eAAe,GAAG,CAAC;EAAEC,EAAF;EAAMC,OAAN;EAAeC,SAAf;EAA0BC,KAA1B;EAAiCC,OAAjC;EAA0CC;AAA1C,CAAD,KAAsD;EAC5E,oBACE,KAAC,YAAD;IACE,EAAE,EAAEL,EADN;IAEE,KAAK,EAAEG,KAFT;IAGE,OAAO,EAAEC,OAHX;IAIE,IAAI,EAAEC,IAAI,qCAAI,KAAC,KAAD,KAAJ,CAJZ;IAKE,SAAS,EAAEH,SALb;IAME,OAAO,EAAE;MACPI,IAAI,EAAEL,OAAO,CAACM,cADP;MAEPC,SAAS,EAAEP,OAAO,CAACQ,mBAFZ;MAGPC,aAAa,EAAET,OAAO,CAACU,uBAHhB;MAIPC,cAAc,EAAEX,OAAO,CAACY;IAJjB;EANX,EADF;AAeD,CAhBD;;AAkBA,wCAAAd,eAAe,CAACe,SAAhB,GAA4B;EAC1B;AACF;AACA;EACEd,EAAE,EAAEN,SAAS,CAACqB,MAAV,CAAiBC,UAJK;;EAK1B;AACF;AACA;EACEf,OAAO,EAAEP,SAAS,CAACuB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIV,cAAc,EAAEb,SAAS,CAACqB,MAJH;;IAKvB;AACJ;AACA;IACIN,mBAAmB,EAAEf,SAAS,CAACqB,MARR;;IAUvB;AACJ;AACA;IACIJ,uBAAuB,EAAEjB,SAAS,CAACqB,MAbZ;;IAevB;AACJ;AACA;IACIF,wBAAwB,EAAEnB,SAAS,CAACqB;EAlBb,CAAhB,EAmBNC,UA3BuB;;EA6B1B;AACF;AACA;EACEd,SAAS,EAAER,SAAS,CAACqB,MAhCK;;EAiC1B;AACF;AACA;EACEZ,KAAK,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UApCE;;EAqC1B;AACF;AACA;EACEZ,OAAO,EAAEV,SAAS,CAACqB,MAAV,CAAiBC,UAxCA;;EAyC1B;AACF;AACA;EACEX,IAAI,EAAEX,SAAS,CAACwB;AA5CU,CAA5B;AA8CA,eAAerB,UAAU,CAACC,MAAD,EAAS;EAAEqB,IAAI,EAAE;AAAR,CAAT,CAAV,CAAkDpB,eAAlD,CAAf"}

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

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

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

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

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

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

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

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