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

package/dist/modern/Pagination/Pagination.js

@@ -1,11 +1,17 @@
-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", "pages", "page", "showPageSizeOptions", "pageSizeOptions", "pageSize", "showPageJump", "canPrevious", "canNext", "onPageChange", "onPageSizeChange", "labels", "showPageProps", "navigationProps", "currentPageInputProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles, Hidden } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
+import { Hidden } from "@mui/material";
 import { Start, End, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { isKeypress, KeyboardCodes } from "../utils/KeyboardUtils";
 import { HvInput, HvTypography } from "..";
@@ -14,6 +20,9 @@ import ButtonIconTooltip from "./ButtonIconTooltip";
 import Select, { Option } from "./Select";
 import { usePageInput, getSafePage, setColor } from "./utils";
 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 DEFAULT_LABELS = {
   pageSizePrev: "Show",
   pageSizeEntryName: "rows",
@@ -84,108 +93,132 @@ const Pagination = _ref => {
 
   }, [handleInputChange, page]);
 
-  const renderPageJump = () => /*#__PURE__*/React.createElement("div", {
-    className: classes.pageJump
-  }, /*#__PURE__*/React.createElement(HvInput, _extends({
-    id: setId(id, "currentPage"),
-    labels: labels,
-    inputProps: {
-      "aria-label": labels.paginationInputLabel,
-      // we really want the native number input
-      type: "number"
-    },
-    classes: {
-      root: classes.pageSizeInputContainer,
-      input: classes.pageSizeInput,
-      inputRoot: classes.pageSizeInputRoot
-    },
-    onChange: handleInputChange,
-    value: String(pageInput),
-    onBlur: (evt, value) => changePage(value - 1),
-    onKeyDown: (evt, value) => isKeypress(evt, Enter) && changePage(value - 1),
-    disabled: pageSize === 0,
-    disableClear: true
-  }, currentPageInputProps)));
-
-  return /*#__PURE__*/React.createElement("div", _extends({
+  const renderPageJump = () => /*#__PURE__*/_jsx("div", {
+    className: classes.pageJump,
+    children: /*#__PURE__*/_jsx(HvInput, _objectSpread({
+      id: setId(id, "currentPage"),
+      labels: labels,
+      inputProps: {
+        "aria-label": labels.paginationInputLabel,
+        // we really want the native number input
+        type: "number"
+      },
+      classes: {
+        root: classes.pageSizeInputContainer,
+        input: classes.pageSizeInput,
+        inputRoot: classes.pageSizeInputRoot
+      },
+      onChange: handleInputChange,
+      value: String(pageInput),
+      onBlur: (evt, value) => changePage(value - 1),
+      onKeyDown: (evt, value) => isKeypress(evt, Enter) && changePage(value - 1),
+      disabled: pageSize === 0,
+      disableClear: true
+    }, currentPageInputProps))
+  });
+
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     id: id,
     className: clsx(className, classes.root)
-  }, others), /*#__PURE__*/React.createElement("div", _extends({
-    className: classes.pageSizeOptions
-  }, showPageProps), showPageSizeOptions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Hidden, {
-    xsDown: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.pageSizeTextContainer
-  }, /*#__PURE__*/React.createElement(HvTypography, {
-    component: "span"
-  }, labels.pageSizePrev))), /*#__PURE__*/React.createElement(Select, {
-    id: setId(id, "pageSize"),
-    disabled: pageSize === 0,
-    className: classes.pageSizeOptionsSelect,
-    "aria-label": labels.pageSizeSelectorDescription,
-    onChange: (evt, val) => onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(val),
-    value: pageSize
-  }, pageSizeOptions.map(option => /*#__PURE__*/React.createElement(Option, {
-    key: option,
-    value: option
-  }, option))), /*#__PURE__*/React.createElement(Hidden, {
-    xsDown: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.pageSizeTextContainer
-  }, /*#__PURE__*/React.createElement(HvTypography, {
-    component: "span"
-  }, labels.pageSizeEntryName))))), /*#__PURE__*/React.createElement("div", _extends({
-    className: classes.pageNavigator
-  }, navigationProps), /*#__PURE__*/React.createElement(ButtonIconTooltip, {
-    id: setId(id, "firstPage-button"),
-    "aria-label": labels.firstPage,
-    className: classes.iconContainer,
-    disabled: !canPrevious,
-    onClick: () => changePage(0),
-    tooltip: labels.paginationFirstPageTitle
-  }, /*#__PURE__*/React.createElement(Start, {
-    className: classes.icon,
-    color: setColor(!canPrevious)
-  })), /*#__PURE__*/React.createElement(ButtonIconTooltip, {
-    id: setId(id, "previousPage-button"),
-    "aria-label": labels.previousPage,
-    className: classes.iconContainer,
-    disabled: !canPrevious,
-    onClick: () => changePage(page - 1),
-    tooltip: labels.paginationPreviousPageTitle
-  }, /*#__PURE__*/React.createElement(Backwards, {
-    className: classes.icon,
-    color: setColor(!canPrevious)
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.pageInfo
-  }, showPageJump ? renderPageJump() : /*#__PURE__*/React.createElement(HvTypography, {
-    component: "span"
-  }, `${page + 1}`), /*#__PURE__*/React.createElement(HvTypography, {
-    component: "span"
-  }, `${labels.pagesSeparator} `), /*#__PURE__*/React.createElement(HvTypography, {
-    id: setId(id, "totalPages"),
-    component: "span"
-  }, pages)), /*#__PURE__*/React.createElement(ButtonIconTooltip, {
-    id: setId(id, "nextPage-button"),
-    "aria-label": labels.nextPage,
-    className: classes.iconContainer,
-    disabled: !canNext,
-    onClick: () => changePage(page + 1),
-    tooltip: labels.paginationNextPageTitle
-  }, /*#__PURE__*/React.createElement(Forwards, {
-    className: classes.icon,
-    color: setColor(!canNext)
-  })), /*#__PURE__*/React.createElement(ButtonIconTooltip, {
-    id: setId(id, "lastPage-button"),
-    "aria-label": labels.lastPage,
-    className: classes.iconContainer,
-    disabled: !canNext,
-    onClick: () => changePage(pages - 1),
-    tooltip: labels.paginationLastPageTitle
-  }, /*#__PURE__*/React.createElement(End, {
-    className: classes.icon,
-    color: setColor(!canNext)
-  }))));
+  }, others), {}, {
+    children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: classes.pageSizeOptions
+    }, showPageProps), {}, {
+      children: showPageSizeOptions && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Hidden, {
+          xsDown: true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: classes.pageSizeTextContainer,
+            children: /*#__PURE__*/_jsx(HvTypography, {
+              component: "span",
+              children: labels.pageSizePrev
+            })
+          })
+        }), /*#__PURE__*/_jsx(Select, {
+          id: setId(id, "pageSize"),
+          disabled: pageSize === 0,
+          className: classes.pageSizeOptionsSelect,
+          "aria-label": labels.pageSizeSelectorDescription,
+          onChange: (evt, val) => onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(val),
+          value: pageSize,
+          children: pageSizeOptions.map(option => /*#__PURE__*/_jsx(Option, {
+            value: option,
+            children: option
+          }, option))
+        }), /*#__PURE__*/_jsx(Hidden, {
+          xsDown: true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: classes.pageSizeTextContainer,
+            children: /*#__PURE__*/_jsx(HvTypography, {
+              component: "span",
+              children: labels.pageSizeEntryName
+            })
+          })
+        })]
+      })
+    })), /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: classes.pageNavigator
+    }, navigationProps), {}, {
+      children: [/*#__PURE__*/_jsx(ButtonIconTooltip, {
+        id: setId(id, "firstPage-button"),
+        "aria-label": labels.firstPage,
+        className: classes.iconContainer,
+        disabled: !canPrevious,
+        onClick: () => changePage(0),
+        tooltip: labels.paginationFirstPageTitle,
+        children: /*#__PURE__*/_jsx(Start, {
+          className: classes.icon,
+          color: setColor(!canPrevious)
+        })
+      }), /*#__PURE__*/_jsx(ButtonIconTooltip, {
+        id: setId(id, "previousPage-button"),
+        "aria-label": labels.previousPage,
+        className: classes.iconContainer,
+        disabled: !canPrevious,
+        onClick: () => changePage(page - 1),
+        tooltip: labels.paginationPreviousPageTitle,
+        children: /*#__PURE__*/_jsx(Backwards, {
+          className: classes.icon,
+          color: setColor(!canPrevious)
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classes.pageInfo,
+        children: [showPageJump ? renderPageJump() : /*#__PURE__*/_jsx(HvTypography, {
+          component: "span",
+          children: `${page + 1}`
+        }), /*#__PURE__*/_jsx(HvTypography, {
+          component: "span",
+          children: `${labels.pagesSeparator} `
+        }), /*#__PURE__*/_jsx(HvTypography, {
+          id: setId(id, "totalPages"),
+          component: "span",
+          children: pages
+        })]
+      }), /*#__PURE__*/_jsx(ButtonIconTooltip, {
+        id: setId(id, "nextPage-button"),
+        "aria-label": labels.nextPage,
+        className: classes.iconContainer,
+        disabled: !canNext,
+        onClick: () => changePage(page + 1),
+        tooltip: labels.paginationNextPageTitle,
+        children: /*#__PURE__*/_jsx(Forwards, {
+          className: classes.icon,
+          color: setColor(!canNext)
+        })
+      }), /*#__PURE__*/_jsx(ButtonIconTooltip, {
+        id: setId(id, "lastPage-button"),
+        "aria-label": labels.lastPage,
+        className: classes.iconContainer,
+        disabled: !canNext,
+        onClick: () => changePage(pages - 1),
+        tooltip: labels.paginationLastPageTitle,
+        children: /*#__PURE__*/_jsx(End, {
+          className: classes.icon,
+          color: setColor(!canNext)
+        })
+      })]
+    }))]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? Pagination.propTypes = {

package/dist/modern/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","useCallback","useEffect","PropTypes","clsx","withStyles","Hidden","Start","End","Backwards","Forwards","isKeypress","KeyboardCodes","HvInput","HvTypography","setId","useLabels","ButtonIconTooltip","Select","Option","usePageInput","getSafePage","setColor","styles","DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","Enter","Pagination","classes","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","pageInput","handleInputChange","changePage","newPage","safePage","renderPageJump","pageJump","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","String","evt","value","pageSizeTextContainer","pageSizeOptionsSelect","val","map","option","pageNavigator","iconContainer","icon","pageInfo","propTypes","shape","string","isRequired","number","bool","arrayOf","func","instanceOf","Object","name"],"sources":["../../../src/Pagination/Pagination.js"],"sourcesContent":["import React, { useCallback, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles, Hidden } from \"@material-ui/core\";\nimport { Start, End, Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { isKeypress, KeyboardCodes } from \"../utils/KeyboardUtils\";\nimport { HvInput, HvTypography } from \"..\";\nimport { setId, useLabels } from \"../utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\nimport Select, { Option } from \"./Select\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport styles from \"./styles\";\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst { Enter } = KeyboardCodes;\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nconst Pagination = ({\n  classes,\n  className,\n  id,\n  pages = 1,\n  page = 0,\n  showPageSizeOptions = true,\n  pageSizeOptions = [5, 10, 20, 25, 50, 100],\n  pageSize = 1,\n  showPageJump = true,\n  canPrevious = false,\n  canNext = false,\n  onPageChange,\n  onPageSizeChange,\n  labels: labelsProp,\n  showPageProps,\n  navigationProps,\n  currentPageInputProps,\n  ...others\n}) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n\n  const changePage = useCallback(\n    (newPage) => {\n      const safePage = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externaly or when internally commited - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controling of the `page` property.\n    // fixing it some other way would potentialy introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels.paginationInputLabel,\n          // we really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes.pageSizeInputContainer,\n          input: classes.pageSizeInput,\n          inputRoot: classes.pageSizeInputRoot,\n        }}\n        onChange={handleInputChange}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(value - 1)}\n        onKeyDown={(evt, value) => isKeypress(evt, Enter) && changePage(value - 1)}\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <div className={classes.pageSizeTextContainer}>\n                <HvTypography component=\"span\">{labels.pageSizePrev}</HvTypography>\n              </div>\n            </Hidden>\n            <Select\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels.pageSizeSelectorDescription}\n              onChange={(evt, val) => onPageSizeChange?.(val)}\n              value={pageSize}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </Select>\n            <Hidden xsDown>\n              <div className={classes.pageSizeTextContainer}>\n                <HvTypography component=\"span\">{labels.pageSizeEntryName}</HvTypography>\n              </div>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <ButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels.firstPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} color={setColor(!canPrevious)} />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels.previousPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} color={setColor(!canPrevious)} />\n        </ButtonIconTooltip>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography component=\"span\">{`${page + 1}`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels.pagesSeparator} `}</HvTypography>\n          <HvTypography id={setId(id, \"totalPages\")} component=\"span\">\n            {pages}\n          </HvTypography>\n        </div>\n        <ButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels.nextPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} color={setColor(!canNext)} />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels.lastPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels.paginationLastPageTitle}\n        >\n          <End className={classes.icon} color={setColor(!canNext)} />\n        </ButtonIconTooltip>\n      </div>\n    </div>\n  );\n};\n\nPagination.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 root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the page size selector container.\n     */\n    pageSizeOptions: PropTypes.string,\n    /**\n     * Styles applied to the page size selector dropdown element.\n     */\n    pageSizeOptionsSelect: PropTypes.string,\n    /**\n     * Styles applied to the element that holds the labels for the page size selector\n     */\n    pageSizeTextContainer: PropTypes.string,\n    /**\n     * Styles applied to the page navigation container.\n     */\n    pageNavigator: PropTypes.string,\n    /**\n     * Styles applied to the central page information container.\n     */\n    pageInfo: PropTypes.string,\n    /**\n     * Styles applied to the page selector input container.\n     */\n    pageJump: PropTypes.string,\n    /**\n     * Styles passed down to the page selector Input component as `input`.\n     */\n    pageSizeInput: PropTypes.string,\n    /**\n     * Styles passed down to the page selector Input root.\n     */\n    pageSizeInputRoot: PropTypes.string,\n    /**\n     * Styles passed down to the page selector Input component as `container`.\n     */\n    pageSizeInputContainer: PropTypes.string,\n    /**\n     * Styles applied to each navigation `HvButton` icon container.\n     */\n    iconContainer: PropTypes.string,\n    /**\n     * Styles applied to each navigation icon.\n     */\n    icon: PropTypes.string,\n  }).isRequired,\n  /**\n   * The number of pages the component has.\n   */\n  pages: PropTypes.number,\n  /**\n   * The currently selected page (0-indexed).\n   */\n  page: PropTypes.number,\n  /**\n   * Controls whether the left page size mechanism should be visible.\n   */\n  showPageSizeOptions: PropTypes.bool,\n  /**\n   * The array of possible page sizes for the dropdown.\n   */\n  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),\n  /**\n   * The currently selected page size.\n   */\n  pageSize: PropTypes.number,\n  /**\n   * Controls whether the central page changing mechanism should be visible.\n   */\n  showPageJump: PropTypes.bool,\n  /**\n   * Controls whether the previous/first page buttons are enabled.\n   */\n  canPrevious: PropTypes.bool,\n  /**\n   * Controls whether the next/last page buttons are enabled.\n   */\n  canNext: PropTypes.bool,\n  /**\n   * Function called when the page changes.\n   */\n  onPageChange: PropTypes.func,\n  /**\n   * Function called when the page size changes.\n   */\n  onPageSizeChange: PropTypes.func,\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   * An object containing all the labels for the component.\n   */\n  labels: PropTypes.shape({\n    /**\n     * The show label.\n     */\n    pageSizePrev: PropTypes.string,\n    /**\n     * Indicate the units of the page size selection.\n     */\n    pageSizeEntryName: PropTypes.string,\n    /**\n     * Used for the aria-label of the selection of number of unit.s\n     */\n    pageSizeSelectorDescription: PropTypes.string,\n    /**\n     * Separator of current page and total pages.\n     */\n    pagesSeparator: PropTypes.string,\n    /**\n     * Title of button `firstPage`.\n     */\n    paginationFirstPageTitle: PropTypes.string,\n    /**\n     * Title of button `previousPage`.\n     */\n    paginationPreviousPageTitle: PropTypes.string,\n    /**\n     * Title of button `nextPage`.\n     */\n    paginationNextPageTitle: PropTypes.string,\n    /**\n     * Title of button `lastPage`.\n     */\n    paginationLastPageTitle: PropTypes.string,\n    /**\n     * Aria-label passed to the page input.\n     */\n    paginationInputLabel: PropTypes.string,\n    /**\n     * Aria-label of the first page button\n     */\n    firstPage: PropTypes.string,\n    /**\n     * Aria-label of the previous page button\n     */\n    previousPage: PropTypes.string,\n    /**\n     * Aria-label of the next page button\n     */\n    nextPage: PropTypes.string,\n    /**\n     * Aria-label of the last page button\n     */\n    lastPage: PropTypes.string,\n  }),\n  /**\n   * Other props to show page component.\n   */\n  showPageProps: PropTypes.instanceOf(Object),\n  /**\n   * Other props to pagination component.\n   */\n  navigationProps: PropTypes.instanceOf(Object),\n  /**\n   * Extra properties passed to the input component representing the current pages.\n   */\n  currentPageInputProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvPagination\" })(Pagination);\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","useCallback","useEffect","PropTypes","clsx","withStyles","Hidden","Start","End","Backwards","Forwards","isKeypress","KeyboardCodes","HvInput","HvTypography","setId","useLabels","ButtonIconTooltip","Select","Option","usePageInput","getSafePage","setColor","styles","DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","Enter","Pagination","classes","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","pageInput","handleInputChange","changePage","newPage","safePage","renderPageJump","pageJump","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","String","evt","value","pageSizeTextContainer","pageSizeOptionsSelect","val","map","option","pageNavigator","iconContainer","icon","pageInfo","propTypes","shape","string","isRequired","number","bool","arrayOf","func","instanceOf","Object","name"],"sources":["../../../src/Pagination/Pagination.js"],"sourcesContent":["import React, { useCallback, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\nimport { Hidden } from \"@mui/material\";\nimport { Start, End, Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { isKeypress, KeyboardCodes } from \"../utils/KeyboardUtils\";\nimport { HvInput, HvTypography } from \"..\";\nimport { setId, useLabels } from \"../utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\nimport Select, { Option } from \"./Select\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport styles from \"./styles\";\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst { Enter } = KeyboardCodes;\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nconst Pagination = ({\n  classes,\n  className,\n  id,\n  pages = 1,\n  page = 0,\n  showPageSizeOptions = true,\n  pageSizeOptions = [5, 10, 20, 25, 50, 100],\n  pageSize = 1,\n  showPageJump = true,\n  canPrevious = false,\n  canNext = false,\n  onPageChange,\n  onPageSizeChange,\n  labels: labelsProp,\n  showPageProps,\n  navigationProps,\n  currentPageInputProps,\n  ...others\n}) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n\n  const changePage = useCallback(\n    (newPage) => {\n      const safePage = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externaly or when internally commited - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controling of the `page` property.\n    // fixing it some other way would potentialy introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels.paginationInputLabel,\n          // we really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes.pageSizeInputContainer,\n          input: classes.pageSizeInput,\n          inputRoot: classes.pageSizeInputRoot,\n        }}\n        onChange={handleInputChange}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(value - 1)}\n        onKeyDown={(evt, value) => isKeypress(evt, Enter) && changePage(value - 1)}\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <div className={classes.pageSizeTextContainer}>\n                <HvTypography component=\"span\">{labels.pageSizePrev}</HvTypography>\n              </div>\n            </Hidden>\n            <Select\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels.pageSizeSelectorDescription}\n              onChange={(evt, val) => onPageSizeChange?.(val)}\n              value={pageSize}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </Select>\n            <Hidden xsDown>\n              <div className={classes.pageSizeTextContainer}>\n                <HvTypography component=\"span\">{labels.pageSizeEntryName}</HvTypography>\n              </div>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <ButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels.firstPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} color={setColor(!canPrevious)} />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels.previousPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} color={setColor(!canPrevious)} />\n        </ButtonIconTooltip>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography component=\"span\">{`${page + 1}`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels.pagesSeparator} `}</HvTypography>\n          <HvTypography id={setId(id, \"totalPages\")} component=\"span\">\n            {pages}\n          </HvTypography>\n        </div>\n        <ButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels.nextPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} color={setColor(!canNext)} />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels.lastPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels.paginationLastPageTitle}\n        >\n          <End className={classes.icon} color={setColor(!canNext)} />\n        </ButtonIconTooltip>\n      </div>\n    </div>\n  );\n};\n\nPagination.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 root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the page size selector container.\n     */\n    pageSizeOptions: PropTypes.string,\n    /**\n     * Styles applied to the page size selector dropdown element.\n     */\n    pageSizeOptionsSelect: PropTypes.string,\n    /**\n     * Styles applied to the element that holds the labels for the page size selector\n     */\n    pageSizeTextContainer: PropTypes.string,\n    /**\n     * Styles applied to the page navigation container.\n     */\n    pageNavigator: PropTypes.string,\n    /**\n     * Styles applied to the central page information container.\n     */\n    pageInfo: PropTypes.string,\n    /**\n     * Styles applied to the page selector input container.\n     */\n    pageJump: PropTypes.string,\n    /**\n     * Styles passed down to the page selector Input component as `input`.\n     */\n    pageSizeInput: PropTypes.string,\n    /**\n     * Styles passed down to the page selector Input root.\n     */\n    pageSizeInputRoot: PropTypes.string,\n    /**\n     * Styles passed down to the page selector Input component as `container`.\n     */\n    pageSizeInputContainer: PropTypes.string,\n    /**\n     * Styles applied to each navigation `HvButton` icon container.\n     */\n    iconContainer: PropTypes.string,\n    /**\n     * Styles applied to each navigation icon.\n     */\n    icon: PropTypes.string,\n  }).isRequired,\n  /**\n   * The number of pages the component has.\n   */\n  pages: PropTypes.number,\n  /**\n   * The currently selected page (0-indexed).\n   */\n  page: PropTypes.number,\n  /**\n   * Controls whether the left page size mechanism should be visible.\n   */\n  showPageSizeOptions: PropTypes.bool,\n  /**\n   * The array of possible page sizes for the dropdown.\n   */\n  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),\n  /**\n   * The currently selected page size.\n   */\n  pageSize: PropTypes.number,\n  /**\n   * Controls whether the central page changing mechanism should be visible.\n   */\n  showPageJump: PropTypes.bool,\n  /**\n   * Controls whether the previous/first page buttons are enabled.\n   */\n  canPrevious: PropTypes.bool,\n  /**\n   * Controls whether the next/last page buttons are enabled.\n   */\n  canNext: PropTypes.bool,\n  /**\n   * Function called when the page changes.\n   */\n  onPageChange: PropTypes.func,\n  /**\n   * Function called when the page size changes.\n   */\n  onPageSizeChange: PropTypes.func,\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   * An object containing all the labels for the component.\n   */\n  labels: PropTypes.shape({\n    /**\n     * The show label.\n     */\n    pageSizePrev: PropTypes.string,\n    /**\n     * Indicate the units of the page size selection.\n     */\n    pageSizeEntryName: PropTypes.string,\n    /**\n     * Used for the aria-label of the selection of number of unit.s\n     */\n    pageSizeSelectorDescription: PropTypes.string,\n    /**\n     * Separator of current page and total pages.\n     */\n    pagesSeparator: PropTypes.string,\n    /**\n     * Title of button `firstPage`.\n     */\n    paginationFirstPageTitle: PropTypes.string,\n    /**\n     * Title of button `previousPage`.\n     */\n    paginationPreviousPageTitle: PropTypes.string,\n    /**\n     * Title of button `nextPage`.\n     */\n    paginationNextPageTitle: PropTypes.string,\n    /**\n     * Title of button `lastPage`.\n     */\n    paginationLastPageTitle: PropTypes.string,\n    /**\n     * Aria-label passed to the page input.\n     */\n    paginationInputLabel: PropTypes.string,\n    /**\n     * Aria-label of the first page button\n     */\n    firstPage: PropTypes.string,\n    /**\n     * Aria-label of the previous page button\n     */\n    previousPage: PropTypes.string,\n    /**\n     * Aria-label of the next page button\n     */\n    nextPage: PropTypes.string,\n    /**\n     * Aria-label of the last page button\n     */\n    lastPage: PropTypes.string,\n  }),\n  /**\n   * Other props to show page component.\n   */\n  showPageProps: PropTypes.instanceOf(Object),\n  /**\n   * Other props to pagination component.\n   */\n  navigationProps: PropTypes.instanceOf(Object),\n  /**\n   * Extra properties passed to the input component representing the current pages.\n   */\n  currentPageInputProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvPagination\" })(Pagination);\n"],"mappings":"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"}

package/dist/modern/Pagination/Select.js

@@ -1,14 +1,19 @@
-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 = ["children"],
       _excluded2 = ["className", "classes", "onChange", "disabled", "value", "children"];
 import "core-js/modules/web.dom-collections.iterator.js";
 
+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; }
+
 /* eslint-disable react/prop-types */
 import React, { useState } from "react";
 import clsx from "clsx";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import { HvBaseDropdown, HvSelectionList, HvListItem, HvPanel, HvTypography } from "..";
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const styles = theme => ({
   base: {
@@ -40,7 +45,9 @@ export const Option = _ref => {
   } = _ref,
       others = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(HvListItem, others, children);
+  return /*#__PURE__*/_jsx(HvListItem, _objectSpread(_objectSpread({}, others), {}, {
+    children: children
+  }));
 };
 
 const HvSelect = _ref2 => {
@@ -77,7 +84,7 @@ const HvSelect = _ref2 => {
     });
   };
 
-  return /*#__PURE__*/React.createElement(HvBaseDropdown, _extends({
+  return /*#__PURE__*/_jsx(HvBaseDropdown, _objectSpread(_objectSpread({
     className: className,
     classes: {
       root: clsx(classes.base, classes.root),
@@ -88,13 +95,20 @@ const HvSelect = _ref2 => {
     expanded: open,
     onToggle: handleToggle,
     onContainerCreation: setFocusToContent,
-    placeholder: /*#__PURE__*/React.createElement(HvTypography, null, value),
+    placeholder: /*#__PURE__*/_jsx(HvTypography, {
+      children: value
+    }),
     disabled: disabled,
     variableWidth: true
-  }, others), /*#__PURE__*/React.createElement(HvPanel, null, /*#__PURE__*/React.createElement(HvSelectionList, {
-    value: value,
-    onChange: handleSelect
-  }, children)));
+  }, others), {}, {
+    children: /*#__PURE__*/_jsx(HvPanel, {
+      children: /*#__PURE__*/_jsx(HvSelectionList, {
+        value: value,
+        onChange: handleSelect,
+        children: children
+      })
+    })
+  }));
 };
 
 export default withStyles(styles, {

package/dist/modern/Pagination/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["React","useState","clsx","withStyles","HvBaseDropdown","HvSelectionList","HvListItem","HvPanel","HvTypography","styles","theme","base","borderRadius","width","backgroundColor","borderColor","palette","atmo1","root","anchor","header","headerOpen","Option","children","others","HvSelect","className","classes","onChange","disabled","value","open","setOpen","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","name"],"sources":["../../../src/Pagination/Select.js"],"sourcesContent":["/* eslint-disable react/prop-types */\n\nimport React, { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { HvBaseDropdown, HvSelectionList, HvListItem, HvPanel, HvTypography } from \"..\";\n\nconst styles = (theme) => ({\n  base: {\n    \"&$root\": {\n      borderRadius: 2,\n      width: \"auto\",\n\n      \"& > div$anchor\": {\n        width: \"auto\",\n      },\n      \"& $header\": {\n        backgroundColor: \"transparent\",\n        borderColor: \"transparent\",\n      },\n      \"& $headerOpen\": {\n        backgroundColor: theme.palette.atmo1,\n        borderColor: theme.palette.atmo1,\n      },\n    },\n  },\n\n  root: {},\n  anchor: {},\n  header: {},\n  headerOpen: {},\n});\n\nexport const Option = ({ children, ...others }) => <HvListItem {...others}>{children}</HvListItem>;\n\nconst HvSelect = ({ className, classes, onChange, disabled, value, children, ...others }) => {\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const listItems = containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        root: clsx(classes.base, classes.root),\n        anchor: classes.anchor,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={<HvTypography>{value}</HvTypography>}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default withStyles(styles, { name: \"HvSelect\" })(HvSelect);\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["React","useState","clsx","withStyles","HvBaseDropdown","HvSelectionList","HvListItem","HvPanel","HvTypography","styles","theme","base","borderRadius","width","backgroundColor","borderColor","palette","atmo1","root","anchor","header","headerOpen","Option","children","others","HvSelect","className","classes","onChange","disabled","value","open","setOpen","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","name"],"sources":["../../../src/Pagination/Select.js"],"sourcesContent":["/* eslint-disable react/prop-types */\n\nimport React, { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvBaseDropdown, HvSelectionList, HvListItem, HvPanel, HvTypography } from \"..\";\n\nconst styles = (theme) => ({\n  base: {\n    \"&$root\": {\n      borderRadius: 2,\n      width: \"auto\",\n\n      \"& > div$anchor\": {\n        width: \"auto\",\n      },\n      \"& $header\": {\n        backgroundColor: \"transparent\",\n        borderColor: \"transparent\",\n      },\n      \"& $headerOpen\": {\n        backgroundColor: theme.palette.atmo1,\n        borderColor: theme.palette.atmo1,\n      },\n    },\n  },\n\n  root: {},\n  anchor: {},\n  header: {},\n  headerOpen: {},\n});\n\nexport const Option = ({ children, ...others }) => <HvListItem {...others}>{children}</HvListItem>;\n\nconst HvSelect = ({ className, classes, onChange, disabled, value, children, ...others }) => {\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const listItems = containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        root: clsx(classes.base, classes.root),\n        anchor: classes.anchor,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={<HvTypography>{value}</HvTypography>}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default withStyles(styles, { name: \"HvSelect\" })(HvSelect);\n"],"mappings":"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"}

package/dist/modern/Panel/Panel.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StandardProps } from "@material-ui/core";
+import { BoxProps, StandardProps } from "@mui/material";
 
 export type HvPanelClassKey = "root";
 

package/dist/modern/Panel/Panel.js

@@ -1,10 +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", "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 clsx from "clsx";
 import PropTypes from "prop-types";
-import { Box, withStyles } from "@material-ui/core";
+import { Box } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import styles from "./styles";
 /**
  * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).
@@ -12,6 +18,8 @@ import styles from "./styles";
  * Regardless of its content, a panel look and feel should be consistent.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+
 const HvPanel = props => {
   const {
     id,
@@ -21,10 +29,12 @@ const HvPanel = props => {
   } = props,
         others = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     id: id,
     className: clsx(className, classes.root)
-  }, others), children);
+  }, others), {}, {
+    children: children
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvPanel.propTypes = {

package/dist/modern/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","clsx","PropTypes","Box","withStyles","styles","HvPanel","props","id","className","classes","children","others","root","propTypes","string","node","shape","isRequired","name"],"sources":["../../../src/Panel/Panel.js"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Box, withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nconst HvPanel = (props) => {\n  const { id, className, classes, children, ...others } = props;\n\n  return (\n    <Box id={id} className={clsx(className, classes.root)} {...others}>\n      {children}\n    </Box>\n  );\n};\n\nHvPanel.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * The content of the panel.\n   */\n  children: PropTypes.node,\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  }).isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvPanel\" })(HvPanel);\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,mBAAhC;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,OAAO,GAAIC,KAAD,IAAW;EACzB,MAAM;IAAEC,EAAF;IAAMC,SAAN;IAAiBC,OAAjB;IAA0BC;EAA1B,IAAkDJ,KAAxD;EAAA,MAA6CK,MAA7C,4BAAwDL,KAAxD;;EAEA,oBACE,oBAAC,GAAD;IAAK,EAAE,EAAEC,EAAT;IAAa,SAAS,EAAEP,IAAI,CAACQ,SAAD,EAAYC,OAAO,CAACG,IAApB;EAA5B,GAA2DD,MAA3D,GACGD,QADH,CADF;AAKD,CARD;;AAUA,wCAAAL,OAAO,CAACQ,SAAR,GAAoB;EAClB;AACF;AACA;EACEN,EAAE,EAAEN,SAAS,CAACa,MAJI;;EAKlB;AACF;AACA;EACEJ,QAAQ,EAAET,SAAS,CAACc,IARF;;EASlB;AACF;AACA;EACEP,SAAS,EAAEP,SAAS,CAACa,MAZH;;EAalB;AACF;AACA;EACEL,OAAO,EAAER,SAAS,CAACe,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,IAAI,EAAEX,SAAS,CAACa;EAJO,CAAhB,EAKNG;AArBe,CAApB;AAwBA,eAAed,UAAU,CAACC,MAAD,EAAS;EAAEc,IAAI,EAAE;AAAR,CAAT,CAAV,CAAwCb,OAAxC,CAAf"}
+{"version":3,"file":"Panel.js","names":["React","clsx","PropTypes","Box","withStyles","styles","HvPanel","props","id","className","classes","children","others","root","propTypes","string","node","shape","isRequired","name"],"sources":["../../../src/Panel/Panel.js"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Box } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nconst HvPanel = (props) => {\n  const { id, className, classes, children, ...others } = props;\n\n  return (\n    <Box id={id} className={clsx(className, classes.root)} {...others}>\n      {children}\n    </Box>\n  );\n};\n\nHvPanel.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * The content of the panel.\n   */\n  children: PropTypes.node,\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  }).isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvPanel\" })(HvPanel);\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,GAAT,QAAoB,eAApB;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;AACA;;;;AACA,MAAMC,OAAO,GAAIC,KAAD,IAAW;EACzB,MAAM;IAAEC,EAAF;IAAMC,SAAN;IAAiBC,OAAjB;IAA0BC;EAA1B,IAAkDJ,KAAxD;EAAA,MAA6CK,MAA7C,4BAAwDL,KAAxD;;EAEA,oBACE,KAAC,GAAD;IAAK,EAAE,EAAEC,EAAT;IAAa,SAAS,EAAEP,IAAI,CAACQ,SAAD,EAAYC,OAAO,CAACG,IAApB;EAA5B,GAA2DD,MAA3D;IAAA,UACGD;EADH,GADF;AAKD,CARD;;AAUA,wCAAAL,OAAO,CAACQ,SAAR,GAAoB;EAClB;AACF;AACA;EACEN,EAAE,EAAEN,SAAS,CAACa,MAJI;;EAKlB;AACF;AACA;EACEJ,QAAQ,EAAET,SAAS,CAACc,IARF;;EASlB;AACF;AACA;EACEP,SAAS,EAAEP,SAAS,CAACa,MAZH;;EAalB;AACF;AACA;EACEL,OAAO,EAAER,SAAS,CAACe,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,IAAI,EAAEX,SAAS,CAACa;EAJO,CAAhB,EAKNG;AArBe,CAApB;AAwBA,eAAed,UAAU,CAACC,MAAD,EAAS;EAAEc,IAAI,EAAE;AAAR,CAAT,CAAV,CAAwCb,OAAxC,CAAf"}

package/dist/modern/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { StandardProps } from "@mui/material";
+
+export type HvProgressBarClassKey =
+  | "root"
+  | "progress"
+  | "progressContainer"
+  | "progressBarContainer"
+  | "progressBar"
+  | "progressDone"
+  | "progressError"
+  | "progressBarLabel";
+
+export interface HvProgressBarProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvProgressBarClassKey> {
+  /**
+   * The value of the progress bar.
+   */
+  value?: number;
+  /**
+   * The status of the progress bar.
+   *
+   * inProgress is black, error is red and completed is green.
+   *
+   * When uncontrolled and unspecified it will default to "inProgress".
+   */
+  status?: string;
+  /**
+   * Aria Properties passed on to the progress bar.
+   */
+  labelProps?: object;
+}
+
+export default function HvProgressBar(props: HvProgressBarProps): JSX.Element | null;