@hitachivantara/uikit-react-lab 4.0.1-next.3 → 4.0.2

package/dist/Wizard/Wizard.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { StandardProps, ModalProps } from "@mui/material";
+import { HvWizardActionsProps } from "./WizardActions";
+import { HvWizardTitleProps } from "./WizardTitle";
+import { HvStepNavigationProps } from "../StepNavigation";
+
+export type HvWizardClassKey = "root";
+
+export type HvWizardProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvWizardClassKey
+> & {
+  /**
+   * Class names to be applied.
+   */
+  className: string;
+  /**
+   * Current state of the Wizard.
+   */
+  open: boolean;
+  /**
+   * Function executed on close.
+   */
+  onClose: ModalProps["onClose"];
+  /**
+   * Function executed on submit.
+   */
+  onSubmit: any;
+  /**
+   * Title for the wizard.
+   */
+  title: string;
+  /**
+   * The content of the component.
+   */
+  children: React.ReactNode;
+  /**
+   * An object containing all the labels for the wizard.
+   */
+  labels: HvWizardActionsProps["labels"] & HvWizardTitleProps["labels"];
+  /**
+   * Shows the summary button.
+   */
+  hasSummary?: boolean;
+  /**
+   * Enables the skip button.
+   */
+  skippable?: boolean;
+  /**
+   * Forces minimum height to the component.
+   */
+  fixedHeight?: boolean;
+  /**
+   * Whether the loading animation is shown.
+   */
+  loading?: boolean;
+  /**
+   * Custom object to define type, size and width of the StepNavigation component
+   */
+  customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
+};
+
+export default function HvWizard(props: HvWizardProps): JSX.Element | null;

package/dist/Wizard/Wizard.js

@@ -0,0 +1,262 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@mui/styles");
+
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+
+var _WizardContainer = _interopRequireDefault(require("./WizardContainer"));
+
+var _WizardTitle = _interopRequireDefault(require("./WizardTitle"));
+
+var _WizardContent = _interopRequireDefault(require("./WizardContent"));
+
+var _WizardActions = _interopRequireDefault(require("./WizardActions"));
+
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["className", "children", "onClose", "onSubmit", "title", "open", "skippable", "loading", "hasSummary", "labels", "fixedHeight", "customStep"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var HvWizard = function HvWizard(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      onClose = _ref.onClose,
+      onSubmit = _ref.onSubmit,
+      title = _ref.title,
+      open = _ref.open,
+      _ref$skippable = _ref.skippable,
+      skippable = _ref$skippable === void 0 ? true : _ref$skippable,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _ref$hasSummary = _ref.hasSummary,
+      hasSummary = _ref$hasSummary === void 0 ? false : _ref$hasSummary,
+      _ref$labels = _ref.labels,
+      labels = _ref$labels === void 0 ? {
+    cancel: "Cancel",
+    next: "Next",
+    previous: "Previous",
+    skip: "Skip",
+    submit: "Submit",
+    summary: "Summary"
+  } : _ref$labels,
+      _ref$fixedHeight = _ref.fixedHeight,
+      fixedHeight = _ref$fixedHeight === void 0 ? false : _ref$fixedHeight,
+      customStep = _ref.customStep,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _React$useState = _react.default.useState({}),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      context = _React$useState2[0],
+      setContext = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(0),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      tab = _React$useState4[0],
+      setTab = _React$useState4[1];
+
+  var contextValue = _react.default.useMemo(function () {
+    return {
+      context: context,
+      setContext: setContext
+    };
+  }, [context, setContext]);
+
+  _react.default.useEffect(function () {
+    if (!open) {
+      setTab(0);
+    }
+  }, [open]);
+
+  var handleClose = _react.default.useCallback(function (evt, reason) {
+    if (reason !== "backdropClick") {
+      onClose(evt, reason);
+    }
+  }, [onClose]);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardContext.default.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WizardContainer.default, _objectSpread(_objectSpread({
+      className: className,
+      handleClose: handleClose,
+      open: open
+    }, others), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardTitle.default, {
+        title: title,
+        hasSummary: hasSummary,
+        labels: labels,
+        tab: tab,
+        changeTab: setTab,
+        customStep: customStep
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardContent.default, {
+        loading: loading,
+        fixedHeight: fixedHeight,
+        tab: tab,
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardActions.default, {
+        loading: loading,
+        skippable: skippable,
+        labels: labels,
+        tab: tab,
+        changeTab: setTab,
+        handleClose: handleClose,
+        onSubmit: onSubmit
+      })]
+    }))
+  });
+};
+
+process.env.NODE_ENV !== "production" ? HvWizard.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Current state of the Wizard.
+   */
+  open: _propTypes.default.bool.isRequired,
+
+  /**
+   * Function executed on close.
+   */
+  onClose: _propTypes.default.func.isRequired,
+
+  /**
+   * Function executed on submit.
+   */
+  onSubmit: _propTypes.default.func.isRequired,
+
+  /**
+   * Enables the skip button.
+   */
+  skippable: _propTypes.default.bool,
+
+  /**
+   * Title for the wizard.
+   */
+  title: _propTypes.default.string,
+
+  /**
+   * Shows the summary button.
+   */
+  hasSummary: _propTypes.default.bool,
+
+  /**
+   * The content of the component.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * An object containing all the labels for the wizard.
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * Cancel button label.
+     */
+    cancel: _propTypes.default.string,
+
+    /**
+     * Skip button label.
+     */
+    skip: _propTypes.default.string,
+
+    /**
+     * Previous button label.
+     */
+    previous: _propTypes.default.string,
+
+    /**
+     * Next button label.
+     */
+    next: _propTypes.default.string,
+
+    /**
+     * Submit button label.
+     */
+    submit: _propTypes.default.string,
+
+    /**
+     * Summary button label.
+     */
+    summary: _propTypes.default.string
+  }),
+
+  /**
+   * Forces minimum height to the component.
+   */
+  fixedHeight: _propTypes.default.bool,
+
+  /**
+   * Whether the loading animation is shown.
+   */
+  loading: _propTypes.default.bool,
+
+  /**
+   * Custom object to define type, size and width of the StepNavigation component
+   */
+  customStep: _propTypes.default.shape({
+    /**
+     * Type of step navigation. Values = {"Simple", "Default"}.
+     */
+    type: _propTypes.default.oneOf(["Simple", "Default"]),
+
+    /**
+     * Sets one of the standard sizes of the steps. Values = {"XS", "SM", "MD", "LG", "XL"}
+     */
+    stepSize: _propTypes.default.oneOf(["XS", "SM", "MD", "LG", "XL"]),
+
+    /**
+     * Width of the component element on each breakpoint screen resolution.
+     */
+    width: _propTypes.default.shape({
+      xs: _propTypes.default.number,
+      sm: _propTypes.default.number,
+      md: _propTypes.default.number,
+      lg: _propTypes.default.number,
+      xl: _propTypes.default.number
+    })
+  })
+} : void 0;
+
+var _default = (0, _styles.withStyles)(_styles2.default, {
+  name: "HvWizard"
+})(HvWizard);
+
+exports.default = _default;
+//# sourceMappingURL=Wizard.js.map

package/dist/Wizard/Wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wizard.js","names":["HvWizard","className","children","onClose","onSubmit","title","open","skippable","loading","hasSummary","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","React","useState","context","setContext","tab","setTab","contextValue","useMemo","useEffect","handleClose","useCallback","evt","reason","propTypes","PropTypes","string","bool","isRequired","func","node","shape","type","oneOf","stepSize","width","xs","number","sm","md","lg","xl","withStyles","styles","name"],"sources":["../../src/Wizard/Wizard.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport WizardContext from \"./WizardContext\";\nimport WizardContainer from \"./WizardContainer\";\nimport WizardTitle from \"./WizardTitle\";\nimport WizardContent from \"./WizardContent\";\nimport WizardActions from \"./WizardActions\";\n\nimport styles from \"./styles\";\n\nconst HvWizard = ({\n  className,\n  children,\n  onClose,\n  onSubmit,\n  title,\n  open,\n  skippable = true,\n  loading = false,\n  hasSummary = false,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n    summary: \"Summary\",\n  },\n  fixedHeight = false,\n  customStep,\n  ...others\n}) => {\n  const [context, setContext] = React.useState({});\n  const [tab, setTab] = React.useState(0);\n\n  const contextValue = React.useMemo(\n    () => ({\n      context,\n      setContext,\n    }),\n    [context, setContext]\n  );\n\n  React.useEffect(() => {\n    if (!open) {\n      setTab(0);\n    }\n  }, [open]);\n\n  const handleClose = React.useCallback(\n    (evt, reason) => {\n      if (reason !== \"backdropClick\") {\n        onClose(evt, reason);\n      }\n    },\n    [onClose]\n  );\n\n  return (\n    <WizardContext.Provider value={contextValue}>\n      <WizardContainer className={className} handleClose={handleClose} open={open} {...others}>\n        <WizardTitle\n          title={title}\n          hasSummary={hasSummary}\n          labels={labels}\n          tab={tab}\n          changeTab={setTab}\n          customStep={customStep}\n        />\n        <WizardContent loading={loading} fixedHeight={fixedHeight} tab={tab}>\n          {children}\n        </WizardContent>\n        <WizardActions\n          loading={loading}\n          skippable={skippable}\n          labels={labels}\n          tab={tab}\n          changeTab={setTab}\n          handleClose={handleClose}\n          onSubmit={onSubmit}\n        />\n      </WizardContainer>\n    </WizardContext.Provider>\n  );\n};\n\nHvWizard.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Current state of the Wizard.\n   */\n  open: PropTypes.bool.isRequired,\n  /**\n   * Function executed on close.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Function executed on submit.\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /**\n   * Enables the skip button.\n   */\n  skippable: PropTypes.bool,\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * The content of the component.\n   */\n  children: PropTypes.node,\n  /**\n   * An object containing all the labels for the wizard.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Cancel button label.\n     */\n    cancel: PropTypes.string,\n    /**\n     * Skip button label.\n     */\n    skip: PropTypes.string,\n    /**\n     * Previous button label.\n     */\n    previous: PropTypes.string,\n    /**\n     * Next button label.\n     */\n    next: PropTypes.string,\n    /**\n     * Submit button label.\n     */\n    submit: PropTypes.string,\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizard\" })(HvWizard);\n"],"mappings":"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"}

package/dist/Wizard/WizardActions/WizardActions.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { ModalProps, StandardProps } from "@mui/material";
+
+export type HvWizardActionsClassKey = "root";
+
+export type HvWizardActionsProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvWizardActionsClassKey
+> & {
+  /**
+   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.
+   */
+  tab: number;
+  /**
+   * Function to change the tab when pressing previous and next buttons.
+   */
+  changeTab: any;
+  /**
+   * Function to handle the cancel button.
+   */
+  handleClose: ModalProps["onClose"];
+  /**
+   * Function to handle the submit button. Also sends the current context state.
+   */
+  onSubmit: any;
+  /**
+   * An object containing all the labels for the wizard actions component.
+   */
+  labels: {
+    /**
+     * Cancel button label.
+     */
+    cancel: string;
+    /**
+     * Skip button label.
+     */
+    skip: string;
+    /**
+     * Previous button label.
+     */
+    previous: string;
+    /**
+     * Next button label.
+     */
+    next: string;
+    /**
+     * Submit button label.
+     */
+    submit: string;
+  };
+  /**
+   * Whether the submit button is disabled.
+   */
+  loading?: boolean;
+  /**
+   * Enables the skip button.
+   */
+  skippable?: boolean;
+};
+
+export default function HvWizardActions(props: HvWizardActionsProps): JSX.Element | null;

package/dist/Wizard/WizardActions/WizardActions.js

@@ -0,0 +1,270 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.entries.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@mui/styles");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _WizardContext = _interopRequireDefault(require("../WizardContext"));
+
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _Backwards, _Forwards;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var HvWizardActions = function HvWizardActions(_ref) {
+  var _labels$cancel, _labels$skip, _labels$previous, _labels$submit, _context$tab, _labels$next;
+
+  var classes = _ref.classes,
+      handleClose = _ref.handleClose,
+      onSubmit = _ref.onSubmit,
+      changeTab = _ref.changeTab,
+      tab = _ref.tab,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _ref$skippable = _ref.skippable,
+      skippable = _ref$skippable === void 0 ? false : _ref$skippable,
+      _ref$labels = _ref.labels,
+      labels = _ref$labels === void 0 ? {
+    cancel: "Cancel",
+    next: "Next",
+    previous: "Previous",
+    skip: "Skip",
+    submit: "Submit"
+  } : _ref$labels;
+
+  var _React$useContext = _react.default.useContext(_WizardContext.default),
+      context = _React$useContext.context,
+      setContext = _React$useContext.setContext;
+
+  var _React$useState = _react.default.useState(0),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      pages = _React$useState2[0],
+      setPages = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      canSubmit = _React$useState4[0],
+      setCanSubmit = _React$useState4[1];
+
+  _react.default.useEffect(function () {
+    var contextEntries = Object.entries(context);
+
+    if (contextEntries.length) {
+      setPages(contextEntries.length);
+      var validWizard = Object.entries(context).every(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+            value = _ref3[1];
+
+        return value.valid;
+      });
+
+      if (validWizard !== canSubmit) {
+        setCanSubmit(validWizard);
+      }
+    }
+  }, [context]); // eslint-disable-line react-hooks/exhaustive-deps
+
+
+  var lastPage = pages - 1;
+  var isLastPage = tab >= lastPage;
+
+  var handleSkip = _react.default.useCallback(function () {
+    var skippedContext = Object.entries(context).map(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+          child = _ref5[1];
+
+      return _objectSpread(_objectSpread({}, child), {}, {
+        valid: child.valid !== false
+      });
+    });
+    setContext(skippedContext);
+    changeTab(lastPage);
+  }, [changeTab, context, lastPage, setContext]);
+
+  var handleSubmit = _react.default.useCallback(function () {
+    return onSubmit(context);
+  }, [onSubmit, context]);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvDialogActions, {
+    className: classes.actionsContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvGrid, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+        category: "ghost",
+        onClick: handleClose,
+        className: classes.buttonWidth,
+        children: "".concat((_labels$cancel = labels.cancel) !== null && _labels$cancel !== void 0 ? _labels$cancel : "Cancel")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+        category: "ghost",
+        disabled: isLastPage || !skippable,
+        className: classes.buttonWidth,
+        onClick: handleSkip,
+        children: "".concat((_labels$skip = labels.skip) !== null && _labels$skip !== void 0 ? _labels$skip : "Skip")
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvGrid, {
+      className: classes.buttonsContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvButton, {
+        category: "ghost",
+        className: classes.buttonWidth,
+        disabled: tab <= 0,
+        onClick: function onClick() {
+          return changeTab(function (t) {
+            return t - 1;
+          });
+        },
+        children: [_Backwards || (_Backwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Backwards, {})), "".concat((_labels$previous = labels.previous) !== null && _labels$previous !== void 0 ? _labels$previous : "Previous")]
+      }), isLastPage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+        category: "primary",
+        className: classes.buttonWidth,
+        disabled: loading || !canSubmit,
+        onClick: handleSubmit,
+        children: "".concat((_labels$submit = labels.submit) !== null && _labels$submit !== void 0 ? _labels$submit : "Submit")
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvButton, {
+        category: "ghost",
+        className: (0, _clsx.default)(classes.buttonWidth, classes.buttonSpacing),
+        onClick: function onClick() {
+          return changeTab(function (t) {
+            return t + 1;
+          });
+        },
+        disabled: !skippable && !(context !== null && context !== void 0 && (_context$tab = context[tab]) !== null && _context$tab !== void 0 && _context$tab.valid),
+        children: ["".concat((_labels$next = labels.next) !== null && _labels$next !== void 0 ? _labels$next : "Next"), _Forwards || (_Forwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Forwards, {}))]
+      })]
+    })]
+  });
+};
+
+process.env.NODE_ENV !== "production" ? HvWizardActions.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component which contains the groups of buttons.
+     */
+    actionsContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component which contains the buttons.
+     */
+    buttonsContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the Button component to override its width.
+     */
+    buttonWidth: _propTypes.default.string,
+
+    /**
+     * Styles applied to some Button components to override its left padding.
+     */
+    buttonSpacing: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.
+   */
+  tab: _propTypes.default.number.isRequired,
+
+  /**
+   * Function to change the tab when pressing previous and next buttons.
+   */
+  changeTab: _propTypes.default.func.isRequired,
+
+  /**
+   * Function to handle the cancel button.
+   */
+  handleClose: _propTypes.default.func.isRequired,
+
+  /**
+   * Function to handle the submit button. Also sends the current context state.
+   */
+  onSubmit: _propTypes.default.func.isRequired,
+
+  /**
+   * An object containing all the labels for the wizard actions component.
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * Cancel button label.
+     */
+    cancel: _propTypes.default.string,
+
+    /**
+     * Skip button label.
+     */
+    skip: _propTypes.default.string,
+
+    /**
+     * Previous button label.
+     */
+    previous: _propTypes.default.string,
+
+    /**
+     * Next button label.
+     */
+    next: _propTypes.default.string,
+
+    /**
+     * Submit button label.
+     */
+    submit: _propTypes.default.string
+  }),
+
+  /**
+   * Whether the submit button is disabled.
+   */
+  loading: _propTypes.default.bool,
+
+  /**
+   * Enables the skip button.
+   */
+  skippable: _propTypes.default.bool
+} : void 0;
+
+var _default = (0, _styles.withStyles)(_styles2.default, {
+  name: "HvWizardActions"
+})(HvWizardActions);
+
+exports.default = _default;
+//# sourceMappingURL=WizardActions.js.map