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

package/dist/DotPagination/DotPagination.js

@@ -0,0 +1,176 @@
+"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", {
+  value: true
+});
+exports.getSelectorIcons = exports.default = void 0;
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@mui/styles");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _ = require("..");
+
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel"];
+
+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 getSelectorIcons = function getSelectorIcons(classes, options) {
+  var disabled = options.disabled;
+  var color = disabled && ["atmo3", "atmo5"] || undefined;
+  var checkedColor = disabled && ["atmo3", "atmo5"] || undefined;
+  return {
+    radio: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.RadioButtonUnselected, {
+      color: color,
+      className: classes.icon,
+      iconSize: "XS"
+    }),
+    radioChecked: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.CurrentStep, {
+      color: checkedColor,
+      className: classes.icon,
+      iconSize: "XS"
+    })
+  };
+};
+/**
+ * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.
+ * This component uses Radio Buttons to represent each page.
+ */
+
+
+exports.getSelectorIcons = getSelectorIcons;
+
+var HvDotPagination = function HvDotPagination(props) {
+  var className = props.className,
+      classes = props.classes,
+      _props$pages = props.pages,
+      pages = _props$pages === void 0 ? 1 : _props$pages,
+      _props$page = props.page,
+      page = _props$page === void 0 ? 0 : _props$page,
+      onPageChange = props.onPageChange,
+      getItemAriaLabel = props.getItemAriaLabel,
+      others = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var range = function range(n) {
+    return Array.from(Array(n), function (v, i) {
+      return i;
+    });
+  };
+
+  var icons = getSelectorIcons(classes, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvRadioGroup, _objectSpread(_objectSpread({
+    className: (0, _clsx.default)(className, classes.root),
+    classes: {
+      horizontal: classes.horizontal
+    },
+    orientation: "horizontal"
+  }, others), {}, {
+    children: range(pages).map(function (i) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvRadio, {
+        classes: {
+          root: classes.radioRoot
+        },
+        value: i,
+        checked: page === i,
+        onChange: function onChange(event) {
+          return onPageChange(event, i);
+        },
+        icon: icons.radio,
+        checkedIcon: icons.radioChecked,
+        "aria-label": getItemAriaLabel(i)
+      }, i);
+    })
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the radio button group to overrrite horizontal class margins.
+     */
+    horizontal: _propTypes.default.string,
+
+    /**
+     *  Styles applied to the radio root ( to override radio group horizontal )
+     */
+    radioRoot: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   *  The number of pages the component has.
+   */
+  pages: _propTypes.default.number,
+
+  /**
+   * The currently selected page.
+   */
+  page: _propTypes.default.number,
+
+  /**
+   * Function called when the page changes.
+   */
+  onPageChange: _propTypes.default.func,
+
+  /**
+   * Function called to get the respective aria label.
+   */
+  getItemAriaLabel: _propTypes.default.func
+} : void 0;
+
+var _default = (0, _styles.withStyles)(_styles2.default, {
+  name: "HvDotPagination"
+})(HvDotPagination);
+
+exports.default = _default;
+//# sourceMappingURL=DotPagination.js.map

package/dist/DotPagination/DotPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotPagination.js","names":["getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","v","i","icons","clsx","root","horizontal","map","radioRoot","event","propTypes","PropTypes","string","shape","isRequired","number","func","withStyles","styles","name"],"sources":["../../src/DotPagination/DotPagination.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\nimport { CurrentStep, RadioButtonUnselected } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvRadio, HvRadioGroup } from \"..\";\nimport styles from \"./styles\";\n\nexport const getSelectorIcons = (classes, options) => {\n  const { disabled } = options;\n  const color = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n  const checkedColor = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} iconSize=\"XS\" />,\n    radioChecked: <CurrentStep color={checkedColor} className={classes.icon} iconSize=\"XS\" />,\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nconst HvDotPagination = (props) => {\n  const {\n    className,\n    classes,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = props;\n\n  const range = (n) => Array.from(Array(n), (v, i) => i);\n\n  const icons = getSelectorIcons(classes, {});\n\n  return (\n    <HvRadioGroup\n      className={clsx(className, classes.root)}\n      classes={{ horizontal: classes.horizontal }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{ root: classes.radioRoot }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n\nHvDotPagination.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the radio button group to overrrite horizontal class margins.\n     */\n    horizontal: PropTypes.string,\n    /**\n     *  Styles applied to the radio root ( to override radio group horizontal )\n     */\n    radioRoot: PropTypes.string,\n  }).isRequired,\n  /**\n   *  The number of pages the component has.\n   */\n  pages: PropTypes.number,\n  /**\n   * The currently selected page.\n   */\n  page: PropTypes.number,\n  /**\n   * Function called when the page changes.\n   */\n  onPageChange: PropTypes.func,\n  /**\n   * Function called to get the respective aria label.\n   */\n  getItemAriaLabel: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDotPagination\" })(HvDotPagination);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAUC,OAAV,EAAsB;EACpD,IAAQC,QAAR,GAAqBD,OAArB,CAAQC,QAAR;EACA,IAAMC,KAAK,GAAID,QAAQ,IAAI,CAAC,OAAD,EAAU,OAAV,CAAb,IAAoCE,SAAlD;EACA,IAAMC,YAAY,GAAIH,QAAQ,IAAI,CAAC,OAAD,EAAU,OAAV,CAAb,IAAoCE,SAAzD;EAEA,OAAO;IACLE,KAAK,eAAE,qBAAC,sCAAD;MAAuB,KAAK,EAAEH,KAA9B;MAAqC,SAAS,EAAEH,OAAO,CAACO,IAAxD;MAA8D,QAAQ,EAAC;IAAvE,EADF;IAELC,YAAY,eAAE,qBAAC,4BAAD;MAAa,KAAK,EAAEH,YAApB;MAAkC,SAAS,EAAEL,OAAO,CAACO,IAArD;MAA2D,QAAQ,EAAC;IAApE;EAFT,CAAP;AAID,CATM;AAWP;AACA;AACA;AACA;;;;;AACA,IAAME,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAW;EACjC,IACEC,SADF,GAQID,KARJ,CACEC,SADF;EAAA,IAEEX,OAFF,GAQIU,KARJ,CAEEV,OAFF;EAAA,mBAQIU,KARJ,CAGEE,KAHF;EAAA,IAGEA,KAHF,6BAGU,CAHV;EAAA,kBAQIF,KARJ,CAIEG,IAJF;EAAA,IAIEA,IAJF,4BAIS,CAJT;EAAA,IAKEC,YALF,GAQIJ,KARJ,CAKEI,YALF;EAAA,IAMEC,gBANF,GAQIL,KARJ,CAMEK,gBANF;EAAA,IAOKC,MAPL,0CAQIN,KARJ;;EAUA,IAAMO,KAAK,GAAG,SAARA,KAAQ,CAACC,CAAD;IAAA,OAAOC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACD,CAAD,CAAhB,EAAqB,UAACG,CAAD,EAAIC,CAAJ;MAAA,OAAUA,CAAV;IAAA,CAArB,CAAP;EAAA,CAAd;;EAEA,IAAMC,KAAK,GAAGxB,gBAAgB,CAACC,OAAD,EAAU,EAAV,CAA9B;EAEA,oBACE,qBAAC,cAAD;IACE,SAAS,EAAE,IAAAwB,aAAA,EAAKb,SAAL,EAAgBX,OAAO,CAACyB,IAAxB,CADb;IAEE,OAAO,EAAE;MAAEC,UAAU,EAAE1B,OAAO,CAAC0B;IAAtB,CAFX;IAGE,WAAW,EAAC;EAHd,GAIMV,MAJN;IAAA,UAMGC,KAAK,CAACL,KAAD,CAAL,CAAae,GAAb,CAAiB,UAACL,CAAD;MAAA,oBAChB,qBAAC,SAAD;QACE,OAAO,EAAE;UAAEG,IAAI,EAAEzB,OAAO,CAAC4B;QAAhB,CADX;QAGE,KAAK,EAAEN,CAHT;QAIE,OAAO,EAAET,IAAI,KAAKS,CAJpB;QAKE,QAAQ,EAAE,kBAACO,KAAD;UAAA,OAAWf,YAAY,CAACe,KAAD,EAAQP,CAAR,CAAvB;QAAA,CALZ;QAME,IAAI,EAAEC,KAAK,CAACjB,KANd;QAOE,WAAW,EAAEiB,KAAK,CAACf,YAPrB;QAQE,cAAYO,gBAAgB,CAACO,CAAD;MAR9B,GAEOA,CAFP,CADgB;IAAA,CAAjB;EANH,GADF;AAqBD,CApCD;;AAsCA,wCAAAb,eAAe,CAACqB,SAAhB,GAA4B;EAC1B;AACF;AACA;EACEnB,SAAS,EAAEoB,kBAAA,CAAUC,MAJK;;EAK1B;AACF;AACA;EACEhC,OAAO,EAAE+B,kBAAA,CAAUE,KAAV,CAAgB;IACvB;AACJ;AACA;IACIR,IAAI,EAAEM,kBAAA,CAAUC,MAJO;;IAKvB;AACJ;AACA;IACIN,UAAU,EAAEK,kBAAA,CAAUC,MARC;;IASvB;AACJ;AACA;IACIJ,SAAS,EAAEG,kBAAA,CAAUC;EAZE,CAAhB,EAaNE,UArBuB;;EAsB1B;AACF;AACA;EACEtB,KAAK,EAAEmB,kBAAA,CAAUI,MAzBS;;EA0B1B;AACF;AACA;EACEtB,IAAI,EAAEkB,kBAAA,CAAUI,MA7BU;;EA8B1B;AACF;AACA;EACErB,YAAY,EAAEiB,kBAAA,CAAUK,IAjCE;;EAkC1B;AACF;AACA;EACErB,gBAAgB,EAAEgB,kBAAA,CAAUK;AArCF,CAA5B;;eAwCe,IAAAC,kBAAA,EAAWC,gBAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAgD9B,eAAhD,C"}

package/dist/DotPagination/index.d.ts

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

package/dist/DotPagination/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DotPagination.default;
+  }
+});
+
+var _DotPagination = _interopRequireDefault(require("./DotPagination"));
+//# sourceMappingURL=index.js.map

package/dist/DotPagination/index.js.map

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

package/dist/DotPagination/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles() {
+  return {
+    root: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    horizontal: {
+      marginLeft: 0,
+      width: "auto"
+    },
+    radioRoot: {
+      marginLeft: "0"
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/DotPagination/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","display","justifyContent","horizontal","marginLeft","width","radioRoot"],"sources":["../../src/DotPagination/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: \"0\",\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;MACJC,OAAO,EAAE,MADL;MAEJC,cAAc,EAAE;IAFZ,CADc;IAMpBC,UAAU,EAAE;MACVC,UAAU,EAAE,CADF;MAEVC,KAAK,EAAE;IAFG,CANQ;IAWpBC,SAAS,EAAE;MACTF,UAAU,EAAE;IADH;EAXS,CAAP;AAAA,CAAf;;eAgBeL,M"}

package/dist/DropDownMenu/DropDownMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconButtonProps, StandardProps } from "@material-ui/core";
+import { IconButtonProps, StandardProps } from "@mui/material";
 import { ListValueProp } from "../List";
 
 export type HvDropDownMenuClassKey =

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,5 +1,17 @@
 "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.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");
+
 require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.string.iterator.js");
@@ -8,8 +20,6 @@ require("core-js/modules/es.weak-map.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -21,7 +31,7 @@ exports.default = void 0;
 
 require("core-js/modules/es.object.to-string.js");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -33,9 +43,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _deprecatedPropType = _interopRequireDefault(require("@material-ui/core/utils/deprecatedPropType"));
+var _material = require("@mui/material");
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 
@@ -43,16 +53,22 @@ var _utils = require("../utils");
 
 var _ = require("..");
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
 
 var _withId = _interopRequireDefault(require("../withId"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["id", "classes", "className", "icon", "placement", "dataList", "disablePortal", "onToggle", "onToggleOpen", "onClick", "keepOpened", "disabled", "expanded", "defaultExpanded", "category"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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; }
+
 /**
  * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
  */
@@ -84,7 +100,7 @@ var DropDownMenu = function DropDownMenu(_ref) {
       open = _useControlled2[0],
       setOpen = _useControlled2[1];
 
-  var theme = (0, _core.useTheme)();
+  var theme = (0, _styles.useTheme)();
   var focusNodes = (0, _utils.getPrevNextFocus)((0, _.setId)(id, "icon-button"));
   var listId = (0, _.setId)(id, "list");
 
@@ -114,18 +130,18 @@ var DropDownMenu = function DropDownMenu(_ref) {
     containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$getElem = containerRef.getElementsByTagName("li")[0]) === null || _containerRef$getElem === void 0 ? void 0 : _containerRef$getElem.focus();
   };
 
-  var headerComponent = /*#__PURE__*/_react.default.createElement(_.HvButton, {
+  var headerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvButton, {
     icon: true,
     category: category,
     id: (0, _.setId)(id, "icon-button"),
     className: (0, _clsx.default)(classes.icon, open && classes.iconSelected),
     "aria-expanded": open,
     disabled: disabled,
-    "aria-label": "Dropdown menu"
-  }, icon || /*#__PURE__*/_react.default.createElement(_uikitReactIcons.MoreOptionsVertical, {
-    color: disabled ? "atmo5" : undefined
-  }));
-
+    "aria-label": "Dropdown menu",
+    children: icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.MoreOptionsVertical, {
+      color: disabled ? "atmo5" : undefined
+    })
+  });
   var condensed = (0, _react.useMemo)(function () {
     return dataList.every(function (el) {
       return !el.icon;
@@ -137,7 +153,7 @@ var DropDownMenu = function DropDownMenu(_ref) {
       width: null
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_.HvBaseDropdown, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvBaseDropdown, _objectSpread(_objectSpread({
     id: id,
     className: (0, _clsx.default)(className, classes.container),
     classes: {
@@ -159,20 +175,24 @@ var DropDownMenu = function DropDownMenu(_ref) {
     disabled: disabled,
     onContainerCreation: setFocusToContent,
     popperProps: popperStyle
-  }, others), /*#__PURE__*/_react.default.createElement(_.HvPanel, null, /*#__PURE__*/_react.default.createElement(_.HvList, {
-    id: listId,
-    values: dataList,
-    selectable: false,
-    condensed: condensed,
-    onClick: function onClick(event, item) {
-      if (!keepOpened) handleClose(event);
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, item);
-    },
-    onKeyDown: handleKeyDown,
-    classes: {
-      root: classes.menuList
-    }
-  })));
+  }, others), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvPanel, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvList, {
+        id: listId,
+        values: dataList,
+        selectable: false,
+        condensed: condensed,
+        onClick: function onClick(event, item) {
+          if (!keepOpened) handleClose(event);
+          _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, item);
+        },
+        onKeyDown: handleKeyDown,
+        classes: {
+          root: classes.menuList
+        }
+      })
+    })
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? DropDownMenu.propTypes = {
@@ -256,7 +276,7 @@ process.env.NODE_ENV !== "production" ? DropDownMenu.propTypes = {
   /**
    * Function executed on toggle of the dropdown. Should receive the open status.
    */
-  onToggleOpen: (0, _deprecatedPropType.default)(_propTypes.default.func, "Instead use the onToggle prop which receives the event"),
+  onToggleOpen: (0, _material.deprecatedPropType)(_propTypes.default.func, "Instead use the onToggle prop which receives the event"),
 
   /**
    * Function executed on toggle of the dropdown. Should receive the open status.
@@ -289,7 +309,7 @@ process.env.NODE_ENV !== "production" ? DropDownMenu.propTypes = {
   defaultExpanded: _propTypes.default.bool
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvDropDownMenu"
 })((0, _withId.default)(DropDownMenu));
 

package/dist/DropDownMenu/DropDownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","names":["DropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onToggleOpen","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useControlled","Boolean","open","setOpen","theme","useTheme","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","KeyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","clsx","iconSelected","undefined","condensed","useMemo","every","el","popperStyle","style","zIndex","tooltip","width","container","root","baseContainer","e","s","item","menuList","propTypes","PropTypes","string","shape","isRequired","element","arrayOf","label","selected","bool","oneOfType","func","showNavIcon","oneOf","deprecatedPropType","withStyles","styles","name","withId"],"sources":["../../src/DropDownMenu/DropDownMenu.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport deprecatedPropType from \"@material-ui/core/utils/deprecatedPropType\";\nimport { withStyles, useTheme } from \"@material-ui/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { getPrevNextFocus, isKeypress, KeyboardCodes, useControlled } from \"../utils\";\nimport { HvButton, HvList, HvPanel, HvBaseDropdown, setId } from \"..\";\nimport styles from \"./styles\";\nimport withId from \"../withId\";\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nconst DropDownMenu = ({\n  id,\n  classes,\n  className,\n  icon,\n  placement = \"right\",\n  dataList,\n  disablePortal = false,\n  onToggle,\n  onToggleOpen,\n  onClick,\n  keepOpened = true,\n  disabled = false,\n  expanded,\n  defaultExpanded = false,\n  // eslint-disable-next-line\n  category,\n  ...others\n}) => {\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const theme = useTheme();\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggleOpen?.(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, KeyboardCodes.Tab)) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent = (containerRef) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const headerComponent = (\n    <HvButton\n      icon\n      category={category}\n      id={setId(id, \"icon-button\")}\n      className={clsx(classes.icon, {\n        [classes.iconSelected]: open,\n      })}\n      aria-expanded={open}\n      disabled={disabled}\n      aria-label=\"Dropdown menu\"\n    >\n      {icon || <MoreOptionsVertical color={disabled ? \"atmo5\" : undefined} />}\n    </HvButton>\n  );\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle = {\n    style: { zIndex: theme.zIndex.tooltip, width: null },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={clsx(className, classes.container)}\n      classes={{ root: classes.root, container: classes.baseContainer }}\n      expanded={open && !disabled}\n      component={headerComponent}\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggleOpen?.(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{ root: classes.menuList }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nDropDownMenu.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 root.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the container.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the BaseDropdown container.\n     */\n    baseContainer: PropTypes.string,\n    /**\n     * Styles applied to the icon.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the icon when selected.\n     */\n    iconSelected: PropTypes.string,\n    /**\n     * Styles applied to the list.\n     */\n    menuList: PropTypes.string,\n  }).isRequired,\n  /**\n   * Icon.\n   */\n  icon: PropTypes.element,\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.node.isRequired,\n      selected: PropTypes.bool,\n      disabled: PropTypes.bool,\n      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n      showNavIcon: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Placement of the dropdown.\n   */\n  placement: PropTypes.oneOf([\"left\", \"right\"]),\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal: PropTypes.bool,\n  /**\n   * Function executed on toggle of the dropdown. Should receive the open status.\n   */\n  onToggleOpen: deprecatedPropType(\n    PropTypes.func,\n    \"Instead use the onToggle prop which receives the event\"\n  ),\n  /**\n   * Function executed on toggle of the dropdown. Should receive the open status.\n   */\n  onToggle: PropTypes.func,\n  /**\n   * Function executed in each onClick. Should received the clicked element.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Keep the Dropdown Menu opened after clicking one option\n   */\n  keepOpened: PropTypes.bool,\n  /**\n   * Defines if the component is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * If true it should be displayed open.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDropDownMenu\" })(withId(DropDownMenu));\n"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","names":["DropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onToggleOpen","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useControlled","Boolean","open","setOpen","theme","useTheme","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","KeyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","clsx","iconSelected","undefined","condensed","useMemo","every","el","popperStyle","style","zIndex","tooltip","width","container","root","baseContainer","e","s","item","menuList","propTypes","PropTypes","string","shape","isRequired","element","arrayOf","label","selected","bool","oneOfType","func","showNavIcon","oneOf","deprecatedPropType","withStyles","styles","name","withId"],"sources":["../../src/DropDownMenu/DropDownMenu.js"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType } from \"@mui/material\";\nimport { withStyles, useTheme } from \"@mui/styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { getPrevNextFocus, isKeypress, KeyboardCodes, useControlled } from \"../utils\";\nimport { HvButton, HvList, HvPanel, HvBaseDropdown, setId } from \"..\";\nimport styles from \"./styles\";\nimport withId from \"../withId\";\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nconst DropDownMenu = ({\n  id,\n  classes,\n  className,\n  icon,\n  placement = \"right\",\n  dataList,\n  disablePortal = false,\n  onToggle,\n  onToggleOpen,\n  onClick,\n  keepOpened = true,\n  disabled = false,\n  expanded,\n  defaultExpanded = false,\n  // eslint-disable-next-line\n  category,\n  ...others\n}) => {\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const theme = useTheme();\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggleOpen?.(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, KeyboardCodes.Tab)) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent = (containerRef) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const headerComponent = (\n    <HvButton\n      icon\n      category={category}\n      id={setId(id, \"icon-button\")}\n      className={clsx(classes.icon, {\n        [classes.iconSelected]: open,\n      })}\n      aria-expanded={open}\n      disabled={disabled}\n      aria-label=\"Dropdown menu\"\n    >\n      {icon || <MoreOptionsVertical color={disabled ? \"atmo5\" : undefined} />}\n    </HvButton>\n  );\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle = {\n    style: { zIndex: theme.zIndex.tooltip, width: null },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={clsx(className, classes.container)}\n      classes={{ root: classes.root, container: classes.baseContainer }}\n      expanded={open && !disabled}\n      component={headerComponent}\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggleOpen?.(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{ root: classes.menuList }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nDropDownMenu.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 root.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the container.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the BaseDropdown container.\n     */\n    baseContainer: PropTypes.string,\n    /**\n     * Styles applied to the icon.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the icon when selected.\n     */\n    iconSelected: PropTypes.string,\n    /**\n     * Styles applied to the list.\n     */\n    menuList: PropTypes.string,\n  }).isRequired,\n  /**\n   * Icon.\n   */\n  icon: PropTypes.element,\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.node.isRequired,\n      selected: PropTypes.bool,\n      disabled: PropTypes.bool,\n      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n      showNavIcon: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Placement of the dropdown.\n   */\n  placement: PropTypes.oneOf([\"left\", \"right\"]),\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal: PropTypes.bool,\n  /**\n   * Function executed on toggle of the dropdown. Should receive the open status.\n   */\n  onToggleOpen: deprecatedPropType(\n    PropTypes.func,\n    \"Instead use the onToggle prop which receives the event\"\n  ),\n  /**\n   * Function executed on toggle of the dropdown. Should receive the open status.\n   */\n  onToggle: PropTypes.func,\n  /**\n   * Function executed in each onClick. Should received the clicked element.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Keep the Dropdown Menu opened after clicking one option\n   */\n  keepOpened: PropTypes.bool,\n  /**\n   * Defines if the component is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * If true it should be displayed open.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDropDownMenu\" })(withId(DropDownMenu));\n"],"mappings":"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"}

package/dist/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
-import { StandardProps } from "@material-ui/core";
-import { PopperProps } from "@material-ui/core/Popper";
+import { StandardProps } from "@mui/material";
+import { PopperProps } from "@mui/material/Popper";
 import { ListLabelsProp, ListValueProp, HvListProps } from "../List";
 import { HvFormElementProps, HvBaseDropdownProps } from "..";