@hitachivantara/uikit-react-core 3.72.1 → 4.0.1-next.0

package/dist/modern/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["React","useMemo","useCallback","useRef","PropTypes","clsx","withStyles","Divider","useTheme","isString","isBoolean","styles","useWidth","Focus","getDirection","direction","width","breakpoints","i","indexOf","undefined","HvStack","classes","children","spacing","divider","withNavigation","dividerProps","others","theme","containerRef","keys","processedDirection","getDividerComponent","root","Children","map","child","length","propTypes","shape","string","isRequired","node","oneOfType","oneOf","xs","sm","md","lg","xl","bool","object","name"],"sources":["../../../src/Stack/Stack.js"],"sourcesContent":["import React, { useMemo, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles, Divider, useTheme } from \"@material-ui/core\";\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\nimport styles from \"./styles\";\nimport useWidth from \"../utils/useWidth\";\nimport Focus from \"../Focus\";\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n *                     `direction` property is a string and a valid direction then we\n *                     use it. If it's an object with multiple directions by breakpoint\n *                     we use the appropriate one or search for the nearest breakpoint\n *                     smaller than the current one to use.\n */\nconst getDirection = (direction, width, breakpoints) => {\n  if (isString(direction)) return direction;\n\n  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n    if (direction[breakpoints[i]] !== undefined) {\n      return direction[breakpoints[i]];\n    }\n  }\n  return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the adition of a divider between the elements.\n */\nconst HvStack = ({\n  classes,\n  children,\n  direction = \"column\",\n  spacing = \"sm\",\n  divider = false,\n  withNavigation = false,\n  dividerProps = {},\n  ...others\n}) => {\n  const width = useWidth();\n  const theme = useTheme();\n  const containerRef = useRef(null);\n\n  const breakpoints = useMemo(() => [...theme.breakpoints.keys], [theme]);\n\n  const processedDirection = useMemo(\n    () => getDirection(direction, width, breakpoints),\n    [direction, width, breakpoints]\n  );\n\n  /**\n   * @returns {node} - The divider component to use. If the property `divider` is\n   *                   set to `true` then the Material-UI divider is used, otherwise\n   *                   we use the custom divider the user passed.\n   */\n  const getDividerComponent = useCallback(() => {\n    if (isBoolean(divider) && divider) {\n      return (\n        <Divider\n          orientation={processedDirection === \"column\" ? \"horizontal\" : \"vertical\"}\n          flexItem={processedDirection === \"row\"}\n          role=\"separator\"\n          {...dividerProps}\n        />\n      );\n    }\n    return divider;\n  }, [divider, dividerProps, processedDirection]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx(classes.root, classes[processedDirection], classes[spacing])}\n      {...others}\n    >\n      {React.Children.map(children, (child, i) => {\n        return (\n          <>\n            {divider && i !== 0 && getDividerComponent(divider, processedDirection)}\n            {withNavigation ? (\n              <Focus\n                rootRef={containerRef}\n                focusDisabled={false}\n                strategy=\"grid\"\n                navigationJump={processedDirection === \"column\" ? 1 : children.length}\n                filterClass=\"child\"\n              >\n                <div className=\"child\">{child}</div>\n              </Focus>\n            ) : (\n              child\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n\nHvStack.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Children of the stack component.\n   */\n  children: PropTypes.node,\n  /**\n   * The direction of the stack.\n   * Can be either a string or an object that states the direction for each breakpoint.\n   */\n  direction: PropTypes.oneOfType([\n    PropTypes.oneOf([\"column\", \"row\"]),\n    PropTypes.shape({\n      xs: PropTypes.string,\n      sm: PropTypes.string,\n      md: PropTypes.string,\n      lg: PropTypes.string,\n      xl: PropTypes.string,\n    }),\n  ]),\n  /**\n   * The spacing between elements of the stack.\n   */\n  spacing: PropTypes.oneOf([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]),\n  /**\n   * The divider component to be used between the stack elements.\n   *\n   * - If `true` the Material-UI Divider component will be used.\n   *\n   * - If a React node is passed then the custom divider will be used.\n   */\n  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n  /**\n   * The properties to pass on to the Material-UI component.\n   */\n  dividerProps: PropTypes.object,\n  /**\n   * Sets whether or not there should be arrow navigation between the stack elements\n   */\n  withNavigation: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStack\" })(HvStack);\n"],"mappings":"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"}
+{"version":3,"file":"Stack.js","names":["React","useMemo","useCallback","useRef","PropTypes","clsx","Divider","withStyles","useTheme","isString","isBoolean","styles","useWidth","Focus","getDirection","direction","width","breakpoints","i","indexOf","undefined","HvStack","classes","children","spacing","divider","withNavigation","dividerProps","others","theme","containerRef","keys","processedDirection","getDividerComponent","root","Children","map","child","length","propTypes","shape","string","isRequired","node","oneOfType","oneOf","xs","sm","md","lg","xl","bool","object","name"],"sources":["../../../src/Stack/Stack.js"],"sourcesContent":["import React, { useMemo, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { Divider } from \"@mui/material\";\nimport { withStyles, useTheme } from \"@mui/styles\";\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\nimport styles from \"./styles\";\nimport useWidth from \"../utils/useWidth\";\nimport Focus from \"../Focus\";\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n *                     `direction` property is a string and a valid direction then we\n *                     use it. If it's an object with multiple directions by breakpoint\n *                     we use the appropriate one or search for the nearest breakpoint\n *                     smaller than the current one to use.\n */\nconst getDirection = (direction, width, breakpoints) => {\n  if (isString(direction)) return direction;\n\n  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n    if (direction[breakpoints[i]] !== undefined) {\n      return direction[breakpoints[i]];\n    }\n  }\n  return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the adition of a divider between the elements.\n */\nconst HvStack = ({\n  classes,\n  children,\n  direction = \"column\",\n  spacing = \"sm\",\n  divider = false,\n  withNavigation = false,\n  dividerProps = {},\n  ...others\n}) => {\n  const width = useWidth();\n  const theme = useTheme();\n  const containerRef = useRef(null);\n\n  const breakpoints = useMemo(() => [...theme.breakpoints.keys], [theme]);\n\n  const processedDirection = useMemo(\n    () => getDirection(direction, width, breakpoints),\n    [direction, width, breakpoints]\n  );\n\n  /**\n   * @returns {node} - The divider component to use. If the property `divider` is\n   *                   set to `true` then the Material-UI divider is used, otherwise\n   *                   we use the custom divider the user passed.\n   */\n  const getDividerComponent = useCallback(() => {\n    if (isBoolean(divider) && divider) {\n      return (\n        <Divider\n          orientation={processedDirection === \"column\" ? \"horizontal\" : \"vertical\"}\n          flexItem={processedDirection === \"row\"}\n          role=\"separator\"\n          {...dividerProps}\n        />\n      );\n    }\n    return divider;\n  }, [divider, dividerProps, processedDirection]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx(classes.root, classes[processedDirection], classes[spacing])}\n      {...others}\n    >\n      {React.Children.map(children, (child, i) => {\n        return (\n          <>\n            {divider && i !== 0 && getDividerComponent(divider, processedDirection)}\n            {withNavigation ? (\n              <Focus\n                rootRef={containerRef}\n                focusDisabled={false}\n                strategy=\"grid\"\n                navigationJump={processedDirection === \"column\" ? 1 : children.length}\n                filterClass=\"child\"\n              >\n                <div className=\"child\">{child}</div>\n              </Focus>\n            ) : (\n              child\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n\nHvStack.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Children of the stack component.\n   */\n  children: PropTypes.node,\n  /**\n   * The direction of the stack.\n   * Can be either a string or an object that states the direction for each breakpoint.\n   */\n  direction: PropTypes.oneOfType([\n    PropTypes.oneOf([\"column\", \"row\"]),\n    PropTypes.shape({\n      xs: PropTypes.string,\n      sm: PropTypes.string,\n      md: PropTypes.string,\n      lg: PropTypes.string,\n      xl: PropTypes.string,\n    }),\n  ]),\n  /**\n   * The spacing between elements of the stack.\n   */\n  spacing: PropTypes.oneOf([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]),\n  /**\n   * The divider component to be used between the stack elements.\n   *\n   * - If `true` the Material-UI Divider component will be used.\n   *\n   * - If a React node is passed then the custom divider will be used.\n   */\n  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n  /**\n   * The properties to pass on to the Material-UI component.\n   */\n  dividerProps: PropTypes.object,\n  /**\n   * Sets whether or not there should be arrow navigation between the stack elements\n   */\n  withNavigation: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStack\" })(HvStack);\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,WAAzB,EAAsCC,MAAtC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,UAAT,EAAqBC,QAArB,QAAqC,aAArC;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,QAAP,MAAqB,mBAArB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;AACA,MAAMC,YAAY,GAAG,CAACC,SAAD,EAAYC,KAAZ,EAAmBC,WAAnB,KAAmC;EACtD,IAAIR,QAAQ,CAACM,SAAD,CAAZ,EAAyB,OAAOA,SAAP;;EAEzB,KAAK,IAAIG,CAAC,GAAGD,WAAW,CAACE,OAAZ,CAAoBH,KAApB,CAAb,EAAyCE,CAAC,IAAI,CAA9C,EAAiDA,CAAC,IAAI,CAAtD,EAAyD;IACvD,IAAIH,SAAS,CAACE,WAAW,CAACC,CAAD,CAAZ,CAAT,KAA8BE,SAAlC,EAA6C;MAC3C,OAAOL,SAAS,CAACE,WAAW,CAACC,CAAD,CAAZ,CAAhB;IACD;EACF;;EACD,OAAO,QAAP;AACD,CATD;AAWA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,OAAO,GAAG,QASV;EAAA,IATW;IACfC,OADe;IAEfC,QAFe;IAGfR,SAAS,GAAG,QAHG;IAIfS,OAAO,GAAG,IAJK;IAKfC,OAAO,GAAG,KALK;IAMfC,cAAc,GAAG,KANF;IAOfC,YAAY,GAAG;EAPA,CASX;EAAA,IADDC,MACC;;EACJ,MAAMZ,KAAK,GAAGJ,QAAQ,EAAtB;EACA,MAAMiB,KAAK,GAAGrB,QAAQ,EAAtB;EACA,MAAMsB,YAAY,GAAG3B,MAAM,CAAC,IAAD,CAA3B;EAEA,MAAMc,WAAW,GAAGhB,OAAO,CAAC,MAAM,CAAC,GAAG4B,KAAK,CAACZ,WAAN,CAAkBc,IAAtB,CAAP,EAAoC,CAACF,KAAD,CAApC,CAA3B;EAEA,MAAMG,kBAAkB,GAAG/B,OAAO,CAChC,MAAMa,YAAY,CAACC,SAAD,EAAYC,KAAZ,EAAmBC,WAAnB,CADc,EAEhC,CAACF,SAAD,EAAYC,KAAZ,EAAmBC,WAAnB,CAFgC,CAAlC;EAKA;AACF;AACA;AACA;AACA;;EACE,MAAMgB,mBAAmB,GAAG/B,WAAW,CAAC,MAAM;IAC5C,IAAIQ,SAAS,CAACe,OAAD,CAAT,IAAsBA,OAA1B,EAAmC;MACjC,oBACE,KAAC,OAAD;QACE,WAAW,EAAEO,kBAAkB,KAAK,QAAvB,GAAkC,YAAlC,GAAiD,UADhE;QAEE,QAAQ,EAAEA,kBAAkB,KAAK,KAFnC;QAGE,IAAI,EAAC;MAHP,GAIML,YAJN,EADF;IAQD;;IACD,OAAOF,OAAP;EACD,CAZsC,EAYpC,CAACA,OAAD,EAAUE,YAAV,EAAwBK,kBAAxB,CAZoC,CAAvC;EAcA,oBACE;IACE,GAAG,EAAEF,YADP;IAEE,SAAS,EAAEzB,IAAI,CAACiB,OAAO,CAACY,IAAT,EAAeZ,OAAO,CAACU,kBAAD,CAAtB,EAA4CV,OAAO,CAACE,OAAD,CAAnD;EAFjB,GAGMI,MAHN;IAAA,UAKG5B,KAAK,CAACmC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQnB,CAAR,KAAc;MAC1C,oBACE;QAAA,WACGO,OAAO,IAAIP,CAAC,KAAK,CAAjB,IAAsBe,mBAAmB,CAACR,OAAD,EAAUO,kBAAV,CAD5C,EAEGN,cAAc,gBACb,KAAC,KAAD;UACE,OAAO,EAAEI,YADX;UAEE,aAAa,EAAE,KAFjB;UAGE,QAAQ,EAAC,MAHX;UAIE,cAAc,EAAEE,kBAAkB,KAAK,QAAvB,GAAkC,CAAlC,GAAsCT,QAAQ,CAACe,MAJjE;UAKE,WAAW,EAAC,OALd;UAAA,uBAOE;YAAK,SAAS,EAAC,OAAf;YAAA,UAAwBD;UAAxB;QAPF,EADa,GAWbA,KAbJ;MAAA,EADF;IAkBD,CAnBA;EALH,GADF;AA4BD,CApED;;AAsEA,wCAAAhB,OAAO,CAACkB,SAAR,GAAoB;EAClB;AACF;AACA;EACEjB,OAAO,EAAElB,SAAS,CAACoC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIN,IAAI,EAAE9B,SAAS,CAACqC;EAJO,CAAhB,EAKNC,UATe;;EAUlB;AACF;AACA;EACEnB,QAAQ,EAAEnB,SAAS,CAACuC,IAbF;;EAclB;AACF;AACA;AACA;EACE5B,SAAS,EAAEX,SAAS,CAACwC,SAAV,CAAoB,CAC7BxC,SAAS,CAACyC,KAAV,CAAgB,CAAC,QAAD,EAAW,KAAX,CAAhB,CAD6B,EAE7BzC,SAAS,CAACoC,KAAV,CAAgB;IACdM,EAAE,EAAE1C,SAAS,CAACqC,MADA;IAEdM,EAAE,EAAE3C,SAAS,CAACqC,MAFA;IAGdO,EAAE,EAAE5C,SAAS,CAACqC,MAHA;IAIdQ,EAAE,EAAE7C,SAAS,CAACqC,MAJA;IAKdS,EAAE,EAAE9C,SAAS,CAACqC;EALA,CAAhB,CAF6B,CAApB,CAlBO;;EA4BlB;AACF;AACA;EACEjB,OAAO,EAAEpB,SAAS,CAACyC,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,CA/BS;;EAgClB;AACF;AACA;AACA;AACA;AACA;AACA;EACEpB,OAAO,EAAErB,SAAS,CAACwC,SAAV,CAAoB,CAACxC,SAAS,CAAC+C,IAAX,EAAiB/C,SAAS,CAACuC,IAA3B,CAApB,CAvCS;;EAwClB;AACF;AACA;EACEhB,YAAY,EAAEvB,SAAS,CAACgD,MA3CN;;EA4ClB;AACF;AACA;EACE1B,cAAc,EAAEtB,SAAS,CAAC+C;AA/CR,CAApB;AAkDA,eAAe5C,UAAU,CAACI,MAAD,EAAS;EAAE0C,IAAI,EAAE;AAAR,CAAT,CAAV,CAAwChC,OAAxC,CAAf"}

package/dist/modern/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvLabelProps } from "../Forms/Label";
 import { HvFormStatus } from "../Forms/FormElement";
 import { HvBaseSwitchProps } from "../BaseSwitch";

package/dist/modern/Switch/Switch.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["classes", "className", "id", "name", "value", "required", "readOnly", "disabled", "label", "aria-label", "aria-labelledby", "aria-describedby", "labelProps", "checked", "defaultChecked", "onChange", "status", "statusMessage", "aria-errormessage", "inputProps"];
 
@@ -11,7 +10,7 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import { HvFormElement, HvLabel, HvWarningText, useUniqueId } from "..";
 import { isInvalid } from "../Forms/FormElement/validationStates";
 import { setId, useControlled } from "../utils";
@@ -24,6 +23,9 @@ import styles from "./styles";
  * changes in the system.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const HvSwitch = props => {
   const {
     classes,
@@ -78,44 +80,47 @@ const HvSwitch = props => {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
 
-  return /*#__PURE__*/React.createElement(HvFormElement, {
+  return /*#__PURE__*/_jsxs(HvFormElement, {
     id: id,
     name: name,
     status: validationState,
     disabled: disabled,
     required: required,
     readOnly: readOnly,
-    className: clsx(className, classes.root)
-  }, label && /*#__PURE__*/React.createElement(HvLabel, _extends({
-    id: setId(elementId, "label"),
-    htmlFor: setId(elementId, "input"),
-    label: label,
-    className: clsx(classes.label)
-  }, labelProps)), /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.switchContainer, isStateInvalid && classes.invalidSwitch)
-  }, /*#__PURE__*/React.createElement(HvBaseSwitch, _extends({
-    id: label ? setId(elementId, "input") : setId(id, "input"),
-    name: name,
-    disabled: disabled,
-    readOnly: readOnly,
-    required: required,
-    onChange: onLocalChange,
-    value: value,
-    checked: isChecked,
-    inputProps: _objectSpread({
-      "aria-invalid": isStateInvalid ? true : undefined,
-      "aria-errormessage": errorMessageId,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy
-    }, inputProps)
-  }, others))), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
-    id: setId(elementId, "error"),
-    className: clsx(classes.error),
-    disableBorder: true,
-    disableAdornment: true,
-    hideText: true
-  }, validationMessage));
+    className: clsx(className, classes.root),
+    children: [label && /*#__PURE__*/_jsx(HvLabel, _objectSpread({
+      id: setId(elementId, "label"),
+      htmlFor: setId(elementId, "input"),
+      label: label,
+      className: clsx(classes.label)
+    }, labelProps)), /*#__PURE__*/_jsx("div", {
+      className: clsx(classes.switchContainer, isStateInvalid && classes.invalidSwitch),
+      children: /*#__PURE__*/_jsx(HvBaseSwitch, _objectSpread({
+        id: label ? setId(elementId, "input") : setId(id, "input"),
+        name: name,
+        disabled: disabled,
+        readOnly: readOnly,
+        required: required,
+        onChange: onLocalChange,
+        value: value,
+        checked: isChecked,
+        inputProps: _objectSpread({
+          "aria-invalid": isStateInvalid ? true : undefined,
+          "aria-errormessage": errorMessageId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy
+        }, inputProps)
+      }, others))
+    }), canShowError && /*#__PURE__*/_jsx(HvWarningText, {
+      id: setId(elementId, "error"),
+      className: clsx(classes.error),
+      disableBorder: true,
+      disableAdornment: true,
+      hideText: true,
+      children: validationMessage
+    })]
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvSwitch.propTypes = {

package/dist/modern/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","useCallback","PropTypes","clsx","withStyles","HvFormElement","HvLabel","HvWarningText","useUniqueId","isInvalid","setId","useControlled","HvBaseSwitch","styles","HvSwitch","props","classes","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","inputProps","others","elementId","isChecked","setIsChecked","Boolean","validationState","setValidationState","validationMessage","onLocalChange","evt","newChecked","canShowError","undefined","isStateInvalid","errorMessageId","root","switchContainer","invalidSwitch","error","propTypes","string","shape","isRequired","any","node","instanceOf","Object","bool","oneOf","func"],"sources":["../../../src/Switch/Switch.js"],"sourcesContent":["import React, { useCallback } from \"react\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { HvFormElement, HvLabel, HvWarningText, useUniqueId } from \"..\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\n\nimport { setId, useControlled } from \"../utils\";\n\nimport HvBaseSwitch from \"../BaseSwitch\";\n\nimport styles from \"./styles\";\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nconst HvSwitch = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    labelProps,\n\n    checked,\n    defaultChecked = false,\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    inputProps,\n\n    ...others\n  } = props;\n\n  const elementId = useUniqueId(id, \"hvswitch\");\n\n  const [isChecked, setIsChecked] = useControlled(checked, Boolean(defaultChecked));\n\n  const [validationState, setValidationState] = useControlled(status, \"standBy\");\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const onLocalChange = useCallback(\n    (evt, newChecked) => {\n      setIsChecked(() => {\n        // this will only run if uncontrolled\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(evt, newChecked, value);\n    },\n    [onChange, required, setIsChecked, setValidationState, value]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) || (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError ? setId(elementId, \"error\") : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes.root)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          htmlFor={setId(elementId, \"input\")}\n          label={label}\n          className={clsx(classes.label)}\n          {...labelProps}\n        />\n      )}\n      <div className={clsx(classes.switchContainer, { [classes.invalidSwitch]: isStateInvalid })}>\n        <HvBaseSwitch\n          id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n          name={name}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          onChange={onLocalChange}\n          value={value}\n          checked={isChecked}\n          inputProps={{\n            \"aria-invalid\": isStateInvalid ? true : undefined,\n            \"aria-errormessage\": errorMessageId,\n            \"aria-label\": ariaLabel,\n            \"aria-labelledby\": ariaLabelledBy,\n            \"aria-describedby\": ariaDescribedBy,\n            ...inputProps,\n          }}\n          {...others}\n        />\n      </div>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={clsx(classes.error)}\n          disableBorder\n          disableAdornment\n          hideText\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n\nHvSwitch.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the label.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the error area.\n     */\n    error: PropTypes.string,\n    /**\n     * Styles applied to the switch container.\n     */\n    switchContainer: PropTypes.string,\n    /**\n     * Styles applied to the switch container when the validations status is invalid.\n     */\n    invalidSwitch: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n  /**\n   * The value of the form element.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  // eslint-disable-next-line react/forbid-prop-types\n  value: PropTypes.any,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps: PropTypes.instanceOf(Object),\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status: PropTypes.oneOf([\"standBy\", \"valid\", \"invalid\"]),\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage: PropTypes.string,\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\": PropTypes.string,\n\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvSwitch\" })(HvSwitch);\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["React","useCallback","PropTypes","clsx","withStyles","HvFormElement","HvLabel","HvWarningText","useUniqueId","isInvalid","setId","useControlled","HvBaseSwitch","styles","HvSwitch","props","classes","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","inputProps","others","elementId","isChecked","setIsChecked","Boolean","validationState","setValidationState","validationMessage","onLocalChange","evt","newChecked","canShowError","undefined","isStateInvalid","errorMessageId","root","switchContainer","invalidSwitch","error","propTypes","string","shape","isRequired","any","node","instanceOf","Object","bool","oneOf","func"],"sources":["../../../src/Switch/Switch.js"],"sourcesContent":["import React, { useCallback } from \"react\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@mui/styles\";\n\nimport { HvFormElement, HvLabel, HvWarningText, useUniqueId } from \"..\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\n\nimport { setId, useControlled } from \"../utils\";\n\nimport HvBaseSwitch from \"../BaseSwitch\";\n\nimport styles from \"./styles\";\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nconst HvSwitch = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    labelProps,\n\n    checked,\n    defaultChecked = false,\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    inputProps,\n\n    ...others\n  } = props;\n\n  const elementId = useUniqueId(id, \"hvswitch\");\n\n  const [isChecked, setIsChecked] = useControlled(checked, Boolean(defaultChecked));\n\n  const [validationState, setValidationState] = useControlled(status, \"standBy\");\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const onLocalChange = useCallback(\n    (evt, newChecked) => {\n      setIsChecked(() => {\n        // this will only run if uncontrolled\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(evt, newChecked, value);\n    },\n    [onChange, required, setIsChecked, setValidationState, value]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) || (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError ? setId(elementId, \"error\") : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes.root)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          htmlFor={setId(elementId, \"input\")}\n          label={label}\n          className={clsx(classes.label)}\n          {...labelProps}\n        />\n      )}\n      <div className={clsx(classes.switchContainer, { [classes.invalidSwitch]: isStateInvalid })}>\n        <HvBaseSwitch\n          id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n          name={name}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          onChange={onLocalChange}\n          value={value}\n          checked={isChecked}\n          inputProps={{\n            \"aria-invalid\": isStateInvalid ? true : undefined,\n            \"aria-errormessage\": errorMessageId,\n            \"aria-label\": ariaLabel,\n            \"aria-labelledby\": ariaLabelledBy,\n            \"aria-describedby\": ariaDescribedBy,\n            ...inputProps,\n          }}\n          {...others}\n        />\n      </div>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={clsx(classes.error)}\n          disableBorder\n          disableAdornment\n          hideText\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n\nHvSwitch.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the label.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the error area.\n     */\n    error: PropTypes.string,\n    /**\n     * Styles applied to the switch container.\n     */\n    switchContainer: PropTypes.string,\n    /**\n     * Styles applied to the switch container when the validations status is invalid.\n     */\n    invalidSwitch: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n  /**\n   * The value of the form element.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  // eslint-disable-next-line react/forbid-prop-types\n  value: PropTypes.any,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps: PropTypes.instanceOf(Object),\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status: PropTypes.oneOf([\"standBy\", \"valid\", \"invalid\"]),\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage: PropTypes.string,\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\": PropTypes.string,\n\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvSwitch\" })(HvSwitch);\n"],"mappings":"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"}

package/dist/modern/Tab/Tab.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps, TabProps } from "@material-ui/core";
+import { StandardProps, TabProps } from "@mui/material";
 
 export type HvTabClassKey = "root" | "labelContainer" | "selected" | "disabled";
 

package/dist/modern/Tab/Tab.js

@@ -1,11 +1,18 @@
-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"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { Tab, withStyles } from "@material-ui/core";
+import { Tab } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const HvTab = props => {
   const {
@@ -13,7 +20,7 @@ const HvTab = props => {
   } = props,
         others = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(Tab, _extends({
+  return /*#__PURE__*/_jsx(Tab, _objectSpread({
     classes: {
       root: classes.root,
       selected: classes.selected,

package/dist/modern/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","names":["React","PropTypes","clsx","Tab","withStyles","styles","HvTab","props","classes","others","root","selected","disabled","focusVisible","propTypes","id","string","className","shape","labelContainer","isRequired","bool","icon","node","label","defaultProps","name"],"sources":["../../../src/Tab/Tab.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { Tab, withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\nconst HvTab = (props) => {\n  const { classes, ...others } = props;\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      disableRipple\n      disableTouchRipple\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={clsx(\"HvIsFocusVisible\", classes.focusVisible)}\n      {...others}\n    />\n  );\n};\n\nHvTab.propTypes = {\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the label container element if `label` is provided.\n     */\n    labelContainer: PropTypes.string,\n    /**\n     * Styles applied to the root element if `selected={true}` (controlled by the Tabs component).\n     */\n    selected: PropTypes.string,\n    /**\n     * Styles applied to the root element if `disabled={true}` (controlled by the Tabs component).\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the root element if keyboard focused.\n     */\n    focusVisible: PropTypes.string,\n  }).isRequired,\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * The icon element.\n   */\n  icon: PropTypes.node,\n  /**\n   * The label element.\n   */\n  label: PropTypes.node,\n};\n\nHvTab.defaultProps = {\n  disabled: false,\n  icon: null,\n  label: null,\n};\n\nexport default withStyles(styles, { name: \"HvTab\" })(HvTab);\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,mBAAhC;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AAEA,MAAMC,KAAK,GAAIC,KAAD,IAAW;EACvB,MAAM;IAAEC;EAAF,IAAyBD,KAA/B;EAAA,MAAoBE,MAApB,4BAA+BF,KAA/B;;EAEA,oBACE,oBAAC,GAAD;IACE,OAAO,EAAE;MACPG,IAAI,EAAEF,OAAO,CAACE,IADP;MAEPC,QAAQ,EAAEH,OAAO,CAACG,QAFX;MAGPC,QAAQ,EAAEJ,OAAO,CAACI;IAHX,CADX;IAME,aAAa,MANf;IAOE,kBAAkB,MAPpB,CAQE;IACA;IATF;IAUE,qBAAqB,EAAEV,IAAI,CAAC,kBAAD,EAAqBM,OAAO,CAACK,YAA7B;EAV7B,GAWMJ,MAXN,EADF;AAeD,CAlBD;;AAoBA,wCAAAH,KAAK,CAACQ,SAAN,GAAkB;EAChB;AACF;AACA;EACEC,EAAE,EAAEd,SAAS,CAACe,MAJE;;EAKhB;AACF;AACA;EACEC,SAAS,EAAEhB,SAAS,CAACe,MARL;;EAShB;AACF;AACA;EACER,OAAO,EAAEP,SAAS,CAACiB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIR,IAAI,EAAET,SAAS,CAACe,MAJO;;IAKvB;AACJ;AACA;IACIG,cAAc,EAAElB,SAAS,CAACe,MARH;;IASvB;AACJ;AACA;IACIL,QAAQ,EAAEV,SAAS,CAACe,MAZG;;IAavB;AACJ;AACA;IACIJ,QAAQ,EAAEX,SAAS,CAACe,MAhBG;;IAiBvB;AACJ;AACA;IACIH,YAAY,EAAEZ,SAAS,CAACe;EApBD,CAAhB,EAqBNI,UAjCa;;EAkChB;AACF;AACA;EACER,QAAQ,EAAEX,SAAS,CAACoB,IArCJ;;EAsChB;AACF;AACA;EACEC,IAAI,EAAErB,SAAS,CAACsB,IAzCA;;EA0ChB;AACF;AACA;EACEC,KAAK,EAAEvB,SAAS,CAACsB;AA7CD,CAAlB;AAgDAjB,KAAK,CAACmB,YAAN,GAAqB;EACnBb,QAAQ,EAAE,KADS;EAEnBU,IAAI,EAAE,IAFa;EAGnBE,KAAK,EAAE;AAHY,CAArB;AAMA,eAAepB,UAAU,CAACC,MAAD,EAAS;EAAEqB,IAAI,EAAE;AAAR,CAAT,CAAV,CAAsCpB,KAAtC,CAAf"}
+{"version":3,"file":"Tab.js","names":["React","PropTypes","clsx","Tab","withStyles","styles","HvTab","props","classes","others","root","selected","disabled","focusVisible","propTypes","id","string","className","shape","labelContainer","isRequired","bool","icon","node","label","defaultProps","name"],"sources":["../../../src/Tab/Tab.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { Tab } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\nconst HvTab = (props) => {\n  const { classes, ...others } = props;\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      disableRipple\n      disableTouchRipple\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={clsx(\"HvIsFocusVisible\", classes.focusVisible)}\n      {...others}\n    />\n  );\n};\n\nHvTab.propTypes = {\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the label container element if `label` is provided.\n     */\n    labelContainer: PropTypes.string,\n    /**\n     * Styles applied to the root element if `selected={true}` (controlled by the Tabs component).\n     */\n    selected: PropTypes.string,\n    /**\n     * Styles applied to the root element if `disabled={true}` (controlled by the Tabs component).\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the root element if keyboard focused.\n     */\n    focusVisible: PropTypes.string,\n  }).isRequired,\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * The icon element.\n   */\n  icon: PropTypes.node,\n  /**\n   * The label element.\n   */\n  label: PropTypes.node,\n};\n\nHvTab.defaultProps = {\n  disabled: false,\n  icon: null,\n  label: null,\n};\n\nexport default withStyles(styles, { name: \"HvTab\" })(HvTab);\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,GAAT,QAAoB,eAApB;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;;AAEA,MAAMC,KAAK,GAAIC,KAAD,IAAW;EACvB,MAAM;IAAEC;EAAF,IAAyBD,KAA/B;EAAA,MAAoBE,MAApB,4BAA+BF,KAA/B;;EAEA,oBACE,KAAC,GAAD;IACE,OAAO,EAAE;MACPG,IAAI,EAAEF,OAAO,CAACE,IADP;MAEPC,QAAQ,EAAEH,OAAO,CAACG,QAFX;MAGPC,QAAQ,EAAEJ,OAAO,CAACI;IAHX,CADX;IAME,aAAa,MANf;IAOE,kBAAkB,MAPpB,CAQE;IACA;IATF;IAUE,qBAAqB,EAAEV,IAAI,CAAC,kBAAD,EAAqBM,OAAO,CAACK,YAA7B;EAV7B,GAWMJ,MAXN,EADF;AAeD,CAlBD;;AAoBA,wCAAAH,KAAK,CAACQ,SAAN,GAAkB;EAChB;AACF;AACA;EACEC,EAAE,EAAEd,SAAS,CAACe,MAJE;;EAKhB;AACF;AACA;EACEC,SAAS,EAAEhB,SAAS,CAACe,MARL;;EAShB;AACF;AACA;EACER,OAAO,EAAEP,SAAS,CAACiB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIR,IAAI,EAAET,SAAS,CAACe,MAJO;;IAKvB;AACJ;AACA;IACIG,cAAc,EAAElB,SAAS,CAACe,MARH;;IASvB;AACJ;AACA;IACIL,QAAQ,EAAEV,SAAS,CAACe,MAZG;;IAavB;AACJ;AACA;IACIJ,QAAQ,EAAEX,SAAS,CAACe,MAhBG;;IAiBvB;AACJ;AACA;IACIH,YAAY,EAAEZ,SAAS,CAACe;EApBD,CAAhB,EAqBNI,UAjCa;;EAkChB;AACF;AACA;EACER,QAAQ,EAAEX,SAAS,CAACoB,IArCJ;;EAsChB;AACF;AACA;EACEC,IAAI,EAAErB,SAAS,CAACsB,IAzCA;;EA0ChB;AACF;AACA;EACEC,KAAK,EAAEvB,SAAS,CAACsB;AA7CD,CAAlB;AAgDAjB,KAAK,CAACmB,YAAN,GAAqB;EACnBb,QAAQ,EAAE,KADS;EAEnBU,IAAI,EAAE,IAFa;EAGnBE,KAAK,EAAE;AAHY,CAArB;AAMA,eAAepB,UAAU,CAACC,MAAD,EAAS;EAAEqB,IAAI,EAAE;AAAR,CAAT,CAAV,CAAsCpB,KAAtC,CAAf"}

package/dist/modern/Table/Table.d.ts

@@ -1,291 +1,29 @@
-import { StandardProps } from "@material-ui/core";
-import * as React from "react";
-import { HvActionsGenericCommonProps } from "../ActionsGeneric";
-import { ListValueProp } from "../List";
-import { PaginationLabelsProp, HvPaginationProps } from "../Pagination";
+import { StandardProps } from "@mui/material";
 
-export interface TableColumn {
-  /**
-   * The id of the column.
-   */
-  id?: string;
-  /**
-   * The title of the column.
-   */
-  headerText?: string;
-  /**
-   * Accessors are functions that return the value to populate the row's value for the column.
-   */
-  accessor?: string | Function;
-  /**
-   * Receives each cell value and it should return with any desired modification.
-   * @param value - the cell value.
-   */
-  format?: (value: any) => any;
-  /**
-   * Sets the column type
-   */
-  cellType?: "numeric" | "alpha-numeric";
-  /**
-   * Styles to apply to the column.
-   */
-  style?: any;
-  /**
-   * Specifies if the column should always be visible and where it should be rendered.
-   */
-  fixed?: "left" | "right";
-  /**
-   *  Used to render a standard cell, defaults to the accessed value.
-   */
-  Cell?: React.ReactNode | string | Function;
-  /**
-   * If `true` the column may be sorted.
-   */
-  sortable?: boolean;
-  /**
-   * The width of the column
-   */
-  width?: string | number;
-  /**
-   * The max-width of the column
-   */
-  maxWidth?: string | number;
-  /**
-   * The min-width of the column
-   */
-  minWidth?: string | number;
-  /**
-   * Custom sort method
-   * @param a - the first value to compare.
-   * @param b - the second value to compare.
-   */
-  sortMethod?: (a: any, b: any) => number;
-}
-
-export interface SecondaryAction extends ListValueProp {
-  /**
-   * Value when the action is clicked, it receives the row representation.
-   */
-  action?: (event: React.FormEvent<HTMLDivElement>, row: object) => void;
-}
-
-export type HvTableClassKey =
-  | "root"
-  | "table"
-  | "theadGroup"
-  | "theadGroupTr"
-  | "theadGroupTh"
-  | "thead"
-  | "theadTh"
-  | "theadFilter"
-  | "theadFilterTr"
-  | "theadFilterTh"
-  | "tbody"
-  | "tBodyEmpty"
-  | "trGroups"
-  | "tr"
-  | "textContainer"
-  | "td"
-  | "tfoot"
-  | "tfootTr"
-  | "tfootTh"
-  | "pagination"
-  | "loading"
-  | "noDate"
-  | "resizer"
-  | "rtSortIcon"
-  | "sortedIconShown"
-  | "sortedIconHidden"
-  | "pointer"
-  | "tableContainer"
-  | "subtitle"
-  | "title"
-  | "checkBoxBorder"
-  | "checkBoxRow"
-  | "centered"
-  | "alphaNumeric"
-  | "numeric"
-  | "link"
-  | "subComponentContainer"
-  | "iconContainer"
-  | "firstWithNumeric"
-  | "lockIcon"
-  | "lockIconSelected"
-  | "trashIcon"
-  | "trashIconSelected"
-  | "checkBoxText"
-  | "menuItem"
-  | "expand"
-  | "separatorContainer"
-  | "bulkActions";
+export type HvTableClassKey = "root" | "stickyHeader" | "stickyColumns" | "listRow";
 
 export interface HvTableProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvTableClassKey>,
-    HvActionsGenericCommonProps {
-  /**
-   * Unique class name used to identify the fixed table
-   */
-  uniqClassName?: string;
-
-  /**
-   * The column definition to apply to the table. Please check https://react-table.js.org/#/story/readme for more info
-   * Use the property "cellType" to define the different types of cell. Available values: "number" , "alpha-numeric" and "link.
-   * If the type is "link", in data use the structure {displayText: {text to display} ,url: {url} }.
-   */
-  columns: TableColumn[];
-  /**
-   * Array with the data elements to show.
-   * It can also define the checkBoxProps property to pass extra props to the row checkbox selector.
-   */
-  data: object[];
-
-  /**
-   * Boolean to show or hide the pagination controls
-   */
-  showPagination?: boolean;
-
-  /**
-   * Callback to notify when the page changes
-   */
-  onPageChange?: (...args: any[]) => any;
-
-  /**
-   * Boolean to show or hide the page size control
-   */
-  showPageSize?: boolean;
-
-  /**
-   * Number of data entries for server side pagination
-   */
-  dataSize?: number;
-
-  /**
-   * Numeric value to control the page size selected
-   */
-  pageSize?: number;
-
-  /**
-   * Callback to notify when the page size changes
-   */
-  onPageSizeChange?: (pageSize: number, currentPage: number) => void;
-
-  /**
-   * Boolean to enable or disable the server side pagination mechanism
-   */
-  paginationServerSide?: boolean;
-
-  /**
-   * Labels for the pagination.
-   */
-  paginationLabels?: PaginationLabelsProp;
-
-  /**
-   * Attributes applied to the pagination component
-   */
-  paginationProps?: HvPaginationProps;
-
-  /**
-   * Numeric value to control the number of pages. Useful when Server side pagination data is enabled
-   */
-  pages?: number;
-
-  /**
-   * Specify the current page number when using a server side pagination
-   */
-  page?: number;
-
-  /**
-   * Callback with receives the page info and should fetch the data to show on the table
-   */
-  onFetchData?: (...args: any[]) => any;
-
-  /**
-   * Boolean to enable or disable the sort mechanism
-   */
-  sortable?: boolean;
-
-  /**
-   * An object describing what column is sorted by default on the table
-   */
-  defaultSorted?: any[];
-
+  extends StandardProps<React.TableHTMLAttributes<HTMLTableElement>, HvTableClassKey> {
   /**
-   * Element to be shown in the expander.
-   */
-  subElementTemplate?: (row: object) => React.ReactNode;
-
-  /**
-   * Property to be uses as unique row identifier. One of the fields of the data.
-   */
-  idForCheckbox?: string;
-
-  /**
-   * Function to overwrite the existed getTrProps. Returns props to be applied to the tr.
-   */
-  getTrProps?: (state: object, rowInfo: object, column: object, instance: object) => any;
-
-  /**
-   * Number of rows available in table to display in aria-rowcount
-   */
-  rowCount?: number;
-
-  /**
-   * Callback which receives the checked state of all items in the list
-   */
-  onSelection?: (event: React.FormEvent<HTMLDivElement>, selection: any[]) => void;
-
-  /**
-   * Ids of preselected items in the list
-   */
-  selections?: any[];
-
-  /**
-   *  Secondary actions listed in menu dropdown. Label is displayed and action is executed on click.
-   */
-  secondaryActions?: SecondaryAction[];
-
-  /**
-   *  Extra properties passed to the select all checkbox props.
-   */
-  allCheckBoxProps?: Record<string, any>;
-
-  /**
-   *  Extra properties passed to the dropdown menu.
-   */
-  dropdownMenuProps?: Record<string, any>;
-
-  tableProps?: Record<string, any>;
-
-  /**
-   * Boolean describing if the table columns are rezisable or not
-   */
-  resizable?: boolean;
-
-  /**
-   * The default page size in the page size selector
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `table`.
+   *
+   * When using non-table elements, layout is up to the developer using the component.
    */
-  defaultPageSize?: number;
+  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
 
   /**
-   * Component to be shown when no data is displayed.
+   * Whether the `HvTable` has a sticky header row.
    */
-  noDataComponent?: React.ReactNode;
+  stickyHeader?: boolean;
   /**
-   * Defines if the expanded row is collapsed when data changes.
+   * Whether the `HvTable` has sticky columns.
    */
-  collapseOnDataChange?: boolean;
+  stickyColumns?: boolean;
   /**
-   * Defines if the selection checkbox column should be always visible/fixed to the left.
-   *
-   * Defaults to true when there are any other columns fixed to the left, false otherwise.
-   */
-  fixedCheckbox?: boolean;
-  /**
-   * Defines if the secondary actions column should be always visible/fixed to the right.
-   *
-   * Defaults to true when there are any other columns fixed to the right, false otherwise.
+   * Variant of table.
    */
-  fixedSecondaryActions?: boolean;
+  variant?: "listrow" | "default";
 }
 
 export default function HvTable(props: HvTableProps): JSX.Element | null;