@hitachivantara/uikit-react-core 3.74.0 → 4.0.1-next.2

package/dist/modern/Accordion/Accordion.js

@@ -1,11 +1,16 @@
-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 = ["id", "className", "classes", "disabled", "label", "labelProps", "onChange", "children", "expanded", "headingLevel", "defaultExpanded", "containerProps"];
+
+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, useMemo } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
 import styles from "./styles";
 import { setId, useControlled } from "../utils";
@@ -14,6 +19,9 @@ import { HvTypography } from "..";
  * A accordion is a design element that expands in place to expose hidden information.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const HvAccordion = _ref => {
   let {
     id,
@@ -76,7 +84,8 @@ const HvAccordion = _ref => {
   const accordionHeader = useMemo(() => {
     const color = disabled && ["atmo5"] || undefined;
     const variantToApply = headingLevel === 1 || headingLevel === 2 ? "sectionTitle" : "highlightText";
-    const accordionButton = /*#__PURE__*/React.createElement(HvTypography, _extends({
+
+    const accordionButton = /*#__PURE__*/_jsxs(HvTypography, _objectSpread(_objectSpread({
       id: accordionHeaderId,
       component: "div",
       role: "button",
@@ -87,25 +96,33 @@ const HvAccordion = _ref => {
       variant: variantToApply,
       "aria-expanded": isOpen,
       "aria-disabled": disabled
-    }, labelProps), isOpen ? /*#__PURE__*/React.createElement(DropUpXS, {
-      color: color
-    }) : /*#__PURE__*/React.createElement(DropDownXS, {
-      color: color
-    }), label);
-    const result = headingLevel === undefined ? accordionButton : /*#__PURE__*/React.createElement(HvTypography, {
-      component: `h${headingLevel}`
-    }, accordionButton);
+    }, labelProps), {}, {
+      children: [isOpen ? /*#__PURE__*/_jsx(DropUpXS, {
+        color: color
+      }) : /*#__PURE__*/_jsx(DropDownXS, {
+        color: color
+      }), label]
+    }));
+
+    const result = headingLevel === undefined ? accordionButton : /*#__PURE__*/_jsx(HvTypography, {
+      component: `h${headingLevel}`,
+      children: accordionButton
+    });
     return result;
   }, [classes, handleClick, handleKeyDown, label, labelProps, accordionHeaderId, disabled, headingLevel, isOpen]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     id: id,
     className: clsx(className, classes.root)
-  }, others), accordionHeader, /*#__PURE__*/React.createElement("div", _extends({
-    id: accordionContainer,
-    role: "region",
-    "aria-labelledby": accordionHeaderId,
-    className: clsx(classes.container, !isOpen && classes.hidden)
-  }, containerProps), children));
+  }, others), {}, {
+    children: [accordionHeader, /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      id: accordionContainer,
+      role: "region",
+      "aria-labelledby": accordionHeaderId,
+      className: clsx(classes.container, !isOpen && classes.hidden)
+    }, containerProps), {}, {
+      children: children
+    }))]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvAccordion.propTypes = {

package/dist/modern/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["React","useCallback","useMemo","PropTypes","clsx","withStyles","DropDownXS","DropUpXS","styles","setId","useControlled","HvTypography","HvAccordion","id","className","classes","disabled","label","labelProps","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","others","isOpen","setIsOpen","Boolean","handleAction","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","accordionContainer","accordionHeader","color","undefined","variantToApply","accordionButton","result","root","container","hidden","propTypes","string","shape","isRequired","node","instanceOf","Object","func","bool","oneOf","name"],"sources":["../../../src/Accordion/Accordion.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\nimport { setId, useControlled } from \"../utils\";\nimport { HvTypography } from \"..\";\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nconst HvAccordion = ({\n  id,\n  className,\n  classes,\n  disabled = false,\n  label,\n  labelProps,\n  onChange = null,\n  children,\n  expanded,\n  headingLevel,\n  defaultExpanded = false,\n  containerProps,\n  ...others\n}) => {\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"atmo5\"]) || undefined;\n    const variantToApply =\n      headingLevel === 1 || headingLevel === 2 ? \"sectionTitle\" : \"highlightText\";\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={clsx(classes.label, {\n          [classes.disabled]: disabled,\n        })}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={variantToApply}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n        {...labelProps}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <HvTypography component={`h${headingLevel}`}>{accordionButton}</HvTypography>\n      );\n    return result;\n  }, [\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    labelProps,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n  ]);\n\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={clsx(classes.container, { [classes.hidden]: !isOpen })}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nHvAccordion.propTypes = {\n  /**\n   * Id to be applied to the root node of the accordion.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\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 content when it is hidden.\n     */\n    hidden: PropTypes.string,\n    /**\n     * Styles applied to the content when it is hidden.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the label button.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the label button when it is disabled.\n     */\n    disabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * The accordion label button.\n   */\n  label: PropTypes.node.isRequired,\n  /**\n   * An object containing props to be passed onto the accordion label button.\n   */\n  labelProps: PropTypes.instanceOf(Object),\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange: PropTypes.func,\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps: PropTypes.instanceOf(Object),\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),\n  /**\n   * Is the accordion disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * The content of the accordion.\n   */\n  children: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvAccordion\" })(HvAccordion);\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","names":["React","useCallback","useMemo","PropTypes","clsx","withStyles","DropDownXS","DropUpXS","styles","setId","useControlled","HvTypography","HvAccordion","id","className","classes","disabled","label","labelProps","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","others","isOpen","setIsOpen","Boolean","handleAction","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","accordionContainer","accordionHeader","color","undefined","variantToApply","accordionButton","result","root","container","hidden","propTypes","string","shape","isRequired","node","instanceOf","Object","func","bool","oneOf","name"],"sources":["../../../src/Accordion/Accordion.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\nimport { setId, useControlled } from \"../utils\";\nimport { HvTypography } from \"..\";\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nconst HvAccordion = ({\n  id,\n  className,\n  classes,\n  disabled = false,\n  label,\n  labelProps,\n  onChange = null,\n  children,\n  expanded,\n  headingLevel,\n  defaultExpanded = false,\n  containerProps,\n  ...others\n}) => {\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"atmo5\"]) || undefined;\n    const variantToApply =\n      headingLevel === 1 || headingLevel === 2 ? \"sectionTitle\" : \"highlightText\";\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={clsx(classes.label, {\n          [classes.disabled]: disabled,\n        })}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={variantToApply}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n        {...labelProps}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <HvTypography component={`h${headingLevel}`}>{accordionButton}</HvTypography>\n      );\n    return result;\n  }, [\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    labelProps,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n  ]);\n\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={clsx(classes.container, { [classes.hidden]: !isOpen })}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nHvAccordion.propTypes = {\n  /**\n   * Id to be applied to the root node of the accordion.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\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 content when it is hidden.\n     */\n    hidden: PropTypes.string,\n    /**\n     * Styles applied to the content when it is hidden.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the label button.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the label button when it is disabled.\n     */\n    disabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * The accordion label button.\n   */\n  label: PropTypes.node.isRequired,\n  /**\n   * An object containing props to be passed onto the accordion label button.\n   */\n  labelProps: PropTypes.instanceOf(Object),\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange: PropTypes.func,\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps: PropTypes.instanceOf(Object),\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),\n  /**\n   * Is the accordion disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * The content of the accordion.\n   */\n  children: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvAccordion\" })(HvAccordion);\n"],"mappings":"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"}

package/dist/modern/ActionBar/ActionBar.d.ts

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

package/dist/modern/ActionBar/ActionBar.js

@@ -1,15 +1,22 @@
-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 = ["classes", "className", "id", "children"];
+
+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 React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import styles from "./styles";
 /**
  * This component acts as a container for the Action Bar pattern.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+
 const HvActionBar = props => {
   const {
     classes,
@@ -19,10 +26,12 @@ const HvActionBar = props => {
   } = props,
         others = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     id: id,
     className: clsx(classes.root, className)
-  }, others), children);
+  }, others), {}, {
+    children: children
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvActionBar.propTypes = {

package/dist/modern/ActionBar/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","names":["React","PropTypes","clsx","withStyles","styles","HvActionBar","props","classes","className","id","children","others","root","propTypes","string","shape","isRequired","node","name"],"sources":["../../../src/ActionBar/ActionBar.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\n/**\n * This component acts as a container for the Action Bar pattern.\n */\nconst HvActionBar = (props) => {\n  const { classes, className, id, children, ...others } = props;\n\n  return (\n    <div id={id} className={clsx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n\nHvActionBar.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * The content of the action container.\n   */\n  children: PropTypes.node.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvActionBar\" })(HvActionBar);\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;;AACA,MAAMC,WAAW,GAAIC,KAAD,IAAW;EAC7B,MAAM;IAAEC,OAAF;IAAWC,SAAX;IAAsBC,EAAtB;IAA0BC;EAA1B,IAAkDJ,KAAxD;EAAA,MAA6CK,MAA7C,4BAAwDL,KAAxD;;EAEA,oBACE;IAAK,EAAE,EAAEG,EAAT;IAAa,SAAS,EAAEP,IAAI,CAACK,OAAO,CAACK,IAAT,EAAeJ,SAAf;EAA5B,GAA2DG,MAA3D,GACGD,QADH,CADF;AAKD,CARD;;AAUA,wCAAAL,WAAW,CAACQ,SAAZ,GAAwB;EACtB;AACF;AACA;EACEL,SAAS,EAAEP,SAAS,CAACa,MAJC;;EAKtB;AACF;AACA;EACEL,EAAE,EAAER,SAAS,CAACa,MARQ;;EAStB;AACF;AACA;EACEP,OAAO,EAAEN,SAAS,CAACc,KAAV,CAAgB;IACvB;AACJ;AACA;IACIH,IAAI,EAAEX,SAAS,CAACa;EAJO,CAAhB,EAKNE,UAjBmB;;EAkBtB;AACF;AACA;EACEN,QAAQ,EAAET,SAAS,CAACgB,IAAV,CAAeD;AArBH,CAAxB;AAwBA,eAAeb,UAAU,CAACC,MAAD,EAAS;EAAEc,IAAI,EAAE;AAAR,CAAT,CAAV,CAA4Cb,WAA5C,CAAf"}
+{"version":3,"file":"ActionBar.js","names":["React","PropTypes","clsx","withStyles","styles","HvActionBar","props","classes","className","id","children","others","root","propTypes","string","shape","isRequired","node","name"],"sources":["../../../src/ActionBar/ActionBar.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\n/**\n * This component acts as a container for the Action Bar pattern.\n */\nconst HvActionBar = (props) => {\n  const { classes, className, id, children, ...others } = props;\n\n  return (\n    <div id={id} className={clsx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n\nHvActionBar.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * The content of the action container.\n   */\n  children: PropTypes.node.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvActionBar\" })(HvActionBar);\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;;;;AACA,MAAMC,WAAW,GAAIC,KAAD,IAAW;EAC7B,MAAM;IAAEC,OAAF;IAAWC,SAAX;IAAsBC,EAAtB;IAA0BC;EAA1B,IAAkDJ,KAAxD;EAAA,MAA6CK,MAA7C,4BAAwDL,KAAxD;;EAEA,oBACE;IAAK,EAAE,EAAEG,EAAT;IAAa,SAAS,EAAEP,IAAI,CAACK,OAAO,CAACK,IAAT,EAAeJ,SAAf;EAA5B,GAA2DG,MAA3D;IAAA,UACGD;EADH,GADF;AAKD,CARD;;AAUA,wCAAAL,WAAW,CAACQ,SAAZ,GAAwB;EACtB;AACF;AACA;EACEL,SAAS,EAAEP,SAAS,CAACa,MAJC;;EAKtB;AACF;AACA;EACEL,EAAE,EAAER,SAAS,CAACa,MARQ;;EAStB;AACF;AACA;EACEP,OAAO,EAAEN,SAAS,CAACc,KAAV,CAAgB;IACvB;AACJ;AACA;IACIH,IAAI,EAAEX,SAAS,CAACa;EAJO,CAAhB,EAKNE,UAjBmB;;EAkBtB;AACF;AACA;EACEN,QAAQ,EAAET,SAAS,CAACgB,IAAV,CAAeD;AArBH,CAAxB;AAwBA,eAAeb,UAAU,CAACC,MAAD,EAAS;EAAEc,IAAI,EAAE;AAAR,CAAT,CAAV,CAA4Cb,WAA5C,CAAf"}

package/dist/modern/ActionsGeneric/ActionsGeneric.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvButtonCategories } from "../Button";
 
 export type ActionGeneric = {

package/dist/modern/ActionsGeneric/ActionsGeneric.js

@@ -1,14 +1,22 @@
-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 = ["id", "classes", "className", "category", "disabled", "actions", "actionsCallback", "maxVisibleActions"],
       _excluded2 = ["disabled", "icon", "label"];
+
+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 React, { isValidElement } from "react";
 import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import clsx from "clsx";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { HvButton, HvDropDownMenu, setId } from "..";
 import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const ActionsGeneric = _ref => {
   let {
@@ -37,15 +45,16 @@ const ActionsGeneric = _ref => {
     const renderedIcon = /*#__PURE__*/isValidElement(icon) ? icon : icon === null || icon === void 0 ? void 0 : icon({
       isDisabled: disabled
     });
-    return /*#__PURE__*/React.createElement(HvButton, _extends({
+    return /*#__PURE__*/_jsx(HvButton, _objectSpread(_objectSpread({
       id: actionId,
-      key: actionId || idx,
       category: category,
       className: classes.button,
       disabled: actDisabled !== null && actDisabled !== void 0 ? actDisabled : disabled,
       onClick: event => actionsCallback === null || actionsCallback === void 0 ? void 0 : actionsCallback(event, id, action),
       startIcon: renderedIcon
-    }, other), label);
+    }, other), {}, {
+      children: label
+    }), actionId || idx);
   };
 
   const renderActionsGrid = () => {
@@ -53,30 +62,34 @@ const ActionsGeneric = _ref => {
     const actsDropdown = actions.slice(maxVisibleActions);
     const semantic = category === "semantic";
     const iconColor = disabled && "atmo5" || semantic && "base2" || undefined;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, actsVisible.map((action, idx) => renderButton(action, idx)), /*#__PURE__*/React.createElement(HvDropDownMenu, {
-      id: setId(id, "menu"),
-      disabled: disabled,
-      category: category,
-      classes: {
-        root: classes.dropDownMenu,
-        icon: classes.dropDownMenuButton,
-        iconSelected: classes.dropDownMenuButtonSelected
-      },
-      icon: /*#__PURE__*/React.createElement(MoreOptionsVertical, {
-        color: iconColor
-      }),
-      placement: "left",
-      onClick: (event, action) => actionsCallback === null || actionsCallback === void 0 ? void 0 : actionsCallback(event, id, action),
-      dataList: actsDropdown,
-      keepOpened: false,
-      disablePortal: false
-    }));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [actsVisible.map((action, idx) => renderButton(action, idx)), /*#__PURE__*/_jsx(HvDropDownMenu, {
+        id: setId(id, "menu"),
+        disabled: disabled,
+        category: category,
+        classes: {
+          root: classes.dropDownMenu,
+          icon: classes.dropDownMenuButton,
+          iconSelected: classes.dropDownMenuButtonSelected
+        },
+        icon: /*#__PURE__*/_jsx(MoreOptionsVertical, {
+          color: iconColor
+        }),
+        placement: "left",
+        onClick: (event, action) => actionsCallback === null || actionsCallback === void 0 ? void 0 : actionsCallback(event, id, action),
+        dataList: actsDropdown,
+        keepOpened: false,
+        disablePortal: false
+      })]
+    });
   };
 
   const actionOverflow = actions.length > maxVisibleActions;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: clsx(className, classes.root, actionOverflow && classes.actionContainer)
-  }, others), actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx)));
+  }, others), {}, {
+    children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? ActionsGeneric.propTypes = {

package/dist/modern/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","names":["React","isValidElement","PropTypes","withStyles","clsx","MoreOptionsVertical","HvButton","HvDropDownMenu","setId","styles","ActionsGeneric","id","classes","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","Array","isArray","renderButton","action","idx","actDisabled","icon","label","other","actionId","renderedIcon","isDisabled","button","event","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","map","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","actionOverflow","length","actionContainer","propTypes","string","shape","isRequired","oneOf","bool","oneOfType","node","arrayOf","func","number","name"],"sources":["../../../src/ActionsGeneric/ActionsGeneric.js"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvDropDownMenu, setId } from \"..\";\nimport styles from \"./styles\";\n\nconst ActionsGeneric = ({\n  id,\n  classes,\n  className,\n  category = \"ghost\",\n  disabled = false,\n  actions = [],\n  actionsCallback,\n  maxVisibleActions = Infinity,\n  ...others\n}) => {\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action, idx) => {\n    const { disabled: actDisabled, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        category={category}\n        className={classes.button}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id, action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor = (disabled && \"atmo5\") || (semantic && \"base2\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => actionsCallback?.(event, id, action)}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={clsx(className, classes.root, {\n        [classes.actionContainer]: actionOverflow,\n      })}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n\nActionsGeneric.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 to the actions.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to element root.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the visible buttons.\n     */\n    button: PropTypes.string,\n    /**\n     * Styles applied to the action container wrapper.\n     */\n    actionContainer: PropTypes.string,\n    /**\n     * Styles applied to the DropDownMenu component.\n     */\n    dropDownMenu: PropTypes.string,\n    /**\n     * Styles applied to the DropDownMenu IconButton component.\n     */\n    dropDownMenuButton: PropTypes.string,\n    /**\n     * Styles applied to the DropDownMenu IconButton component when it is selected.\n     */\n    dropDownMenuButtonSelected: PropTypes.string,\n  }).isRequired,\n  /**\n   * Component identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Button category.\n   */\n  category: PropTypes.oneOf([\"primary\", \"secondary\", \"ghost\", \"semantic\"]),\n  /**\n   *  Whether actions should be all disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * The renderable content inside the actions slot of the footer,\n   * or an Array of actions `{id, label, icon, disabled}`\n   */\n  actions: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string.isRequired,\n        label: PropTypes.string,\n        icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n        disabled: PropTypes.bool,\n      })\n    ),\n  ]),\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback: PropTypes.func,\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvActionsGeneric\" })(ActionsGeneric);\n"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.js","names":["React","isValidElement","PropTypes","withStyles","clsx","MoreOptionsVertical","HvButton","HvDropDownMenu","setId","styles","ActionsGeneric","id","classes","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","Array","isArray","renderButton","action","idx","actDisabled","icon","label","other","actionId","renderedIcon","isDisabled","button","event","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","map","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","actionOverflow","length","actionContainer","propTypes","string","shape","isRequired","oneOf","bool","oneOfType","node","arrayOf","func","number","name"],"sources":["../../../src/ActionsGeneric/ActionsGeneric.js"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport clsx from \"clsx\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvDropDownMenu, setId } from \"..\";\nimport styles from \"./styles\";\n\nconst ActionsGeneric = ({\n  id,\n  classes,\n  className,\n  category = \"ghost\",\n  disabled = false,\n  actions = [],\n  actionsCallback,\n  maxVisibleActions = Infinity,\n  ...others\n}) => {\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action, idx) => {\n    const { disabled: actDisabled, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        category={category}\n        className={classes.button}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id, action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor = (disabled && \"atmo5\") || (semantic && \"base2\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => actionsCallback?.(event, id, action)}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={clsx(className, classes.root, {\n        [classes.actionContainer]: actionOverflow,\n      })}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n\nActionsGeneric.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 to the actions.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to element root.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the visible buttons.\n     */\n    button: PropTypes.string,\n    /**\n     * Styles applied to the action container wrapper.\n     */\n    actionContainer: PropTypes.string,\n    /**\n     * Styles applied to the DropDownMenu component.\n     */\n    dropDownMenu: PropTypes.string,\n    /**\n     * Styles applied to the DropDownMenu IconButton component.\n     */\n    dropDownMenuButton: PropTypes.string,\n    /**\n     * Styles applied to the DropDownMenu IconButton component when it is selected.\n     */\n    dropDownMenuButtonSelected: PropTypes.string,\n  }).isRequired,\n  /**\n   * Component identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Button category.\n   */\n  category: PropTypes.oneOf([\"primary\", \"secondary\", \"ghost\", \"semantic\"]),\n  /**\n   *  Whether actions should be all disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * The renderable content inside the actions slot of the footer,\n   * or an Array of actions `{id, label, icon, disabled}`\n   */\n  actions: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string.isRequired,\n        label: PropTypes.string,\n        icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n        disabled: PropTypes.bool,\n      })\n    ),\n  ]),\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback: PropTypes.func,\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvActionsGeneric\" })(ActionsGeneric);\n"],"mappings":"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"}

package/dist/modern/AppSwitcher/Action/Action.d.ts

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

package/dist/modern/AppSwitcher/Action/Action.js

@@ -8,11 +8,13 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { useTheme, withStyles } from "@material-ui/core";
+import { withStyles, useTheme } from "@mui/styles";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { HvTypography, HvAvatar, HvTooltip, HvListItem } from "../..";
 import styles from "./styles";
 import TitleWithTooltip from "../TitleWithTooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;
 
@@ -44,7 +46,7 @@ const Action = props => {
     }
 
     if (iconUrl && validIconUrl) {
-      return /*#__PURE__*/React.createElement("img", {
+      return /*#__PURE__*/_jsx("img", {
         className: classes.iconUrl,
         src: iconUrl,
         onError: () => {
@@ -56,11 +58,12 @@ const Action = props => {
 
     const brokenTitle = name.split(" ");
     const initials = brokenTitle[0].substring(0, 1) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : "");
-    return /*#__PURE__*/React.createElement(HvAvatar, {
+    return /*#__PURE__*/_jsx(HvAvatar, {
       size: "SM",
       backgroundColor: color,
-      variant: "square"
-    }, initials);
+      variant: "square",
+      children: initials
+    });
   };
 
   const isSelected = isSelectedCallback(application);
@@ -80,36 +83,44 @@ const Action = props => {
   };
 
   const isLink = url != null;
-  return /*#__PURE__*/React.createElement(HvListItem, {
+  return /*#__PURE__*/_jsx(HvListItem, {
     id: id,
     interactive: true,
     tabIndex: 0,
     selected: isSelected,
     disabled: disabled,
-    className: clsx(className, classes.root, disabled && classes.disabled, isSelected && classes.selected)
-  }, /*#__PURE__*/React.createElement(HvTypography, {
-    component: isLink ? "a" : "button",
-    href: isLink ? url : undefined,
-    target: isLink ? target || "_top" : undefined,
-    className: classes.typography,
-    onClick: handleOnClick,
-    style: {
-      borderColor: color
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.icon
-  }, renderApplicationIcon()), /*#__PURE__*/React.createElement(TitleWithTooltip, {
-    title: name,
-    className: classes.title
-  }), description && /*#__PURE__*/React.createElement(HvTooltip, {
-    disableFocusListener: true,
-    disableTouchListener: true,
-    title: /*#__PURE__*/React.createElement(HvTypography, null, description)
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Info, {
-    className: classes.iconInfo,
-    role: "img",
-    "aria-label": description
-  })))));
+    className: clsx(className, classes.root, disabled && classes.disabled, isSelected && classes.selected),
+    children: /*#__PURE__*/_jsxs(HvTypography, {
+      component: isLink ? "a" : "button",
+      href: isLink ? url : undefined,
+      target: isLink ? target || "_top" : undefined,
+      className: classes.typography,
+      onClick: handleOnClick,
+      style: {
+        borderColor: color
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classes.icon,
+        children: renderApplicationIcon()
+      }), /*#__PURE__*/_jsx(TitleWithTooltip, {
+        title: name,
+        className: classes.title
+      }), description && /*#__PURE__*/_jsx(HvTooltip, {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        title: /*#__PURE__*/_jsx(HvTypography, {
+          children: description
+        }),
+        children: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Info, {
+            className: classes.iconInfo,
+            role: "img",
+            "aria-label": description
+          })
+        })
+      })]
+    })
+  });
 };
 
 process.env.NODE_ENV !== "production" ? Action.propTypes = {

package/dist/modern/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","names":["React","useState","PropTypes","clsx","useTheme","withStyles","Info","HvTypography","HvAvatar","HvTooltip","HvListItem","styles","TitleWithTooltip","getColor","theme","color","defaultColor","palette","Action","props","id","className","classes","application","onClickCallback","isSelectedCallback","name","description","disabled","iconElement","iconUrl","url","target","hv","atmosphere","atmo5","accent","acce1","validIconUrl","setValidIconUrl","renderApplicationIcon","brokenTitle","split","initials","substring","isSelected","handleOnClick","event","preventDefault","isLink","root","selected","undefined","typography","borderColor","icon","title","iconInfo","propTypes","string","shape","isRequired","element","oneOf","bool","func"],"sources":["../../../../src/AppSwitcher/Action/Action.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport clsx from \"clsx\";\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { HvTypography, HvAvatar, HvTooltip, HvListItem } from \"../..\";\n\nimport styles from \"./styles\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\n\nconst getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;\n\nconst Action = (props) => {\n  const {\n    id,\n    className,\n    classes,\n    application,\n    onClickCallback = () => {},\n    isSelectedCallback = () => false,\n  } = props;\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } = application;\n\n  const theme = useTheme();\n  const color = disabled\n    ? theme.hv.palette.atmosphere.atmo5\n    : getColor(theme, application.color, theme.hv.palette.accent.acce1);\n\n  const [validIconUrl, setValidIconUrl] = useState(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"SM\" backgroundColor={color} variant=\"square\">\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = (event) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={clsx(className, classes.root, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n      })}\n    >\n      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\n\n        {description && (\n          <HvTooltip\n            disableFocusListener\n            disableTouchListener\n            title={<HvTypography>{description}</HvTypography>}\n          >\n            <div>\n              <Info className={classes.iconInfo} role=\"img\" aria-label={description} />\n            </div>\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n\nAction.propTypes = {\n  /**\n   * Identifier to be applied to the root element.\n   */\n  id: PropTypes.string,\n\n  /**\n   * Class names to be applied to the root element.\n   */\n  className: PropTypes.string,\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 class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component root class when disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the typography element.\n     */\n    typography: PropTypes.string,\n    /**\n     * Styles applied to the component root class when selected.\n     */\n    selected: PropTypes.string,\n    /**\n     * Styles applied to the icon container.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the icon.\n     */\n    iconUrl: PropTypes.string,\n    /**\n     * Styles applied to the action title element.\n     */\n    title: PropTypes.string,\n    /**\n     * Styles applied to the info icon element.\n     */\n    iconInfo: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * The application data to be used to render the Action object.\n   */\n  application: PropTypes.shape({\n    /**\n     * Id of the application.\n     */\n    id: PropTypes.string,\n    /**\n     * Name of the application, this is the value that will be displayed on the component.\n     */\n    name: PropTypes.string.isRequired,\n    /**\n     * The color to be applied to the item's border and to the default icon.\n     * You can use either an HEX or color name from the palette.\n     */\n    color: PropTypes.string,\n    /**\n     * URL with the icon location to be used to represent the application.\n     * iconUrl will only be used if no iconElement is provided.\n     */\n    iconUrl: PropTypes.string,\n    /**\n     * Element to be added as the icon representing the application.\n     * The iconElement will be the primary option to be displayed.\n     */\n    iconElement: PropTypes.element,\n    /**\n     * Small description of the application.\n     */\n    description: PropTypes.string,\n    /**\n     *  URL where the application is accessible.\n     */\n    url: PropTypes.string,\n    /**\n     * Defines if the application should be opened in the same tab or in a new one.\n     */\n    target: PropTypes.oneOf([\"_top\", \"_blank\"]),\n    /**\n     * If true, the item will be disabled.\n     */\n    disabled: PropTypes.bool,\n    /**\n     * True when the application is selected, false otherwise.\n     */\n    isSelected: PropTypes.bool,\n  }).isRequired,\n\n  /**\n   * Callback triggered when the action is clicked.\n   */\n  onClickCallback: PropTypes.func,\n  /**\n   * Must return a boolean stating if the action element is selected or not.\n   */\n  isSelectedCallback: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvAppSwitcherAction\" })(Action);\n"],"mappings":"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"}
+{"version":3,"file":"Action.js","names":["React","useState","PropTypes","clsx","withStyles","useTheme","Info","HvTypography","HvAvatar","HvTooltip","HvListItem","styles","TitleWithTooltip","getColor","theme","color","defaultColor","palette","Action","props","id","className","classes","application","onClickCallback","isSelectedCallback","name","description","disabled","iconElement","iconUrl","url","target","hv","atmosphere","atmo5","accent","acce1","validIconUrl","setValidIconUrl","renderApplicationIcon","brokenTitle","split","initials","substring","isSelected","handleOnClick","event","preventDefault","isLink","root","selected","undefined","typography","borderColor","icon","title","iconInfo","propTypes","string","shape","isRequired","element","oneOf","bool","func"],"sources":["../../../../src/AppSwitcher/Action/Action.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport clsx from \"clsx\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { HvTypography, HvAvatar, HvTooltip, HvListItem } from \"../..\";\n\nimport styles from \"./styles\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\n\nconst getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;\n\nconst Action = (props) => {\n  const {\n    id,\n    className,\n    classes,\n    application,\n    onClickCallback = () => {},\n    isSelectedCallback = () => false,\n  } = props;\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } = application;\n\n  const theme = useTheme();\n  const color = disabled\n    ? theme.hv.palette.atmosphere.atmo5\n    : getColor(theme, application.color, theme.hv.palette.accent.acce1);\n\n  const [validIconUrl, setValidIconUrl] = useState(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"SM\" backgroundColor={color} variant=\"square\">\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = (event) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={clsx(className, classes.root, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n      })}\n    >\n      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\n\n        {description && (\n          <HvTooltip\n            disableFocusListener\n            disableTouchListener\n            title={<HvTypography>{description}</HvTypography>}\n          >\n            <div>\n              <Info className={classes.iconInfo} role=\"img\" aria-label={description} />\n            </div>\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n\nAction.propTypes = {\n  /**\n   * Identifier to be applied to the root element.\n   */\n  id: PropTypes.string,\n\n  /**\n   * Class names to be applied to the root element.\n   */\n  className: PropTypes.string,\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 class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component root class when disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the typography element.\n     */\n    typography: PropTypes.string,\n    /**\n     * Styles applied to the component root class when selected.\n     */\n    selected: PropTypes.string,\n    /**\n     * Styles applied to the icon container.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the icon.\n     */\n    iconUrl: PropTypes.string,\n    /**\n     * Styles applied to the action title element.\n     */\n    title: PropTypes.string,\n    /**\n     * Styles applied to the info icon element.\n     */\n    iconInfo: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * The application data to be used to render the Action object.\n   */\n  application: PropTypes.shape({\n    /**\n     * Id of the application.\n     */\n    id: PropTypes.string,\n    /**\n     * Name of the application, this is the value that will be displayed on the component.\n     */\n    name: PropTypes.string.isRequired,\n    /**\n     * The color to be applied to the item's border and to the default icon.\n     * You can use either an HEX or color name from the palette.\n     */\n    color: PropTypes.string,\n    /**\n     * URL with the icon location to be used to represent the application.\n     * iconUrl will only be used if no iconElement is provided.\n     */\n    iconUrl: PropTypes.string,\n    /**\n     * Element to be added as the icon representing the application.\n     * The iconElement will be the primary option to be displayed.\n     */\n    iconElement: PropTypes.element,\n    /**\n     * Small description of the application.\n     */\n    description: PropTypes.string,\n    /**\n     *  URL where the application is accessible.\n     */\n    url: PropTypes.string,\n    /**\n     * Defines if the application should be opened in the same tab or in a new one.\n     */\n    target: PropTypes.oneOf([\"_top\", \"_blank\"]),\n    /**\n     * If true, the item will be disabled.\n     */\n    disabled: PropTypes.bool,\n    /**\n     * True when the application is selected, false otherwise.\n     */\n    isSelected: PropTypes.bool,\n  }).isRequired,\n\n  /**\n   * Callback triggered when the action is clicked.\n   */\n  onClickCallback: PropTypes.func,\n  /**\n   * Must return a boolean stating if the action element is selected or not.\n   */\n  isSelectedCallback: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvAppSwitcherAction\" })(Action);\n"],"mappings":"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"}

package/dist/modern/AppSwitcher/AppSwitcher.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 import { HvAppSwitcherActionApplication } from "./Action";