@hitachivantara/uikit-react-core 3.72.0 → 4.0.1-next.1

package/dist/Kpi/Kpi.js

@@ -1,5 +1,19 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -17,15 +31,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
 
 var _utils = require("../utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["classes", "className", "id", "labels", "visualIndicator", "visualComparison", "trendIndicator", "indicatorUnitTextVariant", "indicatorTextVariant"];
+
+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) { (0, _defineProperty2.default)(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; }
+
 var DEFAULT_LABELS = {
   title: "",
   indicator: undefined,
@@ -56,36 +77,53 @@ var HvKpi = function HvKpi(props) {
       others = (0, _objectWithoutProperties2.default)(props, _excluded);
   var labels = (0, _utils.useLabels)(DEFAULT_LABELS, labelsProp);
   var InternalVisualComparison = typeof visualComparison === "string" ? _Typography.default : "div";
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
     id: id,
     className: (0, _clsx.default)(classes.root, className)
-  }, others), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "highlightText"
-  }, labels.title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.indicatorsContainer
-  }, visualIndicator != null && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.visualIndicatorContainer, classes.spacingToTheRight)
-  }, visualIndicator), labels.indicator && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: (0, _clsx.default)(classes.spacingToTheRight, classes.indicatorText),
-    variant: indicatorTextVariant
-  }, labels.indicator), labels.unit && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: classes.indicatorUnit,
-    variant: indicatorUnitTextVariant
-  }, labels.unit)), visualComparison != null && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.comparisonComposition
-  }, trendIndicator != null && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.trendLine, classes.spacingToTheRight)
-  }, trendIndicator), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.comparisonContainer
-  }, /*#__PURE__*/_react.default.createElement(InternalVisualComparison, {
-    className: (0, _clsx.default)(classes.comparisons, classes.spacingToTheRight),
-    variant: "highlightText"
-  }, visualComparison)), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.comparisonContainer
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: classes.comparisons,
-    variant: "vizText"
-  }, labels.comparisonIndicatorInfo)))));
+  }, others), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "highlightText",
+        children: labels.title
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.indicatorsContainer,
+      children: [visualIndicator != null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)(classes.visualIndicatorContainer, classes.spacingToTheRight),
+        children: visualIndicator
+      }), labels.indicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        className: (0, _clsx.default)(classes.spacingToTheRight, classes.indicatorText),
+        variant: indicatorTextVariant,
+        children: labels.indicator
+      }), labels.unit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        className: classes.indicatorUnit,
+        variant: indicatorUnitTextVariant,
+        children: labels.unit
+      })]
+    }), visualComparison != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.comparisonComposition,
+      children: [trendIndicator != null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)(classes.trendLine, classes.spacingToTheRight),
+        children: trendIndicator
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.comparisonContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalVisualComparison, {
+            className: (0, _clsx.default)(classes.comparisons, classes.spacingToTheRight),
+            variant: "highlightText",
+            children: visualComparison
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.comparisonContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            className: classes.comparisons,
+            variant: "vizText",
+            children: labels.comparisonIndicatorInfo
+          })
+        })]
+      })]
+    })]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvKpi.propTypes = {
@@ -205,7 +243,7 @@ process.env.NODE_ENV !== "production" ? HvKpi.propTypes = {
   indicatorUnitTextVariant: _propTypes.default.oneOf(["sTitle", "normalText"])
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvKpi"
 })(HvKpi);
 

package/dist/Kpi/Kpi.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kpi.js","names":["DEFAULT_LABELS","title","indicator","undefined","unit","comparisonIndicatorInfo","HvKpi","props","classes","className","id","labelsProp","labels","visualIndicator","visualComparison","trendIndicator","indicatorUnitTextVariant","indicatorTextVariant","others","useLabels","InternalVisualComparison","HvTypography","clsx","root","indicatorsContainer","visualIndicatorContainer","spacingToTheRight","indicatorText","indicatorUnit","comparisonComposition","trendLine","comparisonContainer","comparisons","propTypes","PropTypes","string","shape","isRequired","node","oneOf","withStyles","styles","name"],"sources":["../../src/Kpi/Kpi.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport HvTypography from \"../Typography\";\nimport styles from \"./styles\";\nimport { useLabels } from \"../utils\";\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\n\nconst HvKpi = (props) => {\n  const {\n    classes,\n    className,\n    id,\n    labels: labelsProp,\n    visualIndicator = null,\n    visualComparison = null,\n    trendIndicator = null,\n    indicatorUnitTextVariant = \"sTitle\",\n    indicatorTextVariant = \"lTitle\",\n    ...others\n  } = props;\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const InternalVisualComparison = typeof visualComparison === \"string\" ? HvTypography : \"div\";\n\n  return (\n    <div id={id} className={clsx(classes.root, className)} {...others}>\n      <div>\n        <HvTypography variant=\"highlightText\">{labels.title}</HvTypography>\n      </div>\n      <div className={classes.indicatorsContainer}>\n        {visualIndicator != null && (\n          <div className={clsx(classes.visualIndicatorContainer, classes.spacingToTheRight)}>\n            {visualIndicator}\n          </div>\n        )}\n        {labels.indicator && (\n          <HvTypography\n            className={clsx(classes.spacingToTheRight, classes.indicatorText)}\n            variant={indicatorTextVariant}\n          >\n            {labels.indicator}\n          </HvTypography>\n        )}\n        {labels.unit && (\n          <HvTypography className={classes.indicatorUnit} variant={indicatorUnitTextVariant}>\n            {labels.unit}\n          </HvTypography>\n        )}\n      </div>\n      {visualComparison != null && (\n        <div className={classes.comparisonComposition}>\n          {trendIndicator != null && (\n            <div className={clsx(classes.trendLine, classes.spacingToTheRight)}>\n              {trendIndicator}\n            </div>\n          )}\n          <div>\n            <div className={classes.comparisonContainer}>\n              <InternalVisualComparison\n                className={clsx(classes.comparisons, classes.spacingToTheRight)}\n                variant=\"highlightText\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </div>\n            <div className={classes.comparisonContainer}>\n              <HvTypography className={classes.comparisons} variant=\"vizText\">\n                {labels.comparisonIndicatorInfo}\n              </HvTypography>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nHvKpi.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 component styles applied.\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 visual indicator.\n     */\n    visualIndicatorContainer: PropTypes.string,\n    /**\n     * Styles applied to the component comparison.\n     */\n    comparisons: PropTypes.string,\n    /**\n     * Styles applied to the component comparison container.\n     */\n    comparisonContainer: PropTypes.string,\n    /**\n     * Styles applied to the component comparison composition wrapper.\n     */\n    comparisonComposition: PropTypes.string,\n    /**\n     * Styles applied to the component indicators.\n     */\n    indicatorsContainer: PropTypes.string,\n    /**\n     * Styles applied to the component indicators text.\n     */\n    indicatorText: PropTypes.string,\n    /**\n     * Styles applied to the component indicators unit.\n     */\n    indicatorUnit: PropTypes.string,\n    /**\n     * Styles applied to the component comparison container right spacing.\n     */\n    spacingToTheRight: PropTypes.string,\n    /**\n     * Styles applied to the component trend line.\n     */\n    trendLine: PropTypes.string,\n  }).isRequired,\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator: PropTypes.node,\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator: PropTypes.node,\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison: PropTypes.node,\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels: PropTypes.shape({\n    /**\n     * The text at the top of the kpi.\n     */\n    title: PropTypes.string,\n    /**\n     * The text in the middle of the kpi.\n     */\n    indicator: PropTypes.string,\n    /**\n     * The text to the right of the indicator.\n     */\n    unit: PropTypes.string,\n    /**\n     * the text to the right of the visual comparison.\n     */\n    comparisonIndicatorInfo: PropTypes.string,\n  }),\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant: PropTypes.oneOf([\"5xlTitle\", \"xxlTitle\", \"lTitle\", \"sTitle\"]),\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant: PropTypes.oneOf([\"sTitle\", \"normalText\"]),\n};\n\nexport default withStyles(styles, { name: \"HvKpi\" })(HvKpi);\n"],"mappings":"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"}
+{"version":3,"file":"Kpi.js","names":["DEFAULT_LABELS","title","indicator","undefined","unit","comparisonIndicatorInfo","HvKpi","props","classes","className","id","labelsProp","labels","visualIndicator","visualComparison","trendIndicator","indicatorUnitTextVariant","indicatorTextVariant","others","useLabels","InternalVisualComparison","HvTypography","clsx","root","indicatorsContainer","visualIndicatorContainer","spacingToTheRight","indicatorText","indicatorUnit","comparisonComposition","trendLine","comparisonContainer","comparisons","propTypes","PropTypes","string","shape","isRequired","node","oneOf","withStyles","styles","name"],"sources":["../../src/Kpi/Kpi.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\nimport HvTypography from \"../Typography\";\nimport styles from \"./styles\";\nimport { useLabels } from \"../utils\";\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\n\nconst HvKpi = (props) => {\n  const {\n    classes,\n    className,\n    id,\n    labels: labelsProp,\n    visualIndicator = null,\n    visualComparison = null,\n    trendIndicator = null,\n    indicatorUnitTextVariant = \"sTitle\",\n    indicatorTextVariant = \"lTitle\",\n    ...others\n  } = props;\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const InternalVisualComparison = typeof visualComparison === \"string\" ? HvTypography : \"div\";\n\n  return (\n    <div id={id} className={clsx(classes.root, className)} {...others}>\n      <div>\n        <HvTypography variant=\"highlightText\">{labels.title}</HvTypography>\n      </div>\n      <div className={classes.indicatorsContainer}>\n        {visualIndicator != null && (\n          <div className={clsx(classes.visualIndicatorContainer, classes.spacingToTheRight)}>\n            {visualIndicator}\n          </div>\n        )}\n        {labels.indicator && (\n          <HvTypography\n            className={clsx(classes.spacingToTheRight, classes.indicatorText)}\n            variant={indicatorTextVariant}\n          >\n            {labels.indicator}\n          </HvTypography>\n        )}\n        {labels.unit && (\n          <HvTypography className={classes.indicatorUnit} variant={indicatorUnitTextVariant}>\n            {labels.unit}\n          </HvTypography>\n        )}\n      </div>\n      {visualComparison != null && (\n        <div className={classes.comparisonComposition}>\n          {trendIndicator != null && (\n            <div className={clsx(classes.trendLine, classes.spacingToTheRight)}>\n              {trendIndicator}\n            </div>\n          )}\n          <div>\n            <div className={classes.comparisonContainer}>\n              <InternalVisualComparison\n                className={clsx(classes.comparisons, classes.spacingToTheRight)}\n                variant=\"highlightText\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </div>\n            <div className={classes.comparisonContainer}>\n              <HvTypography className={classes.comparisons} variant=\"vizText\">\n                {labels.comparisonIndicatorInfo}\n              </HvTypography>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nHvKpi.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 component styles applied.\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 visual indicator.\n     */\n    visualIndicatorContainer: PropTypes.string,\n    /**\n     * Styles applied to the component comparison.\n     */\n    comparisons: PropTypes.string,\n    /**\n     * Styles applied to the component comparison container.\n     */\n    comparisonContainer: PropTypes.string,\n    /**\n     * Styles applied to the component comparison composition wrapper.\n     */\n    comparisonComposition: PropTypes.string,\n    /**\n     * Styles applied to the component indicators.\n     */\n    indicatorsContainer: PropTypes.string,\n    /**\n     * Styles applied to the component indicators text.\n     */\n    indicatorText: PropTypes.string,\n    /**\n     * Styles applied to the component indicators unit.\n     */\n    indicatorUnit: PropTypes.string,\n    /**\n     * Styles applied to the component comparison container right spacing.\n     */\n    spacingToTheRight: PropTypes.string,\n    /**\n     * Styles applied to the component trend line.\n     */\n    trendLine: PropTypes.string,\n  }).isRequired,\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator: PropTypes.node,\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator: PropTypes.node,\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison: PropTypes.node,\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels: PropTypes.shape({\n    /**\n     * The text at the top of the kpi.\n     */\n    title: PropTypes.string,\n    /**\n     * The text in the middle of the kpi.\n     */\n    indicator: PropTypes.string,\n    /**\n     * The text to the right of the indicator.\n     */\n    unit: PropTypes.string,\n    /**\n     * the text to the right of the visual comparison.\n     */\n    comparisonIndicatorInfo: PropTypes.string,\n  }),\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant: PropTypes.oneOf([\"5xlTitle\", \"xxlTitle\", \"lTitle\", \"sTitle\"]),\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant: PropTypes.oneOf([\"sTitle\", \"normalText\"]),\n};\n\nexport default withStyles(styles, { name: \"HvKpi\" })(HvKpi);\n"],"mappings":"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"}

package/dist/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 // TODO: should have root or "component" class?
 export type HvLinkClassKey = "a";

package/dist/Link/Link.js

@@ -1,5 +1,19 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -15,12 +29,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
+
+var _styles2 = _interopRequireDefault(require("./styles"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["classes", "children", "route", "Component", "onClick", "data", "tabIndex"];
 
+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) { (0, _defineProperty2.default)(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; }
+
 var HvLink = function HvLink(props) {
   var classes = props.classes,
       children = props.children,
@@ -32,17 +52,20 @@ var HvLink = function HvLink(props) {
       _props$tabIndex = props.tabIndex,
       tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
       others = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return _onClick ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return _onClick ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
     role: "button",
     className: classes.a,
     onClick: function onClick(event) {
       return _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, data);
     },
     tabIndex: tabIndex
-  }, others), children) : /*#__PURE__*/_react.default.createElement("a", {
+  }, others), {}, {
+    children: children
+  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
     href: route,
-    className: classes.a
-  }, children);
+    className: classes.a,
+    children: children
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvLink.propTypes = {
@@ -88,7 +111,7 @@ process.env.NODE_ENV !== "production" ? HvLink.propTypes = {
   Component: _propTypes.default.elementType
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvLink"
 })(HvLink);
 

package/dist/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["HvLink","props","classes","children","route","Component","onClick","data","tabIndex","others","a","event","propTypes","PropTypes","shape","string","isRequired","node","func","number","instanceOf","Object","elementType","withStyles","styles","name"],"sources":["../../src/Link/Link.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst HvLink = (props) => {\n  const {\n    classes,\n    children,\n    route,\n    Component = \"div\",\n    onClick,\n    data,\n    tabIndex = 0,\n    ...others\n  } = props;\n\n  return onClick ? (\n    <Component\n      role=\"button\"\n      className={classes.a}\n      onClick={(event) => onClick?.(event, data)}\n      tabIndex={tabIndex}\n      {...others}\n    >\n      {children}\n    </Component>\n  ) : (\n    <a href={route} className={classes.a}>\n      {children}\n    </a>\n  );\n};\n\nHvLink.propTypes = {\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.\n     */\n    a: PropTypes.string,\n  }).isRequired,\n  /**\n   * Children.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Path route.\n   */\n  route: PropTypes.string.isRequired,\n  /**\n   * OnClick function.\n   */\n  onClick: PropTypes.func,\n  /**\n   * TabIndex.\n   */\n  tabIndex: PropTypes.number,\n  /**\n   * Data to be returned in the onClick function.\n   */\n  data: PropTypes.instanceOf(Object),\n  /**\n   * The component used for the link node.\n   * Either a string to use a DOM element or a component.\n   */\n  Component: PropTypes.elementType,\n};\n\nexport default withStyles(styles, { name: \"HvLink\" })(HvLink);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;EACxB,IACEC,OADF,GASID,KATJ,CACEC,OADF;EAAA,IAEEC,QAFF,GASIF,KATJ,CAEEE,QAFF;EAAA,IAGEC,KAHF,GASIH,KATJ,CAGEG,KAHF;EAAA,uBASIH,KATJ,CAIEI,SAJF;EAAA,IAIEA,SAJF,iCAIc,KAJd;EAAA,IAKEC,QALF,GASIL,KATJ,CAKEK,OALF;EAAA,IAMEC,IANF,GASIN,KATJ,CAMEM,IANF;EAAA,sBASIN,KATJ,CAOEO,QAPF;EAAA,IAOEA,QAPF,gCAOa,CAPb;EAAA,IAQKC,MARL,0CASIR,KATJ;EAWA,OAAOK,QAAO,gBACZ,6BAAC,SAAD;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAEJ,OAAO,CAACQ,CAFrB;IAGE,OAAO,EAAE,iBAACC,KAAD;MAAA,OAAWL,QAAX,aAAWA,QAAX,uBAAWA,QAAO,CAAGK,KAAH,EAAUJ,IAAV,CAAlB;IAAA,CAHX;IAIE,QAAQ,EAAEC;EAJZ,GAKMC,MALN,GAOGN,QAPH,CADY,gBAWZ;IAAG,IAAI,EAAEC,KAAT;IAAgB,SAAS,EAAEF,OAAO,CAACQ;EAAnC,GACGP,QADH,CAXF;AAeD,CA3BD;;AA6BA,wCAAAH,MAAM,CAACY,SAAP,GAAmB;EACjB;AACF;AACA;EACEV,OAAO,EAAEW,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,CAAC,EAAEG,kBAAA,CAAUE;EAJU,CAAhB,EAKNC,UATc;;EAUjB;AACF;AACA;EACEb,QAAQ,EAAEU,kBAAA,CAAUI,IAAV,CAAeD,UAbR;;EAcjB;AACF;AACA;EACEZ,KAAK,EAAES,kBAAA,CAAUE,MAAV,CAAiBC,UAjBP;;EAkBjB;AACF;AACA;EACEV,OAAO,EAAEO,kBAAA,CAAUK,IArBF;;EAsBjB;AACF;AACA;EACEV,QAAQ,EAAEK,kBAAA,CAAUM,MAzBH;;EA0BjB;AACF;AACA;EACEZ,IAAI,EAAEM,kBAAA,CAAUO,UAAV,CAAqBC,MAArB,CA7BW;;EA8BjB;AACF;AACA;AACA;EACEhB,SAAS,EAAEQ,kBAAA,CAAUS;AAlCJ,CAAnB;;eAqCe,IAAAC,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAuCzB,MAAvC,C"}
+{"version":3,"file":"Link.js","names":["HvLink","props","classes","children","route","Component","onClick","data","tabIndex","others","a","event","propTypes","PropTypes","shape","string","isRequired","node","func","number","instanceOf","Object","elementType","withStyles","styles","name"],"sources":["../../src/Link/Link.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\nconst HvLink = (props) => {\n  const {\n    classes,\n    children,\n    route,\n    Component = \"div\",\n    onClick,\n    data,\n    tabIndex = 0,\n    ...others\n  } = props;\n\n  return onClick ? (\n    <Component\n      role=\"button\"\n      className={classes.a}\n      onClick={(event) => onClick?.(event, data)}\n      tabIndex={tabIndex}\n      {...others}\n    >\n      {children}\n    </Component>\n  ) : (\n    <a href={route} className={classes.a}>\n      {children}\n    </a>\n  );\n};\n\nHvLink.propTypes = {\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.\n     */\n    a: PropTypes.string,\n  }).isRequired,\n  /**\n   * Children.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Path route.\n   */\n  route: PropTypes.string.isRequired,\n  /**\n   * OnClick function.\n   */\n  onClick: PropTypes.func,\n  /**\n   * TabIndex.\n   */\n  tabIndex: PropTypes.number,\n  /**\n   * Data to be returned in the onClick function.\n   */\n  data: PropTypes.instanceOf(Object),\n  /**\n   * The component used for the link node.\n   * Either a string to use a DOM element or a component.\n   */\n  Component: PropTypes.elementType,\n};\n\nexport default withStyles(styles, { name: \"HvLink\" })(HvLink);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;EACxB,IACEC,OADF,GASID,KATJ,CACEC,OADF;EAAA,IAEEC,QAFF,GASIF,KATJ,CAEEE,QAFF;EAAA,IAGEC,KAHF,GASIH,KATJ,CAGEG,KAHF;EAAA,uBASIH,KATJ,CAIEI,SAJF;EAAA,IAIEA,SAJF,iCAIc,KAJd;EAAA,IAKEC,QALF,GASIL,KATJ,CAKEK,OALF;EAAA,IAMEC,IANF,GASIN,KATJ,CAMEM,IANF;EAAA,sBASIN,KATJ,CAOEO,QAPF;EAAA,IAOEA,QAPF,gCAOa,CAPb;EAAA,IAQKC,MARL,0CASIR,KATJ;EAWA,OAAOK,QAAO,gBACZ,qBAAC,SAAD;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAEJ,OAAO,CAACQ,CAFrB;IAGE,OAAO,EAAE,iBAACC,KAAD;MAAA,OAAWL,QAAX,aAAWA,QAAX,uBAAWA,QAAO,CAAGK,KAAH,EAAUJ,IAAV,CAAlB;IAAA,CAHX;IAIE,QAAQ,EAAEC;EAJZ,GAKMC,MALN;IAAA,UAOGN;EAPH,GADY,gBAWZ;IAAG,IAAI,EAAEC,KAAT;IAAgB,SAAS,EAAEF,OAAO,CAACQ,CAAnC;IAAA,UACGP;EADH,EAXF;AAeD,CA3BD;;AA6BA,wCAAAH,MAAM,CAACY,SAAP,GAAmB;EACjB;AACF;AACA;EACEV,OAAO,EAAEW,kBAAA,CAAUC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,CAAC,EAAEG,kBAAA,CAAUE;EAJU,CAAhB,EAKNC,UATc;;EAUjB;AACF;AACA;EACEb,QAAQ,EAAEU,kBAAA,CAAUI,IAAV,CAAeD,UAbR;;EAcjB;AACF;AACA;EACEZ,KAAK,EAAES,kBAAA,CAAUE,MAAV,CAAiBC,UAjBP;;EAkBjB;AACF;AACA;EACEV,OAAO,EAAEO,kBAAA,CAAUK,IArBF;;EAsBjB;AACF;AACA;EACEV,QAAQ,EAAEK,kBAAA,CAAUM,MAzBH;;EA0BjB;AACF;AACA;EACEZ,IAAI,EAAEM,kBAAA,CAAUO,UAAV,CAAqBC,MAArB,CA7BW;;EA8BjB;AACF;AACA;AACA;EACEhB,SAAS,EAAEQ,kBAAA,CAAUS;AAlCJ,CAAnB;;eAqCe,IAAAC,kBAAA,EAAWC,gBAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAuCzB,MAAvC,C"}

package/dist/List/List.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 export interface ListValueProp {
   id?: string | number;

package/dist/List/List.js

@@ -37,10 +37,10 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.find-index.js");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -53,7 +53,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactWindow = require("react-window");
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 
@@ -63,7 +63,9 @@ var _useSelectableList3 = _interopRequireDefault(require("./useSelectableList"))
 
 var _ = require("..");
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["id", "classes", "className", "multiSelect", "hasTooltips", "showSelectAll", "labels", "useSelector", "selectable", "singleSelectionToggle", "condensed", "onChange", "onClick", "values", "height", "virtualized"];
 
@@ -172,12 +174,19 @@ var HvList = function HvList(props) {
         selectionConjunction = labels.selectionConjunction;
     var anySelected = !!(selection !== null && selection !== void 0 && selection.length);
     var allSelected = selection.length === list.length;
-
-    var selectionLabel = /*#__PURE__*/_react.default.createElement(_.HvTypography, {
-      component: "span"
-    }, !anySelected ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("b", null, selectAll), " (".concat(list.length, ")")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("b", null, selection.length), "\xA0".concat(selectionConjunction, "\xA0"), list.length));
-
-    return /*#__PURE__*/_react.default.createElement(_.HvCheckBox, {
+    var selectionLabel = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvTypography, {
+      component: "span",
+      children: !anySelected ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: selectAll
+        }), " (".concat(list.length, ")")]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: selection.length
+        }), "\xA0".concat(selectionConjunction, "\xA0"), list.length]
+      })
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvCheckBox, {
       id: (0, _.setId)(id, "select-all"),
       label: selectionLabel,
       onChange: handleSelectAll,
@@ -189,18 +198,18 @@ var HvList = function HvList(props) {
 
   var renderItemText = function renderItemText(item) {
     var ItemText = (0, _utils.wrapperTooltip)(hasTooltips, item.label, item.label);
-    return !multiSelect && item.path ? /*#__PURE__*/_react.default.createElement(_.HvLink, {
-      key: item.label,
+    return !multiSelect && item.path ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvLink, {
       route: item.path,
       classes: {
         a: classes.link
-      }
-    }, /*#__PURE__*/_react.default.createElement(ItemText, null)) : /*#__PURE__*/_react.default.createElement(ItemText, null);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemText, {})
+    }, item.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemText, {});
   };
 
   var renderMultiSelectItem = function renderMultiSelectItem(item, itemId) {
     if (useSelector) {
-      var Selection = (0, _utils.wrapperTooltip)(hasTooltips, /*#__PURE__*/_react.default.createElement(_.HvCheckBox, {
+      var Selection = (0, _utils.wrapperTooltip)(hasTooltips, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvCheckBox, {
         id: (0, _.setId)(itemId, "selector"),
         label: item.label,
         checked: item.selected,
@@ -214,7 +223,7 @@ var HvList = function HvList(props) {
           label: classes.truncate
         }
       }), item.label);
-      return /*#__PURE__*/_react.default.createElement(Selection, null);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Selection, {});
     }
 
     return renderItemText(item);
@@ -222,7 +231,7 @@ var HvList = function HvList(props) {
 
   var renderSingleSelectItem = function renderSingleSelectItem(item, itemId) {
     if (useSelector) {
-      var Selection = (0, _utils.wrapperTooltip)(hasTooltips, /*#__PURE__*/_react.default.createElement(_.HvRadio, {
+      var Selection = (0, _utils.wrapperTooltip)(hasTooltips, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvRadio, {
         id: (0, _.setId)(itemId, "selector"),
         label: item.label,
         checked: item.selected,
@@ -233,7 +242,7 @@ var HvList = function HvList(props) {
           label: classes.truncate
         }
       }), item.label);
-      return /*#__PURE__*/_react.default.createElement(Selection, null);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Selection, {});
     }
 
     return renderItemText(item);
@@ -249,8 +258,7 @@ var HvList = function HvList(props) {
       startAdornment = renderLeftIcon(item);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_.HvListItem, (0, _extends2.default)({
-      key: i,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListItem, _objectSpread(_objectSpread({
       id: itemId,
       role: selectable ? "option" : "menuitem",
       disabled: item.disabled || undefined,
@@ -263,11 +271,13 @@ var HvList = function HvList(props) {
         return handleSelect(evt, item);
       },
       startAdornment: startAdornment,
-      endAdornment: item.showNavIcon && /*#__PURE__*/_react.default.createElement(_uikitReactIcons.DropRightXS, {
+      endAdornment: item.showNavIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.DropRightXS, {
         className: classes.box,
         iconSize: "XS"
       })
-    }, otherProps), multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId));
+    }, otherProps), {}, {
+      children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
+    }), i);
   };
 
   var filteredList = list.filter(function (it) {
@@ -315,7 +325,7 @@ var HvList = function HvList(props) {
   var renderFixedList = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       var rest = (0, _extends2.default)({}, _ref2);
-      return /*#__PURE__*/_react.default.createElement(_.HvListContainer, (0, _extends2.default)({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListContainer, _objectSpread({
         id: id,
         className: (0, _clsx.default)(className, classes.root),
         role: selectable ? "listbox" : "menu",
@@ -327,25 +337,31 @@ var HvList = function HvList(props) {
       }, rest));
     });
   }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, multiSelect && useSelector && showSelectAll && renderSelectAll(), filteredList.length > 0 && !virtualized && /*#__PURE__*/_react.default.createElement(_.HvListContainer, (0, _extends2.default)({
-    id: id,
-    className: (0, _clsx.default)(className, classes.root),
-    role: selectable ? "listbox" : "menu",
-    interactive: true,
-    condensed: condensed,
-    disableGutters: useSelector,
-    "aria-multiselectable": selectable && multiSelect || undefined
-  }, others), filteredList.map(function (item, i) {
-    return renderListItem(item, i);
-  })), filteredList.length > 0 && virtualized && /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, (0, _extends2.default)({
-    ref: listRef,
-    className: classes.virtualizedRoot,
-    height: height + 5,
-    width: "100%",
-    itemCount: filteredList.length,
-    itemSize: condensed ? 32 : 40,
-    innerElementType: renderFixedList
-  }, others), ListItem));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [multiSelect && useSelector && showSelectAll && renderSelectAll(), filteredList.length > 0 && !virtualized && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListContainer, _objectSpread(_objectSpread({
+      id: id,
+      className: (0, _clsx.default)(className, classes.root),
+      role: selectable ? "listbox" : "menu",
+      interactive: true,
+      condensed: condensed,
+      disableGutters: useSelector,
+      "aria-multiselectable": selectable && multiSelect || undefined
+    }, others), {}, {
+      children: filteredList.map(function (item, i) {
+        return renderListItem(item, i);
+      })
+    })), filteredList.length > 0 && virtualized && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactWindow.FixedSizeList, _objectSpread(_objectSpread({
+      ref: listRef,
+      className: classes.virtualizedRoot,
+      height: height + 5,
+      width: "100%",
+      itemCount: filteredList.length,
+      itemSize: condensed ? 32 : 40,
+      innerElementType: renderFixedList
+    }, others), {}, {
+      children: ListItem
+    }))]
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvList.propTypes = {
@@ -511,7 +527,7 @@ process.env.NODE_ENV !== "production" ? HvList.propTypes = {
   virtualized: _propTypes.default.bool
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvList"
 })(HvList);